:root {
  color-scheme: dark;
  --bg: #02050a;
  --panel: rgba(var(--surface-panel-rgb), 0.86);
  --panel-strong: rgba(var(--surface-mid-rgb), 0.96);
  --text: #f8fbff;
  --muted: #8fa0b2;
  --line: rgba(154, 204, 255, 0.22);
  --blue: #096dff;
  --blue-soft: #17a5ff;
  /* RGB triplets of the two accents, for rgba(var(--blue-rgb), <alpha>) glows/
     borders — lets the donor accent themes retint them without losing alpha. */
  --blue-rgb: 9, 109, 255;
  --blue-soft-rgb: 23, 165, 255;
  /* Surface families: the recurring near-black navies used across panels,
     tables, tiles, and cards, consolidated so full themes (e.g. Blackout) can
     restyle every surface by overriding four triplets. deep = page-level
     backdrops; panel = standard panel fill; mid = raised tiles/cards;
     table-head = slate table headers. */
  --surface-deep-rgb: 2, 7, 14;
  --surface-panel-rgb: 7, 13, 20;
  --surface-mid-rgb: 10, 20, 32;
  --table-head-rgb: 64, 78, 96;
  --surface-2: #111827;
  /* Decorative accent families (borders, glows, links, glints) consolidated
     the same way — defaults match the literals they replaced, so the stock
     look is unchanged; full themes override them. */
  --accent-strong-rgb: 88, 166, 255;
  --accent-bright-rgb: 0, 217, 255;
  --accent-teal-rgb: 0, 188, 188;
  --link-blue: #58a6ff;
  --steel-blue: #63b3ed;
  --pale-blue: #a8d8ff;
  --line-rgb: 154, 204, 255;
  --sched-card-rgb: 54, 190, 255;
  /* Foreground wash: the rgba(255,255,255,α) hairlines/washes used across the
     dark UI. Light themes flip this to a dark navy so separators stay visible
     when surfaces go white. */
  --fg-rgb: 255, 255, 255;
  --pale-blue-rgb: 190, 226, 255;
  /* Soft/pale supporting text (subtitles, small labels) — near-white on the
     dark theme, deepened by light themes. */
  --text-soft: #dce9f7;
  --text-soft-rgb: 220, 233, 247;
  --purple: #8928ff;
  --red: #ff3048;
  --orange: #ff9800;
  --green: #26d67c;
  --gold: #efc84a;
  --cyan: #15d8ff;
  --shadow: 0 22px 60px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    linear-gradient(rgba(var(--surface-deep-rgb), 0.76), rgba(var(--surface-deep-rgb), 0.92)),
    radial-gradient(circle at 50% 12%, rgba(55, 108, 190, 0.42), transparent 24rem),
    radial-gradient(circle at 18% 34%, rgba(255, 48, 72, 0.2), transparent 23rem),
    linear-gradient(180deg, #06111d 0%, #02050a 44%, #05080d 100%);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
}

.player-card-body {
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(255, 48, 72, 0.24) 49.8% 50.2%, transparent 50.2%),
    repeating-linear-gradient(90deg, rgba(var(--fg-rgb), 0.04) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, transparent 0 42%, rgba(var(--fg-rgb), 0.09) 42.2%, transparent 42.7%);
  opacity: 0.34;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(rgba(var(--fg-rgb), 0.1) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.22;
  pointer-events: none;
}

.arena-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 8% 18%, rgba(255, 63, 91, 0.22), transparent 16rem),
    radial-gradient(ellipse at 86% 18%, rgba(18, 127, 255, 0.22), transparent 18rem),
    linear-gradient(180deg, rgba(5, 11, 21, 0.3), rgba(5, 8, 13, 0.96));
  pointer-events: none;
}

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

a {
  color: inherit;
}

.site-chrome {
  position: sticky;
  top: 0;
  z-index: 120;
  width: 100%;
}

.site-chrome .site-header {
  position: relative;
  top: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  width: min(1500px, calc(100% - 1rem));
  margin: 0 auto;
  min-height: 66px;
  padding: 0.65rem 4.25rem 0.65rem 1rem;
  border: 1px solid var(--line);
  border-top: 0;
  background: rgba(var(--surface-deep-rgb), 0.86);
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(18px);
}

.header-button-group {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-icon-button,
.signin-button {
  display: grid;
  min-width: 78px;
  min-height: 38px;
  place-items: center;
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.68);
  border-radius: 6px;
  background: rgba(var(--surface-mid-rgb), 0.86);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.admin-icon-button:hover,
.admin-icon-button:focus-visible,
.signin-button:hover,
.signin-button:focus-visible {
  border-color: var(--cyan);
  background: rgba(var(--blue-soft-rgb), 0.14);
  color: #ffffff;
  box-shadow: 0 0 22px rgba(var(--blue-soft-rgb), 0.28);
}

.admin-icon-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Sign In/Up header dropdown — same hover-reveal pattern as .nav-dropdown,
   just right-anchored instead of centered since this sits at the page edge. */
.signin-dropdown-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* display: flex above beats the browser's default [hidden]{display:none},
   so script.js setting dropdownWrap.hidden = true on member login had no
   visual effect — same fix pattern as .member-dashboard[hidden] below. */
.signin-dropdown-wrap[hidden] {
  display: none !important;
}

.signin-dropdown-menu {
  position: absolute;
  top: calc(100% - 0.2rem);
  right: 0;
  z-index: 20;
  min-width: 150px;
  padding: 0.45rem;
  border: 1px solid rgba(var(--accent-bright-rgb), 0.42);
  border-radius: 8px;
  background: rgba(3, 8, 16, 0.96);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35), 0 0 28px rgba(var(--accent-bright-rgb), 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, 0.4rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.signin-dropdown-wrap:hover .signin-dropdown-menu,
.signin-dropdown-wrap:focus-within .signin-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(0, 0);
}

.signin-dropdown-menu a {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  color: #d9e7f7;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.signin-dropdown-menu a:hover,
.signin-dropdown-menu a:focus-visible {
  background: rgba(var(--accent-bright-rgb), 0.12);
  color: #ffffff;
}

/* Logged-in member avatar — replaces the Sign In/Up control once authenticated */
.header-member-avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.68);
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.header-member-avatar:hover,
.header-member-avatar:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 22px rgba(var(--blue-soft-rgb), 0.28);
}

.header-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-member-avatar.role-glow-admin {
  border: 2px solid #ffe1b4;
  box-shadow: 0 0 10px rgba(255, 225, 180, 0.45), 0 0 22px rgba(255, 225, 180, 0.2);
}
.header-member-avatar.role-glow-admin:hover,
.header-member-avatar.role-glow-admin:focus-visible {
  border-color: #ffe1b4;
  box-shadow: 0 0 14px rgba(255, 225, 180, 0.6), 0 0 30px rgba(255, 225, 180, 0.3);
}

.header-member-avatar.role-glow-host {
  border: 2px solid #ff9064;
  box-shadow: 0 0 10px rgba(255, 144, 100, 0.45), 0 0 22px rgba(255, 144, 100, 0.2);
}
.header-member-avatar.role-glow-host:hover,
.header-member-avatar.role-glow-host:focus-visible {
  border-color: #ff9064;
  box-shadow: 0 0 14px rgba(255, 144, 100, 0.6), 0 0 30px rgba(255, 144, 100, 0.3);
}

/* Mobile-injected nav items — hidden on desktop, shown via 980px media query */
.site-nav-mobile-divider,
.site-nav-mobile-hub,
.site-nav-mobile-admin {
  display: none;
}

.admin-login-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.admin-login-modal[hidden] {
  display: none;
}

.admin-login-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
}

.admin-login-window {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.12), rgba(122, 40, 255, 0.08)),
    rgba(var(--surface-deep-rgb), 0.98);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.48);
}

.admin-login-form {
  display: grid;
  gap: 0.85rem;
  margin-top: 1rem;
}

.admin-login-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-login-form input {
  min-height: 48px;
  border: 1px solid rgba(var(--fg-rgb), 0.09);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font: inherit;
  padding: 0 0.85rem;
  outline: none;
}

.admin-login-form input:focus {
  border-color: var(--blue-soft);
  box-shadow: 0 0 0 3px rgba(0, 132, 255, 0.18);
}

.admin-dashboard,
.admin-locked {
  max-width: 1100px;
  margin: 0 auto;
}

.admin-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* ── Admin Dashboard: today-at-a-glance status board ───────────────────── */
.admin-status-board {
  margin: 0 0 1.25rem;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.06), transparent 50%),
    rgba(var(--surface-deep-rgb), 0.72);
}
.admin-status-board-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.admin-status-board-heading .eyebrow {
  margin: 0;
}
.admin-status-refresh {
  background: transparent;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.32);
  color: rgba(205, 227, 255, 0.9);
  border-radius: 4px;
  padding: 0.2rem 0.55rem;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.admin-status-refresh:hover {
  background: rgba(var(--accent-strong-rgb), 0.12);
}
.admin-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
.admin-status-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.22);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  text-decoration: none;
  color: inherit;
  min-width: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.admin-status-tile:hover {
  border-color: rgba(var(--accent-strong-rgb), 0.55);
  background: rgba(var(--accent-strong-rgb), 0.08);
}
.admin-status-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb), 0.55);
  font-weight: 700;
}
.admin-status-value {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.admin-status-hint {
  font-size: 0.72rem;
  color: rgba(var(--fg-rgb), 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-status-tile.is-ok    .admin-status-value { color: #4ade80; }
.admin-status-tile.is-warn  .admin-status-value { color: #facc15; }
.admin-status-tile.is-alert .admin-status-value { color: #f87171; }
.admin-status-tile.is-error .admin-status-value { color: rgba(var(--fg-rgb),0.35); }
.admin-status-tile.is-alert { border-color: rgba(248,113,113,0.45); }
.admin-status-tile.is-warn  { border-color: rgba(250,204,21,0.35); }
.admin-status-tile.is-ok    { border-color: rgba(74,222,128,0.28); }

/* Maintenance tile — a div (not a link) with its own action button */
.admin-status-tile-maintenance {
  cursor: default;
  grid-column: 1 / -1;
}
/* Season Registrations snapshot — full width on small screens; on desktop it
   splits the row with the maintenance tile (each spanning 2 of the 4 grid
   columns). */
.admin-status-tile-registrations {
  cursor: pointer; /* the tile opens the event's portal */
  grid-column: 1 / -1;
}
.admin-status-tile-registrations:hover {
  border-color: rgba(var(--accent-strong-rgb), 0.55);
  background: rgba(var(--blue-rgb), 0.08);
}
@media (min-width: 901px) {
  .admin-status-tile-maintenance { grid-column: span 2; }
  .admin-status-tile-registrations { grid-column: span 2; }
}
.admin-status-positions {
  font-style: normal;
  letter-spacing: 0.04em;
}
.admin-status-positions b {
  color: var(--steel-blue);
  font-weight: 800;
}
.admin-status-tile-maintenance:hover {
  border-color: rgba(var(--accent-strong-rgb), 0.22);
  background: rgba(0, 0, 0, 0.28);
}
.admin-status-subtext {
  font-size: 0.66rem;
  color: rgba(var(--fg-rgb), 0.42);
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-status-action {
  margin-top: 0.45rem;
  align-self: flex-start;
  background: rgba(var(--accent-strong-rgb), 0.16);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.45);
  color: rgba(225, 240, 255, 0.95);
  border-radius: 5px;
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.admin-status-action:hover:not(:disabled) {
  background: rgba(var(--accent-strong-rgb), 0.3);
  border-color: rgba(var(--accent-strong-rgb), 0.7);
}
.admin-status-action:disabled {
  opacity: 0.55;
  cursor: wait;
}

@media (max-width: 900px) {
  .admin-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .admin-status-grid { grid-template-columns: 1fr; }
}

/* ── League Streams board ── */
/* ── Admin dashboard: Discord Invite checklist ── */
.discord-invite-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 320px;
  overflow-y: auto;
}
.discord-invite-empty {
  margin: 0;
  padding: 0.6rem 0;
  color: rgba(var(--fg-rgb), 0.4);
  font-size: 0.82rem;
}
.discord-invite-empty.is-error {
  color: #ff8a8a;
}
.discord-invite-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.06);
  cursor: pointer;
}
.discord-invite-row:last-child {
  border-bottom: none;
}
.discord-invite-row:hover {
  background: rgba(var(--fg-rgb), 0.05);
}
.discord-invite-check {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: #5865f2;
}
.discord-invite-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(var(--fg-rgb), 0.9);
}

/* ── Member loyalty-class badge (member dashboard / profile) ── */
.member-class-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid rgba(var(--fg-rgb), 0.25);
  background: rgba(var(--fg-rgb), 0.1);
  color: #fff;
  white-space: nowrap;
}
.member-class-badge--day_1 {
  border-color: rgba(248, 113, 113, 0.6);
  background: rgba(248, 113, 113, 0.18);
  color: #f87171;
}
.member-class-badge--loyalist {
  border-color: rgba(251, 146, 60, 0.6);
  background: rgba(251, 146, 60, 0.18);
  color: #fdba74;
}
.member-class-badge--super_fan {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(52, 211, 153, 0.16);
  color: #6ee7b7;
}
.member-class-badge--fanatic {
  border-color: rgba(56, 189, 248, 0.55);
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
}

/* ── Member-class header bar (public player card) ── */
.player-class-bar {
  position: relative;
  width: 100%;
  height: 28px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 0.75rem;
  background: rgba(var(--surface-deep-rgb), 0.5);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid var(--pcb-glow, rgba(var(--fg-rgb), 0.3));
  box-shadow:
    0 0 10px var(--pcb-glow-a, rgba(var(--fg-rgb), 0.2)),
    0 0 22px var(--pcb-glow-b, rgba(var(--fg-rgb), 0.1)),
    inset 0 1px 0 rgba(var(--fg-rgb), 0.12);
}
.player-class-bar[hidden] { display: none; }
.player-class-bar::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  background: linear-gradient(rgba(var(--fg-rgb), 0.09), rgba(var(--fg-rgb), 0));
  pointer-events: none;
}
.player-class-bar .pcb-eyebrow {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb), 0.5);
}
.player-class-bar .pcb-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1;
  color: var(--pcb-color, #fff);
  text-shadow: 0 0 9px var(--pcb-glow-a, rgba(var(--fg-rgb), 0.2));
}
.player-class-bar .pcb-star { font-size: 11px; }
.player-class-bar .pcb-right {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  letter-spacing: 0.07em;
  color: rgba(var(--fg-rgb), 0.42);
}
.player-class-bar.is-day_1 {
  --pcb-color: #f87171;
  --pcb-glow: rgba(248, 113, 113, 0.85);
  --pcb-glow-a: rgba(248, 113, 113, 0.45);
  --pcb-glow-b: rgba(248, 113, 113, 0.22);
}
.player-class-bar.is-loyalist {
  --pcb-color: #fdba74;
  --pcb-glow: rgba(251, 146, 60, 0.85);
  --pcb-glow-a: rgba(251, 146, 60, 0.45);
  --pcb-glow-b: rgba(251, 146, 60, 0.22);
}
.player-class-bar.is-super_fan {
  --pcb-color: #6ee7b7;
  --pcb-glow: rgba(52, 211, 153, 0.85);
  --pcb-glow-a: rgba(52, 211, 153, 0.42);
  --pcb-glow-b: rgba(52, 211, 153, 0.2);
}
.player-class-bar.is-fanatic {
  --pcb-color: #7dd3fc;
  --pcb-glow: rgba(56, 189, 248, 0.85);
  --pcb-glow-a: rgba(56, 189, 248, 0.42);
  --pcb-glow-b: rgba(56, 189, 248, 0.2);
}
@media (max-width: 560px) {
  /* No room for the right-side label on narrow screens — but a Card Tagline is
     worth showing, so when one is present reveal it and drop the "Member Class"
     eyebrow to make space. The generic "Adult Gaming League" label still hides. */
  .player-class-bar .pcb-right { display: none; }
  .player-class-bar.has-tagline .pcb-right { display: inline-flex; }
  .player-class-bar.has-tagline .pcb-eyebrow { display: none; }
}

/* ── Card Tagline (Loyalist donor perk) ── */
/* Custom tagline replaces the generic right-side label with the tier accent
   color, and the bar gets a slow one-shot sheen so a donor card reads a cut
   above a plain one. */
.player-class-bar .pcb-right.pcb-tagline {
  color: var(--pcb-color, #fff);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 0 0 8px var(--pcb-glow-a, rgba(var(--fg-rgb), 0.2));
}
.player-class-bar.has-tagline::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(var(--fg-rgb), 0.18), transparent);
  transform: skewX(-18deg);
  animation: pcb-sheen 5s ease-in-out infinite;
}
@keyframes pcb-sheen {
  0%   { left: -45%; opacity: 0; }
  10%  { opacity: 1; }
  40%  { left: 115%; opacity: 0; }
  100% { left: 115%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .player-class-bar.has-tagline::after { display: none; }
}

/* ── Site accent themes (donor perk — Loyalist / Super Fan / Fanatic) ──
   script.js stamps data-agl-theme on <html> for the logged-in member; each
   theme re-points the site's blue accent vars and the arena glow's right-side
   ellipse. Slugs must match member_site_themes() in api/member-roles-lib.php. */
/* Accents apply via data-agl-accent (tandem with a full theme) or the legacy
   data-agl-theme slot. The third selector — theme + accent together — carries
   higher specificity than any theme block, so a chosen accent always beats the
   theme's built-in accent while the theme keeps its surfaces. */
:root[data-agl-theme="crimson"], :root[data-agl-accent="crimson"], :root[data-agl-theme][data-agl-accent="crimson"] { --blue: #e11d48; --blue-soft: #fb7185; --blue-rgb: 225, 29, 72;  --blue-soft-rgb: 251, 113, 133; --accent-glow: rgba(225, 29, 72, 0.22); }
:root[data-agl-theme="ember"], :root[data-agl-accent="ember"], :root[data-agl-theme][data-agl-accent="ember"]       { --blue: #ea580c; --blue-soft: #fb923c; --blue-rgb: 234, 88, 12;  --blue-soft-rgb: 251, 146, 60;  --accent-glow: rgba(234, 88, 12, 0.22); }
:root[data-agl-theme="gold"], :root[data-agl-accent="gold"], :root[data-agl-theme][data-agl-accent="gold"]          { --blue: #b8860b; --blue-soft: #efc84a; --blue-rgb: 184, 134, 11; --blue-soft-rgb: 239, 200, 74;  --accent-glow: rgba(239, 200, 74, 0.2); }
:root[data-agl-theme="emerald"], :root[data-agl-accent="emerald"], :root[data-agl-theme][data-agl-accent="emerald"] { --blue: #059669; --blue-soft: #34d399; --blue-rgb: 5, 150, 105;  --blue-soft-rgb: 52, 211, 153;  --accent-glow: rgba(5, 150, 105, 0.22); }
:root[data-agl-theme="violet"], :root[data-agl-accent="violet"], :root[data-agl-theme][data-agl-accent="violet"]    { --blue: #7c3aed; --blue-soft: #a78bfa; --blue-rgb: 124, 58, 237; --blue-soft-rgb: 167, 139, 250; --accent-glow: rgba(124, 58, 237, 0.24); }
:root[data-agl-theme="ice"], :root[data-agl-accent="ice"], :root[data-agl-theme][data-agl-accent="ice"]             { --blue: #0891b2; --blue-soft: #22d3ee; --blue-rgb: 8, 145, 178;  --blue-soft-rgb: 34, 211, 238;  --accent-glow: rgba(21, 216, 255, 0.2); }

:root[data-agl-theme] .arena-glow,
:root[data-agl-accent] .arena-glow {
  background:
    radial-gradient(ellipse at 8% 18%, rgba(255, 63, 91, 0.22), transparent 16rem),
    radial-gradient(ellipse at 86% 18%, var(--accent-glow, rgba(18, 127, 255, 0.22)), transparent 18rem),
    linear-gradient(180deg, rgba(5, 11, 21, 0.3), rgba(5, 8, 13, 0.96));
}

/* ── Full atmosphere theme: Blackout ──
   First of the full-restyle themes: pure black canvas, colored atmosphere
   stripped to a faint silver, steel/ice accent. Rides the exact same
   data-agl-theme mechanism as the accent themes — it's just a slug that
   overrides more. Kept AFTER the generic [data-agl-theme] rules above so its
   equal-specificity overrides win on source order. Panels that hardcode their
   colors instead of using --panel/--line won't follow yet (they get converted
   as the theme system expands). */
:root[data-agl-theme="blackout"] {
  --blue: #64748b;
  --blue-soft: #cbd5e1;
  --blue-rgb: 100, 116, 139;
  --blue-soft-rgb: 203, 213, 225;
  --accent-glow: rgba(203, 213, 225, 0.08);
  --bg: #000000;
  --line: rgba(255, 255, 255, 0.14);
  /* Every surface family goes neutral: greys with no blue in them.
     --panel/--panel-strong derive from these triplets automatically. */
  --surface-deep-rgb: 2, 2, 3;
  --surface-panel-rgb: 10, 10, 12;
  --surface-mid-rgb: 17, 17, 20;
  --table-head-rgb: 44, 44, 50;
  --surface-2: #101013;
  /* Decorative accents go silver/steel. (Position identity colors are pinned
     as literals in their own rules, so they keep their meaning.) */
  --accent-strong-rgb: 175, 185, 200;
  --accent-bright-rgb: 203, 213, 225;
  --accent-teal-rgb: 165, 175, 185;
  --link-blue: #b8c4d4;
  --steel-blue: #a9b6c6;
  --pale-blue: #d7dfe9;
  --cyan: #cbd5e1;
  --line-rgb: 220, 226, 235;
  --sched-card-rgb: 175, 185, 200;
}
/* Hero banners: swap the blue/red color splash for a neutral silver wash. */
:root[data-agl-theme="blackout"] .stats-hero {
  background:
    linear-gradient(120deg, rgba(148, 163, 184, 0.12), rgba(120, 130, 145, 0.06)),
    rgba(var(--surface-deep-rgb), 0.72);
}
:root[data-agl-theme="blackout"] body {
  background:
    linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.85)),
    radial-gradient(circle at 50% 10%, rgba(148, 163, 184, 0.13), transparent 26rem),
    linear-gradient(180deg, #0a0a0b 0%, #000000 44%, #050506 100%);
}
/* Rink texture: the red center line goes silver; grid/blue-line washes dim. */
:root[data-agl-theme="blackout"] body::before {
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(203, 213, 225, 0.18) 49.8% 50.2%, transparent 50.2%),
    repeating-linear-gradient(90deg, rgba(var(--fg-rgb), 0.04) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, transparent 0 42%, rgba(var(--fg-rgb), 0.07) 42.2%, transparent 42.7%);
}
:root[data-agl-theme="blackout"] .arena-glow {
  background:
    radial-gradient(ellipse at 8% 18%, rgba(148, 163, 184, 0.1), transparent 16rem),
    radial-gradient(ellipse at 86% 18%, rgba(203, 213, 225, 0.1), transparent 18rem),
    linear-gradient(180deg, rgba(2, 2, 3, 0.4), rgba(0, 0, 0, 0.97));
}

/* ── Full atmosphere theme: AGL Teal ──
   League-branded theme pulled straight from the crest: cyan/teal puck glow
   over a near-black navy canvas, gray-steel supporting tones. Same
   minimal-override shape as Blackout (retint the accent + surface families,
   keep the default dark structure) rather than a full light/dark flip like
   Bleached. */
:root[data-agl-theme="teal"] {
  /* Crest palette: bright puck cyan → deep royal navy (the AGL letter
     gradient), silver-steel support, black shield canvas. */
  --blue: #0fb6d8;
  --blue-soft: #35d5ef;
  --blue-rgb: 15, 182, 216;
  --blue-soft-rgb: 53, 213, 239;
  --accent-glow: rgba(21, 199, 228, 0.24);
  --bg: #02070e;
  --line: rgba(53, 213, 239, 0.22);
  /* Surfaces: black-navy like the shield, blue-leaning (not green). */
  --surface-deep-rgb: 2, 8, 15;
  --surface-panel-rgb: 5, 17, 28;
  --surface-mid-rgb: 8, 26, 42;
  --table-head-rgb: 15, 48, 84;
  --surface-2: #0a1c2e;
  --accent-strong-rgb: 34, 199, 230;
  --accent-bright-rgb: 34, 211, 238;
  --accent-teal-rgb: 14, 165, 190;
  --link-blue: #38cfe8;
  --steel-blue: #9fb2c4;
  --pale-blue: #a5e8f7;
  --cyan: #22d3ee;
  --line-rgb: 90, 200, 235;
  --sched-card-rgb: 34, 199, 230;
}
:root[data-agl-theme="teal"] .stats-hero {
  background:
    linear-gradient(120deg, rgba(21, 199, 228, 0.16), rgba(19, 63, 115, 0.18)),
    rgba(var(--surface-deep-rgb), 0.72);
}
:root[data-agl-theme="teal"] body {
  background:
    linear-gradient(rgba(2, 7, 14, 0.5), rgba(2, 7, 14, 0.88)),
    radial-gradient(circle at 50% 10%, rgba(21, 199, 228, 0.3), transparent 26rem),
    radial-gradient(circle at 18% 34%, rgba(26, 79, 143, 0.3), transparent 23rem),
    linear-gradient(180deg, #06192c 0%, #02070e 44%, #040d16 100%);
}
/* Rink texture: center line and grid wash go cyan instead of the default red/blue. */
:root[data-agl-theme="teal"] body::before {
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(34, 211, 238, 0.22) 49.8% 50.2%, transparent 50.2%),
    repeating-linear-gradient(90deg, rgba(var(--fg-rgb), 0.04) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, transparent 0 42%, rgba(var(--fg-rgb), 0.08) 42.2%, transparent 42.7%);
}
:root[data-agl-theme="teal"] .arena-glow {
  background:
    radial-gradient(ellipse at 8% 18%, rgba(26, 79, 143, 0.28), transparent 16rem),
    radial-gradient(ellipse at 86% 18%, rgba(21, 199, 228, 0.22), transparent 18rem),
    linear-gradient(180deg, rgba(2, 8, 15, 0.32), rgba(2, 7, 14, 0.96));
}
/* Home hero + schedule hero: the default red splash/center-line accents go
   cyan-into-navy so the whole atmosphere reads as the crest's letter gradient. */
:root[data-agl-theme="teal"] .hero {
  background:
    linear-gradient(180deg, rgba(var(--surface-deep-rgb), 0.08), rgba(var(--surface-deep-rgb), 0.96)),
    radial-gradient(ellipse at 50% 18%, rgba(34, 211, 238, 0.26), transparent 26rem),
    radial-gradient(ellipse at 20% 20%, rgba(26, 79, 143, 0.3), transparent 21rem);
}
:root[data-agl-theme="teal"] .hero::after {
  background:
    linear-gradient(90deg, transparent 0 49.6%, rgba(34, 211, 238, 0.42) 49.6% 50.4%, transparent 50.4%),
    radial-gradient(ellipse at center, rgba(var(--fg-rgb), 0.1), transparent 40%);
}
:root[data-agl-theme="teal"] .schedule-hero-minimal {
  background:
    linear-gradient(180deg, rgba(var(--surface-deep-rgb), 0.08), rgba(var(--surface-deep-rgb), 0.92)),
    radial-gradient(ellipse at 50% 18%, rgba(var(--accent-bright-rgb), 0.15), transparent 28rem),
    radial-gradient(ellipse at 16% 32%, rgba(26, 79, 143, 0.24), transparent 22rem),
    rgba(var(--surface-deep-rgb), 0.72);
}
:root[data-agl-theme="teal"] .schedule-hero-minimal::after {
  background: linear-gradient(90deg, transparent, rgba(var(--accent-bright-rgb), 0.7), rgba(165, 232, 247, 0.4), rgba(var(--accent-bright-rgb), 0.7), transparent);
}
/* Event/date pickers: the default theme's pink-red "goal line" borders go cyan. */
:root[data-agl-theme="teal"] .standings-toolbar select,
:root[data-agl-theme="teal"] .team-event-select-wrap select,
:root[data-agl-theme="teal"] .schedule-toolbar select,
:root[data-agl-theme="teal"] .schedule-toolbar input[type="date"] {
  border-color: rgba(34, 199, 230, 0.55);
}
/* Signature chrome: the crest's cyan-over-navy combo on header + ticker,
   deepened to sit on the dark canvas. This is what visually separates Teal
   from the stock dark theme. */
:root[data-agl-theme="teal"] .site-header {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.08), rgba(12, 52, 94, 0.55)),
    linear-gradient(180deg, #078aab, #0a4e7e);
  border-bottom: 2px solid rgba(21, 199, 228, 0.5);
  box-shadow: 0 8px 24px rgba(2, 12, 24, 0.45);
}
:root[data-agl-theme="teal"] .news-ticker {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.05), rgba(12, 52, 94, 0.6)),
    linear-gradient(180deg, #076f92, #0a3a63);
  border-color: rgba(21, 199, 228, 0.35);
}
:root[data-agl-theme="teal"] .ticker-game-card {
  border-color: rgba(21, 199, 228, 0.45);
  background:
    radial-gradient(circle at 16% 22%, rgba(21, 199, 228, 0.16), transparent 35%),
    linear-gradient(100deg, rgba(10, 58, 99, 0.96), rgba(7, 34, 62, 0.97) 58%, rgba(4, 22, 42, 0.95));
  box-shadow:
    0 0 0 1px rgba(21, 199, 228, 0.12) inset,
    0 0 18px rgba(12, 52, 94, 0.3),
    0 12px 22px rgba(0, 0, 0, 0.3);
}
/* Members login wall: teal-branded backdrop instead of the stock dark. */
:root[data-agl-theme="teal"] .member-login-wall {
  background:
    linear-gradient(120deg, rgba(21, 199, 228, 0.12), rgba(12, 52, 94, 0.5)),
    rgba(3, 16, 28, 0.96);
}

/* ── Full atmosphere theme: AGL Cyan ──
   The brand color fills the page: flat #02BCDF canvas, panels in crest navy
   #0C345E with the default light text. Only the two crest colors — no ice
   blue, no teal shading. Rides the dark-panel architecture (light text on
   dark surfaces), so unlike bleached-cyan nothing needs a light-text flip. */
:root[data-agl-theme="cyan"] {
  --blue: #35d5ef;
  --blue-soft: #7ae4f6;
  --blue-rgb: 53, 213, 239;
  --blue-soft-rgb: 122, 228, 246;
  --accent-glow: rgba(2, 188, 223, 0.34);
  --bg: #02bcdf;
  --line: rgba(2, 188, 223, 0.4);
  /* Surface family = crest navy #0C345E and near shades. */
  --surface-deep-rgb: 7, 34, 62;
  --surface-panel-rgb: 12, 52, 94;
  --surface-mid-rgb: 16, 66, 118;
  --table-head-rgb: 6, 30, 55;
  --surface-2: #10427a;
  --shadow: 0 22px 60px rgba(4, 24, 44, 0.5);
  --accent-strong-rgb: 53, 213, 239;
  --accent-bright-rgb: 2, 188, 223;
  --accent-teal-rgb: 2, 168, 199;
  --link-blue: #56dcf2;
  --steel-blue: #7ac6e8;
  --pale-blue: #b5ecf9;
  --cyan: #35d5ef;
  --line-rgb: 2, 188, 223;
  --sched-card-rgb: 53, 213, 239;
}
/* Flat brand-cyan page — no gradient wash, the color itself. */
:root[data-agl-theme="cyan"] body {
  background: #02bcdf;
}
/* Rink texture: navy center line + faint navy grid over the cyan. */
:root[data-agl-theme="cyan"] body::before {
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(12, 52, 94, 0.4) 49.8% 50.2%, transparent 50.2%),
    repeating-linear-gradient(90deg, rgba(12, 52, 94, 0.06) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, transparent 0 42%, rgba(12, 52, 94, 0.1) 42.2%, transparent 42.7%);
}
:root[data-agl-theme="cyan"] .arena-glow {
  background:
    radial-gradient(ellipse at 8% 18%, rgba(255, 255, 255, 0.18), transparent 16rem),
    radial-gradient(ellipse at 86% 18%, rgba(12, 52, 94, 0.2), transparent 18rem),
    linear-gradient(180deg, rgba(2, 188, 223, 0.05), rgba(2, 160, 192, 0.35));
}
/* Heroes: navy panels (the header combo inverted) with cyan glow. Team
   heroes are excluded — they keep their team-color gradient like every
   other theme. */
:root[data-agl-theme="cyan"] .stats-hero:not(.team-hero) {
  background:
    linear-gradient(120deg, rgba(2, 188, 223, 0.22), rgba(7, 34, 62, 0.3)),
    linear-gradient(180deg, #0c345e, #071f3a);
}
:root[data-agl-theme="cyan"] .hero {
  background:
    linear-gradient(180deg, rgba(12, 52, 94, 0.85), rgba(7, 31, 58, 0.97)),
    radial-gradient(ellipse at 50% 18%, rgba(2, 188, 223, 0.35), transparent 26rem);
}
:root[data-agl-theme="cyan"] .hero::after {
  background:
    linear-gradient(90deg, transparent 0 49.6%, rgba(2, 188, 223, 0.5) 49.6% 50.4%, transparent 50.4%),
    radial-gradient(ellipse at center, rgba(2, 188, 223, 0.12), transparent 40%);
}
:root[data-agl-theme="cyan"] .schedule-hero-minimal:not(.team-hero) {
  background:
    linear-gradient(120deg, rgba(2, 188, 223, 0.22), rgba(7, 34, 62, 0.3)),
    linear-gradient(180deg, #0c345e, #071f3a);
}
:root[data-agl-theme="cyan"] .schedule-hero-minimal::after {
  background: linear-gradient(90deg, transparent, rgba(2, 188, 223, 0.7), rgba(181, 236, 249, 0.4), rgba(2, 188, 223, 0.7), transparent);
}
/* Header: the approved combo — #02BCDF over #0C345E. */
:root[data-agl-theme="cyan"] .site-header {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(12, 52, 94, 0.44)),
    linear-gradient(180deg, #02bcdf, #0b86bd);
  border-bottom: 2px solid rgba(12, 52, 94, 0.55);
  box-shadow: 0 8px 24px rgba(12, 52, 94, 0.3);
}
:root[data-agl-theme="cyan"] .standings-toolbar select,
:root[data-agl-theme="cyan"] .team-event-select-wrap select,
:root[data-agl-theme="cyan"] .schedule-toolbar select,
:root[data-agl-theme="cyan"] .schedule-toolbar input[type="date"] {
  border-color: rgba(2, 188, 223, 0.55);
}
/* Ticker: same cyan-over-navy combo as the header — one continuous band. */
:root[data-agl-theme="cyan"] .news-ticker {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(12, 52, 94, 0.5)),
    linear-gradient(180deg, #05a9ca, #0b86bd);
  border-color: rgba(12, 52, 94, 0.5);
}
:root[data-agl-theme="cyan"] .ticker-game-card {
  border-color: rgba(12, 52, 94, 0.7);
  background:
    radial-gradient(circle at 16% 22%, rgba(2, 188, 223, 0.2), transparent 35%),
    linear-gradient(100deg, rgba(16, 66, 118, 0.96), rgba(12, 52, 94, 0.97) 58%, rgba(7, 34, 62, 0.95));
  box-shadow:
    0 0 0 1px rgba(2, 188, 223, 0.14) inset,
    0 0 18px rgba(12, 52, 94, 0.28),
    0 12px 22px rgba(4, 24, 44, 0.35);
}
:root[data-agl-theme="cyan"] .ticker-game-card.is-final {
  border-color: rgba(2, 188, 223, 0.5);
}
/* Members login wall: brand cyan backdrop, navy card on top. */
:root[data-agl-theme="cyan"] .member-login-wall {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(12, 52, 94, 0.35)),
    rgba(2, 188, 223, 0.96);
}
/* Sign-in submit: navy instead of the stock grey. */
:root[data-agl-theme="cyan"] .mgmt-login-btn {
  background: linear-gradient(180deg, #10427a, #0c345e);
  border: 1px solid rgba(2, 188, 223, 0.5);
  color: #f5f8ff;
}
:root[data-agl-theme="cyan"] .mgmt-login-btn:hover,
:root[data-agl-theme="cyan"] .mgmt-login-btn:focus-visible {
  background: linear-gradient(180deg, #144e8e, #0e3c6c);
  border-color: rgba(2, 188, 223, 0.8);
}
/* Matchup preview dialog: navy panel + cyan trim instead of near-black. */
:root[data-agl-theme="cyan"] .matchup-preview-dialog {
  border-color: rgba(2, 188, 223, 0.35);
  background:
    radial-gradient(circle at 50% 0%, rgba(2, 188, 223, 0.16), transparent 42%),
    linear-gradient(145deg, rgba(12, 52, 94, 0.98), rgba(6, 27, 50, 0.98));
  box-shadow: 0 24px 80px rgba(3, 16, 30, 0.6), 0 0 36px rgba(2, 188, 223, 0.18);
}
/* Transactions feed: the badge rail rides var(--bg), which is bright cyan
   here — pin it to the navy family so it doesn't clash with the cards. */
:root[data-agl-theme="cyan"] .txn-feed-badge-rail {
  background: #0a2c50;
  border-right-color: rgba(2, 188, 223, 0.25);
}

/* ── Full atmosphere theme: Bleached ──
   White-ice rink: paper-white canvas, navy accents. The heavy lifting is the
   variable flips — surfaces to white, text/foreground washes to navy, the
   accent families to navy blues. Table headers stay DARK navy on purpose:
   most table header/tile-label text is literal white, so those surfaces keep
   a dark fill for contrast (classic sports-site look) rather than inverting. */
:root[data-agl-theme|="bleached"] {
  /* Native widgets (textareas, date pickers, select popups, scrollbars)
     follow the light scheme instead of the site's default dark. */
  color-scheme: light;
  --blue: #0b3d91;
  --blue-soft: #1d5bbf;
  --blue-rgb: 11, 61, 145;
  --blue-soft-rgb: 29, 91, 191;
  --accent-glow: rgba(11, 61, 145, 0.14);
  --bg: #f4f6f9;
  --text: #0e1c33;
  --muted: #51617a;
  --line: rgba(16, 42, 90, 0.2);
  --line-rgb: 16, 42, 90;
  --fg-rgb: 14, 28, 51;
  --pale-blue-rgb: 21, 65, 130;
  --surface-deep-rgb: 226, 232, 240;
  --surface-panel-rgb: 255, 255, 255;
  --surface-mid-rgb: 238, 242, 248;
  --table-head-rgb: 213, 221, 233;
  --surface-2: #ffffff;
  /* Panels float gently on the white page instead of casting the dark-theme's
     heavy black shadow. */
  --shadow: 0 10px 26px rgba(14, 33, 66, 0.1);
  --text-soft: #3c4f6b;
  --text-soft-rgb: 60, 79, 107;
  --accent-strong-rgb: 24, 74, 165;
  --accent-bright-rgb: 12, 89, 190;
  --accent-teal-rgb: 10, 106, 128;
  --sched-card-rgb: 24, 74, 165;
  --link-blue: #0b4dbb;
  --steel-blue: #29508f;
  --pale-blue: #1c4d9e;
  --cyan: #0b6fa8;
}
:root[data-agl-theme|="bleached"] body {
  color: var(--text);
  background:
    linear-gradient(rgba(255, 255, 255, 0.55), rgba(244, 246, 249, 0.85)),
    radial-gradient(circle at 50% 10%, rgba(11, 61, 145, 0.1), transparent 26rem),
    linear-gradient(180deg, #ffffff 0%, #eef2f7 44%, #f4f6f9 100%);
}
/* Rink texture: navy center line + faint navy grid on the white ice. */
:root[data-agl-theme|="bleached"] body::before {
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(11, 61, 145, 0.25) 49.8% 50.2%, transparent 50.2%),
    repeating-linear-gradient(90deg, rgba(14, 28, 51, 0.05) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, transparent 0 42%, rgba(14, 28, 51, 0.08) 42.2%, transparent 42.7%);
}
:root[data-agl-theme|="bleached"] body::after {
  background-image: radial-gradient(rgba(14, 28, 51, 0.12) 1px, transparent 1px);
}
:root[data-agl-theme|="bleached"] .arena-glow {
  background:
    radial-gradient(ellipse at 8% 18%, rgba(11, 61, 145, 0.08), transparent 16rem),
    radial-gradient(ellipse at 86% 18%, rgba(29, 91, 191, 0.08), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(240, 244, 249, 0.9));
}
/* Team heroes are excluded — they keep their dark team-color gradient
   (team branding) with light text, same as the default theme. */
:root[data-agl-theme|="bleached"] .stats-hero:not(.team-hero) {
  background:
    linear-gradient(120deg, rgba(11, 61, 145, 0.1), rgba(29, 91, 191, 0.05)),
    rgba(255, 255, 255, 0.72);
}
:root[data-agl-theme|="bleached"] .team-hero,
:root[data-agl-theme|="bleached"] .team-hero h1 {
  color: #f8fbff;
}
/* Fully light chrome: white header/menus with navy text — no navy bars. */
:root[data-agl-theme|="bleached"] .site-header {
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(14, 33, 66, 0.12);
}
:root[data-agl-theme|="bleached"] .site-nav,
:root[data-agl-theme|="bleached"] .site-nav a,
:root[data-agl-theme|="bleached"] .signin-dropdown-menu a,
:root[data-agl-theme|="bleached"] .header-button-group .signin-button,
:root[data-agl-theme|="bleached"] .header-button-group .mgmt-hub-button,
:root[data-agl-theme|="bleached"] .header-button-group .admin-icon-button {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .site-nav a.is-active {
  color: var(--blue);
}
:root[data-agl-theme|="bleached"] .nav-dropdown-menu,
:root[data-agl-theme|="bleached"] .nav-subdropdown-menu,
:root[data-agl-theme|="bleached"] .signin-dropdown-menu {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 14px 30px rgba(14, 33, 66, 0.18);
}
/* Tables: everything on light fills, navy text — including the sticky team
   column, whose name/record literals are overridden down the tree. */
:root[data-agl-theme|="bleached"] .standings-table,
:root[data-agl-theme|="bleached"] .standings-table td,
:root[data-agl-theme|="bleached"] .standings-table th,
:root[data-agl-theme|="bleached"] .standings-table td:first-child,
:root[data-agl-theme|="bleached"] .standings-table td:first-child * {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .standings-event-heading h3 {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .standings-event-heading > span {
  color: var(--muted);
}
/* Schedule ticker: light band, light score cards, navy text. */
:root[data-agl-theme|="bleached"] .ticker-game-card {
  background:
    radial-gradient(circle at 16% 22%, rgba(var(--blue-rgb), 0.1), transparent 35%),
    linear-gradient(100deg, rgba(255, 255, 255, 0.92), rgba(234, 239, 246, 0.95));
}
:root[data-agl-theme|="bleached"] .ticker-team-abbr,
:root[data-agl-theme|="bleached"] .ticker-team-meta,
:root[data-agl-theme|="bleached"] .ticker-team-score,
:root[data-agl-theme|="bleached"] .ticker-game-date,
:root[data-agl-theme|="bleached"] .ticker-game-state {
  color: var(--text);
}
/* Member login wall backdrop goes light too. */
:root[data-agl-theme|="bleached"] .member-login-wall {
  background: rgba(238, 242, 248, 0.88);
}
/* Mobile nav: the expanded menu lives inside the (white) header, but the
   mobile block force-sets pale blue with !important — matched here so the
   submenu links read navy like desktop. */
:root[data-agl-theme|="bleached"] .site-nav .nav-dropdown-menu a {
  color: var(--text) !important;
}
:root[data-agl-theme|="bleached"] .site-nav .nav-dropdown-menu a.is-active {
  color: var(--blue) !important;
}
/* Nav menu links + winner/loser ticker variants carry their own white rules
   with extra specificity — override them down the tree. */
:root[data-agl-theme|="bleached"] .nav-dropdown-menu a,
:root[data-agl-theme|="bleached"] .nav-subdropdown-menu a,
:root[data-agl-theme|="bleached"] .news-ticker .ticker-team-abbr,
:root[data-agl-theme|="bleached"] .news-ticker .ticker-team-meta,
:root[data-agl-theme|="bleached"] .news-ticker .ticker-team-score,
:root[data-agl-theme|="bleached"] .hero-copy,
:root[data-agl-theme|="bleached"] .schedule-list strong,
:root[data-agl-theme|="bleached"] .ticker-toggle {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .panel-heading span {
  color: var(--muted);
}
/* Player card odds and ends: toggle separators, feature chips, the OVR pill,
   and the identity card's name plate (its white fill was foreground-converted,
   so pin it back to a white plate with navy text). */
:root[data-agl-theme|="bleached"] .player-view-toggle span {
  color: var(--muted);
}
:root[data-agl-theme|="bleached"] .player-feature-badges span,
:root[data-agl-theme|="bleached"] .player-card-rating {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .player-identity-footer {
  background: rgba(255, 255, 255, 0.94);
}
:root[data-agl-theme|="bleached"] .player-identity-footer,
:root[data-agl-theme|="bleached"] .player-identity-footer strong {
  color: #0e1c33;
}
/* Nav menu highlight: navy text on a soft blue wash instead of white-on-blue. */
:root[data-agl-theme|="bleached"] .site-nav .nav-dropdown-menu a:hover,
:root[data-agl-theme|="bleached"] .site-nav .nav-dropdown-menu a:focus,
:root[data-agl-theme|="bleached"] .site-nav .nav-dropdown-menu a.is-active {
  background: rgba(var(--blue-rgb), 0.1);
  color: var(--blue);
}
/* Position pills: flat colored text like the Mgmt Hub free-agent list — no
   chip box — with shades deepened to read on white. Position identity stays. */
:root[data-agl-theme|="bleached"] .badge[class*="position-"] {
  border: 0;
  background: transparent;
  box-shadow: none;
  min-width: 34px;
}
:root[data-agl-theme|="bleached"] .position-lw { color: #1a8a46; }
:root[data-agl-theme|="bleached"] .position-rw { color: #0b62c4; }
:root[data-agl-theme|="bleached"] .position-c  { color: #c81e3c; }
:root[data-agl-theme|="bleached"] .position-ld { color: #0e7490; }
:root[data-agl-theme|="bleached"] .position-rd { color: #a16207; }
:root[data-agl-theme|="bleached"] .position-g  { color: #6d28d9; }
/* Form controls: typed text and selected values go navy (their fills are
   light or mid-grey on this theme either way). */
:root[data-agl-theme|="bleached"] input,
:root[data-agl-theme|="bleached"] select,
:root[data-agl-theme|="bleached"] textarea {
  color: var(--text);
}
/* Schedule: game cards are light now — inherited text and the card's
   white-literal details go navy; records read as muted metadata. */
:root[data-agl-theme|="bleached"] .schedule-compact-card,
:root[data-agl-theme|="bleached"] .schedule-compact-card strong,
:root[data-agl-theme|="bleached"] .schedule-compact-score,
:root[data-agl-theme|="bleached"] .schedule-time-heading,
:root[data-agl-theme|="bleached"] .schedule-time-heading strong,
:root[data-agl-theme|="bleached"] .schedule-date-heading h2,
:root[data-agl-theme|="bleached"] .schedule-date-toggle-btn {
  color: var(--text);
}
/* The compact-card mobile block force-sets white with !important — matched
   here so the theme wins at every breakpoint. Winner scores keep their gold
   meaning in a shade that reads on white. */
:root[data-agl-theme|="bleached"] .schedule-compact-card strong,
:root[data-agl-theme|="bleached"] .schedule-compact-card .schedule-compact-meta strong,
:root[data-agl-theme|="bleached"] .schedule-compact-card .schedule-name-abbr,
:root[data-agl-theme|="bleached"] .schedule-compact-card .schedule-name-full,
:root[data-agl-theme|="bleached"][data-agl-theme] .schedule-compact-card .schedule-compact-score {
  color: var(--text) !important;
}
:root[data-agl-theme|="bleached"][data-agl-theme] .schedule-compact-card .schedule-compact-score.is-winner {
  color: #a16207 !important;
  text-shadow: none !important;
}
:root[data-agl-theme|="bleached"] .schedule-team-record {
  color: var(--muted) !important;
}
/* Season rankings cards: values go navy like the milestone tracker, and the
   rank pills' text deepens to a dark shade of their own hue (dark red for
   standard, dark green for top ranks) so the numbers read on the tinted pills. */
:root[data-agl-theme|="bleached"] .player-profile-rank-card strong {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .player-profile-rank-pill {
  color: #a3132a;
}
:root[data-agl-theme|="bleached"] .player-profile-rank-pill.is-top {
  color: #0c6b3d;
}
/* Career view: milestone tracker headings/labels go navy on the light card,
   and the big header name loses its glow (a soft halo reads as a grey smudge
   box on white). */
:root[data-agl-theme|="bleached"] .player-milestone-card h3,
:root[data-agl-theme|="bleached"] .player-milestone-item strong {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .player-card-header h2,
:root[data-agl-theme|="bleached"] .player-card-header-featured h2 {
  text-shadow: none;
}
/* Weekend Warrior day cards: the card border follows its slot's status, and
   the status chip reads as dark text with a neon glow of the same family. */
:root[data-agl-theme|="bleached"] .event-cards div:has(.event-status.open),
:root[data-agl-theme|="bleached"] .event-cards a:has(.event-status.open) {
  border-color: #14683c;
}
:root[data-agl-theme|="bleached"] .event-cards div:has(.event-status.closed),
:root[data-agl-theme|="bleached"] .event-cards a:has(.event-status.closed) {
  border-color: #8f1d2c;
}
:root[data-agl-theme|="bleached"] .event-cards div:has(.event-status.filling),
:root[data-agl-theme|="bleached"] .event-cards a:has(.event-status.filling) {
  border-color: #8a6a10;
}
:root[data-agl-theme|="bleached"] .event-status.open {
  background: rgba(38, 214, 124, 0.14);
  color: #0f6b3a;
  text-shadow: 0 0 8px rgba(57, 255, 20, 0.75), 0 0 16px rgba(57, 255, 20, 0.4);
}
:root[data-agl-theme|="bleached"] .event-status.closed {
  background: rgba(255, 64, 80, 0.12);
  color: #a3132a;
  text-shadow: 0 0 8px rgba(255, 45, 85, 0.65), 0 0 16px rgba(255, 45, 85, 0.35);
}
:root[data-agl-theme|="bleached"] .event-status.filling {
  background: rgba(239, 200, 74, 0.16);
  color: #7a5c0a;
  text-shadow: 0 0 8px rgba(255, 214, 74, 0.7), 0 0 16px rgba(255, 214, 74, 0.4);
}
/* Matchup preview modal: light dialog shell + navy text. The two team panels
   and top-5 lists keep their team-color fills (their text stays light). */
:root[data-agl-theme|="bleached"] .matchup-preview-dialog {
  border-color: rgba(11, 61, 145, 0.25);
  background:
    radial-gradient(circle at 50% 0%, rgba(29, 91, 191, 0.1), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(238, 242, 248, 0.98));
  box-shadow: 0 24px 60px rgba(14, 33, 66, 0.28), 0 0 30px rgba(var(--blue-rgb), 0.08);
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .matchup-preview-close {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .matchup-preview-header .eyebrow {
  color: var(--blue);
  text-shadow: 0 0 10px rgba(var(--blue-rgb), 0.35);
}
:root[data-agl-theme|="bleached"] .matchup-preview-header h2 {
  text-shadow: none;
}
:root[data-agl-theme|="bleached"] .matchup-preview-header > span,
:root[data-agl-theme|="bleached"] .matchup-preview-series div,
:root[data-agl-theme|="bleached"] .matchup-preview-loading {
  color: var(--muted);
}
:root[data-agl-theme|="bleached"] .matchup-preview-series h3 {
  color: var(--blue);
  text-shadow: none;
}
/* Box score 3 Stars: light chips, navy names, muted meta; the gold/silver/
   bronze rank accents stay. */
:root[data-agl-theme|="bleached"] .box-score-stars {
  border-color: rgba(var(--blue-rgb), 0.2);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(238, 242, 248, 0.92)),
    rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 26px rgba(14, 33, 66, 0.08);
}
:root[data-agl-theme|="bleached"] .box-score-stars-kicker {
  color: var(--blue);
}
:root[data-agl-theme|="bleached"] .box-score-star-card {
  border-color: rgba(var(--blue-rgb), 0.22);
  background:
    linear-gradient(135deg, rgba(240, 244, 250, 0.9), rgba(226, 232, 240, 0.92)),
    rgba(255, 255, 255, 0.72);
}
:root[data-agl-theme|="bleached"] .box-score-star-main strong {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .box-score-star-main span {
  color: var(--muted);
}
:root[data-agl-theme|="bleached"] .box-score-star-rank {
  color: var(--text);
  background: rgba(var(--blue-rgb), 0.1);
}
:root[data-agl-theme|="bleached"] .box-score-star-card--1 .box-score-star-rank {
  color: #8a6a10;
  background: rgba(255, 215, 91, 0.3);
}
:root[data-agl-theme|="bleached"] .box-score-star-stats em {
  color: var(--text);
  background: rgba(var(--blue-rgb), 0.1);
}
/* Box score team tabs: section headings and table text go navy on the light
   rows/headers. */
:root[data-agl-theme|="bleached"] .schedule-team-stat-section h3,
:root[data-agl-theme|="bleached"] .schedule-player-table th,
:root[data-agl-theme|="bleached"] .schedule-player-table td {
  color: var(--text);
}
/* Weekend Warrior position boxes: darken the header divider (the inline
   white hairline vanishes on the light cards). */
:root[data-agl-theme|="bleached"] .ww-pos-block-head {
  border-bottom-color: rgba(14, 28, 51, 0.28);
}
/* Weekend Warrior signup lists: player names go navy on the light position
   boxes (their inline rule is white-on-dark). */
:root[data-agl-theme|="bleached"] .ww-pos-player {
  color: rgba(14, 28, 51, 0.85);
  background: rgba(14, 28, 51, 0.05);
}
/* Weekend Warrior day tabs: navy text; active tab reads as a blue-washed
   navy chip instead of white-on-light. */
:root[data-agl-theme|="bleached"] .ww-day-tab {
  color: var(--muted);
  border-color: rgba(14, 28, 51, 0.25);
}
:root[data-agl-theme|="bleached"] .ww-day-tab:not(.is-active) {
  background: rgba(14, 28, 51, 0.05);
}
/* Active day tab keeps its original blue-gradient fill — only the text color
   and border are themed. */
:root[data-agl-theme|="bleached"] .ww-day-tab.is-active {
  color: var(--blue);
  border-color: rgba(var(--blue-rgb), 0.45);
}
/* Empty-state placeholders (gold boxes): the pale gold text deepens to a
   readable amber on light surfaces — applies site-wide. */
:root[data-agl-theme|="bleached"] .empty-state {
  color: #8a6a10;
}
/* Matchup preview VS bubble: a navy sphere instead of the ice-cyan ball,
   matching the theme's navy accents. */
:root[data-agl-theme|="bleached"] .matchup-preview-vs {
  background: radial-gradient(circle at 35% 20%, rgba(29, 91, 191, 0.9), rgba(11, 61, 145, 0.96) 55%, #091e42);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(var(--blue-rgb), 0.35);
}
/* Header alert bell: pale-blue icon goes navy on the white chrome. */
:root[data-agl-theme|="bleached"] .alert-bell-btn {
  color: rgba(14, 28, 51, 0.75);
}
:root[data-agl-theme|="bleached"] .alert-bell-btn:hover,
:root[data-agl-theme|="bleached"] .alert-bell-btn[aria-expanded="true"] {
  color: var(--blue);
}
/* Alerts dropdown: light panel with the glance-board look (accent border +
   soft blue wash). The inner text already rides the foreground variable, so
   it turns navy on its own once the panel is light. */
:root[data-agl-theme|="bleached"] .alert-bell-dropdown {
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.06), transparent 50%),
    rgba(255, 255, 255, 0.98);
  border-color: rgba(var(--accent-strong-rgb), 0.35);
  box-shadow: 0 14px 30px rgba(14, 33, 66, 0.18);
}
:root[data-agl-theme|="bleached"] .alert-bell-dropdown-header {
  color: var(--blue);
}
:root[data-agl-theme|="bleached"] .alert-bell-close:hover {
  color: var(--text);
}
/* Alert type chips: pastel text deepens to read on the light panel. */
:root[data-agl-theme|="bleached"] .alert-bell-item-type           { color: var(--blue); }
:root[data-agl-theme|="bleached"] .alert-bell-item-type-signed    { color: #0c6b3d; }
:root[data-agl-theme|="bleached"] .alert-bell-item-type-released  { color: #a3132a; }
:root[data-agl-theme|="bleached"] .alert-bell-item-type-traded    { color: #8a6a10; }
:root[data-agl-theme|="bleached"] .alert-bell-item-type-scheduled { color: #0e7490; }
:root[data-agl-theme|="bleached"] .alert-bell-item-type-potw      { color: #6b21a8; }
:root[data-agl-theme|="bleached"] .alert-bell-item-type-record    { color: #92610a; }
:root[data-agl-theme|="bleached"] .alert-bell-item-type-broadcast { color: #6d28d9; }
/* Member dashboard SVG charts (OVR trend, league comparison): the grid
   lines, axes, and labels are drawn with white presentation attributes —
   CSS out-ranks attributes, so they go navy here. The gold data line and
   dots keep their colors. */
:root[data-agl-theme|="bleached"] #player-rankings-grid svg line,
:root[data-agl-theme|="bleached"] #player-league-chart svg line {
  stroke: rgba(14, 28, 51, 0.2);
}
:root[data-agl-theme|="bleached"] #player-rankings-grid svg text,
:root[data-agl-theme|="bleached"] #player-league-chart svg text {
  fill: rgba(14, 28, 51, 0.6);
}
/* Admin tools: active tab and section headings go navy on the light panels. */
:root[data-agl-theme|="bleached"] .admin-page-tabs a.is-active {
  color: var(--blue);
}
:root[data-agl-theme|="bleached"] .admin-dashboard h3,
:root[data-agl-theme|="bleached"] .admin-dashboard h4,
:root[data-agl-theme|="bleached"] .admin-tool-group-heading h3,
:root[data-agl-theme|="bleached"] .admin-tool-group-heading h4 {
  color: var(--text);
}
/* Admin "Today at a Glance" tiles: transparent at rest, a soft blue-grey
   gradient on hover (same feel as the Weekend Warrior day cards). */
:root[data-agl-theme|="bleached"] .admin-status-tile {
  background: transparent;
}
:root[data-agl-theme|="bleached"] .admin-status-tile:hover {
  background: linear-gradient(135deg, rgba(var(--blue-rgb), 0.12), rgba(148, 163, 184, 0.1));
}
/* Box score: player-name links in the team tabs match the navy stat text,
   and the 3-star game-rating number matches the player name. */
:root[data-agl-theme|="bleached"] .box-score-player-link {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .box-score-star-rating strong {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .box-score-star-rating span {
  color: var(--muted);
}
/* Matchup preview: team abbreviations sit on the team-color panels — keep
   them light there (the dialog's navy text would sink into the gradients). */
:root[data-agl-theme|="bleached"] .matchup-preview-team strong {
  color: #f2f6fc;
}
/* Home event cards: white literals go navy on the light card wash. */
:root[data-agl-theme|="bleached"] .event-cards strong,
:root[data-agl-theme|="bleached"] .event-status,
:root[data-agl-theme|="bleached"] .event-signups-count {
  color: var(--text);
}
/* Player card page: stat tiles and tables are light surfaces now, so their
   literal-white values/rows go navy. (Tile labels already follow
   --pale-blue-rgb, which Bleached darkens.) */
:root[data-agl-theme|="bleached"] .player-stat-tile,
:root[data-agl-theme|="bleached"] .player-stat-tile strong,
:root[data-agl-theme|="bleached"] .player-card-page .player-stat-tile strong,
:root[data-agl-theme|="bleached"] .player-stat-board-featured .player-stat-tile strong,
:root[data-agl-theme|="bleached"] .stats-table,
:root[data-agl-theme|="bleached"] .stats-table td,
:root[data-agl-theme|="bleached"] .stats-table th,
:root[data-agl-theme|="bleached"] .rating-pill,
:root[data-agl-theme|="bleached"] .player-game-link,
:root[data-agl-theme|="bleached"] .player-opp-abbr,
/* View toggles (Skater|Goalie, Current|Career|Awards): inactive reads as
   muted slate, the active tab pops in accent blue — restoring the state
   distinction the dark theme gets from white-vs-dim. */
:root[data-agl-theme|="bleached"] .player-view-toggle button {
  color: rgba(var(--text-soft-rgb), 0.8);
}
:root[data-agl-theme|="bleached"] .player-view-toggle button:hover,
:root[data-agl-theme|="bleached"] .player-view-toggle button.is-active {
  color: var(--blue);
}
/* Rankings section headings match the Milestone Tracker's navy. */
:root[data-agl-theme|="bleached"] .player-profile-extra-card h3 {
  color: var(--text);
  text-shadow: none;
}
/* ── Teams page: sub-panels and tab bars take the glance-tool look, tinted
   with the team's own colors; text inside goes navy. ── */
:root[data-agl-theme|="bleached"] .team-profile-summary-panel {
  border-color: rgba(var(--agl-team-primary-rgb, 24, 74, 165), 0.35);
  box-shadow: inset 0 0 30px rgba(var(--agl-team-primary-rgb, 24, 74, 165), 0.05);
}
:root[data-agl-theme|="bleached"] .team-filter-tabs,
:root[data-agl-theme|="bleached"] .team-leader-selector {
  background:
    linear-gradient(135deg, rgba(var(--agl-team-primary-rgb, 24, 74, 165), 0.1), transparent 60%),
    rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(var(--agl-team-primary-rgb, 24, 74, 165), 0.3);
}
/* The Overview/Roster/Schedule tab pill: light container instead of the dark
   gradient box; active/hover tabs read navy with the existing team-gradient
   underline bar as the sole indicator. */
:root[data-agl-theme|="bleached"] .team-detail-tabs {
  background:
    linear-gradient(135deg, rgba(var(--agl-team-primary-rgb, 24, 74, 165), 0.1), transparent 60%),
    rgba(255, 255, 255, 0.75);
  border-color: rgba(var(--agl-team-primary-rgb, 24, 74, 165), 0.3);
  box-shadow: none;
}
/* The team-theme block force-sets white with !important — matched here.
   Active tab mirrors the leader selector: no fill box, just the team-gradient
   underline; the faint tint only appears on hover. */
:root[data-agl-theme|="bleached"] .team-detail-tabs button:hover,
:root[data-agl-theme|="bleached"] .team-detail-tabs button:focus-visible,
:root[data-agl-theme|="bleached"] .team-detail-tabs button.is-active {
  color: var(--text) !important;
  box-shadow: none !important;
}
:root[data-agl-theme|="bleached"] .team-detail-tabs button.is-active,
:root[data-agl-theme|="bleached"] .team-detail-tabs button:hover,
:root[data-agl-theme|="bleached"] .team-detail-tabs button:focus-visible {
  background: transparent !important;
}
/* Leader selector (Forward/Defense/Goalie): replicate the detail-tabs'
   team-gradient underline bar on the active tab. */
:root[data-agl-theme|="bleached"] .team-filter-tabs button.is-active,
:root[data-agl-theme|="bleached"] .team-filter-tabs .is-active {
  color: var(--text);
  background: transparent;
  box-shadow: inset 0 -2px 0 rgb(var(--agl-team-primary-rgb, 24, 74, 165));
}
:root[data-agl-theme|="bleached"] .team-leader-selector button {
  position: relative;
}
:root[data-agl-theme|="bleached"] .team-leader-selector button.is-active,
:root[data-agl-theme|="bleached"] .team-leader-selector .is-active {
  color: var(--text) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 999px !important;
}
:root[data-agl-theme|="bleached"] .team-leader-selector button.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgb(var(--agl-team-primary-rgb, 24, 74, 165)),
    rgb(var(--agl-team-secondary-rgb, 29, 91, 191)));
}
:root[data-agl-theme|="bleached"] .team-filter-tabs button:hover,
:root[data-agl-theme|="bleached"] .team-leader-selector button:hover {
  color: var(--text);
  background: transparent;
}
/* Breathing room between the leader selector and the cards below it. */
:root[data-agl-theme|="bleached"] .team-leader-selector {
  margin-bottom: 0.85rem;
}
/* Panel values (leaders, snapshot tiles, stat blocks, stats tables) and the
   schedule month heading. */
:root[data-agl-theme|="bleached"] .team-detail-panels strong,
:root[data-agl-theme|="bleached"] .team-cal-nav strong {
  color: var(--text);
}

/* ── Management Hub: every white/pale/gold text on the light surfaces goes
   dark. Team-color header bars (roster/targets thead, hub header) keep their
   white text — they stay filled with the team color. ── */
:root[data-agl-theme|="bleached"] .mgmt-login-title,
:root[data-agl-theme|="bleached"] .mgmt-rb-section-heading,
:root[data-agl-theme|="bleached"] .mgmt-modal-header h3,
:root[data-agl-theme|="bleached"] .mgmt-panel-title,
:root[data-agl-theme|="bleached"] .mgmt-upcoming-name,
:root[data-agl-theme|="bleached"] .mgmt-final-score,
:root[data-agl-theme|="bleached"] .mgmt-trade-chip-name,
:root[data-agl-theme|="bleached"] .mgmt-trade-target-display,
:root[data-agl-theme|="bleached"] .mgmt-autocomplete-option,
:root[data-agl-theme|="bleached"] .mgmt-tb-tab.is-active,
:root[data-agl-theme|="bleached"] .mgmt-section-tab.is-active,
:root[data-agl-theme|="bleached"] .mgmt-msg-from,
:root[data-agl-theme|="bleached"] .mgmt-broadcast-title,
:root[data-agl-theme|="bleached"] .mgmt-roster-table td,
:root[data-agl-theme|="bleached"] .mgmt-targets-table td,
:root[data-agl-theme|="bleached"] .mgmt-panel-player,
:root[data-agl-theme|="bleached"] .mgmt-compliance-card,
:root[data-agl-theme|="bleached"] .mgmt-tab-panel,
:root[data-agl-theme|="bleached"] .mgmt-form-select,
:root[data-agl-theme|="bleached"] .mgmt-form-input,
:root[data-agl-theme|="bleached"] .mgmt-server-select,
:root[data-agl-theme|="bleached"] .mgmt-rb-search-input,
:root[data-agl-theme|="bleached"] .mgmt-upload-toi-input,
:root[data-agl-theme|="bleached"] .mgmt-final-boxscore-btn {
  color: var(--text);
}
/* Hub golds/ambers deepen to the readable amber used elsewhere. */
:root[data-agl-theme|="bleached"] .mgmt-pending-header h3,
:root[data-agl-theme|="bleached"] .mgmt-pending-badge,
:root[data-agl-theme|="bleached"] .mgmt-availability-badge.is-ir,
:root[data-agl-theme|="bleached"] .mgmt-upload-review-note {
  color: #8a6a10;
}
/* Hub OVR badges: same look as the box-score rating pills — rounded pill,
   tier-tinted fill, dark tier-colored number. */
:root[data-agl-theme|="bleached"] .mgmt-ovr-badge {
  border-radius: 999px;
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .mgmt-ovr-high { color: #0c6b3d; }
:root[data-agl-theme|="bleached"] .mgmt-ovr-mid  { color: #8a6a10; }
:root[data-agl-theme|="bleached"] .mgmt-ovr-low  { color: #a3132a; }

/* Gold time/score accents are unreadable on light — go navy: member hub
   schedule times, teams-page scheduled game times, and the OVR chart's
   latest-value readout (inline-styled gold, hence the !important). */
:root[data-agl-theme|="bleached"] .sched-time {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .team-cal-game-row.is-scheduled .team-cal-game-result {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .plr-ovr-latest {
  color: var(--text) !important;
}
:root[data-agl-theme|="bleached"] .player-stat-tile strong,
:root[data-agl-theme|="bleached"] .player-card-page .player-stat-tile strong,
:root[data-agl-theme|="bleached"] .player-stat-board-featured .player-stat-tile strong {
  text-shadow: none;
}
/* Transaction pills: the pale pastel text colors deepen so they read on the
   white feed (their tinted chip backgrounds stay). */
:root[data-agl-theme|="bleached"] .txn-badge-sign { color: #0c6b3d; }
:root[data-agl-theme|="bleached"] .txn-badge-release { color: #a01830; }
:root[data-agl-theme|="bleached"] .txn-badge-trade-denial { color: #9c3616; }
/* Buttons/badges/links that hardcode white or pale text over light surfaces
   go navy; solid-accent buttons keep white text on their navy fills. */
:root[data-agl-theme|="bleached"] .button,
:root[data-agl-theme|="bleached"] .member-class-badge,
:root[data-agl-theme|="bleached"] .socials-add-btn,
:root[data-agl-theme|="bleached"] .mgmt-login-title {
  color: var(--text);
}
:root[data-agl-theme|="bleached"] .button.primary,
:root[data-agl-theme|="bleached"] .mgmt-login-btn,
:root[data-agl-theme|="bleached"] .member-discord-login-btn {
  color: #ffffff;
}
:root[data-agl-theme|="bleached"] .member-login-forgot a,
:root[data-agl-theme|="bleached"] .member-login-apply a {
  color: var(--link-blue);
}
/* Native select popups: white sheet, navy text (the dark-theme option rules
   hardcode dark fills that would ghost the text on this theme). */
:root[data-agl-theme|="bleached"] select option {
  background: #ffffff;
  color: var(--text);
}

/* ── Player card styles (donor perk — Loyalist only, public pages) ──
   player.js adds card-theme-<slug> to .player-identity-card from the public
   api/member-class.php payload. Re-tints the card's border, halo, and inner
   glow; slugs must match member_card_themes() in api/member-roles-lib.php. */
/* player.js puts card-theme-<slug> on the .player-showcase wrapper (falling
   back to the identity card on views without one), so both selector shapes are
   supported and the accent variables inherit to everything inside. */
.player-identity-card[class*="card-theme-"],
[class*="card-theme-"] .player-identity-card {
  border-color: var(--card-accent-border, rgba(var(--blue-soft-rgb), 0.28));
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.46)),
    radial-gradient(circle at 50% 20%, var(--card-accent-halo, rgba(var(--blue-soft-rgb), 0.22)), transparent 12rem),
    rgba(var(--surface-deep-rgb), 0.9);
  box-shadow: inset 0 0 38px var(--card-accent-inset, rgba(var(--blue-soft-rgb), 0.08));
}

/* The showcase's backdrop radials re-tint to the chosen accent. (The stat
   board + tile tinting lives further down, AFTER the featured-board glass
   styles it must out-cascade — see "Card style: featured stat board".) */
.player-showcase-featured[class*="card-theme-"]::before,
[class*="card-theme-"] .player-showcase-featured::before {
  background:
    radial-gradient(circle at 18% 20%, var(--card-accent-halo, rgba(var(--blue-soft-rgb), 0.22)), transparent 34%),
    radial-gradient(circle at 80% 12%, var(--card-accent-inset, rgba(255, 214, 74, 0.14)), transparent 30%),
    linear-gradient(135deg, rgba(var(--surface-mid-rgb), 0.95), rgba(var(--surface-deep-rgb), 0.96));
}

/* --card-accent-rgb feeds the alpha-based tints on the stat board + tiles;
   --card-accent-text is the tile-label color (a pale tint of the accent that
   stays readable on the dark glass tiles).
   The 'team' Card Style has no block here on purpose: player.js sets the same
   variables inline on the themed host from the player's current team's colors
   (primary = accent, primary -> secondary = the tile gradient). */
.card-theme-crimson { --card-accent-rgb: 225, 29, 72;   --card-accent-text: rgba(255, 205, 215, 0.92); --card-accent-border: rgba(225, 29, 72, 0.65);  --card-accent-halo: rgba(225, 29, 72, 0.3);   --card-accent-inset: rgba(225, 29, 72, 0.16);  --card-accent-tile-a: #be123c; --card-accent-tile-b: #fb7185; }
.card-theme-ember   { --card-accent-rgb: 234, 88, 12;   --card-accent-text: rgba(255, 216, 190, 0.92); --card-accent-border: rgba(234, 88, 12, 0.65);  --card-accent-halo: rgba(234, 88, 12, 0.3);   --card-accent-inset: rgba(234, 88, 12, 0.16);  --card-accent-tile-a: #c2410c; --card-accent-tile-b: #fb923c; }
.card-theme-gold    { --card-accent-rgb: 239, 200, 74;  --card-accent-text: rgba(250, 235, 190, 0.92); --card-accent-border: rgba(239, 200, 74, 0.6);  --card-accent-halo: rgba(239, 200, 74, 0.26); --card-accent-inset: rgba(239, 200, 74, 0.16); --card-accent-tile-a: #a16207; --card-accent-tile-b: #efc84a; }
.card-theme-emerald { --card-accent-rgb: 5, 150, 105;   --card-accent-text: rgba(190, 245, 225, 0.92); --card-accent-border: rgba(5, 150, 105, 0.65);  --card-accent-halo: rgba(5, 150, 105, 0.3);   --card-accent-inset: rgba(5, 150, 105, 0.16);  --card-accent-tile-a: #047857; --card-accent-tile-b: #34d399; }
.card-theme-violet  { --card-accent-rgb: 124, 58, 237;  --card-accent-text: rgba(220, 205, 255, 0.92); --card-accent-border: rgba(124, 58, 237, 0.65); --card-accent-halo: rgba(124, 58, 237, 0.32); --card-accent-inset: rgba(124, 58, 237, 0.18); --card-accent-tile-a: #6d28d9; --card-accent-tile-b: #a78bfa; }
.card-theme-ice     { --card-accent-rgb: 34, 211, 238;  --card-accent-text: rgba(195, 240, 252, 0.92); --card-accent-border: rgba(var(--accent-bright-rgb), 0.6);  --card-accent-halo: rgba(var(--accent-bright-rgb), 0.26); --card-accent-inset: rgba(var(--accent-bright-rgb), 0.16); --card-accent-tile-a: #0e7490; --card-accent-tile-b: #22d3ee; }

/* Card Animation: animated canvases mounted by player.js into the dark stat
   containers (stat board, profile panels, game log) — never the identity card
   art. player.js puts card-anim-<slug> on the same host as the card-theme
   class; the color comes from the active Card Style's --card-accent-rgb. Each
   host gets position + isolation so the negative z-index canvas paints above
   the host's own background but below all of the in-flow content (tiles,
   headings, tables). border-radius: inherit keeps the glow clipped to the
   panel's rounded corners. Every animation slug shares this scaffolding, so a
   new one only needs its selector added to the list below. */
.card-anim-embers .player-stat-board-featured,
.card-anim-embers .player-profile-extra-card,
.card-anim-embers .player-season-panel,
.card-anim-deep_water .player-stat-board-featured,
.card-anim-deep_water .player-profile-extra-card,
.card-anim-deep_water .player-season-panel {
  position: relative;
  isolation: isolate;
}

.player-ember-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

/* Members dashboard — tagline control */
.plr-tagline {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}
.plr-tagline-hd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.plr-tagline-perk {
  font-size: 0.6rem;
  padding: 0.1rem 0.45rem;
}
.plr-tagline-select { width: 100%; }
.plr-tagline-custom { margin-top: 0.5rem; }
.plr-tagline-custom input {
  width: 100%;
  background: rgba(var(--surface-deep-rgb), 0.6);
  border: 1px solid rgba(var(--line-rgb), 0.25);
  border-radius: 8px;
  color: var(--text);
  padding: 0.5rem 0.65rem;
  font-size: 0.9rem;
}
.plr-tagline-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.plr-tagline-status { font-size: 0.78rem; }
.plr-tagline-note {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--orange);
}
.plr-tagline-hint {
  margin: 0.45rem 0 0;
  font-size: 0.74rem;
  color: var(--muted);
}

/* ── Site Customization panel (member hub) ──
   Spans the full width under Socials/Account; the three perk controls sit in
   equal columns (auto-fit, so two visible controls still fill the row) and
   stack on mobile. Inside it, the controls drop the divider styling they had
   when they lived at the bottom of the Account panel. */
.plr-customization-panel {
  grid-column: 1 / -1;
}
.plr-customization-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
}
.plr-customization-body .plr-tagline {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Member hub hero name → player card link. Only styled when an href exists
   (i.e. a player is linked); otherwise it reads as plain text like before.
   Underline instead of a color swap so it stays legible on any team-colored
   hero gradient. */
a.plr-hero-name[href] {
  text-decoration: none;
  cursor: pointer;
}
a.plr-hero-name[href]:hover,
a.plr-hero-name[href]:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 2px;
}

/* Admin Members tool — tagline review */
.admin-member-tagline {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.admin-tagline-live { color: var(--text); font-style: italic; }
.admin-tagline-none { color: var(--muted); }
.admin-tagline-pending {
  margin-top: 0.4rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(251, 146, 60, 0.5);
  background: rgba(251, 146, 60, 0.12);
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  color: var(--text);
}
.admin-tagline-pending-label { color: #fdba74; font-weight: 700; }
.admin-member-tagline .button { padding: 0.2rem 0.6rem; font-size: 0.75rem; }
.admin-tagline-approve {
  background: rgba(38, 214, 124, 0.18);
  border-color: rgba(38, 214, 124, 0.5);
}

.league-streams-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.league-streams-empty {
  margin: 0;
  padding: 0.6rem 0;
  color: rgba(var(--fg-rgb), 0.4);
  font-size: 0.82rem;
}
.league-stream-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.06);
  color: inherit;
  text-decoration: none;
  transition: background 140ms ease;
}

.league-stream-link {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.league-stream-toggle-btn,
.league-stream-admin-controls button {
  flex-shrink: 0;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(var(--fg-rgb), 0.25);
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.06);
  color: rgba(var(--fg-rgb), 0.75);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.league-stream-toggle-btn:hover,
.league-stream-admin-controls button:hover:not(:disabled) {
  background: rgba(255, 96, 96, 0.14);
  border-color: rgba(255, 96, 96, 0.5);
  color: #ff9d9d;
}

.league-stream-admin-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.league-stream-admin-controls select {
  flex: 1;
  min-width: 0;
  min-height: 32px;
  border: 1px solid rgba(var(--fg-rgb), 0.15);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  padding: 0 0.5rem;
}

.league-stream-admin-controls button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.league-stream-admin-status {
  flex-shrink: 0;
  color: rgba(var(--fg-rgb), 0.55);
  font-size: 0.72rem;
  font-weight: 700;
}

.league-stream-admin-status.is-error {
  color: #ff9d9d;
}
.league-stream-row:last-child {
  border-bottom: none;
}
.league-stream-row:hover {
  background: rgba(var(--fg-rgb), 0.05);
}
.league-stream-team {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 180px;
  color: rgba(var(--fg-rgb), 0.55);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.league-stream-team-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}
.league-stream-player {
  flex: 1;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
}
.league-stream-pill {
  flex-shrink: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.league-stream-pill.is-streaming-twitch {
  color: #9146FF;
  background: rgba(145, 70, 255, 0.1);
  border: 1px solid rgba(145, 70, 255, 0.5);
}
.league-stream-pill.is-streaming-youtube {
  color: #FF0000;
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.5);
}
.league-stream-pill.is-streaming-kick {
  color: #53FC18;
  background: rgba(83, 252, 24, 0.1);
  border: 1px solid rgba(83, 252, 24, 0.5);
}
@media (max-width: 600px) {
  .league-stream-team {
    min-width: 0;
  }
}

.admin-card-grid article {
  min-height: 150px;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 8px;
  background: rgba(var(--surface-deep-rgb), 0.72);
}

.admin-card-grid h3 {
  margin: 0 0 0.4rem;
  color: #ffffff;
  font-size: 1rem;
}

.admin-card-grid p,
.admin-locked p {
  color: var(--muted);
}

.admin-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.admin-tool-stack {
  display: grid;
  gap: 1rem;
}

.admin-tool-grid.two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-tool-groups {
  display: grid;
  gap: 1rem;
}

.admin-page-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 1rem;
  padding: 0.45rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.admin-subheader {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: -0.25rem -0.25rem 1rem;
  border-radius: 0;
  background: rgba(var(--surface-panel-rgb), 0.94);
  backdrop-filter: blur(14px);
}

.admin-page-tabs button,
.admin-page-tabs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
  border-radius: 6px;
  background: rgba(var(--surface-panel-rgb), 0.72);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
}

.admin-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  margin-left: 0.4rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #ff4e4e;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1;
}

.admin-page-tabs button.is-active,
.admin-page-tabs a.is-active {
  border-color: rgba(var(--blue-soft-rgb), 0.62);
  background: rgba(var(--blue-soft-rgb), 0.16);
  color: #ffffff;
}

.admin-tool-page {
  display: none;
  gap: 1rem;
}

.admin-tool-page.is-active {
  display: grid;
}

.admin-tool-group {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.05), transparent 44%),
    rgba(3, 10, 20, 0.5);
}

.admin-tool-group-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
  padding-bottom: 0.75rem;
}

.admin-tool-group-heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.2rem;
}

.admin-tool-card {
  display: grid;
  align-content: start;
  min-height: 100%;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.08), transparent 48%),
    rgba(var(--surface-deep-rgb), 0.72);
}

.admin-tool-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: 1.15rem;
}

/* ── Stream Banner Override Widget ── */
.stream-banner-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.stream-banner-btn.is-active {
  border-color: rgba(var(--blue-soft-rgb), 0.7);
  color: #e2e8f0;
  box-shadow: 0 0 14px rgba(var(--blue-soft-rgb), 0.18);
}
.stream-banner-btn[data-stream-state="on"].is-active {
  border-color: rgba(34, 197, 94, 0.7);
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.2);
}
.stream-banner-btn[data-stream-state="off"].is-active {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.16);
}
.stream-day-btn {
  min-width: 3.2rem;
  position: relative;
}
.stream-day-btn.is-selected {
  border-color: rgba(var(--blue-soft-rgb), 0.7);
  color: #e2e8f0;
  box-shadow: 0 0 14px rgba(var(--blue-soft-rgb), 0.18);
}
.stream-day-btn.is-enabled::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.9);
}

.admin-card-link {
  display: grid;
  gap: 0.35rem;
  min-height: 140px;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.1), transparent 48%),
    rgba(var(--surface-deep-rgb), 0.72);
  color: inherit;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    transform 180ms ease,
    background 180ms ease;
}

.admin-card-link:hover {
  border-color: rgba(var(--blue-soft-rgb), 0.56);
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.16), transparent 48%),
    rgba(var(--surface-deep-rgb), 0.82);
  transform: translateY(-2px);
}

.admin-card-link strong {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-card-link small,
.admin-help-text {
  color: var(--muted);
  line-height: 1.5;
}

.admin-form {
  display: grid;
  /* minmax(0,1fr): stop wide children (long status paths, big selects) from
     inflating the whole form past the viewport on phones */
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.admin-color-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

/* ── Merge profile preview ── */
.merge-profile-preview {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: start;
  background: rgba(var(--fg-rgb),0.03);
  border: 1px solid rgba(var(--fg-rgb),0.08);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 0.25rem;
}

/* ── Free Agent / Waiver Sign Requests (Management Hub) ── */
.fa-request-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.fa-request-btn {
  font-size: 0.72rem;
  padding: 3px 10px;
  white-space: nowrap;
}

/* Pending Transactions "Player(s) Notified" button — compact on mobile so it
   doesn't crowd the STATUS / TIME LEFT columns. width:min-content wraps the
   label into stacked lines ("Player(s)" / "Notified"). Triple selector needed
   to out-specify .button.utility-button's base sizing. */
@media (max-width: 600px) {
  .button.utility-button.mgmt-notify-btn {
    font-size: 0.468rem;
    min-height: auto;
    padding: 4px 8px;
    white-space: normal;
    width: min-content;
    line-height: 1.25;
    text-align: center;
  }
}

.fa-claim-status {
  font-size: 0.7rem;
  opacity: 0.75;
  white-space: nowrap;
}

.fa-waiver-note {
  font-size: 0.68rem;
  color: var(--gold, #d4af37);
  opacity: 0.85;
  white-space: nowrap;
}

/* Contingent-drop claim outcome badges (Pending Transactions panel) */
.mgmt-pending-outcome {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.mgmt-pending-outcome-approved {
  background: rgba(80,220,120,0.16);
  color: #4ade80;
}

.mgmt-pending-outcome-denied {
  background: rgba(255,90,90,0.14);
  color: #f87171;
}

.mgmt-pending-outcome-warning {
  background: rgba(245,197,24,0.14);
  color: #f5c518;
}

/* ── Similar Name Audit ── */
.admin-name-audit-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.admin-name-audit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(var(--fg-rgb),0.03);
  border: 1px solid rgba(var(--fg-rgb),0.08);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.admin-name-audit-names {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.92rem;
}

/* "formerly known as" italic suffix on player names */
.player-aka {
  font-style: italic;
  opacity: 0.65;
  font-size: 0.88em;
  font-weight: normal;
  white-space: nowrap;
}

.merge-profile-arrow {
  font-size: 1.4rem;
  color: rgba(226,232,240,0.3);
  padding-top: 1.6rem;
  text-align: center;
}

.merge-profile-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.merge-profile-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(226,232,240,0.4);
  margin: 0;
}

.merge-profile-source .merge-profile-label { color: #fc8181; opacity: 0.8; }
.merge-profile-target .merge-profile-label { color: #68d391; opacity: 0.8; }

.merge-profile-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #e2e8f0;
  margin: 0 0 0.3rem;
}

.merge-profile-fields {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.merge-profile-fields > div {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}

.merge-profile-fields dt {
  font-size: 0.72rem;
  color: rgba(226,232,240,0.4);
  min-width: 6rem;
  flex-shrink: 0;
}

.merge-profile-fields dd {
  font-size: 0.82rem;
  color: #e2e8f0;
  margin: 0;
}

.merge-profile-fields dd.is-fallback {
  color: #f6ad55;
}

.merge-profile-fields dd.is-empty {
  color: rgba(226,232,240,0.25);
  font-style: italic;
}

.merge-profile-hint {
  margin-top: 0;
  color: #f6ad55;
}

.merge-profile-stats {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(var(--fg-rgb),0.07);
}

.merge-profile-stats-heading dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(226,232,240,0.4);
  min-width: unset;
}

.merge-profile-stats dd.is-loading {
  color: rgba(226,232,240,0.3);
  font-style: italic;
}

.current-logo-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
  border-radius: 8px;
  background: rgba(var(--surface-panel-rgb), 0.55);
}

.current-logo-panel h3 {
  margin: 0;
  color: #ffffff;
}

.current-logo-panel img {
  width: clamp(104px, 14vw, 172px);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 0.65rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
  border-radius: 8px;
  background: rgba(var(--surface-panel-rgb), 0.6);
}

.admin-form label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-form label[hidden] {
  display: none;
}

.admin-form input:not([type="radio"]):not([type="checkbox"]),
.admin-form select,
.admin-form textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  padding: 0 0.8rem;
  outline: 0;
}

/* Textareas were falling back to the UA default (near-black under the site's
   dark color-scheme) — matched to the inputs above; padding suits multi-line. */
.admin-form textarea {
  padding: 0.6rem 0.8rem;
}

.admin-form input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: unset;
  cursor: pointer;
  accent-color: var(--yellow, #f5c518);
}

.admin-form input[type="file"] {
  padding: 0.65rem 0.8rem;
}

.admin-form input:focus,
.admin-form select:focus {
  border-color: rgba(var(--blue-soft-rgb), 0.75);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.14);
}

.admin-form select option {
  background: rgb(var(--surface-panel-rgb));
  color: var(--text);
}

.admin-roster-list {
  display: grid;
  gap: 0.5rem;
  max-height: 220px;
  overflow: auto;
  padding: 0.45rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.18);
}

.admin-roster-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.55rem;
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.04);
}

.admin-roster-player span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-roster-player small {
  color: var(--directory-team-tertiary, var(--accent));
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-roster-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.4rem;
}

.admin-roster-actions .button {
  min-height: 32px;
  padding: 0.35rem 0.55rem;
  font-size: 0.66rem;
}

.admin-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.admin-list {
  display: grid;
  gap: 0.5rem;
  max-height: 340px;
  overflow: auto;
  margin-top: 0.9rem;
  padding: 0.45rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.18);
}

.admin-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.6rem;
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.04);
}

.admin-list-row span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.admin-list-row strong {
  overflow: hidden;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-list-row small {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.schedule-status-badge {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  margin-top: 0.15rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.schedule-status-badge.is-played {
  background: rgba(51, 255, 141, 0.12);
  border: 1px solid rgba(51, 255, 141, 0.44);
  color: #b8ffd3;
}

.schedule-status-badge.is-unplayed {
  background: rgba(255, 200, 80, 0.1);
  border: 1px solid rgba(255, 200, 80, 0.4);
  color: #ffe2a6;
}

.finalized-stats-card {
  margin-top: 1rem;
}

.finalized-stats-list {
  max-height: 420px;
}

.finalized-stats-row .admin-roster-actions {
  flex-shrink: 0;
}

.utility-button.is-success {
  border-color: rgba(51, 255, 141, 0.44);
  color: #b8ffd3;
}

.utility-button.is-warning {
  border-color: rgba(255, 78, 112, 0.44);
  color: #ffbac8;
}

.schedule-builder-form {
  gap: 1rem;
}

.schedule-event-picker {
  max-width: 420px;
}

.schedule-lines {
  display: grid;
  gap: 0.65rem;
}

.schedule-line {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(140px, 1.2fr) minmax(130px, 0.9fr) minmax(110px, 0.75fr) minmax(110px, 0.75fr) auto;
  gap: 0.65rem;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.schedule-line .button {
  min-height: 44px;
}

.schedule-generator-form {
  gap: 1rem;
}

.schedule-generator-controls {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) minmax(130px, 0.7fr) minmax(150px, 0.8fr);
  gap: 0.75rem;
  align-items: end;
}

.schedule-generator-nights {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 0.9rem;
  align-items: center;
  margin: 0;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.schedule-generator-nights legend {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fb4cc;
  padding: 0 0.35rem;
}

.schedule-generator-nights label {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  font-size: 0.85rem;
  white-space: nowrap;
}

.schedule-generator-actions {
  flex-wrap: wrap;
}

.schedule-generator-actions .schedule-generator-delete {
  border-color: rgba(255, 78, 112, 0.44);
  color: #ffbac8;
}

.schedule-generator-actions .is-active {
  border-color: rgba(255, 196, 87, 0.55);
  color: #ffd98c;
}

.schedule-generator-preview {
  display: grid;
  gap: 0.9rem;
  margin-top: 0.9rem;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 0.35rem;
}

.schedule-generator-night {
  border: 1px solid rgba(var(--accent-strong-rgb), 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
  padding: 0.75rem;
  display: grid;
  gap: 0.45rem;
}

.schedule-generator-night h4 {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pale-blue);
}

.schedule-generator-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.6fr) minmax(150px, 1.4fr) minmax(80px, 0.6fr);
  gap: 0.65rem;
  align-items: center;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(var(--fg-rgb), 0.06);
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.02);
}

.schedule-generator-row.is-editing {
  grid-template-columns: minmax(100px, 0.7fr) minmax(90px, 0.9fr) auto minmax(90px, 0.9fr) minmax(130px, 0.9fr) minmax(70px, 0.5fr) auto;
}

.schedule-generator-time {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: #9fb4cc;
}

.schedule-generator-at {
  font-size: 0.8rem;
  color: #9fb4cc;
  text-align: center;
}

.schedule-generator-code {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: #7f93ab;
}

.schedule-generator-reports {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.4fr);
  gap: 1rem;
  margin-top: 1.1rem;
  align-items: start;
}

.schedule-generator-report h4 {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pale-blue);
}

.schedule-generator-report {
  overflow-x: auto;
}

.schedule-generator-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.schedule-generator-table th,
.schedule-generator-table td {
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.12);
  text-align: center;
}

.schedule-generator-table thead th {
  background: rgba(var(--accent-strong-rgb), 0.08);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9fb4cc;
}

.schedule-generator-table tbody th {
  background: rgba(var(--accent-strong-rgb), 0.05);
  color: #cfe2f7;
}

.schedule-generator-matrix td.is-diagonal {
  color: #55657a;
  background: rgba(var(--fg-rgb), 0.02);
}

.schedule-generator-badge {
  margin-left: 0.5rem;
}

.schedule-generator-row-badges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.schedule-generator-row-badges .schedule-generator-badge {
  margin-left: 0;
}

@media (max-width: 900px) {
  .schedule-generator-controls {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .schedule-generator-reports {
    grid-template-columns: 1fr;
  }

  .schedule-generator-row {
    grid-template-columns: minmax(70px, auto) 1fr minmax(60px, auto);
  }

  .schedule-generator-row.is-editing {
    grid-template-columns: 1fr 1fr;
  }
}

.game-stats-form {
  gap: 1.2rem;
}

.compact-heading {
  margin-top: 0.25rem;
}

.game-total-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 0.75rem;
}

.forfeit-team-select {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-width: 220px;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(239,68,68,.35);
  border-radius: 7px;
  background: rgba(239,68,68,.05);
}
.forfeit-team-select[hidden] {
  display: none;
}

.result-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.result-type-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.25);
  border-radius: 7px;
  background: rgba(var(--surface-panel-rgb), 0.42);
}
.result-type-group-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: #9fb3c8;
  white-space: nowrap;
}
.required-mark {
  color: #f87171;
}
.result-type-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.result-type-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
}
.result-type-option.forfeit-option {
  color: #f87171;
}
.stat-entry-scroll {
  display: grid;
  gap: 0.7rem;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.game-stat-stack {
  display: grid;
  gap: 1.25rem;
  margin: 0.5rem 0 1rem;
}

.team-stat-section {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.16);
  border-radius: 8px;
  background: rgba(var(--surface-panel-rgb), 0.42);
}

.game-stat-divider {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--blue-soft-rgb), 0.08), rgba(var(--blue-soft-rgb), 0.9), rgba(255, 78, 112, 0.7), rgba(var(--blue-soft-rgb), 0.08));
  box-shadow: 0 0 26px rgba(var(--blue-soft-rgb), 0.18);
}

.goalie-row-block {
  padding-top: 0.25rem;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.stat-entry-row {
  display: grid;
  grid-template-columns: 280px 112px;
  grid-auto-columns: 84px;
  grid-auto-flow: column;
  gap: 0.4rem;
  min-width: max-content;
  padding: 0.55rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.14);
  border-radius: 8px;
  background: rgba(var(--surface-panel-rgb), 0.5);
}

.stat-entry-row label {
  min-width: 0;
  font-size: 0.936rem;
}

.stat-entry-row label span {
  display: block;
  text-align: center;
}

.stat-entry-row label:first-child {
  min-width: 0;
}

.stat-entry-row label:first-child select,
.stat-entry-row label:first-child input {
  min-width: 0;
  text-align: left;
}

.stat-entry-row label:nth-child(2) {
  min-width: 0;
}

.stat-entry-row label:nth-child(2) select,
.stat-entry-row label:nth-child(2) input {
  min-width: 0;
}

.stat-entry-field-player {
  width: 280px;
}

.stat-entry-field-position {
  width: 112px;
}

.stat-entry-field:not(.stat-entry-field-player):not(.stat-entry-field-position) {
  width: 84px;
}

.stat-entry-row .button {
  align-self: end;
  min-height: 44px;
}

.stat-entry-row select,
.stat-entry-row input {
  min-height: 38px;
  padding-inline: 0.5rem;
  text-align: center;
}

.stat-entry-row input[readonly] {
  background: rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.14);
  border-color: rgba(var(--blue-soft-rgb), 0.28);
  color: #ffffff;
}

.stat-entry-row.position-row-lw {
  background: linear-gradient(90deg, rgba(42, 216, 114, 0.2), rgba(var(--surface-panel-rgb), 0.5) 58%);
  border-color: rgba(42, 216, 114, 0.36);
}

.stat-entry-row.position-row-c {
  background: linear-gradient(90deg, rgba(255, 63, 95, 0.2), rgba(var(--surface-panel-rgb), 0.5) 58%);
  border-color: rgba(255, 63, 95, 0.36);
}

.stat-entry-row.position-row-rw {
  background: linear-gradient(90deg, rgba(45, 150, 255, 0.2), rgba(var(--surface-panel-rgb), 0.5) 58%);
  border-color: rgba(45, 150, 255, 0.36);
}

.stat-entry-row.position-row-ld {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.2), rgba(var(--surface-panel-rgb), 0.5) 58%);
  border-color: rgba(0, 229, 255, 0.36);
}

.stat-entry-row.position-row-rd {
  background: linear-gradient(90deg, rgba(255, 211, 67, 0.22), rgba(var(--surface-panel-rgb), 0.5) 58%);
  border-color: rgba(255, 211, 67, 0.42);
}

.stat-entry-row.position-row-g {
  background: linear-gradient(90deg, rgba(159, 86, 255, 0.24), rgba(var(--surface-panel-rgb), 0.5) 58%);
  border-color: rgba(159, 86, 255, 0.42);
}

/* Position-colored optgroup headers in player select dropdowns */
.stat-entry-row select optgroup[label="LW"] { background-color: #0a1f12; color: #2ad872; }
.stat-entry-row select optgroup[label="C"]  { background-color: #200d12; color: #ff3f5f; }
.stat-entry-row select optgroup[label="RW"] { background-color: rgb(var(--surface-mid-rgb)); color: #2d96ff; }
.stat-entry-row select optgroup[label="LD"] { background-color: #051e24; color: #00e5ff; }
.stat-entry-row select optgroup[label="RD"] { background-color: #221b05; color: #ffd343; }
.stat-entry-row select optgroup[label="G"]  { background-color: #140d22; color: #9f56ff; }
.stat-entry-row select optgroup[label="Other"] { background-color: #111827; color: #94a3b8; }

/* Hidden auto-computed columns — P and SOG not shown in entry UI */
.stat-entry-field-P,
.stat-entry-field-SOG { display: none; }

.brand-mark {
  width: 116px;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.75rem, 2.2vw, 2.1rem);
  color: #d9e7f7;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

/* Desktop only: left-align the nav links right after the logo instead of
   centering them in the wide middle grid column, so they don't drift away
   from Sign In/Up, Hub, Admin, and the profile icon (all right-anchored via
   .header-button-group's own absolute positioning). Mobile's stacked menu
   keeps the base centered rule (there it's a vertical, not horizontal, axis). */
@media (min-width: 981px) {
  .site-nav {
    justify-content: flex-start;
  }
}

.site-nav a {
  position: relative;
  padding: 1.1rem 0;
  text-decoration: none;
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% - 0.2rem);
  left: 50%;
  z-index: 20;
  min-width: 172px;
  padding: 0.45rem;
  border: 1px solid rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.42);
  border-radius: 8px;
  background: rgba(3, 8, 16, 0.96);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35), 0 0 28px rgba(var(--accent-bright-rgb), 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.4rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.site-nav .nav-dropdown-menu a {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  color: #d9e7f7;
  white-space: nowrap;
}

.site-nav .nav-dropdown-menu a:hover,
.site-nav .nav-dropdown-menu a:focus {
  background: rgba(var(--accent-bright-rgb), 0.12);
  color: white;
}

.nav-subdropdown {
  position: relative;
}

.nav-subdropdown-menu {
  position: absolute;
  top: 0;
  left: calc(100% + 0.3rem);
  z-index: 25;
  min-width: 210px;
  max-height: 320px;
  overflow: auto;
  padding: 0.45rem;
  border: 1px solid rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.42);
  border-radius: 8px;
  background: rgba(3, 8, 16, 0.98);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35), 0 0 28px rgba(var(--accent-bright-rgb), 0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateX(0.35rem);
  transition: opacity 160ms ease, transform 160ms ease;
}

.nav-subdropdown:hover .nav-subdropdown-menu,
.nav-subdropdown:focus-within .nav-subdropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  height: 2px;
  background: var(--blue-soft);
  box-shadow: 0 0 16px var(--blue-soft);
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a.is-active::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-link,
.signin-link {
  text-decoration: none;
}

.admin-link {
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.7);
  border-radius: 6px;
  background: rgba(var(--surface-mid-rgb), 0.8);
}

.signin-link {
  color: #d9d0ff;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.04);
  color: var(--text);
  padding: 0.55rem;
}

.nav-toggle span {
  display: block;
  height: 2px;
  margin: 5px 0;
  background: currentColor;
}

.page-shell {
  width: min(1500px, calc(100% - 1rem));
  margin: 0 auto;
  border-inline: 1px solid var(--line);
  background: rgba(var(--surface-deep-rgb), 0.38);
}

.admin-page-shell,
.site-header.admin-page-shell,
.site-footer.admin-page-shell {
  width: min(1900px, calc(100% - 0.5rem));
}

@media (min-width: 621px) {
  body.page-stats .site-header,
  body.page-stats .page-shell,
  body.page-stats .site-footer,
  body.page-transactions .site-header,
  body.page-transactions .page-shell,
  body.page-transactions .site-footer,
  body.page-wide .site-header,
  body.page-wide .page-shell,
  body.page-wide .site-footer {
    width: min(1975px, calc(100% - 0.25rem));
  }

  /* .news-ticker's base width was pinned to the pre-page-wide 1500px cap.
     On the teams page (body.page-wide) the panels stretch out to 1975px,
     which left the ticker visibly narrower than everything underneath. */
  body.page-stats .news-ticker,
  body.page-transactions .news-ticker,
  body.page-wide .news-ticker {
    width: min(1975px, calc(100% - 0.25rem));
  }
}

@media (min-width: 621px) {
  body.page-members .site-header,
  body.page-members .page-shell,
  body.page-members .site-footer {
    width: min(1900px, calc(100% - 1rem));
  }
}

body.page-members .member-dashboard {
  max-width: none;
}

@media (min-width: 761px) {
  body.page-stats .schedule-hero-minimal > div,
  body.page-transactions .schedule-hero-minimal > div,
  body.page-wide .schedule-hero-minimal > div {
    width: min(1400px, 100%);
    max-width: 1400px;
    padding: 2.3rem 2rem 2.4rem;
  }

  body.page-stats .schedule-hero-minimal h1,
  body.page-transactions .schedule-hero-minimal h1,
  body.page-wide .schedule-hero-minimal h1 {
    font-size: clamp(2.8rem, 14vw, 7.6rem);
  }
}

.hero {
  position: relative;
  min-height: 420px;
  /* Height tracks the background video's 16:9 shape (56.25vw) so the frame is
     never clipped, capped for ultrawide screens (video is 720p) and short
     viewports — there object-fit: contain letterboxes the sides instead.
     Sized via height, NOT aspect-ratio + max-height: that combination
     transfers the height cap into the width and shrinks the hero box. */
  height: min(56.25vw, 720px, 78vh);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: clamp(3.2rem, 7vw, 5.5rem) 1rem 2.4rem;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(var(--surface-deep-rgb), 0.08), rgba(var(--surface-deep-rgb), 0.96)),
    radial-gradient(ellipse at 50% 18%, rgba(var(--blue-soft-rgb), 0.26), transparent 26rem),
    radial-gradient(ellipse at 20% 20%, rgba(255, 48, 72, 0.22), transparent 21rem);
}

/* Looping background video sits at z-index 0; the decorative ::before/::after
   layers ride above it at 1, and .hero-content above those at 2. The hero's
   gradient background remains visible until the first frame decodes (and is
   the full fallback if the video fails to load). */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(var(--surface-deep-rgb), 0.12),
    rgba(var(--surface-deep-rgb), 0.2) 55%,
    rgba(var(--surface-deep-rgb), 0.85)
  );
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Diagonal streaks flanking the hero logo — 23% stops center the pair on
       the logo at desktop widths (the old 18%/28% sat visibly left-heavy). */
    linear-gradient(115deg, transparent 0 23%, rgba(var(--fg-rgb), 0.12) 23.1%, transparent 23.7%),
    linear-gradient(245deg, transparent 0 23%, rgba(var(--blue-soft-rgb), 0.18) 23.1%, transparent 24%),
    repeating-linear-gradient(0deg, rgba(var(--fg-rgb), 0.05) 0 1px, transparent 1px 82px);
  opacity: 0.7;
  transition: opacity 0.6s ease;
}

/* The neon streak/rink-line decorations follow the logo state: visible in
   Position 1, faded out in Position 2 so the video plays over a clean frame. */
.hero.logo-position-2::before,
.hero.logo-position-2::after {
  opacity: 0;
}

.hero::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 46%;
  z-index: 1;
  border: 1px solid rgba(120, 190, 255, 0.2);
  border-bottom: 0;
  transform: perspective(600px) rotateX(60deg);
  transform-origin: bottom;
  transition: opacity 0.6s ease;
  background:
    linear-gradient(90deg, transparent 0 49.6%, rgba(255, 48, 72, 0.38) 49.6% 50.4%, transparent 50.4%),
    radial-gradient(ellipse at center, rgba(var(--fg-rgb), 0.1), transparent 40%);
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(860px, 100%);
  text-align: center;
}

/* Hero logo positions: Position 1 (default) is the large centered logo below.
   Position 2 (.hero.logo-position-2) cross-fades it out and fades in the
   quarter-size top-right copy, so the background video's own content isn't
   covered. script.js toggles the class once the video starts playing. */
.hero-logo {
  width: min(480px, 82vw);
  margin: 0 auto 1rem;
  filter: drop-shadow(0 0 24px rgba(var(--fg-rgb), 0.18)) drop-shadow(0 22px 38px rgba(0, 0, 0, 0.78));
  transition: opacity 0.6s ease;
}

.hero-logo-corner {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: min(120px, 20.5vw);
  opacity: 0;
  filter: drop-shadow(0 0 24px rgba(var(--fg-rgb), 0.18)) drop-shadow(0 22px 38px rgba(0, 0, 0, 0.78));
  transition: opacity 0.6s ease;
  pointer-events: none;
}

.hero.logo-position-2 .hero-logo {
  opacity: 0;
}

.hero.logo-position-2 .hero-logo-corner {
  opacity: 1;
}

.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--cyan);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: 0.98;
  text-shadow: 0 0 24px rgba(var(--blue-soft-rgb), 0.28);
}

h2 {
  font-size: clamp(1.35rem, 2.4vw, 2.25rem);
  line-height: 1.08;
}

h3 {
  font-size: 1.28rem;
}

.hero-copy {
  max-width: 620px;
  margin: 0.75rem auto 0;
  color: #d7e4f3;
  font-size: 1rem;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

/* Without this, `hidden` on a .button element does nothing — the class's own
   display:inline-flex (author origin) always beats the browser's default
   [hidden]{display:none} (user-agent origin), regardless of specificity,
   since origin outranks specificity in the cascade. Any button toggled via
   .hidden = true/false in JS relies on this. */
.button[hidden] {
  display: none;
}

.button.primary {
  background: linear-gradient(180deg, #1178ff, #0754df);
  color: white;
  box-shadow: 0 0 22px rgba(var(--blue-rgb), 0.56);
}

.button.secondary {
  border-color: rgba(191, 104, 255, 0.7);
  background: linear-gradient(180deg, rgba(137, 40, 255, 0.88), rgba(77, 26, 151, 0.9));
  color: white;
  box-shadow: 0 0 20px rgba(137, 40, 255, 0.36);
}

.button.utility-button {
  min-height: 38px;
  padding: 0.55rem 0.85rem;
  border-color: rgba(var(--accent-strong-rgb), 0.7);
  background: rgba(var(--surface-mid-rgb), 0.8);
  color: white;
  font-size: 0.78rem;
  box-shadow: none;
}

.button.utility-button:hover {
  box-shadow: 0 0 20px rgba(var(--blue-rgb), 0.28);
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
  background: rgba(var(--surface-deep-rgb), 0.92);
}

.stat-strip article {
  min-height: 92px;
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  border-right: 1px solid var(--line);
}

.stat-strip article:last-child {
  border-right: 0;
}

.stat-strip strong {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(1.35rem, 2.5vw, 2.4rem);
  line-height: 0.95;
}

.countdown strong {
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 0.9;
}

.stat-strip span,
.countdown span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.news-ticker {
  position: relative;
  z-index: 90;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  width: min(1500px, calc(100% - 1rem));
  margin: 0 auto;
  min-height: 92px;
  border-inline: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(var(--blue-soft-rgb), 0.16), rgba(128, 39, 255, 0.09), transparent),
    rgba(var(--surface-deep-rgb), 0.96);
  overflow: visible;
}


.news-ticker .ticker-label {
  display: none;
}

.ticker-label {
  align-self: stretch;
  display: grid;
  place-items: center;
  padding: 0 0.86rem;
  background: linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.95), rgba(0, 88, 210, 0.9));
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 12px 0 28px rgba(var(--blue-soft-rgb), 0.16);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.ticker-toggle {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 36px;
  padding: 0 0.5rem;
  border: 0;
  border-right: 1px solid rgba(var(--accent-strong-rgb), 0.24);
  background: rgba(var(--surface-panel-rgb), 0.82);
  color: var(--text-soft);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.ticker-toggle:hover,
.ticker-toggle:focus-visible,
.ticker-toggle[aria-pressed="true"] {
  background: rgba(var(--blue-soft-rgb), 0.14);
  color: #ffffff;
  box-shadow: inset 0 0 18px rgba(var(--blue-soft-rgb), 0.14);
}

.ticker-window {
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}

.ticker-window.is-dragging {
  cursor: grabbing;
}

.ticker-filter {
  position: relative;
  z-index: 240;
  align-self: stretch;
  display: grid;
  place-items: center;
  border-left: 1px solid rgba(var(--accent-strong-rgb), 0.24);
  background: rgba(var(--surface-panel-rgb), 0.84);
}

.ticker-filter-toggle {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 42px;
  padding: 0 0.62rem;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: 1rem;
  font-weight: 950;
  cursor: pointer;
  transition:
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.ticker-filter-toggle:hover,
.ticker-filter-toggle:focus-visible,
.ticker-filter-toggle[aria-expanded="true"] {
  background: rgba(var(--blue-soft-rgb), 0.14);
  color: #ffffff;
  box-shadow: inset 0 0 18px rgba(var(--blue-soft-rgb), 0.14);
}

.ticker-filter-panel {
  position: absolute;
  right: 0.45rem;
  top: calc(100% + 0.48rem);
  z-index: 300;
  min-width: 220px;
  padding: 0.72rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.54);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(10, 20, 34, 0.98), rgba(var(--surface-deep-rgb), 0.98)),
    rgba(var(--surface-deep-rgb), 0.98);
  box-shadow:
    0 0 0 1px rgba(100, 195, 255, 0.1) inset,
    0 18px 36px rgba(0, 0, 0, 0.42);
  pointer-events: auto;
}

.ticker-filter-panel[hidden] {
  display: none;
}

.ticker-filter-panel label {
  display: block;
  margin-bottom: 0.42rem;
  color: rgba(var(--text-soft-rgb), 0.72);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ticker-filter-panel select {
  width: 100%;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.42);
  border-radius: 10px;
  background: rgba(1, 8, 17, 0.96);
  color: #ffffff;
  padding: 0.55rem 0.62rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 850;
  outline: none;
}

.ticker-filter-panel select:focus {
  border-color: rgba(var(--blue-soft-rgb), 0.78);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.12);
}

.ticker-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 0.78rem;
  min-height: 92px;
  padding-left: 0.88rem;
  will-change: transform;
}

.ticker-track > span,
.ticker-loading {
  position: relative;
  color: var(--text-soft);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker-game-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(175px, 1fr) minmax(76px, auto);
  align-items: center;
  width: clamp(285px, 25vw, 355px);
  min-height: 70px;
  padding: 0.54rem 0.6rem 0.54rem 0.68rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.68);
  border-radius: 18px;
  background:
    radial-gradient(circle at 16% 22%, rgba(var(--accent-strong-rgb), 0.16), transparent 35%),
    linear-gradient(100deg, rgba(30, 38, 48, 0.95), rgba(var(--surface-deep-rgb), 0.97) 58%, rgba(14, 21, 31, 0.93));
  box-shadow:
    0 0 0 1px rgba(100, 195, 255, 0.12) inset,
    0 0 18px rgba(35, 144, 220, 0.18),
    0 12px 22px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.ticker-game-card.is-final {
  width: clamp(310px, 27vw, 390px);
  border-color: rgba(178, 194, 210, 0.62);
}

.ticker-team-stack {
  display: grid;
  gap: 0.28rem;
  min-width: 0;
}

.ticker-team-row {
  display: grid;
  grid-template-columns: 38px minmax(58px, auto) minmax(46px, 1fr);
  align-items: center;
  gap: 0.40rem;
  min-width: 0;
}

.ticker-game-card.is-final .ticker-team-row {
  grid-template-columns: 38px minmax(56px, auto) minmax(46px, 1fr) minmax(28px, auto);
}

.ticker-team-logo {
  width: 38px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
}

.ticker-team-abbr {
  color: #ffffff;
  font-size: clamp(1.04rem, 1.45vw, 1.55rem);
  font-weight: 950;
  letter-spacing: 0.03em;
  line-height: 0.95;
}

.ticker-team-meta {
  justify-self: end;
  color: #c5ceda;
  font-size: clamp(0.72rem, 0.92vw, 0.98rem);
  font-weight: 900;
  line-height: 1;
}

.ticker-team-score {
  justify-self: end;
  min-width: 1.2em;
  color: #f8dc66;
  font-size: clamp(1.40rem, 2.03vw, 2.05rem);
  font-weight: 950;
  line-height: 0.95;
  text-align: right;
  text-shadow: 0 0 14px rgba(255, 214, 80, 0.24);
}

.ticker-team-row.is-loser .ticker-team-abbr,
.ticker-team-row.is-loser .ticker-team-score {
  color: rgba(210, 218, 230, 0.78);
  text-shadow: none;
}

.ticker-team-row.is-loser .ticker-team-abbr {
  font-size: clamp(0.89rem, 1.23vw, 1.32rem);
}

.ticker-team-row.is-loser .ticker-team-score {
  font-size: clamp(1.05rem, 1.45vw, 1.55rem);
}

.ticker-team-row.is-loser .ticker-team-meta {
  color: rgba(197, 206, 218, 0.74);
}

.ticker-game-status {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.2rem;
  height: 100%;
  padding-left: 0.68rem;
  margin-left: 0.62rem;
  border-left: 1px solid rgba(118, 130, 148, 0.24);
  text-align: center;
  white-space: nowrap;
}

.ticker-game-state {
  color: #ffffff;
  font-size: clamp(0.86rem, 1.22vw, 1.24rem);
  font-weight: 950;
  letter-spacing: 0.06em;
  line-height: 1;
}


.ticker-game-date {
  color: rgba(var(--text-soft-rgb), 0.72);
  font-size: clamp(0.58rem, 0.76vw, 0.72rem);
  font-weight: 850;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.ticker-game-code {
  color: var(--pale-blue);
  font-size: clamp(0.62rem, 0.9vw, 0.82rem);
  font-weight: 950;
  letter-spacing: 0.08em;
  line-height: 1;
}

@media (max-width: 780px) {
  .news-ticker {
    width: 100%;
    min-height: 78px;
  }

  .ticker-label {
    padding: 0 0.65rem;
    font-size: 0.56rem;
  }

  .ticker-track {
    min-height: 88px;
    gap: 0.62rem;
    padding-left: 0.7rem;
  }

  .ticker-game-card,
  .ticker-game-card.is-final {
    width: 282px;
    min-height: 66px;
    border-radius: 16px;
    grid-template-columns: minmax(166px, 1fr) minmax(68px, auto);
    padding: 0.48rem 0.52rem 0.48rem 0.58rem;
  }

  .ticker-game-card.is-final {
    width: 305px;
  }

  .ticker-team-row,
  .ticker-game-card.is-final .ticker-team-row {
    grid-template-columns: 34px minmax(50px, auto) minmax(40px, 1fr);
    gap: 0.34rem;
  }

  .ticker-game-card.is-final .ticker-team-row {
    grid-template-columns: 34px minmax(46px, auto) minmax(36px, 1fr) minmax(22px, auto);
  }

  .ticker-team-logo {
    width: 34px;
    height: 27px;
  }

  .ticker-filter-toggle {
    min-width: 38px;
    padding: 0 0.5rem;
    font-size: 0.92rem;
  }

  .ticker-filter-panel {
    right: 0.3rem;
    min-width: min(220px, calc(100vw - 1.5rem));
  }
}

.upcoming-events {
  margin: 1rem;
  overflow: hidden;
}

.event-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem 0.6rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.event-heading .eyebrow {
  margin: 0;
}

.event-heading span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.event-carousel {
  position: relative;
  aspect-ratio: 16 / 8;
  margin: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: 7px;
  background: rgba(var(--surface-deep-rgb), 0.82);
}

.event-carousel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.012);
  transition:
    opacity 500ms ease,
    transform 700ms ease;
}

.event-carousel img.is-active {
  opacity: 1;
  transform: scale(1);
}

.event-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  padding: 0 0 0.65rem;
}

.event-dots button {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 1px solid rgba(var(--fg-rgb), 0.48);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.event-dots button.is-active {
  border-color: var(--cyan);
  background: var(--cyan);
  box-shadow: 0 0 14px rgba(25, 215, 243, 0.64);
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.panel,
.format-card,
.checks p {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.055), rgba(var(--fg-rgb), 0.012)),
    var(--panel);
  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(var(--fg-rgb),.07);
}

.panel {
  padding: 1rem;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.8rem;
}

.panel-heading h2 {
  font-size: 1.24rem;
}

.panel-heading a,
.panel-heading span {
  color: #b9c8d7;
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
  text-transform: uppercase;
}

.stat-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
}

.stat-type-toggle button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-transform: inherit;
  transition: color 160ms ease, text-shadow 160ms ease;
}

.stat-type-toggle button:hover,
.stat-type-toggle button.is-active {
  color: white;
  text-shadow: 0 0 14px rgba(var(--blue-soft-rgb), 0.34);
}

.player-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.player-card {
  --card-glow: rgba(var(--blue-soft-rgb), 0.28);
  position: relative;
  min-height: 218px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 0.85rem;
  border: 1px solid currentColor;
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 38%, rgba(0, 0, 0, 0.86) 100%),
    radial-gradient(circle at 62% 26%, rgba(var(--fg-rgb), 0.18), transparent 5.5rem),
    linear-gradient(140deg, var(--card-glow), rgba(3, 7, 13, 0.96));
  color: var(--blue-soft);
}

.player-card::before {
  content: "";
  position: absolute;
  inset: 24% 18% auto auto;
  width: 90px;
  height: 120px;
  border-radius: 48% 48% 8px 8px;
  background:
    radial-gradient(circle at 50% 8%, rgba(var(--fg-rgb), 0.82) 0 10px, transparent 11px),
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.14), rgba(0, 0, 0, 0.2));
  opacity: 0.42;
  transform: skewX(-8deg);
}

.player-card.red {
  --card-glow: rgba(255, 48, 72, 0.3);
  color: var(--red);
}

.player-card.green {
  --card-glow: rgba(38, 214, 124, 0.28);
  color: var(--green);
}

.player-card.blue {
  --card-glow: rgba(var(--blue-soft-rgb), 0.3);
  color: var(--blue-soft);
}

.player-card.teal {
  --card-glow: rgba(var(--accent-bright-rgb), 0.28);
  color: var(--cyan);
}

.rating {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.62);
  color: white;
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
}

.position {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: currentColor;
  color: #02050a;
  font-size: 0.72rem;
  font-weight: 900;
}

.player-card h3,
.player-card p {
  position: relative;
  z-index: 1;
}

.player-card p {
  margin: 0.25rem 0 0;
  color: var(--text-soft);
  font-weight: 900;
}

.score-list {
  display: grid;
  gap: 0.55rem;
}

.score-list p {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 0.75rem;
  margin: 0;
  padding: 0.65rem;
  border: 1px solid rgba(var(--fg-rgb), 0.09);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.24);
}

.score-list strong {
  color: white;
}

.warrior-panel {
  background:
    linear-gradient(115deg, rgba(255, 48, 72, 0.12), transparent 42%),
    var(--panel);
}

.event-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.event-cards div,
.event-cards a {
  padding: 0.9rem;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.26);
}

/* The home page's Friday/Saturday cards are links straight to that day's
   signup — same card look, plus a hover/focus affordance. */
.event-cards a {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.event-cards a:hover,
.event-cards a:focus-visible {
  border-color: rgba(var(--accent-strong-rgb), 0.55);
  box-shadow: 0 0 12px rgba(var(--accent-strong-rgb), 0.18);
  transform: translateY(-1px);
}

.event-cards strong {
  display: block;
  margin-top: 0.5rem;
  color: white;
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
}

.event-cards p,
.warrior-panel > p {
  color: var(--muted);
  line-height: 1.55;
}

.event-status {
  display: inline-flex;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.champion-panel {
  position: relative;
  overflow: hidden;
  min-height: 236px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.champion-panel::after {
  content: "";
  position: absolute;
  inset: auto -12% -42% 24%;
  height: 170px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.16;
  filter: blur(28px);
}

.champion-panel.red {
  color: var(--red);
}

.champion-panel.blue {
  color: var(--blue-soft);
}

.champion-season {
  position: relative;
  z-index: 1;
  margin: auto 0 0.7rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
  text-transform: uppercase;
}

.champion-panel > strong {
  position: relative;
  z-index: 1;
  color: white;
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 0.94;
  text-transform: uppercase;
}

.champion-logo {
  position: relative;
  z-index: 1;
  width: min(210px, 48vw);
  align-self: center;
  margin-top: auto;
  filter: drop-shadow(0 0 20px rgba(var(--blue-soft-rgb), 0.3));
}

.champion-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
}

.champion-lockup strong {
  color: white;
  font-size: clamp(1.65rem, 3vw, 2.9rem);
  line-height: 0.98;
  text-transform: uppercase;
}

.champion-lockup img {
  width: min(210px, 48vw);
  filter: drop-shadow(0 0 18px rgba(239, 200, 74, 0.34));
}

.event-status.open {
  background: rgba(38, 214, 124, 0.18);
  color: #6cffaa;
}

.event-status.filling {
  background: rgba(239, 200, 74, 0.18);
  color: #ffe06a;
}

.event-status.closed {
  background: rgba(255, 72, 72, 0.18);
  color: #ff8a8a;
}

.event-signups {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.event-signups .event-signups-count {
  color: white;
  font-weight: 800;
}

.content-page {
  padding: 1rem;
}

.placeholder-panel {
  min-height: 280px;
}

.standings-placeholder-grid,
.media-placeholder-grid,
.schedule-placeholder-list {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.standings-placeholder-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.media-placeholder-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.media-placeholder-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.schedule-placeholder-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.standings-placeholder-grid article,
.media-placeholder-grid article,
.schedule-placeholder-list article {
  min-height: 150px;
  padding: 1.2rem 1.1rem 1.1rem;
  border: 1px solid rgba(140,155,180,.18);
  border-top: 2px solid rgba(180,195,220,.35);
  border-radius: 7px;
  background:
    linear-gradient(160deg, rgba(36,39,48,.98), rgba(16,18,23,.99));
  box-shadow:
    0 8px 32px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(var(--fg-rgb),.07);
  transition: border-color .22s, box-shadow .22s, transform .22s;
}

.media-placeholder-grid article:hover {
  border-color: rgba(160,175,205,.35);
  border-top-color: rgba(200,215,240,.55);
  box-shadow:
    0 14px 44px rgba(0,0,0,.55),
    0 0 20px rgba(140,160,210,.08),
    inset 0 1px 0 rgba(var(--fg-rgb),.1);
  transform: translateY(-2px);
}

.standings-placeholder-grid strong,
.media-placeholder-grid strong,
.schedule-placeholder-list strong {
  display: block;
  margin-bottom: 0.6rem;
  color: #dce4ef;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.standings-placeholder-grid p,
.media-placeholder-grid p,
.schedule-placeholder-list p {
  margin: 0;
  color: #5a6475;
  line-height: 1.6;
  font-size: .85rem;
}

/* Media Library — League Streamer card */
.media-streamer-article {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.media-streamer-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
}
.media-streamer-logo {
  display: block;
  width: 260px;
  flex-shrink: 0;
  border-radius: 4px;
}
.media-streamer-info {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}
.media-streamer-name {
  display: inline-block;
  color: #dce4ef;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(to right, #7b2fff, #c084fc, #7b2fff) 1;
}
.media-streamer-schedule {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.55rem 0.75rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(to right, rgba(123,47,255,.5), rgba(192,132,252,.3), rgba(123,47,255,.1)) 1;
  background: rgba(123,47,255,.06);
  border-radius: 0 0 4px 4px;
}
.media-streamer-schedule-label {
  color: #c084fc;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.media-streamer-schedule span:not(.media-streamer-schedule-label) {
  color: #a8b4c4;
  font-size: 1.425rem;
  line-height: 1.5;
}
.media-streamer-socials {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.media-streamer-social-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #8a95a5;
  font-size: 1.19rem;
  text-decoration: none;
  transition: color .18s;
}
a.media-streamer-social-item:hover {
  color: #9146ff;
}
.media-social-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
  opacity: .7;
}
.media-social-icon--twitch {
  fill: #9146ff;
  opacity: 1;
}
.media-social-icon--youtube {
  fill: #ff0000;
  opacity: 1;
}

/* Media Library — League Broadcasts card */
.media-broadcast-article {
  display: flex;
  flex-direction: column;
}
.media-broadcast-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  margin: 0.75rem 0 0.6rem;
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
}
.media-broadcast-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.media-broadcast-link {
  display: inline-block;
  margin-top: 0.1rem;
  color: #46beff;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .18s;
}
.media-broadcast-link:hover {
  color: #8cd8ff;
}

.standings-panel {
  display: grid;
  gap: 1rem;
}

.standings-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
}

.standings-toolbar label {
  display: grid;
  gap: 0.35rem;
  width: min(360px, 100%);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.standings-toolbar select {
  min-height: 48px;
  width: 100%;
  border: 1px solid rgba(255, 78, 112, 0.7);
  border-radius: 8px;
  background: rgba(var(--surface-panel-rgb), 0.86);
  color: var(--text);
  font: inherit;
  padding: 0 0.85rem;
  outline: 0;
}

.standings-toolbar select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.16);
}

.standings-event-section {
  display: grid;
  gap: 0.8rem;
}

.standings-event-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.standings-event-heading h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.2rem, 2.4vw, 1.8rem);
  text-transform: uppercase;
}

.standings-event-heading > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.standings-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.22);
  border-radius: 8px;
  background: rgba(var(--surface-deep-rgb), 0.72);
}

.standings-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.standings-table th,
.standings-table td {
  padding: 0.8rem 0.85rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
  text-align: center;
  white-space: nowrap;
}

.standings-table th {
  background: rgba(var(--table-head-rgb), 0.86);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.standings-table th:first-child,
.standings-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 320px;
  background: rgb(var(--surface-panel-rgb));
  text-align: left;
}

.standings-table th:first-child {
  z-index: 2;
  background: rgb(var(--surface-mid-rgb));
  text-align: center;
}

@media (max-width: 600px) {
  .standings-table {
    min-width: 600px;
  }
  .standings-table th:first-child,
  .standings-table td:first-child {
    min-width: 168px;
    max-width: 192px;
    width: 192px;
    padding: 0.5rem;
    overflow: hidden;
  }
  .standings-table th,
  .standings-table td {
    padding: 0.5rem 0.45rem;
    font-size: 0.76rem;
  }
  .standings-team-link {
    gap: 0.35rem;
    overflow: hidden;
  }
  .standings-team-logo img,
  .standings-team-fallback {
    width: 28px;
    height: 28px;
  }
  .standings-team-link strong {
    display: none !important;
  }
  .standings-team-link small {
    display: inline !important;
    font-size: 0.85rem;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 900;
  }
  .standings-rank {
    font-size: 0.8rem;
    width: 1rem;
  }
}

.standings-table tbody tr {
  cursor: pointer;
  transition: background 160ms ease, box-shadow 160ms ease;
}

.standings-table tbody tr:hover,
.standings-table tbody tr:focus-visible {
  background: rgba(var(--blue-soft-rgb), 0.08);
  box-shadow: inset 3px 0 0 var(--accent);
  outline: 0;
}

.standings-table tbody tr:hover td:first-child,
.standings-table tbody tr:focus-visible td:first-child {
  background:
    linear-gradient(90deg, rgba(var(--blue-soft-rgb), 0.12), rgb(var(--surface-panel-rgb))),
    rgb(var(--surface-panel-rgb));
}

.standings-team-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.standings-rank {
  width: 1.4rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
}

.standings-team-logo img,
.standings-team-fallback {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.42);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
}

.standings-team-logo img {
  object-fit: contain;
  padding: 0.2rem;
}

.standings-team-fallback {
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 900;
}

.standings-team-link strong,
.standings-team-link small {
  display: block;
}

.standings-team-link strong {
  color: #ffffff;
  font-size: 0.95rem;
  text-transform: uppercase;
}

.standings-team-link small {
  margin-top: 0.15rem;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.standings-table .is-positive {
  color: var(--green);
  font-weight: 900;
}

.standings-table .is-negative {
  color: #ff5d72;
  font-weight: 900;
}

/* Playoff race: view tabs, clinch chips, cutoff line, legend, playoff picture */
.standings-view-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.standings-view-tabs[hidden] {
  display: none;
}

.standings-view-tab {
  min-height: 44px;
  padding: 0 1.4rem;
  border: 1px solid rgba(var(--fg-rgb), 0.16);
  border-radius: 999px;
  background: rgba(var(--surface-mid-rgb), 0.8);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

.standings-view-tab:hover {
  color: var(--text);
  border-color: rgba(255, 78, 112, 0.55);
}

.standings-view-tab.is-active {
  border-color: rgba(255, 78, 112, 0.8);
  background: rgba(255, 78, 112, 0.14);
  color: var(--text);
}

.standings-view-tab:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.3);
}

.standings-clinch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 5px;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.standings-clinch.is-top-seed {
  border: 1px solid rgba(239, 200, 74, 0.65);
  background: rgba(239, 200, 74, 0.16);
  color: var(--gold);
}

.standings-clinch.is-clinched {
  border: 1px solid rgba(38, 214, 124, 0.55);
  background: rgba(38, 214, 124, 0.12);
  color: var(--green);
}

.standings-clinch.is-eliminated {
  border: 1px solid rgba(143, 160, 178, 0.4);
  background: rgba(143, 160, 178, 0.12);
  color: var(--muted);
}

.standings-table tr.is-out .standings-rank,
.standings-table tr.is-out .standings-team-link strong {
  color: rgba(var(--fg-rgb), 0.55);
}

.standings-table tr.is-playoff-cutoff td {
  border-bottom: 3px solid var(--red);
}

.standings-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 8px;
  background: rgba(var(--surface-mid-rgb), 0.6);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.standings-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.standings-legend-line {
  width: 22px;
  border-top: 3px solid var(--red);
  border-radius: 2px;
}

.standings-playoff-picture {
  display: grid;
  gap: 1rem;
}

.standings-playoff-intro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.standings-playoff-intro h4 {
  margin: 0;
  color: #ffffff;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.standings-playoff-intro span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Bracket round picker — sits where the round heading goes, styled to read
   like the heading it replaces. */
.standings-round-select {
  border: 1px solid rgba(var(--blue-soft-rgb), 0.55);
  border-radius: 8px;
  background: rgba(var(--surface-panel-rgb), 0.86);
  color: #ffffff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 2.2rem 0.45rem 0.85rem;
  outline: 0;
  cursor: pointer;
}

.standings-round-select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.16);
}

.standings-playoff-matchups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0.9rem;
}

.standings-playoff-matchup {
  display: grid;
  gap: 0.55rem;
  padding: 0.9rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.24);
  border-radius: 10px;
  background: rgba(var(--surface-deep-rgb), 0.72);
}

.standings-playoff-matchup header {
  display: flex;
  justify-content: space-between;
  color: var(--cyan);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.standings-playoff-team {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0.4rem;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.standings-playoff-team:hover {
  background: rgba(var(--blue-soft-rgb), 0.08);
}

.standings-playoff-seed {
  width: 1.5rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-align: center;
}

.standings-playoff-team .standings-team-logo img,
.standings-playoff-team .standings-team-fallback {
  width: 36px;
  height: 36px;
}

.standings-playoff-team-name {
  flex: 1;
  min-width: 0;
}

.standings-playoff-team-name strong {
  display: block;
  color: #ffffff;
  font-size: 0.86rem;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.standings-playoff-team-name small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.standings-playoff-team-pts {
  color: #ffffff;
  font-weight: 900;
  font-size: 0.9rem;
  white-space: nowrap;
}

.standings-playoff-vs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.standings-playoff-vs::before,
.standings-playoff-vs::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(var(--fg-rgb), 0.1);
}

.standings-playoff-bubble {
  padding: 0.7rem 1rem;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 8px;
  background: rgba(var(--surface-mid-rgb), 0.6);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.standings-playoff-bubble strong {
  color: #ffffff;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.standings-bracket {
  display: grid;
  gap: 1.4rem;
}

.standings-bracket-round {
  display: grid;
  gap: 0.9rem;
}

.standings-series-card.is-decided {
  border-color: rgba(var(--accent-strong-rgb), 0.5);
}

.standings-series-status {
  color: #ffffff;
}

.standings-series-wins {
  min-width: 1.9rem;
  padding: 0.15rem 0.3rem;
  border-radius: 6px;
  background: rgba(var(--surface-mid-rgb), 0.85);
  color: #ffffff;
  font-size: 1.02rem;
  font-weight: 900;
  text-align: center;
}

.standings-series-team.is-winner .standings-series-wins {
  background: rgba(var(--accent-strong-rgb), 0.35);
  color: var(--cyan);
}

.standings-series-team.is-winner .standings-playoff-team-name strong {
  color: var(--cyan);
}

.standings-series-team.is-out {
  opacity: 0.55;
}

.standings-series-games {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.2rem;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.standings-series-game {
  display: grid;
  gap: 0.1rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 7px;
  background: rgba(var(--surface-mid-rgb), 0.55);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.standings-series-game:hover,
.standings-series-game:focus-visible {
  border-color: rgba(var(--accent-strong-rgb), 0.5);
  background: rgba(var(--blue-soft-rgb), 0.12);
}

.standings-series-game span {
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.standings-series-game strong {
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.standings-series-game.is-upcoming strong {
  color: var(--muted);
  font-weight: 700;
}

.standings-series-game strong i {
  color: var(--cyan);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 900;
}

.standings-bracket-champion {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.5);
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(var(--accent-strong-rgb), 0.22), rgba(var(--surface-deep-rgb), 0.75));
}

.standings-bracket-champion .standings-team-logo img,
.standings-bracket-champion .standings-team-fallback {
  width: 52px;
  height: 52px;
}

.standings-bracket-champion strong {
  display: block;
  color: #ffffff;
  font-size: 1.15rem;
  text-transform: uppercase;
}

.standings-bracket-champion span:not(.standings-team-logo) {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.standings-bracket-champion .standings-bracket-trophy {
  margin-left: auto;
  font-size: 1.8rem;
}

/* ── Championship Final: the marquee series gets its own stage ── */
.standings-bracket-round.is-championship-round .standings-playoff-matchups {
  display: flex;
  justify-content: center;
}

.is-championship-intro {
  justify-content: center;
}

.is-championship-intro h4 {
  color: #ffd166;
  font-size: 1.3rem;
  letter-spacing: 0.22em;
  text-shadow: 0 0 18px rgba(255, 209, 102, 0.45);
}

.standings-series-card.is-championship {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  padding: 1.3rem 2rem 1.15rem;
  border: none;
  border-top: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  border-radius: 0;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.012) 100%),
    rgba(var(--surface-deep-rgb), 0.72);
  box-shadow: inset 0 0 48px rgba(0, 0, 0, 0.45);
}

.standings-series-card.is-championship header span:first-child {
  color: #ffd166;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
}

.standings-series-card.is-championship .standings-series-status {
  font-size: 0.78rem;
}

/* Team-color washes bleeding in from each side of the championship card. */
.standings-champ-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Desktop marquee: cup centered behind the series score, full logos with
   name + inside-facing seed pill beneath, all over the color washes. The
   games rail below extends the card rather than eating into this space. */
.standings-champ-marquee {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.4rem;
  align-items: center;
  min-height: 520px;
}

.standings-champ-cup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 92%;
  width: auto;
  pointer-events: none;
}

.standings-champ-flank {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  min-width: 0;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}

.standings-champ-flank.is-out {
  opacity: 0.55;
}

.standings-champ-wm img,
.standings-champ-wm .standings-team-fallback {
  display: block;
  height: 390px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.standings-champ-flank-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  max-width: 100%;
  /* Soft dark halo separates the name + seed pill from any team-color wash
     behind them. Must be filter:drop-shadow, not text-shadow — the gradient
     name's glyphs are transparent-filled, so a text-shadow bleeds through. */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.standings-champ-flank-name,
.standings-champ-flank-abbr {
  font-family: 'Barlow Condensed', 'Segoe UI Semibold', 'Arial Narrow', sans-serif;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: linear-gradient(180deg, #ffffff 0%, #e4e8f0 38%, #8b93a6 72%, #424959 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Only one of name / abbr shows at a time: full name on desktop, the
   abbreviation on mobile where the flanks are too narrow for long names. */
.standings-champ-flank-abbr {
  display: none;
}

.standings-champ-flank-seed {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 4px;
  padding: 0.12rem 0.4rem;
}

.standings-champ-score-wrap {
  position: relative;
  text-align: center;
}

.standings-champ-score-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}

/* Shadowed box keeps the score legible over the cup's neon. */
.standings-champ-score {
  display: inline-block;
  padding: 0.1em 0.45em;
  border-radius: 8px;
  background: rgba(6, 8, 13, 0.66);
  box-shadow: 0 0 34px 18px rgba(6, 8, 13, 0.66);
}

.standings-champ-score-num {
  font-family: 'Barlow Condensed', 'Segoe UI Semibold', 'Arial Narrow', sans-serif;
  font-size: 5.7rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #e4e8f0 38%, #8b93a6 72%, #424959 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The marquee replaces the header's role at every size; the games rail gets
   a hairline divider and centers under the composition. */
.standings-series-card.is-championship > header {
  display: none;
}

.standings-series-card.is-championship .standings-series-games {
  position: relative;
  justify-content: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

@media (max-width: 640px) {
  /* Mobile marquee: same composition as desktop, scaled to phone width —
     abbreviations instead of full names, compact cup behind the score, and
     the marquee hugs its content (no reserved height). */
  .standings-series-card.is-championship {
    padding: 1rem 0.8rem;
  }

  .is-championship-intro h4 {
    font-size: 1.05rem;
    letter-spacing: 0.16em;
  }

  .standings-champ-marquee {
    min-height: 0;
    gap: 0.6rem;
  }

  .standings-champ-cup {
    height: 140px;
  }

  .standings-champ-wm img,
  .standings-champ-wm .standings-team-fallback {
    height: 96px;
  }

  .standings-champ-flank {
    gap: 0.5rem;
  }

  .standings-champ-flank-name {
    display: none;
  }

  .standings-champ-flank-abbr {
    display: inline-block;
    font-size: 1.3rem;
  }

  .standings-champ-flank-seed {
    font-size: 0.55rem;
    padding: 0.06rem 0.28rem;
  }

  .standings-champ-score-label {
    font-size: 0.5rem;
    margin-bottom: 0.25rem;
  }

  .standings-champ-score {
    padding: 0.1em 0.35em;
    box-shadow: 0 0 18px 10px rgba(6, 8, 13, 0.66);
  }

  .standings-champ-score-num {
    font-size: 2.2rem;
  }

  /* Matchups / Team Records pills shrink to sit side by side. */
  .standings-view-tabs {
    flex-wrap: nowrap;
  }

  .standings-view-tab {
    min-height: 36px;
    padding: 0 0.9rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}


@media (max-width: 600px) {
  .standings-clinch {
    width: 16px;
    height: 16px;
    font-size: 0.62rem;
  }
}

.teams-directory-panel {
  min-height: 280px;
}

.team-hero {
  min-height: 250px;
}

.team-hero h1 {
  font-size: clamp(1rem, 2vw, 1.6rem);
}

.team-hero > [data-team-hero-content] h1 {
  margin-right: auto;
}

.team-hero-brand {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  min-width: 0;
}

/* Flex items default to `min-width: auto` (= intrinsic min-content), which
   for the h1 wrapper here is the widest single line of the team name. That's
   what let "Fighting Raccoons" refuse to wrap and overflow the team-hero's
   own `overflow: hidden`. Explicit min-width: 0 down the chain lets the
   flex layout shrink so the h1 can wrap onto its own line. */
.team-hero-main,
.team-hero-brand > div {
  min-width: 0;
}
.team-hero-brand > div h1 {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

/* ── Flat team hero content (logo + name + event selector as siblings) ──
   teams.js now injects a flat structure: [data-team-hero-content] directly
   contains .team-hero-logo, .team-hero-title (h1), and .team-hero-event-control.
   The sub-container border/bg/backdrop-filter is stripped so logo + name sit
   directly in the .team-hero. The sub-container's sweep + shimmer animations
   are re-mounted as absolute-positioned spans on .team-hero itself (below). */
.team-hero-content-flat {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  width: 100%;
  min-width: 0;
}

/* Strip every visual property the shared .schedule-hero-minimal > div rule
   applied (border, radius, bg, box-shadow, backdrop-filter, padding, max-width,
   text-align) — including the higher-specificity body.page-wide override of
   width/padding. Selector is (0,3,0) for the base and (0,4,0) for the
   page-wide override so both beat their originals by source order. */
.team-hero.schedule-hero-minimal > .team-hero-content-flat,
body.page-wide .team-hero.schedule-hero-minimal > .team-hero-content-flat {
  width: 100%;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  text-align: left;
}
/* The shared rule also mounted the glass-sweep + divider on ::before/::after
   of the sub-container. Kill those here since we've re-mounted them on the
   hero itself as real elements. */
.team-hero > .team-hero-content-flat::before,
.team-hero > .team-hero-content-flat::after {
  content: none;
}

/* ── Sweep + shimmer animations, re-hosted on .team-hero itself ────────
   Injected by teams.js as the first children of .team-hero so they render
   above the hero's own background/pseudo-element ambience but below the
   flat content (z-index 2). Same @keyframes the sub-container was using. */
.team-hero-glass-sweep,
.team-hero-divider-shimmer {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
.team-hero-glass-sweep {
  inset: 0;
  background: linear-gradient(105deg, transparent 0 38%, rgba(var(--fg-rgb), 0.075) 50%, transparent 62% 100%);
  opacity: 0.24;
  transform: translateX(-42%);
  animation: scheduleHeroGlassSweep 7s ease-in-out infinite;
}
.team-hero-divider-shimmer {
  left: 50%;
  bottom: clamp(1rem, 2.5vw, 1.85rem);
  transform: translateX(-50%);
  width: min(320px, 42%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-bright-rgb), 0.56), rgba(var(--fg-rgb), 0.36), rgba(var(--accent-bright-rgb), 0.56), transparent);
  background-size: 220% 100%;
  box-shadow: 0 0 12px rgba(var(--accent-bright-rgb), 0.18);
  animation: scheduleHeroDividerShimmer 5.8s ease-in-out infinite;
}
.team-hero-content-flat .team-hero-logo {
  flex: 0 0 auto;
}
.team-hero-content-flat .team-hero-title {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  /* Explicit scaling that stays proportional to the container width instead
     of the aggressive body.page-wide clamp; the max caps out well below the
     old 7.6rem so long team names ("Fighting Raccoons") stop overflowing. */
  font-size: clamp(1.75rem, 6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}
.team-hero-content-flat .team-hero-event-control {
  flex: 0 0 auto;
  /* The shared .team-hero-event-control rule stretches to width: 100%, which
     wraps the control onto its own row; shrink-to-fit keeps it inline on the
     logo + title row, anchored right. */
  width: auto;
  margin-left: auto;
}
/* Override the page-wide-specific h1 rule (clamp(2.8rem, 14vw, 7.6rem)) which
   would otherwise win by source order — its selector is
   body.page-wide .schedule-hero-minimal h1 (0,2,1); ours matches at (0,3,1)
   via the extra class, so it beats it regardless of source position. */
body.page-wide .schedule-hero-minimal .team-hero-content-flat .team-hero-title {
  font-size: clamp(1.75rem, 6vw, 5rem);
}
@media (max-width: 640px) {
  .team-hero-content-flat {
    gap: 0.75rem;
  }
  .team-hero-content-flat .team-hero-title,
  body.page-wide .schedule-hero-minimal .team-hero-content-flat .team-hero-title {
    font-size: clamp(1.5rem, 8vw, 2.4rem);
    flex-basis: 100%;
  }
  .team-hero-content-flat .team-hero-event-control {
    margin-left: 0;
    flex-basis: 100%;
  }
}

.team-hero > [data-team-hero-content],
.team-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2rem);
}

.team-hero > [data-team-hero-content] {
  max-width: none;
  width: 100%;
}

.team-hero-logo {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(96px, 12vw, 150px);
  height: clamp(96px, 12vw, 150px);
  border: 1px solid rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.42);
  border-radius: 10px;
  background:
    radial-gradient(circle at center, rgba(var(--blue-soft-rgb), 0.12), transparent 66%),
    rgba(0, 0, 0, 0.28);
}

.team-hero-logo-image,
.team-hero-logo .team-logo-fallback {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.65rem;
}

.team-hero-main {
  display: grid;
  flex: 0 0 auto;
  gap: 0.8rem;
  min-width: min(420px, 34%);
}

.team-hero-side {
  display: grid;
  flex: 1 1 620px;
  gap: 0.65rem;
  justify-items: stretch;
  min-width: min(100%, 480px);
  max-width: 620px;
  margin-left: auto;
}

.team-hero-event-control {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.team-hero-side .team-upcoming-board {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-left: 0;
}

.team-upcoming-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.team-upcoming-head strong {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
  text-transform: uppercase;
}

.team-upcoming-head button {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 5px;
  background: rgba(var(--fg-rgb), 0.12);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.team-upcoming-head button:disabled {
  cursor: default;
  opacity: 0.32;
}

.team-upcoming-board {
  flex: 0 1 620px;
  width: min(620px, 52vw);
  min-width: min(100%, 480px);
  max-width: 620px;
  margin-left: auto;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--fg-rgb), 0.08), rgba(122, 40, 255, 0.08)),
    rgba(8, 14, 26, 0.54);
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.08), 0 18px 38px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px);
}

.team-upcoming-head {
  justify-content: space-between;
  padding: 0.75rem 0.9rem 0.35rem;
}

.team-upcoming-table {
  display: grid;
}

.team-upcoming-row {
  display: grid;
  grid-template-columns: 1.1fr 0.85fr 1.3fr 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.team-upcoming-row-head {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.team-upcoming-row span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-upcoming-row strong {
  color: #ffffff;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.team-upcoming-empty {
  padding: 0.9rem;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
  color: var(--muted);
  font-size: 0.82rem;
}

.teams-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.team-filter-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.8rem;
  padding: 0.35rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.26);
}

.team-filter-tabs[hidden] {
  display: none;
}

.team-filter-tabs button {
  min-height: 36px;
  padding: 0 0.85rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.team-filter-tabs button:hover,
.team-filter-tabs button:focus-visible,
.team-filter-tabs button.is-active {
  background: rgba(var(--blue-soft-rgb), 0.14);
  color: #ffffff;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.team-event-select-wrap {
  margin-top: 0.8rem;
}

.team-event-select-wrap[hidden] {
  display: none;
}

.team-event-select-wrap label {
  display: grid;
  gap: 0.35rem;
  width: min(360px, 100%);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.team-event-select-wrap select {
  min-height: 44px;
  width: 100%;
  border: 1px solid rgba(255, 78, 112, 0.7);
  border-radius: 8px;
  background: rgba(var(--surface-panel-rgb), 0.86);
  color: var(--text);
  font: inherit;
  padding: 0 0.85rem;
  outline: 0;
}

.team-event-select-wrap select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.16);
}

.team-directory-card {
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(var(--directory-team-primary-rgb, var(--accent-strong-rgb)), 0.24);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.075), rgba(var(--directory-team-secondary-rgb, 78, 123, 255), 0.065)),
    radial-gradient(circle at 15% 18%, rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.22), transparent 32%),
    radial-gradient(circle at 88% 24%, rgba(var(--directory-team-secondary-rgb, 78, 123, 255), 0.18), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(var(--directory-team-tertiary-rgb, 122, 40, 255), 0.10), transparent 40%),
    linear-gradient(135deg, rgba(5, 17, 34, 0.98), rgba(2, 6, 18, 0.96));
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(var(--fg-rgb),0.08),
    inset 0 -1px 0 rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.15),
    0 0 28px rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.07);
}

.team-directory-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 86px;
  padding: 0.85rem 1rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.team-directory-toggle:hover,
.team-directory-toggle:focus-visible {
  background: rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.09);
  outline: none;
}

.team-directory-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.team-directory-header > span:last-child {
  min-width: 0;
}

.team-directory-logo img,
.team-logo-fallback {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(var(--directory-team-primary-rgb, var(--accent-strong-rgb)), 0.34);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.12), transparent 44%),
    radial-gradient(circle at 50% 80%, rgba(var(--directory-team-secondary-rgb, 78, 123, 255), 0.10), transparent 54%),
    rgba(2, 10, 22, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(var(--fg-rgb),0.055),
    0 0 18px rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.10);
}

.team-directory-logo img {
  object-fit: contain;
  padding: 0.25rem;
}

.team-logo-fallback {
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 900;
}

.team-directory-header strong {
  display: block;
  color: #ffffff;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.team-directory-header span {
  display: block;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.team-directory-header .team-directory-club-id {
  display: inline;
  color: var(--muted);
}

.admin-team-edit-hint {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-team-edit-search {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-team-edit-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  padding: 0 0.8rem;
  outline: 0;
}

.admin-team-edit-search input:focus {
  border-color: rgba(var(--blue-soft-rgb), 0.75);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.14);
}

.admin-team-edit-grid {
  margin: 0 0 1.25rem;
}

.admin-team-edit-grid .team-directory-toggle {
  min-height: 72px;
}

.admin-team-edit-info {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.admin-team-edit-info[hidden] {
  display: none;
}

@media (min-width: 960px) {
  .admin-team-edit-split.has-selection {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }

  .admin-team-edit-split.has-selection .admin-team-edit-hint {
    display: none;
  }

  .admin-team-edit-split.has-selection .admin-team-edit-grid {
    grid-template-columns: 1fr;
    max-height: 62vh;
    margin: 0;
    overflow-y: auto;
    padding-right: 0.4rem;
  }
}

.admin-team-edit-grid .team-directory-card.is-selected {
  border-color: rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.85);
  box-shadow:
    0 0 0 2px rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.55),
    0 14px 28px rgba(0, 0, 0, 0.24),
    0 0 28px rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.18);
}


.team-directory-roster {
  display: none;
}

.team-roster-list {
  display: grid;
  gap: 0.5rem;
  max-height: 420px;
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

.team-roster-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.6rem 0.65rem;
  border: 1px solid rgba(var(--fg-rgb), 0.06);
  border-radius: 7px;
  background: rgba(var(--fg-rgb), 0.04);
}

.team-roster-list a {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 160ms ease, transform 160ms ease;
}

.team-roster-list a:hover,
.team-roster-list a:focus-visible {
  color: var(--accent);
  transform: translateX(2px);
}

.team-roster-list span {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-roster-list strong {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.team-detail-tabs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.8rem;
  padding: 0.35rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
}

.team-detail-tabs[hidden],
.team-detail-panel[hidden] {
  display: none;
}

.team-detail-tabs button {
  min-height: 36px;
  padding: 0 1rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  text-transform: uppercase;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.team-detail-tabs button:hover,
.team-detail-tabs button:focus-visible,
.team-detail-tabs button.is-active {
  background: rgba(var(--blue-soft-rgb), 0.14);
  color: #ffffff;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.team-detail-panels {
  display: grid;
}

.team-detail-roster-list {
  max-height: none;
}

.team-position-stack {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.35rem;
}

.team-position-badge {
  flex: 0 0 auto;
  min-width: 46px;
  justify-content: center;
}

.team-roster-count {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
  text-align: right;
  text-transform: uppercase;
}

.team-stats-section {
  display: grid;
  gap: 0.8rem;
}

.team-stats-section + .team-stats-section {
  margin-top: 1.1rem;
}

.team-stats-table-wrap {
  max-height: 460px;
}

.team-stats-table {
  min-width: 1680px;
}

.team-stats-table .player-card-link {
  color: #ffffff;
  text-decoration: none;
}

.team-stats-table .player-card-link:hover,
.team-stats-table .player-card-link:focus-visible {
  color: var(--accent);
}

.teams-empty-state {
  grid-column: 1 / -1;
}

.live-schedule-list {
  display: grid;
  gap: 1rem;
}

.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.schedule-toolbar label {
  display: grid;
  gap: 0.35rem;
  width: min(360px, 100%);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.schedule-toolbar select {
  min-height: 46px;
  width: 100%;
  border: 1px solid rgba(255, 78, 112, 0.7);
  border-radius: 8px;
  background: rgba(var(--surface-panel-rgb), 0.86);
  color: var(--text);
  font: inherit;
  padding: 0 0.85rem;
  outline: 0;
}

.schedule-toolbar select:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.16);
}

.schedule-toolbar input[type="date"] {
  min-height: 46px;
  width: 100%;
  border: 1px solid rgba(255, 78, 112, 0.7);
  border-radius: 8px;
  background: rgba(var(--surface-panel-rgb), 0.86);
  color: var(--text);
  font: inherit;
  padding: 0 0.85rem;
  outline: 0;
  color-scheme: dark;
}

.schedule-toolbar input[type="date"]:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.16);
}

.schedule-toolbar label:has(input[type="date"]) {
  width: min(200px, 100%);
}

.schedule-event-box {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.07), rgba(122, 40, 255, 0.06)),
    rgba(0, 0, 0, 0.18);
}

.schedule-event-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.schedule-event-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
}

.schedule-event-heading > span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}

.schedule-event-games {
  display: grid;
  gap: 0.85rem;
}

.schedule-game-card {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.08), transparent 44%),
    rgba(0, 0, 0, 0.22);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.schedule-game-card:hover,
.schedule-game-card:focus-visible {
  border-color: rgba(var(--blue-soft-rgb), 0.58);
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.12), transparent 44%),
    rgba(0, 0, 0, 0.32);
  box-shadow: 0 0 28px rgba(var(--blue-soft-rgb), 0.12);
  outline: 0;
}

.schedule-game-meta,
.schedule-matchup,
.schedule-team {
  display: flex;
  align-items: center;
}

.schedule-game-meta {
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.schedule-game-meta strong {
  color: var(--cyan);
}

.schedule-game-server {
  color: var(--green, #4ade80);
}

.schedule-matchup {
  justify-content: space-between;
  gap: 1rem;
}

.schedule-team {
  flex: 1;
  min-width: 0;
  gap: 0.75rem;
}

.schedule-team:last-child {
  justify-content: flex-end;
  text-align: right;
}

.schedule-team img,
.schedule-team-fallback {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.26);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
}

.schedule-team img {
  object-fit: contain;
  padding: 0.25rem;
}

.schedule-team-fallback {
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 900;
}

.schedule-team strong {
  display: block;
  color: #ffffff;
  font-size: 1.1rem;
}

.schedule-team span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-versus {
  flex: 0 0 auto;
  color: var(--cyan);
  font-size: 0.75rem;
  font-weight: 900;
}

.schedule-scoreboard {
  display: grid;
  grid-template-columns: minmax(44px, auto) auto minmax(44px, auto);
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.schedule-scoreboard strong {
  color: #ffffff;
  display: grid;
  gap: 0.1rem;
  font-size: 0.95rem;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.schedule-scoreboard strong small {
  color: var(--accent);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.schedule-scoreboard .is-winner {
  color: #ffffff;
  font-size: 1.2rem;
}

.modal-open {
  overflow: hidden;
}

.schedule-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.schedule-modal[hidden] {
  display: none;
}

.schedule-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.76);
  backdrop-filter: blur(8px);
}

.schedule-modal-window {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  max-height: min(86vh, 900px);
  overflow: auto;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.26);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.1), rgba(255, 48, 72, 0.08)),
    rgba(var(--surface-deep-rgb), 0.98);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56);
}

.schedule-modal-close {
  position: sticky;
  top: 0.75rem;
  z-index: 3;
  float: right;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0.75rem 0.75rem 0 0;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.42);
  color: #ffffff;
  cursor: pointer;
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
}

.schedule-modal-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1.1rem;
}

.schedule-modal-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.45rem, 3vw, 2.45rem);
  text-transform: uppercase;
}

.schedule-modal-heading span {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
}

.schedule-modal-tabs {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.26);
}

.schedule-modal-tabs button {
  min-height: 36px;
  max-width: min(240px, 100%);
  padding: 0 0.9rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 900;
  white-space: normal;
  text-transform: uppercase;
}

.schedule-modal-tabs button:hover,
.schedule-modal-tabs button:focus-visible,
.schedule-modal-tabs button.is-active {
  background: rgba(var(--blue-soft-rgb), 0.14);
  color: #ffffff;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.box-score-final {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.box-score-final div {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.box-score-final div:last-child {
  justify-content: flex-end;
}

.box-score-final img,
.box-score-final .schedule-team-fallback {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.42);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  object-fit: contain;
  padding: 0.2rem;
}

.box-score-final strong {
  color: #ffffff;
  font-size: 0.92rem;
  text-transform: uppercase;
}

.box-score-final span {
  color: #ffffff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  line-height: 1;
}

.box-score-final p {
  margin: 0;
  color: #ffffff;
  display: grid;
  gap: 0.2rem;
  font-size: 1.35rem;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.box-score-final p small {
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.box-score-stats {
  display: grid;
  gap: 0.9rem;
  padding: 1rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.box-score-stat {
  display: grid;
  grid-template-columns: minmax(68px, 0.35fr) minmax(130px, 1fr) minmax(68px, 0.35fr);
  gap: 0.75rem;
  align-items: center;
}

.box-score-stat > strong {
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 900;
}

.box-score-stat > strong:last-of-type {
  text-align: right;
}

.box-score-stat > span {
  color: #ffffff;
  font-weight: 900;
  text-align: center;
}

.box-score-bars {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.07);
  padding: 1px;
}

.box-score-bars span {
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--team-bar-primary, #8eaec8),
    var(--team-bar-secondary, var(--team-bar-primary, #8eaec8)) 58%,
    var(--team-bar-tertiary, var(--team-bar-secondary, #8eaec8))
  );
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.24),
    0 0 8px rgba(var(--fg-rgb), 0.05);
}

.box-score-bars span:last-child {
  justify-self: end;
  background: linear-gradient(
    270deg,
    var(--team-bar-primary, #8eaec8),
    var(--team-bar-secondary, var(--team-bar-primary, #8eaec8)) 58%,
    var(--team-bar-tertiary, var(--team-bar-secondary, #8eaec8))
  );
}

.schedule-player-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 8px;
}

.schedule-team-stat-section {
  display: grid;
  gap: 0.7rem;
}

.schedule-team-stat-section + .schedule-team-stat-section {
  margin-top: 1.2rem;
}

.schedule-team-stat-section h3 {
  margin: 0;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-player-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.schedule-player-table th,
.schedule-player-table td {
  padding: 0.58rem 0.65rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
  text-align: center;
  white-space: nowrap;
}

.schedule-player-table th:first-child,
.schedule-player-table td:first-child {
  text-align: left;
}

.schedule-player-table th {
  background: rgba(var(--table-head-rgb), 0.82);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.09);
  color: var(--text-soft);
  text-align: left;
}

th {
  color: var(--muted);
  font-size: 0.76rem;
  text-transform: uppercase;
}

.sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: inherit;
  gap: 0.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
  text-transform: inherit;
}

.sort-button::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  opacity: 0;
}

.sort-button.is-active {
  color: white;
}

.sort-button.is-active[data-direction="asc"]::after {
  border-bottom: 6px solid var(--cyan);
  opacity: 1;
}

.sort-button.is-active[data-direction="desc"]::after {
  border-top: 6px solid var(--cyan);
  opacity: 1;
}

.section {
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3rem);
  border-top: 1px solid rgba(var(--line-rgb), 0.12);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 1.4rem;
}

.section-heading.centered {
  margin-inline: auto;
  text-align: center;
}

.lookup-section {
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 4vw, 3rem);
  border-top: 1px solid rgba(var(--line-rgb), 0.12);
}

.lookup-shell {
  width: min(980px, 100%);
  margin: 0 auto;
}

.lookup-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 0.65rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.42);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.055), rgba(var(--fg-rgb), 0.02)),
    rgba(var(--surface-deep-rgb), 0.86);
  box-shadow: var(--shadow), inset 0 0 28px rgba(var(--blue-rgb), 0.1);
}

.lookup-form input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  outline: 0;
  background: rgba(0, 0, 0, 0.32);
  color: var(--text);
  font: inherit;
  padding: 0 1rem;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.lookup-form input:focus {
  border-color: rgba(var(--blue-soft-rgb), 0.75);
  background: rgba(0, 0, 0, 0.42);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.16);
}

.lookup-form button {
  min-width: 130px;
  gap: 0.55rem;
}

.lookup-form.is-loading button {
  pointer-events: none;
  opacity: 0.82;
}

.spinner {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(var(--fg-rgb), 0.38);
  border-top-color: white;
  border-radius: 999px;
  animation: spin 700ms linear infinite;
}

.lookup-form.is-loading .spinner {
  display: inline-block;
}

.lookup-status {
  min-height: 28px;
  margin: 1rem auto 0;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
  /* stats-file paths in save confirmations are one long unbreakable token */
  overflow-wrap: anywhere;
}

.lookup-status.is-error {
  color: #ff8795;
}

.lookup-status.is-success {
  color: #6cffaa;
}

/* ── Player discipline: site-wide name coloring (applied client-side by
   script.js against every rendered player name, since name rendering isn't
   centralized through one shared function across the codebase). ── */
.player-name-suspended {
  color: var(--orange) !important;
}

.player-name-banned {
  color: var(--red) !important;
}

.discipline-name-tag {
  font-weight: 700;
  font-size: 0.85em;
}

.discipline-name-tag.type-suspended {
  color: var(--orange);
}

.discipline-name-tag.type-banned {
  color: var(--red);
}

/* ── Player discipline: "League Discipline" card on the player page ── */
.discipline-panel {
  padding: 1rem 1.25rem;
  border: 1px solid var(--muted);
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.discipline-panel.type-banned {
  border-color: var(--red);
  box-shadow: 0 0 8px rgba(255, 48, 72, 0.55), 0 0 22px rgba(255, 48, 72, 0.3), inset 0 0 14px rgba(255, 48, 72, 0.08);
  background: linear-gradient(90deg, rgba(255, 48, 72, 0.1), transparent 60%), var(--panel);
}

.discipline-panel.type-suspended {
  border-color: var(--orange);
  box-shadow: 0 0 8px rgba(255, 152, 0, 0.55), 0 0 22px rgba(255, 152, 0, 0.3), inset 0 0 14px rgba(255, 152, 0, 0.08);
  background: linear-gradient(90deg, rgba(255, 152, 0, 0.1), transparent 60%), var(--panel);
}

.discipline-panel.type-ww_suspended {
  border-color: var(--blue-soft);
  box-shadow: 0 0 8px rgba(var(--blue-soft-rgb), 0.55), 0 0 22px rgba(var(--blue-soft-rgb), 0.3), inset 0 0 14px rgba(var(--blue-soft-rgb), 0.08);
  background: linear-gradient(90deg, rgba(var(--blue-soft-rgb), 0.1), transparent 60%), var(--panel);
}

.discipline-panel h3 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.discipline-flag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.discipline-flag-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.discipline-flag-type {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.discipline-flag-row.type-banned .discipline-flag-type {
  color: var(--red);
}

.discipline-flag-row.type-suspended .discipline-flag-type {
  color: var(--orange);
}

.discipline-flag-row.type-ww_suspended .discipline-flag-type {
  color: var(--blue-soft);
}

.discipline-flag-eligible {
  color: var(--muted);
  font-size: 0.78rem;
}

.discipline-flag-reason {
  flex-basis: 100%;
  color: var(--text);
  font-size: 0.85rem;
}

.plr-pfp-status {
  min-height: 0;
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  max-width: 120px;
}

.lookup-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.registration-card {
  position: relative;
  overflow: hidden;
  padding: 1.1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.38);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(var(--blue-rgb), 0.14), rgba(137, 40, 255, 0.08)),
    var(--panel);
  box-shadow: var(--shadow);
  animation: fadeInUp 260ms ease both;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.registration-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--blue-soft-rgb), 0.7);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), 0 0 24px rgba(var(--blue-rgb), 0.18);
}

.registration-card::after {
  content: "";
  position: absolute;
  inset: auto -10% -35% 45%;
  height: 160px;
  border-radius: 999px;
  background: var(--cyan);
  opacity: 0.13;
  filter: blur(30px);
}

.registration-header,
.detail-grid {
  position: relative;
  z-index: 1;
}

.registration-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.registration-header h3 {
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1;
}

.registration-header p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 32px;
  padding: 0.25rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.28);
  color: white;
  font-weight: 900;
  text-transform: uppercase;
}

.position-lw {
  color: var(--green);
}

.position-rw {
  /* Literal (not var(--blue-soft)) so the donor accent theme can't recolor
     position identity — RW stays RW-blue no matter the member's site accent. */
  color: #17a5ff;
}

.position-c {
  color: var(--red);
}

.position-ld {
  /* Literal (not var(--cyan)) so full themes that override --cyan can't
     recolor position identity — same reasoning as .position-rw above. */
  color: #15d8ff;
}

.position-rd {
  color: var(--gold);
}

.position-g {
  color: var(--purple);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.detail-item {
  padding: 0.75rem;
  border: 1px solid rgba(var(--fg-rgb), 0.09);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.detail-item.full {
  grid-column: 1 / -1;
}

.detail-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-value {
  color: #eef6ff;
  font-weight: 750;
}

.availability-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.availability-badge {
  display: inline-flex;
  padding: 0.25rem 0.48rem;
  border: 1px solid rgba(38, 214, 124, 0.42);
  border-radius: 999px;
  background: rgba(38, 214, 124, 0.12);
  color: #8bffbf;
  font-size: 0.78rem;
  font-weight: 800;
}

.empty-state {
  width: min(680px, 100%);
  margin: 0 auto;
  padding: 1.1rem;
  border: 1px solid rgba(239, 200, 74, 0.34);
  border-radius: 10px;
  background: rgba(239, 200, 74, 0.08);
  color: #ffe06a;
  font-weight: 800;
  text-align: center;
  animation: fadeInUp 220ms ease both;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.format-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.format-card {
  min-height: 230px;
  padding: 1.1rem;
}

.card-number {
  color: var(--red);
  font-weight: 900;
}

.format-card h3 {
  margin-top: 0.8rem;
  font-size: 1.9rem;
}

.format-card p,
.schedule-list p,
.checks p {
  color: var(--muted);
  line-height: 1.6;
}

/* ── Who's Streaming (index page) ── */
.whos-streaming-panel {
  max-width: 900px;
  margin: 0 auto 1.5rem;
}
.whos-streaming-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.ws-team-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.06);
}
.ws-team-group:last-child {
  border-bottom: none;
}
.ws-team-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 170px;
  flex-shrink: 0;
}
.ws-team-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}
.ws-team-name {
  color: rgba(var(--fg-rgb), 0.55);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ws-team-players {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ws-player-btn {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 140ms ease;
  cursor: pointer;
}
.ws-player-btn:hover {
  opacity: 0.8;
}
.ws-player-btn.is-streaming-twitch {
  color: #9146FF;
  background: rgba(145, 70, 255, 0.1);
  border: 1px solid rgba(145, 70, 255, 0.5);
}
.ws-player-btn.is-streaming-youtube {
  color: #FF0000;
  background: rgba(255, 0, 0, 0.1);
  border: 1px solid rgba(255, 0, 0, 0.5);
}
.ws-player-btn.is-streaming-kick {
  color: #53FC18;
  background: rgba(83, 252, 24, 0.1);
  border: 1px solid rgba(83, 252, 24, 0.5);
}
@media (max-width: 600px) {
  .ws-team-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .ws-team-header {
    min-width: 0;
  }
}

.schedule-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 1rem;
  padding: clamp(1.3rem, 4vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(100deg, rgba(var(--blue-rgb), 0.18), rgba(255, 48, 72, 0.1)),
    var(--panel-strong);
  box-shadow: var(--shadow);
}

.schedule-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 1rem;
}

.schedule-list p {
  margin: 0;
}

.schedule-list strong {
  color: white;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 0.65rem;
}

.countdown div {
  display: grid;
  place-items: center;
  min-height: 106px;
  padding: 0.8rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.42);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 24px rgba(var(--blue-rgb), 0.13);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.75fr);
  gap: clamp(1rem, 4vw, 2.2rem);
  align-items: start;
}

.checks {
  display: grid;
  gap: 0.75rem;
}

.checks p {
  position: relative;
  margin: 0;
  padding: 0.95rem 0.95rem 0.95rem 2.8rem;
  font-weight: 900;
}

.checks p::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  width: min(1500px, calc(100% - 1rem));
  margin: 0 auto;
  padding: 1.2rem 1rem 1.5rem;
  color: var(--muted);
  border-inline: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(var(--surface-deep-rgb), 0.76);
  text-transform: uppercase;
  font-size: 0.76rem;
  font-weight: 900;
}

.stats-hero {
  padding: clamp(1.6rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) clamp(1.1rem, 2.6vw, 1.8rem);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(120deg, rgba(var(--blue-rgb), 0.18), rgba(255, 48, 72, 0.1)),
    rgba(var(--surface-deep-rgb), 0.72);
}

.stats-hero > div {
  max-width: 880px;
}

.stats-hero p:not(.eyebrow) {
  max-width: 680px;
  color: var(--muted);
  margin-bottom: 0;
  line-height: 1.65;
}

.stats-hero h1 {
  font-size: clamp(2rem, 4vw, 3.2rem);
}

/* Admin tool pages use "Admin / <Two Word Title>" heroes (e.g. "Transaction
   Tools") — the vw-scaled clamps + overflow-wrap:anywhere below are tuned
   for single short words (a stat name, a player name) and break a two-word
   title mid-word on narrow screens. .compact-hero is the marker every admin
   page's hero already carries; this beats .stats-hero h1 at every
   breakpoint via specificity (2 classes vs. 1), regardless of source order. */
.stats-hero.compact-hero h1 {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: normal;
}

.player-card-hero {
  min-height: 46px;
  padding: 0;
  position: relative;
  z-index: 20;
}

.player-card-hero > div {
  display: none;
}

.stats-page {
  padding: 1rem;
  min-width: 0;
  overflow: hidden;
}

.records-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
}

.records-tabs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.65rem;
}

.champion-tabs {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.5rem;
}

.champion-tabs button,
.records-tabs button {
  min-height: 38px;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.34);
  border-radius: 6px;
  background: rgba(var(--surface-mid-rgb), 0.74);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.champion-tabs button:hover,
.champion-tabs button.is-active,
.records-tabs button:hover,
.records-tabs button.is-active {
  border-color: rgba(var(--blue-soft-rgb), 0.82);
  background: rgba(var(--blue-rgb), 0.18);
  color: white;
}

.champion-tabs button:hover,
.records-tabs button:hover {
  transform: translateY(-2px);
}

.champions-gallery[hidden],
.records-panel[hidden] {
  display: none;
}

.records-panel {
  animation: fadeUp 220ms ease both;
}

.records-panel-heading {
  margin-bottom: 1rem;
}

.records-panel-heading h2 {
  font-size: clamp(1.4rem, 3vw, 2.1rem);
}

.records-leader-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.records-season-select-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.records-season-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(var(--fg-rgb),0.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid rgba(var(--fg-rgb),0.15);
  border-radius: 6px;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 5px 30px 5px 10px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  min-width: 200px;
  transition: border-color 0.15s, background 0.15s;
}

.records-season-select-wrap select:hover {
  border-color: rgba(var(--fg-rgb),0.3);
  background-color: rgba(var(--fg-rgb),0.1);
}

.records-season-select-wrap select:focus {
  outline: none;
  border-color: #1a6dd4;
}

.records-season-select-wrap select option {
  background: #1a1f2e;
  color: #fff;
}

.records-leader-heading [data-scope-label] {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.leader-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.leader-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

.leader-card {
  overflow: hidden;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(11, 24, 38, 0.94), rgba(var(--surface-deep-rgb), 0.96)),
    rgba(var(--surface-deep-rgb), 0.9);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.leader-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--blue-soft-rgb), 0.58);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
}

.leader-card-heading {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.95rem;
  border-bottom: 1px solid rgba(var(--accent-strong-rgb), 0.15);
}

.leader-card-heading > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(var(--blue-soft-rgb), 0.44);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 900;
}

.leader-card-heading p {
  margin: 0 0 0.1rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.leader-card-heading h3 {
  margin: 0;
  color: var(--text);
  font-size: 1rem;
}

.leader-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.95rem;
  padding: 0.9rem;
  border: 1px solid rgba(245, 198, 66, 0.56);
  border-radius: 8px;
  background:
    radial-gradient(circle at top right, rgba(245, 198, 66, 0.2), transparent 45%),
    rgba(245, 198, 66, 0.08);
  color: white;
  text-decoration: none;
}

.leader-top small {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.leader-top strong {
  display: block;
  font-size: 1rem;
}

.leader-top b {
  color: var(--gold);
  font-size: 1.8rem;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Desktop: the multi-column grid leaves narrower cards, and 1.8rem clips long
   values like "100.0%" off the card edge. Mobile cards are full-width and keep
   the large size. */
@media (min-width: 641px) {
  .leader-top b {
    font-size: 1.35rem;
  }
}

.leader-list {
  display: grid;
  gap: 0.35rem;
  margin: 0 0.95rem 0.95rem;
  padding: 0;
  list-style: none;
}

.leader-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 34px;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.12);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--muted);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease;
}

.leader-list a:hover {
  border-color: rgba(var(--blue-soft-rgb), 0.46);
  background: rgba(var(--blue-rgb), 0.12);
  color: white;
}

.leader-list strong {
  color: var(--text);
  white-space: nowrap;
}

.leader-empty {
  margin: 0.95rem;
  padding: 1.1rem 0.9rem;
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.champions-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 1400px) {
  .champions-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .champions-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  .champions-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .champions-gallery {
    grid-template-columns: minmax(0, 1fr);
  }
}

.champion-banner {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(var(--surface-deep-rgb), 0.82);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.champion-banner:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--blue-soft-rgb), 0.58);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32);
}

/* Compact uniform cards: every banner view is the same fixed height, and the
   image scales to fit fully inside at its natural ratio — never cropped.
   Leftover space around mismatched shapes is the card's own surface (no
   painted letterbox bars). */
.champion-view[data-champ-view-panel="banner"] {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 345px;
  padding: 0.6rem;
}

.champion-view[data-champ-view-panel="roster"] {
  height: 345px;
  overflow-y: auto;
}

.champion-banner img,
.champion-banner video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Fixed-height structured header: event name on the top line, champion team
   on the bottom — identical bar height on every card, long names ellipsize. */
.champion-banner figcaption {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  height: 3.4rem;
  padding: 0 0.85rem;
  border-bottom: 1px solid rgba(140, 155, 175, 0.12);
}

.champion-banner figcaption span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.champion-caption-event {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.champion-caption-team {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.champion-view-tabs {
  display: flex;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid rgba(140, 155, 175, 0.12);
}

.champion-view-tabs button {
  padding: 0.32rem 0.8rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.34);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.champion-view-tabs button:hover,
.champion-view-tabs button.is-active {
  border-color: rgba(var(--blue-soft-rgb), 0.82);
  background: rgba(var(--blue-rgb), 0.18);
  color: white;
}

.champion-view[hidden] {
  display: none;
}

.champion-roster {
  margin: 0;
  padding: 0.75rem 0.85rem;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.25rem 1rem;
}

.champion-roster li {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.24rem 0;
  border-bottom: 1px solid rgba(140, 155, 175, 0.1);
}

.stats-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(5, minmax(130px, 1fr));
  gap: 0.75rem;
  align-items: end;
}

/* Date range filter row — spans full toolbar width */
.stats-date-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(var(--fg-rgb), 0.07);
}

.stats-date-row input[type="date"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  outline: 0;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
  padding: 0.5rem 0.65rem;
  color-scheme: dark;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.stats-date-row input[type="date"]:hover {
  border-color: rgba(var(--blue-soft-rgb), 0.55);
  box-shadow: 0 0 18px rgba(var(--blue-soft-rgb), 0.12);
}

.stats-date-row input[type="date"]:focus {
  border-color: rgba(var(--blue-soft-rgb), 0.85);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.14), 0 0 22px rgba(var(--blue-soft-rgb), 0.14);
}

.stats-date-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-bottom: 1px;
}

.stats-date-row .lookup-status {
  flex: 1;
  min-width: 160px;
  font-size: 0.8rem;
  padding-bottom: 2px;
}

.stat-input-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

.stat-input-panel h2 {
  font-size: 1.1rem;
}

.stat-input-panel p:not(.eyebrow) {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.stat-input-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.image-input-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(var(--fg-rgb), 0.08);
}

.image-input-panel[hidden] {
  display: none;
}

.ai-import-form {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.ai-import-review {
  grid-column: 1 / -1;
}

.ai-import-review[hidden] {
  display: none;
}

.stat-modal[hidden] {
  display: none;
}

.stat-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.stat-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(5px);
}

.stat-modal-window {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: min(860px, 92vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.045), rgba(var(--fg-rgb), 0.015)),
    #07101c;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  padding: 1rem;
}

.stat-modal-window.compact {
  width: min(760px, 100%);
}

.has-open-modal {
  overflow: hidden;
}

.manual-entry-form {
  display: grid;
  gap: 1rem;
}

.automated-entry-form {
  display: grid;
  gap: 1rem;
}

.automated-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.automated-line-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.manual-entry-meta {
  display: grid;
  grid-template-columns: minmax(220px, 420px);
  gap: 0.75rem;
  align-items: end;
}

.manual-player-field {
  display: grid;
  gap: 0.35rem;
}

.manual-player-field span,
.automated-line-grid span,
.manual-line-grid span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.manual-player-field input,
.manual-player-field select,
.automated-line-grid select,
.manual-line-grid input,
.manual-line-grid select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  outline: 0;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  padding: 0.5rem 0.65rem;
}

.stats-field select,
.manual-player-field select,
.automated-line-grid select,
.manual-line-grid select,
.player-season-controls select,
.manual-stats-form select,
.mystats-form select {
  appearance: none;
  background-color: rgba(var(--surface-panel-rgb), 0.92);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cyan) 50%),
    linear-gradient(135deg, var(--cyan) 50%, transparent 50%),
    linear-gradient(180deg, rgba(var(--blue-soft-rgb), 0.1), rgba(0, 0, 0, 0));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-repeat: no-repeat;
  background-size:
    6px 6px,
    6px 6px,
    100% 100%;
  border-color: rgba(var(--blue-soft-rgb), 0.24);
  color: var(--text);
  cursor: pointer;
  padding-right: 2.4rem;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.stats-field select:hover,
.manual-player-field select:hover,
.automated-line-grid select:hover,
.manual-line-grid select:hover,
.player-season-controls select:hover,
.manual-stats-form select:hover,
.mystats-form select:hover {
  border-color: rgba(var(--blue-soft-rgb), 0.55);
  box-shadow: 0 0 18px rgba(var(--blue-soft-rgb), 0.12);
}

.stats-field select:focus,
.manual-player-field select:focus,
.automated-line-grid select:focus,
.manual-line-grid select:focus,
.player-season-controls select:focus,
.manual-stats-form select:focus,
.mystats-form select:focus {
  border-color: rgba(var(--blue-soft-rgb), 0.85);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.14), 0 0 22px rgba(var(--blue-soft-rgb), 0.14);
}

.stats-field select option,
.manual-player-field select option,
.automated-line-grid select option,
.manual-line-grid select option,
.player-season-controls select option,
.manual-stats-form select option,
.mystats-form select option {
  background: rgb(var(--surface-panel-rgb));
  color: var(--text);
}

@media (max-width: 620px) {
  .automated-entry-grid,
  .automated-line-grid,
  .manual-entry-meta {
    grid-template-columns: 1fr;
  }
}

.manual-season-lines {
  display: grid;
  gap: 1rem;
}

.manual-season-line {
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 8px;
  background: rgba(var(--surface-mid-rgb), 0.6);
  padding: 0.85rem;
}

.manual-line-heading,
.manual-entry-actions,
.review-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.manual-entry-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.manual-line-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 0.65rem;
  margin-top: 0.75rem;
}

.manual-line-grid label {
  display: grid;
  gap: 0.3rem;
}

.manual-line-grid label[hidden] {
  display: none !important;
}

.manual-preview {
  margin-top: 1rem;
}

.manual-preview[hidden] {
  display: none;
}

.manual-preview-scroll {
  max-height: 320px;
  overflow: auto;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 8px;
}

.manual-preview-scroll table {
  width: 100%;
  min-width: 1120px;
  border-collapse: collapse;
}

.manual-preview-scroll th,
.manual-preview-scroll td {
  padding: 0.65rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
  text-align: left;
}

.manual-preview-scroll tfoot th {
  color: white;
  background: rgba(var(--blue-rgb), 0.12);
}

.player-card-link {
  color: var(--text);
  text-decoration: none;
}

.player-card-link:hover {
  color: #54d9ff;
}

.player-card-page {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  min-width: 0;
  overflow: hidden;
}

.player-search {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem;
  min-width: 0;
  position: relative;
  z-index: 10;
  overflow: visible;
}

.player-search .stats-field {
  width: min(420px, 100%);
}

.player-typeahead {
  position: relative;
}

.player-typeahead input {
  width: 100%;
}

.player-suggestions {
  position: absolute;
  top: calc(100% + 0.35rem);
  max-height: 280px;
  overflow-y: auto;
  padding: 0.35rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.42);
  border-radius: 7px;
  background: rgba(3, 10, 20, 0.98);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.46);
}

.player-suggestions[hidden] {
  display: none;
}

.player-suggestions button,
.player-suggestion-empty {
  display: block;
  width: 100%;
  padding: 0.72rem 0.75rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #dbe8f7;
  font: inherit;
  font-weight: 800;
  text-align: left;
}

.player-suggestions button {
  cursor: pointer;
  transition:
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.player-suggestions button:hover,
.player-suggestions button:focus-visible {
  background: rgba(var(--blue-soft-rgb), 0.16);
  color: white;
  transform: translateX(2px);
  outline: none;
}

.player-suggestion-empty {
  color: var(--muted);
}

.player-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  color: rgba(var(--text-soft-rgb), 0.48);
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
}

.player-view-toggle button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: 0;
  text-transform: inherit;
  cursor: pointer;
}

.player-view-toggle button:hover,
.player-view-toggle button.is-active {
  color: #ffffff;
}

.player-card-page .panel,
.player-card-page .stats-table-panel {
  min-width: 0;
  overflow: hidden;
}

.player-card-page .player-search {
  overflow: visible;
}

.player-card-page .stats-table-wrap {
  width: 100%;
  max-width: 100%;
}

.player-card-page .stats-table {
  min-width: 1360px;
}

.player-season-panel[hidden] {
  display: none;
}

.player-season-controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: 0.85rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.player-season-controls label {
  display: grid;
  gap: 0.25rem;
}

.player-season-controls select {
  min-height: 34px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  padding: 0 0.6rem;
}

/* Chrome paints sticky cell backgrounds unreliably on border-collapse:collapse
   tables, letting row content ghost through the sticky totals bar and header.
   Separate borders (spacing 0 keeps the visuals identical) restore normal
   painting so the opaque backgrounds below actually cover scrolled rows. */
.player-card-page .stats-table {
  border-collapse: separate;
  border-spacing: 0;
}

.player-card-page .stats-table th {
  z-index: 3;
}

.season-total-row td {
  position: sticky;
  bottom: 0;
  z-index: 2;
  border-top: 2px solid rgba(var(--blue-soft-rgb), 0.45);
  background: rgb(var(--surface-mid-rgb));
  color: #ffffff;
  font-weight: 900;
}

.player-showcase {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.player-identity-card {
  position: relative;
  overflow: hidden;
  width: min(100%, 360px);
  min-height: 0;
  aspect-ratio: 3 / 4;
  align-self: start;
  border: 1px solid rgba(var(--blue-soft-rgb), 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--surface-mid-rgb), 0.2), rgba(0, 0, 0, 0.46)),
    radial-gradient(circle at 50% 20%, rgba(var(--blue-soft-rgb), 0.22), transparent 12rem),
    rgba(var(--surface-deep-rgb), 0.9);
  box-shadow: inset 0 0 38px rgba(var(--blue-soft-rgb), 0.08);
}

.player-position-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: cover;
  object-position: center;
  border: 1px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(var(--fg-rgb), 0.8), 0 0 20px rgba(var(--fg-rgb), 0.45);
}

.player-card-logo {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.52);
  border: 1px solid rgba(var(--fg-rgb), 0.12);
}

.player-card-logo img {
  width: 68px;
  height: auto;
}

/* A member's uploaded/Discord photo replaces the generic position artwork
   entirely — bias toward the top of the frame since most uploads are
   head-and-shoulders portraits, not full-body action art. */
.player-position-card-image.player-card-photo {
  object-position: center 22%;
  background: #060c14;
}

.player-identity-footer {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.94);
  color: #02070d;
  padding: 0.85rem;
}

.player-identity-footer strong,
.player-identity-footer span {
  display: block;
  text-transform: uppercase;
}

.player-identity-footer strong {
  font-size: clamp(1.4rem, 3vw, 2.15rem);
  line-height: 1;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.player-identity-footer span {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 800;
}

.player-stat-board {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 1.1rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 8px;
  background:
    linear-gradient(115deg, rgba(var(--blue-soft-rgb), 0.08), transparent 42%),
    rgba(var(--surface-deep-rgb), 0.68);
}

.player-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid rgba(var(--fg-rgb), 0.75);
}

.player-card-header > div {
  min-width: 0;
}

.player-card-header h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  max-width: 100%;
  font-size: clamp(2rem, 4.8vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.player-header-team-logo,
.player-inline-team-logo {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  object-fit: contain;
  padding: 0.18rem;
  border: 1px solid rgba(var(--directory-team-primary-rgb, var(--accent-bright-rgb)), 0.42);
  border-radius: 6px;
  background: rgba(var(--surface-panel-rgb), 0.72);
  vertical-align: middle;
}

.player-header-team-logo {
  width: clamp(38px, 4vw, 58px);
  height: clamp(38px, 4vw, 58px);
}

.player-inline-team-fallback {
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
}

.player-game-row {
  cursor: pointer;
}

.player-game-link {
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-color: rgba(var(--blue-soft-rgb), 0.45);
  text-underline-offset: 3px;
  cursor: pointer;
}

.player-game-link:hover,
.player-game-link:focus-visible {
  color: var(--accent);
  outline: 0;
}

.player-opp-abbr {
  color: var(--accent);
  font-weight: 900;
}

.player-card-header p {
  margin: 0.4rem 0 0;
  color: var(--text-soft);
  font-size: clamp(0.95rem, 2vw, 1.45rem);
  text-transform: uppercase;
}

.player-stat-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.player-stat-sections section {
  min-width: 0;
}

.player-stat-sections section + section {
  border-left: 1px solid rgba(var(--fg-rgb), 0.34);
  padding-left: 1rem;
}

.player-stat-sections h3 {
  margin: 0 0 0.75rem;
  text-align: center;
  font-size: clamp(1.35rem, 3vw, 2.35rem);
  line-height: 1;
  text-transform: uppercase;
}

.player-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(74px, 1fr));
  gap: clamp(0.45rem, 0.8vw, 0.75rem);
}

.player-stat-tile {
  overflow: hidden;
  border: 2px solid rgba(var(--fg-rgb), 0.92);
  background: rgba(230, 226, 220, 0.94);
  color: #02070d;
  text-align: center;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.18);
}

.player-stat-tile span,
.player-stat-tile strong {
  display: block;
}

.player-stat-tile span {
  background: linear-gradient(135deg, #0794c4, #12d4dc);
  color: #ffffff;
  padding: 0.45rem 0.35rem;
  font-size: clamp(0.66rem, 0.8vw, 0.85rem);
  font-weight: 900;
  text-transform: uppercase;
}

.player-stat-tile strong {
  padding: 0.55rem 0.35rem;
  font-size: clamp(1rem, 1.65vw, 1.5rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.player-card-tabs {
  display: flex;
  justify-content: space-around;
  gap: 1rem;
  margin-top: 0.25rem;
  color: rgba(var(--text-soft-rgb), 0.42);
  font-size: clamp(1.05rem, 2.6vw, 2rem);
  font-weight: 900;
  text-transform: uppercase;
}

.player-card-tabs .is-active {
  color: #ffffff;
}

@media (max-width: 1080px) {
  .player-showcase {
    grid-template-columns: 1fr;
  }

  .player-identity-card {
    width: min(100%, 360px);
    margin: 0 auto;
  }

  .player-stat-sections {
    grid-template-columns: 1fr;
  }

  .player-stat-sections section + section {
    border-left: 0;
    border-top: 1px solid rgba(var(--fg-rgb), 0.22);
    padding-left: 0;
    padding-top: 1rem;
  }
}

@media (max-width: 620px) {
  .player-card-page {
    padding: 0.65rem;
  }

  .player-search,
  .player-season-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .player-view-toggle {
    justify-content: center;
    width: 100%;
  }

  .player-card-header {
    flex-direction: column;
  }

  .player-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-card-tabs {
    font-size: 1rem;
  }
}

.player-total-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.75rem;
}

.player-total-grid div {
  border: 1px solid rgba(var(--accent-strong-rgb), 0.24);
  border-radius: 8px;
  background: rgba(var(--surface-mid-rgb), 0.76);
  padding: 0.9rem;
}

.player-total-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.player-total-grid strong {
  display: block;
  margin-top: 0.3rem;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
}

.stats-field {
  display: grid;
  gap: 0.35rem;
}

.stats-field[hidden] {
  display: none;
}

.stats-field.wide {
  min-width: 0;
}

.stats-field label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.stats-field input,
.stats-field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  outline: 0;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  padding: 0 0.75rem;
}

.stats-field input:focus,
.stats-field select:focus {
  border-color: rgba(var(--blue-soft-rgb), 0.75);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.14);
}

.stats-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
}

.csv-import {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0.8rem;
  margin-top: 0.75rem;
  padding: 0.7rem 0.85rem;
}

.manual-stats-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 0.65rem;
}

.manual-stats-form label {
  display: grid;
  gap: 0.3rem;
}

.manual-stats-form span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.manual-stats-form input,
.manual-stats-form select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  outline: 0;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  padding: 0.5rem 0.65rem;
}

.manual-stats-form input:focus,
.manual-stats-form select:focus {
  border-color: rgba(var(--blue-soft-rgb), 0.75);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.14);
}

.manual-actions {
  display: flex;
  align-items: end;
}

.manual-clear-actions {
  justify-content: flex-start;
}

.mystats-loader {
  display: block;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.mystats-loader.is-collapsed {
  background: rgba(var(--surface-deep-rgb), 0.72);
  box-shadow: none;
}

.mystats-loader-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mystats-loader-summary h2 {
  font-size: 1rem;
}

.mystats-loader-summary p:not(.eyebrow) {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.mystats-toggle {
  min-height: 38px;
  white-space: nowrap;
}

.mystats-loader-body {
  margin-top: 1rem;
  animation: fadeUp 180ms ease both;
}

.mystats-loader-body[hidden] {
  display: none;
}

.api-player-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1.2fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}

.api-player-card h2 {
  font-size: 1.2rem;
}

.api-player-card p:not(.eyebrow) {
  margin: 0.35rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.api-player-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
}

.api-player-form input {
  min-height: 46px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  outline: 0;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  padding: 0 0.75rem;
}

.api-json-output {
  grid-column: 1 / -1;
  max-height: 360px;
  overflow: auto;
  margin: 0.5rem 0 0;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.34);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.36);
  color: #dbeafe;
  font-size: 0.82rem;
  line-height: 1.45;
}

.api-json-output[hidden] {
  display: none;
}

.mystats-loader-body h2 {
  font-size: 1.2rem;
}

.mystats-loader-body p:not(.eyebrow) {
  margin: 0.35rem 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.mystats-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  gap: 0.65rem;
  align-items: stretch;
}

.mystats-form textarea,
.mystats-form select {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  outline: 0;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  padding: 0.65rem 0.75rem;
  resize: vertical;
}

.mystats-form textarea:focus,
.mystats-form select:focus {
  border-color: rgba(var(--blue-soft-rgb), 0.75);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.14);
}

.csv-import h2 {
  font-size: 1rem;
}

.csv-import p:not(.eyebrow) {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.csv-import .eyebrow {
  margin: 0;
  font-size: 0.68rem;
}

.csv-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.file-upload {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.7);
  border-radius: 6px;
  background: rgba(var(--surface-mid-rgb), 0.8);
  color: white;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.file-upload:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(var(--blue-rgb), 0.28);
}

.file-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.stats-summary p {
  margin: 0;
  color: var(--muted);
  font-weight: 800;
}

.stats-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  min-width: 0;
  overflow: hidden;
}

.stats-layout.has-compare {
  grid-template-columns: minmax(0, 1fr);
}

.stats-table-panel {
  min-width: 0;
  overflow: hidden;
}

.stats-table-wrap {
  width: 100%;
  max-height: 640px;
  overflow-y: auto;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 8px;
}

.stats-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px 4px;
  flex-wrap: wrap;
}

.pagination-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid rgba(var(--fg-rgb), 0.15);
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.05);
  color: #cdd6f4;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1;
}

.pagination-btn:hover:not(:disabled) {
  background: rgba(var(--fg-rgb), 0.12);
  border-color: rgba(var(--fg-rgb), 0.3);
  color: #fff;
}

.pagination-btn.is-current {
  background: #1a6dd4;
  border-color: #1a6dd4;
  color: #fff;
  font-weight: 700;
  cursor: default;
}

.pagination-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.pagination-arrow {
  font-size: 1.1rem;
}

.pagination-ellipsis {
  color: rgba(var(--fg-rgb), 0.4);
  font-size: 0.85rem;
  padding: 0 2px;
  user-select: none;
}

.stats-table {
  min-width: 1680px;
  table-layout: fixed;
  font-size: 0.82rem;
}

.stats-page .stats-table {
  font-size: 1.181rem;
}

.stats-page .stats-table tbody tr:nth-child(even) {
  background: rgba(var(--fg-rgb), 0.035);
}

.stats-page .stats-table tbody tr:nth-child(even):hover {
  background: rgba(var(--blue-soft-rgb), 0.1);
}

.stats-table th,
.stats-table td {
  padding: 0.48rem 0.34rem;
}

.stats-page .stats-table th:first-child,
.stats-page .stats-table td:first-child {
  width: 62px;
}

.stats-page .stats-table th:nth-child(2),
.stats-page .stats-table td:nth-child(2) {
  width: 150px;
}

.stats-page .stats-table th:nth-child(3),
.stats-page .stats-table td:nth-child(3) {
  width: 58px;
}

.stats-page .stats-table th:nth-child(4),
.stats-page .stats-table td:nth-child(4) {
  width: 74px;
}

.stats-page .stats-table th:nth-child(n + 5),
.stats-page .stats-table td:nth-child(n + 5) {
  width: 50px;
  text-align: center;
}

.stats-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(var(--surface-deep-rgb), 0.98);
}

.stats-table tbody tr {
  transition:
    background 160ms ease,
    transform 160ms ease;
}

.stats-table tbody tr:hover {
  background: rgba(var(--blue-soft-rgb), 0.08);
}

.stats-table td strong,
.stats-table td small {
  display: block;
}

.stats-table td small {
  margin-top: 0.15rem;
  color: var(--muted);
}

.compare-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--muted);
  cursor: pointer;
}

.compare-check input {
  width: 15px;
  height: 15px;
  accent-color: var(--blue-soft);
}

.compare-panel {
  position: static;
}

.compare-panel[hidden] {
  display: none;
}

.compare-grid {
  overflow-x: auto;
}

.compare-leader {
  color: #ffe06a;
  font-weight: 900;
}

.compare-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.compare-card h3 {
  font-size: 1.05rem;
}

.compare-card p {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.compare-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.compare-stats div {
  padding: 0.55rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 7px;
  background: rgba(var(--fg-rgb), 0.035);
}

.compare-stats span {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.compare-stats strong {
  color: white;
  font-size: 1.12rem;
}

.compare-stats .is-leader {
  border-color: rgba(239, 200, 74, 0.68);
  background: rgba(239, 200, 74, 0.12);
  box-shadow: inset 0 0 20px rgba(239, 200, 74, 0.08);
}

.compare-stats .is-leader strong {
  color: #ffe06a;
}

@media (max-width: 980px) {
  .admin-tool-grid,
  .admin-tool-grid.two-column,
  .admin-card-grid,
  .admin-color-fields {
    grid-template-columns: 1fr;
  }

  .admin-page-tabs,
  .admin-button-row {
    flex-direction: column;
  }

  .admin-page-tabs button,
  .admin-page-tabs a,
  .admin-button-row .button {
    width: 100%;
  }

  .admin-list-row {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-line {
    grid-template-columns: 1fr;
  }

  .game-total-grid {
    grid-template-columns: 1fr;
  }

  .result-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .result-type-group {
    justify-content: space-between;
  }

  .site-header {
    grid-template-columns: auto 1fr auto auto;
    padding-right: 1rem;
  }

  .nav-toggle {
    grid-column: 4;
    grid-row: 1;
    display: block;
    justify-self: end;
  }

  .site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.85rem 0 0.4rem;
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    display: block;
    width: fit-content;
    padding: 0.45rem 0;
    line-height: 1.25;
  }

  .site-nav a::after {
    display: none;
  }

  .site-nav a.is-active {
    color: #ffffff;
  }

  .nav-dropdown {
    display: block;
  }

  .nav-dropdown > a,
  .nav-subdropdown > a {
    position: relative;
    padding-right: 1.05rem;
  }

  .nav-dropdown > a::before,
  .nav-subdropdown > a::before {
    content: "+";
    position: absolute;
    right: 0;
    color: var(--accent);
    font-weight: 900;
  }

  .nav-dropdown.is-open > a::before,
  .nav-subdropdown.is-open > a::before {
    content: "-";
  }

  .nav-dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    margin: 0.05rem 0 0.55rem 0.85rem;
    padding: 0.15rem 0 0.15rem 0.75rem;
    border: 0;
    border-left: 1px solid rgba(var(--accent-strong-rgb), 0.28);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-dropdown.is-open > .nav-dropdown-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    max-width: 100%;
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto !important;
    transform: none !important;
  }

  .nav-subdropdown-menu {
    position: static;
    display: none;
    max-height: none;
    min-width: 0;
    margin: 0.05rem 0 0.45rem 0.85rem;
    padding: 0.15rem 0 0.15rem 0.75rem;
    border: 0;
    border-left: 1px solid rgba(var(--accent-strong-rgb), 0.2);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .nav-subdropdown.is-open > .nav-subdropdown-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    width: auto;
    max-width: 100%;
    max-height: none;
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto !important;
    transform: none !important;
  }

  .site-nav .nav-dropdown-menu a {
    display: block !important;
    width: auto;
    padding: 0.4rem 0;
    color: #d9e7f7 !important;
    font-size: 0.76rem;
    opacity: 1 !important;
    visibility: visible;
    white-space: normal;
  }

  .site-nav .nav-dropdown-menu a.is-active {
    color: #ffffff !important;
    background: transparent;
  }

  .header-button-group {
    position: static;
    grid-column: 3;
    grid-row: 1;
    transform: none;
    gap: 5px;
  }
  .admin-icon-button,
  .signin-button {
    min-width: 58px;
    min-height: 34px;
    padding: 0.4rem 0.5rem;
    font-size: 0.68rem;
  }

  .header-member-avatar {
    width: 32px;
    height: 32px;
  }

  .header-actions {
    display: none;
  }

  /* On mobile, Hub and Admin move into the nav dropdown */
  .header-button-group .mgmt-hub-button,
  .header-button-group .admin-icon-button {
    display: none;
  }

  .site-nav-mobile-divider {
    display: block;
    height: 1px;
    background: rgba(var(--fg-rgb), 0.1);
    margin: 0.35rem 0 0.65rem;
  }

  .site-nav-mobile-hub,
  .site-nav-mobile-admin {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
  }

  /* .site-nav a { display: block; } outranks the rule above on specificity
     since Hub is an <a>, which left its text uncentered (Admin is a
     <button> so it isn't affected). Re-assert inline-flex centering here
     with a more specific selector. */
  .site-nav a.site-nav-mobile-hub {
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  .dashboard-grid,
  .player-grid,
  .format-grid,
  .schedule-band,
  .split,
  .stats-toolbar,
  .stats-layout,
  .stat-input-panel,
  .csv-import,
  .mystats-form,
  .api-player-card,
  .api-player-form {
    grid-template-columns: 1fr;
  }

  .mystats-loader-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .compare-stats-advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .csv-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  .page-shell,
  .site-header,
  .site-footer {
    width: 100%;
    border-inline: 0;
  }

  .stats-page,
  .stats-layout,
  .stats-table-panel,
  .stats-table-wrap {
    min-width: 0;
    max-width: 100%;
  }

  .stats-page {
    padding: 0.65rem;
  }

  .stats-table-wrap {
    display: block;
    overflow-x: auto;
    overflow-y: auto;
  }

  /* Phones: drop the desktop min-height so the base rule's 16:9 height
     (56.25vw) fully controls the hero's footprint. The Position 1 logo is
     scaled down to fit the shorter box (it only shows before the video
     starts, or when it can't play). */
  .hero {
    min-height: 0;
    padding: 0.75rem 1rem;
  }

  .hero-logo {
    width: min(280px, 45vw);
    margin-bottom: 0;
  }

  /* The video's own title card already brands the shrunken mobile hero, and
     the header logo sits right above it — skip the Position 2 corner logo. */
  .hero-logo-corner {
    display: none;
  }

  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-strip article {
    border-bottom: 1px solid var(--line);
  }

  .event-cards,
  .countdown,
  .lookup-form,
  .detail-grid,
  .standings-placeholder-grid,
  .media-placeholder-grid,
  .media-placeholder-grid--two,
  .schedule-placeholder-list {
    grid-template-columns: 1fr;
  }

  /* League Streamer — stack logo above info on mobile */
  .media-streamer-body {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .media-streamer-logo {
    width: 70%;
    max-width: 220px;
  }
  .media-streamer-info {
    width: 100%;
    align-items: center;
    text-align: center;
  }
  .media-streamer-schedule {
    align-items: center;
  }
  .media-streamer-socials {
    align-items: center;
  }
  .media-streamer-schedule span:not(.media-streamer-schedule-label) {
    font-size: 1.1rem;
  }

  .team-hero > [data-team-hero-content],
  .team-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .team-hero-brand {
    align-items: center;
  }

  .team-hero-main,
  .team-hero-side,
  .team-upcoming-board {
    flex-basis: auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .team-hero-event-control {
    justify-content: stretch;
  }

  .team-upcoming-row {
    grid-template-columns: 1fr;
    gap: 0.18rem;
  }

  .team-upcoming-row-head {
    display: none;
  }

  .event-carousel {
    aspect-ratio: 16 / 9;
    margin: 0.5rem;
  }

  .lookup-form button {
    width: 100%;
  }

  .site-footer {
    flex-direction: column;
  }

  .stats-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .stats-summary .button,
  .csv-actions .button,
  .file-upload {
    width: 100%;
  }

  .compare-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Weekend Warrior feature styles merged from agl-main-weekend-warrior-share-2026-05-22.zip */
.ww-page {
  display: grid;
  gap: 0.75rem;
  padding: 0.75rem;
}

.ww-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ww-tab-button {
  min-width: 160px;
}

.ww-tab-button.is-active {
  border-color: rgba(var(--blue-soft-rgb), 0.4);
  background:
    linear-gradient(135deg, rgba(var(--blue-rgb), 0.24), rgba(var(--accent-bright-rgb), 0.1)),
    rgba(var(--fg-rgb), 0.06);
  color: white;
}

.is-tab-hidden {
  display: none !important;
}

.ww-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(100px, 14vw, 160px);
  padding: clamp(1.6rem, 4vw, 2.4rem) 1rem;
  border-bottom: 1px solid rgba(255, 160, 50, 0.22);
  background:
    linear-gradient(180deg, rgba(var(--surface-deep-rgb), 0.92), rgba(var(--surface-deep-rgb), 0.08)),
    radial-gradient(ellipse at 50% 85%, rgba(255, 150, 20, 0.18), transparent 28rem),
    radial-gradient(ellipse at 16% 75%, rgba(255, 80, 10, 0.10), transparent 22rem),
    rgba(var(--surface-deep-rgb), 0.72);
}
.ww-hero h1 {
  position: relative;
  z-index: 1;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  text-align: center;
}
.ww-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 140, 20, 0.20), transparent 65%);
  animation: wwGlow 5s ease-in-out infinite;
}

@keyframes wwGlow {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

.ww-event-grid,
.ww-active-grid,
.ww-public-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.ww-signup-card,
.ww-active-card,
.ww-captain-card,
.ww-public-card {
  display: grid;
  gap: 0.9rem;
}

.ww-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.24);
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.04);
  color: #dbeafe;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-status-pill.is-open {
  border-color: rgba(38, 214, 124, 0.42);
  background: rgba(38, 214, 124, 0.12);
  color: #8bffbf;
}

.ww-status-pill.is-locked {
  border-color: rgba(239, 200, 74, 0.4);
  background: rgba(239, 200, 74, 0.12);
  color: #ffe06a;
}

.ww-card-copy {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.ww-event-date {
  margin: 0;
  color: #8fb6de;
  font-size: 0.82rem;
  font-weight: 700;
}

.ww-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.ww-meta-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ww-meta-grid div {
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
}

.ww-meta-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-meta-grid strong {
  display: block;
  margin-top: 0.28rem;
  color: white;
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
  line-height: 1;
}

.ww-signup-form[hidden] {
  display: none;
}

.ww-signup-form {
  display: grid;
  gap: 0.65rem;
}

.ww-form-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.ww-signup-form button {
  width: 100%;
}

.ww-host-panel {
  display: grid;
  gap: 0.8rem;
}

.ww-host-panel[hidden] {
  display: none;
}

.ww-host-auth-panel,
.ww-host-toolbar,
.ww-host-grid,
.ww-host-summary-grid,
.ww-draft-summary-grid {
  display: grid;
  gap: 0.7rem;
}

.ww-host-auth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.85rem;
  align-items: end;
}

.ww-host-auth-form .button {
  min-width: 140px;
}

.ww-host-toolbar {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
}

.ww-host-actions-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.ww-host-toolbar .button {
  width: 100%;
}

.ww-host-summary-grid,
.ww-draft-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ww-host-summary-card,
.ww-draft-summary-card,
.ww-host-card {
  padding: 0.8rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.ww-host-summary-card span,
.ww-draft-summary-card span,
.ww-host-health-row span,
.ww-host-candidate span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-host-summary-card strong,
.ww-draft-summary-card strong,
.ww-host-health-row strong,
.ww-host-candidate strong {
  display: block;
  margin-top: 0.25rem;
  color: white;
}

.ww-host-grid {
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
}

.ww-draft-panel,
.ww-draft-card {
  display: grid;
  gap: 0.75rem;
}

.ww-draft-panel[hidden],
.ww-draft-card[hidden] {
  display: none;
}

/* Draft Picks (left) + Teams and Rosters (right), roughly even halves */
.ww-draft-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr);
  gap: 0.8rem;
  align-items: start;
}

@media (max-width: 900px) {
  .ww-draft-layout {
    grid-template-columns: 1fr;
  }
}

/* Round strip — mirrors the admin draft portal's round selector. is-current
   is the round actually live in the draft (gold); is-viewing is whichever
   round the host has clicked to look at (blue); both together = gold. */
.ww-round-strip {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.5rem 0;
  margin-bottom: 0.65rem;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.ww-round-strip::-webkit-scrollbar {
  display: none;
}

.ww-round-strip-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb), 0.35);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 0.2rem;
}

.ww-round-tab {
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.35rem;
  border-radius: 5px;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  background: rgba(var(--fg-rgb), 0.04);
  color: rgba(var(--fg-rgb), 0.4);
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.ww-round-tab.is-current {
  border-color: rgba(251, 191, 36, 0.5);
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.07);
}

.ww-round-tab.is-viewing {
  border-color: var(--blue-soft, var(--link-blue));
  color: #fff;
  background: rgba(var(--accent-strong-rgb), 0.14);
}

.ww-round-tab.is-current.is-viewing {
  border-color: #fbbf24;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.15);
}

/* Compact "1. Captain | Player - Position" pick rows for the viewed round */
.ww-pick-list {
  display: grid;
  gap: 0.4rem;
  max-height: 520px;
  overflow-y: auto;
}

.ww-pick-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  background: rgba(0, 0, 0, 0.2);
  font-size: 0.85rem;
}

.ww-pick-row.is-current {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.08);
}

.ww-pick-row.is-picked {
  border-color: rgba(74, 222, 128, 0.2);
}

.ww-pick-row.is-upcoming {
  opacity: 0.55;
}

.ww-pick-row-number {
  color: var(--muted);
  font-weight: 800;
  flex-shrink: 0;
}

.ww-pick-row-captain {
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ww-pick-row-sep {
  color: rgba(var(--fg-rgb), 0.25);
  flex-shrink: 0;
}

.ww-pick-row-player {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Available Player Pool: 3 columns / 2 rows on desktop — C/LW/RW on top,
   LD/RD/G below (see POOL_DISPLAY_ORDER in weekend-warrior.js for the
   matching render order). Below 900px it collapses to position-filter tabs
   over a single visible group at a time (see .ww-pool-pos-tabs). */
.ww-draft-pool-card .ww-pool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .ww-draft-pool-card .ww-pool-grid {
    grid-template-columns: 1fr;
  }
}

.ww-pool-pos-tabs {
  display: none;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}

@media (max-width: 900px) {
  .ww-pool-pos-tabs {
    display: flex;
  }
}

.ww-pool-pos-tab {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
  border-radius: 5px;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  background: transparent;
  color: rgba(var(--fg-rgb), 0.4);
  cursor: pointer;
  letter-spacing: 0.04em;
}

.ww-pool-pos-tab.is-active {
  color: #fff;
  border-color: var(--blue-soft, var(--link-blue));
  background: rgba(var(--accent-strong-rgb), 0.14);
}

.ww-team-roster-select {
  min-height: 36px;
  max-width: 220px;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: 6px;
  background: rgba(var(--surface-panel-rgb), 0.86);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  padding: 0 0.6rem;
  outline: 0;
}

.ww-team-roster-select:focus {
  border-color: var(--blue-soft, var(--link-blue));
}

/* On-the-clock team's <option> — most browsers (Chrome included) honor
   inline color on <option> for the dropdown list. */
.ww-team-roster-select option.is-on-clock {
  color: #fbbf24;
  font-weight: 700;
}

.ww-pick-row {
  cursor: pointer;
}

.ww-draft-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 0.8rem;
}

.ww-draft-board,
.ww-draft-order-board,
.ww-draft-order-grid {
  display: grid;
  gap: 0.85rem;
}

.ww-draft-round {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(43, 115, 214, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.045), rgba(var(--fg-rgb), 0.02)),
    rgba(8, 15, 27, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.04),
    0 18px 36px rgba(0, 0, 0, 0.18);
}

.ww-draft-round.is-live {
  border-color: rgba(255, 196, 61, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.05),
    0 0 0 1px rgba(255, 196, 61, 0.12),
    0 24px 42px rgba(0, 0, 0, 0.22);
}

.ww-draft-round.is-complete {
  border-color: rgba(77, 202, 142, 0.2);
}

.ww-draft-round-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ww-draft-round-title {
  display: grid;
  gap: 0.2rem;
}

.ww-draft-round-kicker {
  color: #8dddff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ww-draft-round-head h3 {
  margin: 0;
  color: white;
  font-size: 1.05rem;
}

.ww-draft-round-state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.22rem 0.65rem;
  border: 1px solid rgba(var(--fg-rgb), 0.09);
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.03);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-draft-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 0.75rem;
}

.ww-draft-pick-card {
  display: grid;
  gap: 0.62rem;
  padding: 0.8rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.03), rgba(0, 0, 0, 0.16)),
    rgba(4, 10, 20, 0.86);
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.03),
    0 10px 24px rgba(0, 0, 0, 0.16);
}

.ww-draft-pick-card.is-current {
  border-color: rgba(239, 200, 74, 0.48);
  background:
    radial-gradient(circle at top right, rgba(239, 200, 74, 0.18), transparent 42%),
    linear-gradient(135deg, rgba(239, 200, 74, 0.15), rgba(239, 200, 74, 0.04)),
    rgba(0, 0, 0, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.05),
    0 0 0 1px rgba(239, 200, 74, 0.16),
    0 18px 34px rgba(0, 0, 0, 0.22);
}

.ww-draft-pick-card.is-picked {
  border-color: rgba(var(--ww-position-rgb, 88, 166, 255), 0.48);
  background:
    radial-gradient(circle at top right, rgba(var(--ww-position-rgb, 88, 166, 255), 0.18), transparent 44%),
    linear-gradient(180deg, rgba(var(--ww-position-rgb, 88, 166, 255), 0.12), rgba(0, 0, 0, 0.12)),
    rgba(4, 10, 20, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.05),
    inset 0 0 28px rgba(var(--ww-position-rgb, 88, 166, 255), 0.12),
    0 0 0 1px rgba(var(--ww-position-rgb, 88, 166, 255), 0.2),
    0 0 22px rgba(var(--ww-position-rgb, 88, 166, 255), 0.18),
    0 16px 34px rgba(0, 0, 0, 0.2);
}

.ww-draft-pick-top,
.ww-draft-pick-body {
  display: grid;
  gap: 0.22rem;
}

.ww-draft-pick-top span,
.ww-draft-pick-body span,
.ww-draft-pick-team span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-draft-pick-top strong,
.ww-draft-pick-body strong,
.ww-draft-pick-team strong {
  color: white;
}

.ww-draft-pick-top {
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
}

.ww-draft-pick-number,
.ww-draft-pick-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.12rem 0.42rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.ww-draft-pick-number {
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  background: rgba(var(--fg-rgb), 0.03);
}

.ww-draft-pick-status {
  border: 1px solid rgba(var(--accent-strong-rgb), 0.16);
  background: rgba(var(--accent-strong-rgb), 0.08);
  color: #9ec8ff !important;
}

.ww-draft-pick-team {
  display: grid;
  gap: 0.18rem;
  padding-bottom: 0.1rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.06);
}

.ww-draft-picked-player {
  font-size: 1rem;
  line-height: 1.05;
  text-shadow: 0 0 18px rgba(var(--ww-position-rgb, 88, 166, 255), 0.16);
}

.ww-draft-pick-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 25px;
  padding: 0.14rem 0.42rem;
  border: 1px solid rgba(var(--ww-position-rgb, 88, 166, 255), 0.42);
  border-radius: 999px;
  background: rgba(var(--ww-position-rgb, 88, 166, 255), 0.16);
  color: rgba(var(--ww-position-rgb, 88, 166, 255), 0.96) !important;
  letter-spacing: 0.04em;
  box-shadow:
    inset 0 0 14px rgba(var(--ww-position-rgb, 88, 166, 255), 0.14),
    0 0 16px rgba(var(--ww-position-rgb, 88, 166, 255), 0.16);
}

.ww-draft-order-meta,
.ww-draft-order-card {
  padding: 0.85rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.04), rgba(var(--fg-rgb), 0.02)),
    rgba(8, 15, 27, 0.88);
}

.ww-draft-order-meta span,
.ww-draft-order-head span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-draft-order-meta strong,
.ww-draft-order-head strong {
  display: block;
  margin-top: 0.25rem;
  color: white;
}

.ww-draft-order-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.ww-draft-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ww-draft-order-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-soft);
  display: grid;
  gap: 0.45rem;
}

.ww-draft-order-slot {
  display: block;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(var(--fg-rgb), 0.07);
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.03);
}

.ww-team-grid,
.ww-pool-grid {
  display: grid;
  gap: 0.85rem;
}

.ww-team-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}

/* Rosters container (all teams at once, once every team is full) — cap at
   3 per row instead of however many 280px cards fit. */
.ww-draft-rosters-card .ww-team-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .ww-draft-rosters-card .ww-team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .ww-draft-rosters-card .ww-team-grid {
    grid-template-columns: 1fr;
  }
}

.ww-pool-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}

.ww-team-card,
.ww-pool-group {
  padding: 0.72rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.03);
}

.ww-team-card-head,
.ww-pool-group-head,
.ww-slot-row,
.ww-pool-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ww-team-card-head {
  margin-bottom: 0.55rem;
}

.ww-team-card-head strong,
.ww-pool-group-head strong,
.ww-pool-player strong,
.ww-slot-row strong {
  color: white;
}

.ww-team-card-head span,
.ww-pool-group-head span,
.ww-slot-row span,
.ww-pool-player span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-roster-grid,
.ww-pool-player-list {
  display: grid;
  gap: 0.45rem;
}

/* One slot per row — the 6 positions read top-to-bottom (LW/C/RW/LD/RD/G)
   instead of the old 2-column, 3-row wrap. */
.ww-roster-grid {
  grid-template-columns: 1fr;
}

.ww-slot-row,
.ww-pool-player {
  min-height: 0;
  padding: 0.48rem 0.6rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.ww-position-glow {
  --ww-position-rgb: 88, 166, 255;
  border-color: rgba(var(--ww-position-rgb), 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(var(--ww-position-rgb), 0.08),
    0 0 18px rgba(var(--ww-position-rgb), 0.08);
}

.ww-position-glow strong:first-child,
.ww-position-glow > span:first-child,
.ww-position-glow .ww-pool-player-meta span,
.ww-position-glow .ww-pool-group-head span {
  color: rgba(var(--ww-position-rgb), 0.96);
}

.ww-pos-lw {
  --ww-position-rgb: 57, 211, 83;
}

.ww-pos-c {
  --ww-position-rgb: 255, 82, 82;
}

.ww-pos-rw {
  --ww-position-rgb: 90, 168, 255;
}

.ww-pos-ld {
  --ww-position-rgb: 61, 217, 255;
}

.ww-pos-rd {
  --ww-position-rgb: 255, 194, 61;
}

.ww-pos-g {
  --ww-position-rgb: 182, 107, 255;
}

.ww-slot-row.is-open {
  border-style: dashed;
}

.ww-slot-player {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ww-slot-player-tag {
  color: var(--text-soft);
  font-weight: 700;
  line-height: 1.15;
}

.ww-captain-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(var(--blue-soft-rgb), 0.34);
  border-radius: 999px;
  background: rgba(var(--blue-soft-rgb), 0.14);
  color: #8dddff;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-pool-player {
  flex-wrap: nowrap;
}

.ww-pool-player-meta {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.ww-pool-player-meta strong {
  line-height: 1.1;
}

.ww-pool-player-meta strong,
.ww-slot-player-tag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ww-pool-player-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-left: auto;
  flex: 0 0 auto;
}

.ww-pool-player-actions .button {
  min-height: 30px;
  padding: 0.35rem 0.6rem;
}

.ww-readonly-note {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-game-code-row {
  display: flex;
  justify-content: flex-end;
}

.ww-game-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0.14rem 0.5rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.22);
  border-radius: 999px;
  background: rgba(var(--accent-strong-rgb), 0.08);
  color: #a8d0ff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* No internal scroll cap — the pool card's position tabs (All/LW/C/…) are
   the way to narrow the view, and the selected group stretches to fit every
   signup instead of scrolling inside a 250px window. */
.ww-pool-player-list {
  padding-right: 0.15rem;
}

.ww-pool-player-list::-webkit-scrollbar {
  width: 8px;
}

.ww-pool-player-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--text-soft-rgb), 0.18);
}

.ww-host-health-grid,
.ww-host-candidate-list {
  display: grid;
  gap: 0.65rem;
}

.ww-host-candidate-shell {
  display: grid;
  gap: 0.9rem;
}

.ww-host-health-row,
.ww-host-candidate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.03);
}

.ww-host-health-row strong {
  margin-top: 0;
}

.ww-host-candidate-group {
  display: grid;
  gap: 0.6rem;
  padding: 0.7rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.16);
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.02);
}

.ww-host-candidate-group + .ww-host-candidate-group {
  margin-top: 0;
}

.ww-host-candidate-group h3 {
  margin: 0;
  font-size: 0.9rem;
}

.ww-host-candidate-list {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  max-height: 220px;
  overflow: auto;
  padding-right: 0.15rem;
}

.ww-host-candidate-list::-webkit-scrollbar {
  width: 8px;
}

.ww-host-candidate-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--text-soft-rgb), 0.18);
}

.ww-host-candidate {
  justify-content: flex-start;
  align-items: center;
  min-height: 0;
  padding: 0.35rem 0.55rem;
  gap: 0.45rem;
}

.ww-host-candidate input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue-soft);
  flex: 0 0 auto;
}

.ww-host-candidate strong {
  margin-top: 0;
  line-height: 1;
}

.ww-host-candidate-meta {
  min-width: 0;
  flex: 1 1 auto;
}

.ww-host-candidate-meta strong,
.ww-host-candidate-position {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ww-host-candidate-position {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 0.12rem 0.35rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.22);
  border-radius: 999px;
  color: #9ec8ff;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.ww-checkbox {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 42px;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-soft);
  font-size: 0.88rem;
  font-weight: 700;
}

.ww-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue-soft);
}

.ww-checkbox[hidden] {
  display: none;
}

.ww-inline-status {
  min-height: 24px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.ww-inline-status.is-success {
  color: #8bffbf;
}

.ww-inline-status.is-error {
  color: #ff8795;
}

.ww-inline-status.is-warning {
  color: #ffe06a;
}

.ww-inline-status.is-member-required {
  color: #ff5c6c;
}

.ww-inline-status.is-member-required a {
  color: var(--link-blue);
}

.ww-inline-status.is-member-required a:hover {
  text-decoration: underline;
}

.ww-inline-status.is-member-required .ww-inline-status-neutral {
  color: #ffffff;
}

.ww-captain-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ww-captain-list .empty-state {
  width: 100%;
  margin: 0;
}

.ww-captain-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--blue-rgb), 0.1), rgba(var(--accent-bright-rgb), 0.04)),
    rgba(0, 0, 0, 0.22);
}

.ww-captain-item strong,
.ww-captain-item span {
  display: block;
}

.ww-captain-item strong {
  color: white;
  font-size: 1rem;
}

.ww-captain-item span {
  margin-top: 0.18rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-captain-position {
  flex-shrink: 0;
  min-width: 48px;
  margin-top: 0 !important;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.08);
  color: white !important;
  text-align: center;
}

.ww-public-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.ww-public-group {
  padding: 0.9rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.ww-public-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ww-public-group-head span {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-public-group-head strong {
  color: white;
  font-size: 1rem;
}

.ww-public-player-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ww-public-player {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ww-public-player-tag {
  color: var(--text-soft);
  font-weight: 700;
  word-break: break-word;
}

.ww-public-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(239, 200, 74, 0.36);
  border-radius: 999px;
  background: rgba(239, 200, 74, 0.12);
  color: #ffe06a;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-public-empty {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.ww-live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.ww-live-card,
.ww-playoff-panel,
.ww-roster-override-panel,
.ww-leaderboard-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
}

.ww-roster-override-panel[hidden] {
  display: none;
}

.ww-edit-roster-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.ww-edit-slot-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.45rem 0.7rem;
  min-width: 72px;
  background: rgba(var(--accent-strong-rgb), 0.07);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.22);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
}

.ww-edit-slot-btn:hover:not(:disabled) {
  background: rgba(var(--accent-strong-rgb), 0.16);
  border-color: rgba(var(--accent-strong-rgb), 0.5);
}

.ww-edit-slot-btn.is-selected {
  background: rgba(var(--accent-strong-rgb), 0.22);
  border-color: var(--link-blue);
  box-shadow: 0 0 0 2px rgba(var(--accent-strong-rgb), 0.3);
}

.ww-edit-slot-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.ww-edit-slot-pos {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--muted);
  text-transform: uppercase;
}

.ww-edit-slot-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100px;
}

.ww-edit-slot-indicator {
  font-size: 0.6rem;
  color: var(--link-blue);
}

.ww-edit-replacement-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.txn-release-event-group {
  margin-bottom: 1.25rem;
}

.txn-release-event-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  margin-bottom: 0.5rem;
}

.txn-release-event-header .eyebrow {
  font-size: 0.62rem;
  margin: 0;
  flex-shrink: 0;
}

.txn-release-event-header strong {
  font-size: 0.88rem;
  color: #fff;
}

.txn-release-player-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.txn-release-meta {
  font-size: 0.72rem;
  color: var(--muted);
}

.ww-collapse {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.ww-collapse[open] {
  gap: 0.75rem;
}

.ww-collapse-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

.ww-collapse-summary::-webkit-details-marker {
  display: none;
}

.ww-collapse-summary h2,
.ww-collapse-summary .eyebrow {
  margin-block: 0;
}

.ww-collapse-summary span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.ww-collapse-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.ww-standings-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.22);
}

.ww-standings-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.ww-standings-table th,
.ww-standings-table td {
  padding: 0.7rem 0.65rem;
  border-bottom: 1px solid rgba(var(--accent-strong-rgb), 0.12);
  text-align: center;
  color: var(--text-soft);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.ww-standings-table th {
  position: sticky;
  top: 0;
  color: white;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(var(--surface-mid-rgb), 0.96);
  white-space: nowrap;
}

.ww-standings-table th:nth-child(2),
.ww-standings-table td.ww-standings-team {
  text-align: left;
}

.ww-standings-table tbody tr:nth-child(odd):not(.ww-playoff-line-row) td {
  background: rgba(255, 255, 255, 0.02);
}

.ww-standings-table tbody tr:hover:not(.ww-playoff-line-row) td {
  background: rgba(var(--accent-strong-rgb), 0.08);
}

.ww-standings-table tr.is-playoff-cut td {
  background: rgba(239, 200, 74, 0.07);
}

.ww-standings-rank-head,
.ww-standings-rank {
  width: 46px;
}

.ww-rank-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 800;
}

.ww-rank-chip.is-first {
  border-color: rgba(239, 200, 74, 0.6);
  background: rgba(239, 200, 74, 0.14);
  color: #ffe08a;
}

.ww-standings-team strong {
  display: block;
  color: white;
  font-size: 0.92rem;
}

.ww-standings-team span {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  margin-top: 0.1rem;
}

.ww-standings-points {
  color: white;
  font-weight: 800;
  font-size: 0.95rem;
}

.ww-stat-win {
  color: #7fe0a1;
  font-weight: 700;
}

.ww-stat-loss {
  color: #ff9c9c;
  font-weight: 700;
}

.ww-stat-pos {
  color: #7fe0a1;
}

.ww-stat-neg {
  color: #ff9c9c;
}

.ww-playoff-line-row td {
  padding: 0;
  border-bottom: 2px dashed rgba(239, 200, 74, 0.45);
  position: relative;
}

.ww-playoff-line-row span {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-100%);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(239, 200, 74, 0.75);
}

.ww-schedule-board,
.ww-playoff-board,
.ww-leaderboard-board {
  display: grid;
  gap: 1rem;
}

.ww-schedule-round,
.ww-playoff-round {
  display: grid;
  gap: 0.8rem;
  padding: 0.9rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
}

.ww-schedule-round-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  list-style: none;
}

/* .ww-schedule-round-head is now a <summary> (round condenses to this once
   every game in it is FINAL) — hide the default disclosure marker in both
   engines so only our own layout shows. */
.ww-schedule-round-head::-webkit-details-marker {
  display: none;
}

.ww-schedule-round-head::marker {
  content: "";
}

.ww-schedule-round-head h3 {
  margin: 0;
  color: white;
  font-size: 1rem;
}

.ww-schedule-round-head span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ww-game-list {
  display: grid;
  gap: 0.75rem;
}

.ww-game-card {
  display: grid;
  gap: 0.65rem;
  padding: 0.85rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.14);
  border-radius: 8px;
  background: rgba(7, 18, 36, 0.82);
}

.ww-game-card.is-final {
  border-color: rgba(79, 193, 124, 0.3);
}

.ww-game-meta,
.ww-game-actions,
.ww-leaderboard-entry,
.ww-override-grid {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ww-game-meta strong,
.ww-leaderboard-entry strong {
  color: white;
}

.ww-game-meta span,
.ww-game-actions span,
.ww-leaderboard-entry span {
  color: var(--muted);
}

.ww-game-score {
  color: var(--text-soft);
  font-size: 0.95rem;
  font-weight: 700;
}

/* Stacked matchup rows — one team per line, its score or score input on the
   right of the same line. */
.ww-game-teams {
  display: grid;
  gap: 0.45rem;
}

.ww-game-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.ww-game-team-row strong {
  color: white;
}

.ww-team-goals {
  color: var(--text-soft);
  font-size: 0.95rem;
  font-weight: 700;
}

.ww-score-input {
  width: 72px;
  min-height: 38px;
  padding: 0.55rem 0.6rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.24);
  border-radius: 6px;
  background: rgba(var(--surface-mid-rgb), 0.74);
  color: white;
}

.ww-override-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ww-override-grid .stats-field.wide {
  grid-column: span 3;
}

.ww-leaderboard-list {
  display: grid;
  gap: 0.8rem;
}

.ww-leaderboard-entry {
  justify-content: space-between;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.16);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  transition: border-color 0.15s, background 0.15s;
}

.ww-leaderboard-entry:hover {
  border-color: rgba(var(--accent-strong-rgb), 0.4);
  background: rgba(var(--accent-strong-rgb), 0.06);
}

/* Podium accents for the top three career entries. */
.ww-leaderboard-entry.is-gold {
  border-color: rgba(239, 200, 74, 0.55);
  background: linear-gradient(90deg, rgba(239, 200, 74, 0.1), rgba(0, 0, 0, 0.2) 55%);
  box-shadow: 0 0 12px rgba(239, 200, 74, 0.12);
}

.ww-leaderboard-entry.is-silver {
  border-color: rgba(205, 212, 224, 0.45);
  background: linear-gradient(90deg, rgba(205, 212, 224, 0.08), rgba(0, 0, 0, 0.2) 55%);
}

.ww-leaderboard-entry.is-bronze {
  border-color: rgba(212, 132, 70, 0.45);
  background: linear-gradient(90deg, rgba(212, 132, 70, 0.09), rgba(0, 0, 0, 0.2) 55%);
}

.ww-lb-note {
  margin-bottom: 0.7rem;
  color: var(--text-soft);
  font-size: 0.82rem;
  font-style: italic;
}

.ww-lb-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.ww-lb-pager-label {
  color: var(--text-soft);
  font-size: 0.85rem;
  font-weight: 700;
}

.ww-lb-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft) !important;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}

.ww-leaderboard-entry.is-gold .ww-lb-rank {
  border-color: rgba(239, 200, 74, 0.65);
  background: rgba(239, 200, 74, 0.16);
  color: #ffe08a !important;
}

.ww-leaderboard-entry.is-silver .ww-lb-rank {
  border-color: rgba(205, 212, 224, 0.6);
  background: rgba(205, 212, 224, 0.14);
  color: #e8edf5 !important;
}

.ww-leaderboard-entry.is-bronze .ww-lb-rank {
  border-color: rgba(212, 132, 70, 0.6);
  background: rgba(212, 132, 70, 0.16);
  color: #f0b48c !important;
}

.ww-lb-player {
  flex: 1;
  min-width: 0;
}

.ww-lb-player strong {
  display: block;
  font-size: 0.95rem;
}

.ww-lb-record {
  display: block;
  font-size: 0.76rem;
  margin-top: 0.1rem;
}

.ww-lb-trophies {
  color: #ffe08a !important;
  font-weight: 800;
  font-size: 0.9rem;
  white-space: nowrap;
}

/* Captain pick queue rows (Teams tab) — ranked wishlist entries with the
   same position-color glow the pool cards use. */
.ww-queue-list {
  display: grid;
  gap: 0.45rem;
}

.ww-queue-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(var(--ww-position-rgb, 88, 166, 255), 0.25);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.ww-queue-rank {
  min-width: 24px;
  font-weight: 800;
  color: var(--muted);
}

.ww-queue-name {
  flex: 1;
  min-width: 0;
  color: white;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ww-queue-row .ww-lb-pos {
  margin-left: 0;
}

.ww-queue-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

/* Position tag beside each name in the Defending Champion view — colored by
   the same per-position palette (--ww-position-rgb via .ww-pos-*) the draft
   pool and roster cards use. */
/* No local --ww-position-rgb declaration here: this rule sits AFTER the
   .ww-pos-* palette classes, so declaring a default would override every
   per-position value. The var() fallbacks cover a missing class instead. */
.ww-lb-pos {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--ww-position-rgb, 88, 166, 255), 0.5);
  background: rgba(var(--ww-position-rgb, 88, 166, 255), 0.12);
  /* !important: outweighs the generic ".ww-leaderboard-entry span" muted
     color, same as .ww-lb-trophies. */
  color: rgba(var(--ww-position-rgb, 88, 166, 255), 0.96) !important;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* Championship belt shown beside the Defending Champion badge. The source
   image is very wide with transparent padding, so it's sized by height. */
.ww-lb-belt {
  height: 40px;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(239, 200, 74, 0.25));
}

.ww-leaderboard-meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

/* Mobile: stack each leaderboard entry — name + position pill on the first
   line, record beneath it, then the belt + Defending Champion badge on its
   own full-width row instead of squeezing beside the record column. */
@media (max-width: 700px) {
  .ww-leaderboard-meta {
    flex-basis: 100%;
  }
}

@media (max-width: 860px) {
  .ww-event-grid,
  .ww-active-grid,
  .ww-public-grid,
  .ww-host-auth-form,
  .ww-form-actions,
  .ww-host-toolbar,
  .ww-draft-grid,
  .ww-live-grid,
  .ww-host-grid,
  .ww-host-summary-grid,
  .ww-draft-summary-grid,
  .ww-override-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ww-meta-grid,
  .ww-meta-grid-compact,
  .ww-public-board,
  .ww-override-grid {
    grid-template-columns: 1fr;
  }

  .ww-override-grid .stats-field.wide {
    grid-column: auto;
  }

  .ww-roster-grid,
  .ww-team-grid,
  .ww-pool-grid {
    grid-template-columns: 1fr;
  }
}


/* Player Card Featured Presentation v1 */
.player-showcase-featured {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.player-showcase-featured::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 18% 20%, rgba(var(--blue-soft-rgb), 0.22), transparent 34%),
    radial-gradient(circle at 80% 12%, rgba(255, 214, 74, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(var(--surface-mid-rgb), 0.95), rgba(var(--surface-deep-rgb), 0.96));
  z-index: -2;
}

.player-showcase-featured::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(120deg, rgba(var(--fg-rgb),0.07) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, rgba(var(--fg-rgb),0.035) 0 1px, transparent 1px 100%);
  background-size: 48px 48px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.85), transparent 90%);
  pointer-events: none;
  z-index: -1;
}

.player-identity-card-featured {
  position: relative;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(var(--fg-rgb), 0.08),
    inset 0 0 0 1px rgba(var(--fg-rgb), 0.05);
  transform: translateZ(0);
}

.player-card-rating {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 3;
  display: grid;
  place-items: center;
  min-width: 4.25rem;
  padding: 0.55rem 0.65rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 214, 74, 0.95), rgba(180, 122, 16, 0.92));
  color: #06111f;
  border: 1px solid rgba(255, 244, 179, 0.75);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);
  text-transform: uppercase;
}

.player-card-rating strong {
  font-size: clamp(1.55rem, 2.4vw, 2.35rem);
  line-height: 0.95;
}

.player-card-rating span {
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.player-stat-board-featured {
  background:
    linear-gradient(180deg, rgba(var(--surface-mid-rgb), 0.92), rgba(var(--surface-deep-rgb), 0.96)),
    radial-gradient(circle at top right, rgba(var(--blue-soft-rgb), 0.16), transparent 32%);
}

.player-card-header-featured {
  align-items: flex-start;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.14);
}

.player-card-header-featured h2 {
  font-size: clamp(2.2rem, 5vw, 4.75rem);
  line-height: 0.9;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  text-shadow: 0 12px 34px rgba(0, 0, 0, 0.55);
}

.player-previous-names {
  margin: 0.3rem 0 0;
  color: rgba(226, 236, 255, 0.62);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 600;
}

.player-card-kicker {
  margin: 0 0 0.45rem;
  color: var(--cyan);
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.player-feature-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.player-feature-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(var(--blue-soft-rgb), 0.11);
  color: #e7fbff;
  border: 1px solid rgba(26, 217, 255, 0.34);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.position-theme-g .player-showcase-featured::before {
  background:
    radial-gradient(circle at 18% 20%, rgba(148, 92, 255, 0.22), transparent 34%),
    radial-gradient(circle at 80% 12%, rgba(255, 214, 74, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(var(--surface-mid-rgb), 0.95), rgba(var(--surface-deep-rgb), 0.96));
}

.position-theme-ld .player-showcase-featured::before,
.position-theme-rd .player-showcase-featured::before {
  background:
    radial-gradient(circle at 18% 20%, rgba(0, 224, 167, 0.18), transparent 34%),
    radial-gradient(circle at 80% 12%, rgba(var(--blue-soft-rgb), 0.16), transparent 30%),
    linear-gradient(135deg, rgba(var(--surface-mid-rgb), 0.95), rgba(var(--surface-deep-rgb), 0.96));
}

@media (max-width: 900px) {
  .player-card-header-featured h2 {
    font-size: clamp(2rem, 10vw, 3.4rem);
  }

  .player-card-rating {
    top: 0.75rem;
    left: 0.75rem;
    min-width: 3.6rem;
  }
}



/* Player Card Rating v2 - top-right AGL glass badge */
.player-card-rating {
  top: 1rem;
  right: 1rem;
  left: auto;
  min-width: 4.45rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.9rem;
  background:
    linear-gradient(180deg, rgba(8, 20, 35, 0.94), rgba(3, 9, 17, 0.96)),
    radial-gradient(circle at 30% 20%, rgba(21, 218, 255, 0.26), transparent 55%);
  color: #f8fdff;
  border: 1px solid rgba(var(--accent-bright-rgb), 0.72);
  box-shadow:
    0 0 0 1px rgba(255, 214, 74, 0.18) inset,
    0 12px 30px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(var(--blue-soft-rgb), 0.24);
}

.player-card-rating::before {
  content: "";
  position: absolute;
  inset: 0.28rem;
  border-radius: 0.68rem;
  border: 1px solid rgba(255, 214, 74, 0.36);
  pointer-events: none;
}

.player-card-rating strong {
  color: #ffffff;
  text-shadow:
    0 0 14px rgba(19, 213, 255, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.65);
  letter-spacing: -0.07em;
}

.player-card-rating span {
  color: #ffd64a;
  text-shadow: 0 0 10px rgba(255, 214, 74, 0.28);
}

@media (max-width: 900px) {
  .player-card-rating {
    top: 0.75rem;
    right: 0.75rem;
    left: auto;
  }
}


/* Player Card Advanced Stat Visualizations v1 */
.player-visual-summary {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(280px, 1.22fr);
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}

.player-impact-rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 0.75rem;
}

.player-impact-ring {
  --score: 0;
  --angle: calc(var(--score) * 3.6deg);
  position: relative;
  aspect-ratio: 1;
  min-width: 70px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background:
    conic-gradient(var(--cyan) var(--angle), rgba(var(--fg-rgb),0.09) 0),
    radial-gradient(circle at center, rgba(9, 20, 35, 0.98) 0 58%, transparent 59%);
  box-shadow:
    0 0 0 1px rgba(var(--accent-bright-rgb), 0.18) inset,
    0 12px 26px rgba(0,0,0,0.32);
}

.player-impact-ring::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(5, 14, 25, 0.98), rgba(1, 6, 12, 0.98));
  border: 1px solid rgba(var(--fg-rgb), 0.07);
}

.player-impact-ring div {
  position: relative;
  display: grid;
  place-items: center;
  line-height: 1;
}

.player-impact-ring strong {
  color: #fff;
  font-size: clamp(1.1rem, 2vw, 1.65rem);
  letter-spacing: -0.05em;
}

.player-impact-ring span {
  margin-top: 0.2rem;
  color: #ffd64a;
  font-size: 0.62rem;
  font-weight: 950;
  letter-spacing: 0.14em;
}

.player-trait-panel {
  display: grid;
  gap: 0.62rem;
  padding: 0.9rem;
  border-radius: 1.1rem;
  background: rgba(1, 9, 17, 0.44);
  border: 1px solid rgba(var(--accent-bright-rgb), 0.18);
}

.player-trait-row {
  display: grid;
  gap: 0.3rem;
}

.player-trait-row > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-trait-row span {
  color: #d8edf6;
}

.player-trait-row strong {
  color: #ffd64a;
}

.player-trait-track {
  height: 0.58rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.08);
  border: 1px solid rgba(var(--fg-rgb),0.08);
}

.player-trait-track span {
  display: block;
  height: 100%;
  min-width: 5%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0aa7c9, var(--cyan) 62%, #ffd64a);
  box-shadow: 0 0 18px rgba(var(--accent-bright-rgb), 0.28);
}

@media (max-width: 1100px) {
  .player-visual-summary {
    grid-template-columns: 1fr;
  }

  .player-impact-rings {
    max-width: 380px;
  }
}

@media (max-width: 620px) {
  .player-impact-rings {
    grid-template-columns: repeat(3, 1fr);
  }

  .player-impact-ring {
    min-width: 56px;
  }

  .player-trait-panel {
    padding: 0.75rem;
  }
}


/* Player Card Impact Bars v2 */
.player-visual-summary,
.player-trait-panel,
.player-impact-rings {
  display: none !important;
}

.player-impact-bars {
  display: grid;
  gap: 0.65rem;
  max-width: 620px;
  margin-top: 1rem;
  padding: 0.95rem;
  border-radius: 1.05rem;
  background: rgba(1, 9, 17, 0.34);
  border: 1px solid rgba(var(--accent-bright-rgb), 0.16);
}

.player-impact-bar {
  display: grid;
  grid-template-columns: minmax(72px, 0.23fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
}

.player-impact-bar-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.65rem;
  min-width: 0;
}

.player-impact-bar-label span {
  color: #e8f8ff;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.player-impact-bar-label strong {
  color: #ffd64a;
  font-size: 0.95rem;
  font-weight: 950;
}

.player-impact-bar-track {
  position: relative;
  height: 0.72rem;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 66, 66, 0.16), rgba(255, 214, 74, 0.13), rgba(56, 224, 139, 0.13)),
    rgba(var(--fg-rgb), 0.075);
  border: 1px solid rgba(var(--fg-rgb), 0.08);
}

.player-impact-bar-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e43636 0%, #ffd64a 50%, #38e08b 100%);
  opacity: 0.28;
}

.player-impact-bar-track span {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  min-width: 4%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e43636 0%, #ffd64a 52%, #38e08b 100%);
  box-shadow: 0 0 18px rgba(var(--accent-bright-rgb), 0.18);
}

.player-impact-bar small {
  display: inline-flex;
  justify-content: center;
  min-width: 3.4rem;
  padding: 0.28rem 0.42rem;
  border-radius: 999px;
  background: rgba(var(--blue-soft-rgb), 0.1);
  color: #9fefff;
  border: 1px solid rgba(var(--accent-bright-rgb), 0.22);
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.player-impact-bar.is-low .player-impact-bar-label strong {
  color: #ff6969;
}

.player-impact-bar.is-average .player-impact-bar-label strong {
  color: #ffd64a;
}

.player-impact-bar.is-strong .player-impact-bar-label strong {
  color: #38e08b;
}

@media (max-width: 680px) {
  .player-impact-bars {
    max-width: none;
  }

  .player-impact-bar {
    grid-template-columns: 1fr auto;
    gap: 0.45rem 0.75rem;
  }

  .player-impact-bar-track {
    grid-column: 1 / -1;
  }

  .player-impact-bar small {
    grid-column: 2;
    grid-row: 1;
  }
}


/* Player Card Section Impact Bars v3 */
.player-impact-bars {
  display: none !important;
}

.player-section-impact-bar {
  display: grid;
  gap: 0.35rem;
  margin: -0.3rem auto 0.85rem;
  width: min(100%, 18rem);
}

.player-section-impact-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.1rem;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.player-section-impact-label span {
  color: #cfeefa;
}

.player-section-impact-label strong {
  color: #ffd64a;
}

.player-section-impact-track {
  position: relative;
  height: 0.55rem;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 66, 66, 0.16), rgba(255, 214, 74, 0.13), rgba(56, 224, 139, 0.13)),
    rgba(var(--fg-rgb), 0.07);
  border: 1px solid rgba(var(--fg-rgb), 0.08);
}

.player-section-impact-track::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e43636 0%, #ffd64a 50%, #38e08b 100%);
  opacity: 0.22;
}

.player-section-impact-track span {
  position: relative;
  z-index: 1;
  display: block;
  height: 100%;
  min-width: 4%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e43636 0%, #ffd64a 52%, #38e08b 100%);
  box-shadow: 0 0 14px rgba(var(--accent-bright-rgb), 0.16);
}

.player-section-impact-bar.is-low .player-section-impact-label strong {
  color: #ff6969;
}

.player-section-impact-bar.is-average .player-section-impact-label strong {
  color: #ffd64a;
}

.player-section-impact-bar.is-strong .player-section-impact-label strong {
  color: #38e08b;
}

.player-stat-sections section h3 {
  margin-bottom: 0.75rem;
}


/* AGL Mobile Safety Layer v1 */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

.page-shell,
.site-header,
.site-footer,
.panel,
.stats-page,
.player-card-page {
  max-width: 100%;
  min-width: 0;
}

.stats-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.stats-table {
  width: max-content;
}

.stats-table th,
.stats-table td {
  white-space: nowrap;
}

.player-suggestions {
  max-width: min(100%, 34rem);
  width: 100%;
  left: 0;
  right: auto;
  z-index: 30;
}

.schedule-modal-window,
.modal-window,
.admin-modal-window {
  width: min(94vw, 980px);
  max-width: 94vw;
  max-height: 88vh;
  overflow: auto;
}

@media (max-width: 900px) {
  .page-shell {
    padding-inline: clamp(0.75rem, 3vw, 1rem);
  }

  .admin-page-shell {
    padding-inline: clamp(0.375rem, 1.5vw, 0.5rem);
  }

  .site-header {
    padding-inline: 0.9rem;
  }

  .brand-mark img {
    max-width: clamp(76px, 22vw, 120px);
    height: auto;
  }

  .stats-hero,
  .player-card-hero {
    padding: clamp(1.5rem, 6vw, 2.25rem);
  }

  .stats-hero h1,
  .player-card-hero h1 {
    font-size: clamp(2.15rem, 12vw, 4rem);
    line-height: 0.95;
    overflow-wrap: anywhere;
  }

  .stats-toolbar,
  .player-search {
    grid-template-columns: 1fr !important;
    gap: 0.85rem;
  }

  .stats-field,
  .stats-field.wide,
  .player-typeahead {
    min-width: 0;
    width: 100%;
  }

  .stats-field input,
  .stats-field select,
  .player-typeahead input {
    width: 100%;
    min-width: 0;
  }

  .stats-summary {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .stats-layout {
    grid-template-columns: 1fr !important;
  }

  .compare-card {
    max-width: 100%;
  }

  .player-showcase,
  .player-showcase-featured {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .player-identity-card,
  .player-identity-card-featured {
    width: min(100%, 380px);
    margin-inline: auto;
  }

  .player-stat-board,
  .player-stat-board-featured {
    min-width: 0;
    width: 100%;
  }

  .player-card-header,
  .player-card-header-featured {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.8rem;
  }

  .player-card-header-featured h2 {
    font-size: clamp(2.15rem, 12vw, 3.65rem);
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .player-card-header-featured p,
  .player-card-header p {
    overflow-wrap: anywhere;
  }

  .player-stat-sections {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .player-stat-sections section {
    min-width: 0;
  }

  .player-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .player-section-impact-bar {
    width: 100%;
  }

  .player-season-controls {
    flex-wrap: wrap;
    gap: 0.65rem;
  }
}

@media (max-width: 640px) {
  .site-header {
    align-items: center;
  }

  .site-nav {
    max-width: 100%;
  }

  .panel {
    border-radius: 0.9rem;
  }

  .player-search {
    padding: 0.85rem;
  }

  .player-view-toggle {
    width: 100%;
    justify-content: center;
  }

  .player-card-header,
  .player-card-header-featured {
    grid-template-columns: 1fr;
  }

  .player-card-header .badge,
  .player-card-header-featured .badge {
    justify-self: start;
  }

  .player-card-header-featured h2 {
    font-size: clamp(2rem, 15vw, 3rem);
  }

  .player-feature-badges {
    gap: 0.35rem;
  }

  .player-feature-badges span {
    font-size: 0.66rem;
    padding: 0.3rem 0.55rem;
  }

  .player-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.55rem;
  }

  .player-stat-tile strong {
    font-size: clamp(1.1rem, 7vw, 1.6rem);
  }

  .player-identity-card,
  .player-identity-card-featured {
    width: min(100%, 330px);
  }

  .player-card-rating {
    transform: scale(0.9);
    transform-origin: top right;
  }

  .stats-table-wrap::after {
    content: "Swipe table horizontally";
    display: block;
    padding: 0.5rem 0.25rem 0;
    color: rgba(230, 245, 255, 0.55);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .schedule-modal-window,
  .modal-window,
  .admin-modal-window {
    width: 96vw;
    max-width: 96vw;
    max-height: 86vh;
    border-radius: 1rem;
  }
}

@media (max-width: 430px) {
  .page-shell {
    padding-inline: 0.55rem;
  }

  .admin-page-shell {
    padding-inline: 0.275rem;
  }

  .stats-hero,
  .player-card-hero {
    padding: 1.25rem;
  }

  .stats-hero h1,
  .player-card-hero h1 {
    font-size: clamp(1.9rem, 14vw, 2.8rem);
  }

  .player-stat-grid {
    grid-template-columns: 1fr !important;
  }

  .player-section-impact-label {
    font-size: 0.64rem;
  }

  .player-card-rating {
    transform: scale(0.82);
  }
}


/* AGL Schedule Mobile Minimal Scoreboard v6
   Desktop schedule layout remains original.
*/
.schedule-mobile-status {
  display: none;
}

@media (max-width: 640px) {
  .schedule-game-card {
    padding: 0.75rem !important;
  }

  .schedule-game-card .schedule-game-meta {
    display: none !important;
  }

  .schedule-game-card .schedule-matchup {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 0.42rem !important;
    width: 100% !important;
  }

  .schedule-game-card .schedule-team {
    flex: initial !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.28rem !important;
    min-width: 0 !important;
    width: auto !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .schedule-game-card .schedule-team:last-of-type {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .schedule-game-card .schedule-team img,
  .schedule-game-card .schedule-team-fallback {
    width: 1.55rem !important;
    height: 1.55rem !important;
    flex-basis: 1.55rem !important;
    border-radius: 0.4rem !important;
  }

  .schedule-game-card .schedule-team > div {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0.18rem !important;
    min-width: 0 !important;
  }

  .schedule-game-card .schedule-team strong {
    font-size: clamp(0.86rem, 4.3vw, 1.08rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .schedule-game-card .schedule-team span {
    display: none !important;
  }

  .schedule-game-card .schedule-versus {
    justify-self: center !important;
    font-size: 0 !important;
    width: auto !important;
  }

  .schedule-game-card .schedule-versus::before {
    content: "@";
    color: rgba(221, 234, 246, 0.72);
    font-size: 0.78rem;
    font-weight: 950;
  }

  .schedule-game-card .schedule-scoreboard {
    display: contents !important;
  }

  .schedule-game-card .schedule-scoreboard > span {
    color: #ff6f7a !important;
    font-size: clamp(0.86rem, 4.3vw, 1.08rem) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    min-width: auto !important;
  }

  .schedule-game-card .schedule-scoreboard strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 0 !important;
    width: auto !important;
    justify-self: center !important;
  }

  .schedule-game-card .schedule-scoreboard strong::before {
    content: "@";
    color: rgba(221, 234, 246, 0.72);
    font-size: 0.78rem;
    font-weight: 950;
  }

  .schedule-game-card .schedule-scoreboard strong small {
    display: none !important;
  }

  .schedule-game-card .schedule-mobile-status {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    justify-self: end !important;
    min-width: 4.05rem !important;
    max-width: 5.6rem !important;
    padding: 0.32rem 0.5rem !important;
    border-radius: 999px !important;
    background: rgba(var(--accent-bright-rgb), 0.08) !important;
    border: 1px solid rgba(var(--accent-bright-rgb), 0.22) !important;
    color: #5de7ff !important;
    font-size: clamp(0.64rem, 3.1vw, 0.78rem) !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0.03em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .schedule-game-card.is-final .schedule-mobile-status {
    background: rgba(56, 224, 139, 0.1) !important;
    border-color: rgba(56, 224, 139, 0.34) !important;
    color: #63dd88 !important;
  }

  .schedule-game-card.is-final-ot .schedule-mobile-status {
    background: rgba(255, 214, 74, 0.1) !important;
    border-color: rgba(255, 214, 74, 0.34) !important;
    color: #ffd64a !important;
  }
}

@media (max-width: 390px) {
  .schedule-game-card .schedule-matchup {
    gap: 0.25rem !important;
  }

  .schedule-game-card .schedule-team img,
  .schedule-game-card .schedule-team-fallback {
    width: 1.35rem !important;
    height: 1.35rem !important;
    flex-basis: 1.35rem !important;
  }

  .schedule-game-card .schedule-mobile-status {
    min-width: 3.7rem !important;
    padding-inline: 0.35rem !important;
  }
}


/* AGL Schedule Date-Based Scoreboard Rework v7 */
.schedule-date-group {
  display: grid;
  gap: 0.9rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.schedule-date-group + .schedule-date-group {
  margin-top: 1.25rem;
}

.schedule-date-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.16);
  border-radius: 0.95rem;
  background: rgba(3, 12, 22, 0.42);
}

.schedule-date-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.schedule-date-heading span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.schedule-date-heading-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.schedule-date-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.25);
  border-radius: 0.5rem;
  background: rgba(var(--accent-strong-rgb), 0.08);
  color: #ffffff;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.schedule-date-toggle-btn:hover {
  background: rgba(var(--accent-strong-rgb), 0.18);
}

.schedule-date-group.is-collapsed .schedule-date-toggle-btn {
  transform: rotate(-90deg);
}

.schedule-date-group.is-collapsed .schedule-time-groups {
  display: none;
}

.schedule-date-games {
  display: grid;
  gap: 0.75rem;
}

.schedule-date-group .schedule-game-card {
  border-radius: 0.8rem;
}

/* Desktop: restore wide matchup behavior and anchor home team right */
@media (min-width: 641px) {
  .schedule-date-group .schedule-matchup {
    grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
    gap: 1rem;
  }

  .schedule-date-group .schedule-team {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .schedule-date-group .schedule-team:last-child {
    justify-content: flex-end;
    text-align: right;
  }

  .schedule-date-group .schedule-scoreboard,
  .schedule-date-group .schedule-versus {
    justify-self: center;
  }

  .schedule-date-group .schedule-mobile-status {
    display: none !important;
  }
}

/* Mobile: compact scoreboard row, date groups only */
@media (max-width: 640px) {
  .schedule-date-heading {
    padding: 0.75rem 0.85rem;
  }
.schedule-date-group .schedule-game-card {
  }
.schedule-date-group .schedule-matchup {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto !important;
  }

  .schedule-date-group .schedule-team {
    flex: initial !important;
  }
.schedule-date-group .schedule-team img,
  .schedule-date-group .schedule-team-fallback {
    width: 1.55rem !important;
    height: 1.55rem !important;
    flex-basis: 1.55rem !important;
  }

  .schedule-date-group .schedule-team > div {
    gap: 0.18rem !important;
  }
.schedule-date-group .schedule-team span {
  }
.schedule-date-group .schedule-versus::before {
  }
.schedule-date-group .schedule-scoreboard > span {
    line-height: 1 !important;
  }

  .schedule-date-group .schedule-scoreboard strong {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .schedule-date-group .schedule-scoreboard strong::before {
    content: "@";
    color: rgba(221, 234, 246, 0.72);
    font-size: 0.78rem;
    font-weight: 950;
  }
.schedule-date-group .schedule-mobile-status {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    justify-self: end !important;
    min-width: 4.05rem !important;
    max-width: 5.6rem !important;
    padding: 0.32rem 0.5rem !important;
    border-radius: 999px !important;
    border: 1px solid rgba(var(--accent-bright-rgb), 0.22) !important;
    font-size: clamp(0.64rem, 3.1vw, 0.78rem) !important;
    font-weight: 950 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }
.schedule-date-group .schedule-game-card.is-final-ot .schedule-mobile-status {
    background: rgba(255, 214, 74, 0.1) !important;
    border-color: rgba(255, 214, 74, 0.34) !important;
    color: #ffd64a !important;
  }
}

@media (max-width: 390px) {
  .schedule-date-group .schedule-matchup {
    gap: 0.25rem !important;
  }

  .schedule-date-group .schedule-team img,
  .schedule-date-group .schedule-team-fallback {
    width: 1.35rem !important;
    height: 1.35rem !important;
    flex-basis: 1.35rem !important;
  }

  .schedule-date-group .schedule-mobile-status {
    min-width: 3.7rem !important;
    padding-inline: 0.35rem !important;
  }
}


/* AGL Schedule Mobile Exact Row v8
   Uses dedicated mobile-only markup so desktop layout is not reshaped.
*/
.schedule-mobile-row {
  display: none;
}

@media (max-width: 640px) {
  .schedule-date-group .schedule-game-card {
    padding: 0.7rem 0.75rem !important;
  }

  .schedule-date-group .schedule-game-meta,
  .schedule-date-group .schedule-matchup {
    display: none !important;
  }

  .schedule-mobile-row {
    display: grid !important;
    grid-template-columns: minmax(0, auto) auto minmax(0, auto) auto;
    align-items: center;
    gap: 0.48rem;
    width: 100%;
    min-width: 0;
  }

  .schedule-mobile-team {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-width: 0;
    white-space: nowrap;
  }

  .schedule-mobile-team img,
  .schedule-mobile-team .schedule-team-fallback {
    width: 1.65rem !important;
    height: 1.65rem !important;
    max-width: 1.65rem !important;
    max-height: 1.65rem !important;
    flex: 0 0 1.65rem !important;
    object-fit: contain;
    border-radius: 0.38rem;
  }

  .schedule-mobile-team strong {
    color: #ffffff;
    font-size: clamp(0.92rem, 4.6vw, 1.12rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .schedule-mobile-score {
    color: #ff6f7a;
    font-size: clamp(0.92rem, 4.6vw, 1.12rem);
    font-weight: 950;
    line-height: 1;
  }

  .schedule-mobile-at {
    justify-self: center;
    color: rgba(221, 234, 246, 0.72);
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1;
  }

  .schedule-mobile-badge {
    justify-self: end;
    min-width: 4.1rem;
    max-width: 5.8rem;
    padding: 0.34rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--accent-bright-rgb), 0.08);
    border: 1px solid rgba(var(--accent-bright-rgb), 0.25);
    color: #5de7ff;
    font-size: clamp(0.66rem, 3.2vw, 0.8rem);
    font-weight: 950;
    line-height: 1;
    letter-spacing: 0.03em;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .schedule-mobile-row.is-final .schedule-mobile-badge {
    background: rgba(56, 224, 139, 0.1);
    border-color: rgba(56, 224, 139, 0.36);
    color: #63dd88;
  }

  .schedule-mobile-row.is-final-ot .schedule-mobile-badge {
    background: rgba(255, 214, 74, 0.1);
    border-color: rgba(255, 214, 74, 0.36);
    color: #ffd64a;
  }
}

@media (max-width: 410px) {
  .schedule-mobile-row {
    grid-template-columns: minmax(0, auto) auto minmax(0, auto) auto;
    gap: 0.34rem;
  }

  .schedule-mobile-team {
    gap: 0.24rem;
  }

  .schedule-mobile-team img,
  .schedule-mobile-team .schedule-team-fallback {
    width: 1.42rem !important;
    height: 1.42rem !important;
    max-width: 1.42rem !important;
    max-height: 1.42rem !important;
    flex-basis: 1.42rem !important;
  }

  .schedule-mobile-badge {
    min-width: 3.7rem;
    padding-inline: 0.4rem;
  }
}


/* AGL Schedule Compact Cards Rebuild v14 */
.schedule-date-games {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
  gap: 0.45rem;
}

.schedule-date-group .schedule-game-card {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.schedule-date-group .schedule-game-meta,
.schedule-date-group .schedule-matchup,
.schedule-date-group .schedule-unified-row,
.schedule-date-group .schedule-mobile-row,
.schedule-date-group .schedule-mobile-status {
  display: none !important;
}

.schedule-compact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 4.55rem;
  padding: 0.62rem 0.72rem;
  border: 1px solid rgba(var(--fg-rgb), 0.22);
  border-radius: 0.48rem;
  overflow: hidden;
}
.schedule-compact-teams {
  display: grid;
  gap: 0.34rem;
  min-width: 0;
}

.schedule-compact-team {
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.schedule-compact-team img,
.schedule-compact-team .schedule-team-fallback {
  width: 1.55rem;
  height: 1.55rem;
  max-width: 1.55rem;
  max-height: 1.55rem;
  object-fit: contain;
  border-radius: 0.25rem;
}

.schedule-compact-name {
  display: grid;
  min-width: 0;
}

.schedule-compact-name strong {
  color: #ffffff;
  font-size: clamp(0.9rem, 1.45vw, 1.08rem);
  font-weight: 850;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-compact-name span {
  display: none;
}

.schedule-compact-score {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  font-weight: 850;
  line-height: 1;
}

.schedule-compact-score.is-winner {
  color: #ffd64a;
  font-weight: 1000;
}

.schedule-compact-meta {
  display: grid;
  gap: 0.18rem;
  justify-items: end;
  align-content: center;
  min-width: 3.7rem;
  text-align: right;
}

.schedule-compact-meta strong {
  color: #ffffff;
  font-size: clamp(0.9rem, 1.55vw, 1.08rem);
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.schedule-compact-card.is-final .schedule-compact-meta strong {
  font-size: clamp(0.86rem, 1.35vw, 1rem);
  letter-spacing: 0.04em;
}

.schedule-compact-card.is-final-ot .schedule-compact-meta strong {
  color: #ffd64a;
}

.schedule-compact-meta span {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Server code sits under the game code, deliberately distinct from it —
   several near-duplicate ".schedule-compact-meta span" color rules exist
   further down this file (some !important) for other card states. A bare
   class selector loses to those on specificity even with !important, since
   they carry an extra element-selector component — so this is qualified
   with both the parent class and the span element to guarantee it wins. */
.schedule-compact-meta span.schedule-compact-server {
  color: var(--green, #4ade80) !important;
}

.schedule-compact-card.is-upcoming .schedule-compact-name strong {
  font-weight: 620;
}

.schedule-compact-card.is-upcoming .schedule-compact-meta strong {
  font-weight: 700;
}

@media (max-width: 900px) {
  .schedule-date-games {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
}

@media (max-width: 640px) {
  .schedule-date-games {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .schedule-compact-card {
    min-height: 3.6rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.58rem 0.66rem;
    border-radius: 0.78rem;
  }

  .schedule-compact-teams {
    grid-template-columns: minmax(0, auto) auto minmax(0, auto);
    align-items: center;
    gap: 0.36rem;
  }

  .schedule-compact-team {
    display: inline-grid;
    grid-template-columns: 1.42rem auto auto;
    gap: 0.28rem;
  }

  .schedule-compact-team + .schedule-compact-team::before {
    content: "@";
    align-self: center;
    color: rgba(221, 234, 246, 0.72);
    font-size: 0.78rem;
    font-weight: 950;
    margin-right: 0.08rem;
  }

  .schedule-compact-team img,
  .schedule-compact-team .schedule-team-fallback {
    width: 1.42rem;
    height: 1.42rem;
    max-width: 1.42rem;
    max-height: 1.42rem;
  }

  .schedule-compact-name strong,
  .schedule-compact-score {
    font-size: clamp(0.9rem, 4.5vw, 1.08rem);
  }

  .schedule-compact-meta {
    min-width: 4.1rem;
  }

  .schedule-compact-card.is-final .schedule-compact-meta strong,
  .schedule-compact-meta strong {
    padding: 0.33rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--accent-bright-rgb), 0.08);
    border: 1px solid rgba(var(--accent-bright-rgb), 0.25);
    color: #5de7ff;
    font-size: clamp(0.64rem, 3.1vw, 0.78rem);
    font-weight: 950;
  }

  .schedule-compact-card.is-final .schedule-compact-meta strong {
    background: rgba(56, 224, 139, 0.1);
    border-color: rgba(56, 224, 139, 0.36);
    color: #63dd88;
  }

  .schedule-compact-card.is-final-ot .schedule-compact-meta strong {
    background: rgba(255, 214, 74, 0.1);
    border-color: rgba(255, 214, 74, 0.36);
    color: #ffd64a;
  }

  .schedule-compact-meta span {
    display: none;
  }
}


/* AGL Schedule Mobile Clean Compact Cards v15 */
.schedule-name-abbr {
  display: none;
}

@media (max-width: 640px) {
  .schedule-date-games {
    grid-template-columns: 1fr !important;
    gap: 0.58rem !important;
  }

  .schedule-compact-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-height: 4.25rem !important;
    padding: 0.68rem 0.75rem !important;
    border-radius: 0.82rem !important;
  }

  .schedule-compact-teams {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.45rem !important;
    min-width: 0 !important;
  }

  .schedule-compact-team {
    display: grid !important;
    grid-template-columns: 1.65rem minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 0.48rem !important;
    min-width: 0 !important;
  }

  .schedule-compact-team + .schedule-compact-team::before {
    content: none !important;
  }

  .schedule-compact-team img,
  .schedule-compact-team .schedule-team-fallback {
    width: 1.65rem !important;
    height: 1.65rem !important;
    max-width: 1.65rem !important;
    max-height: 1.65rem !important;
    object-fit: contain !important;
  }

  .schedule-compact-name {
    min-width: 0 !important;
  }

  .schedule-compact-name .schedule-name-full {
    display: none !important;
  }

  .schedule-compact-name .schedule-name-abbr {
    display: block !important;
    color: #ffffff !important;
    font-size: clamp(1rem, 5vw, 1.25rem) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .schedule-compact-card.is-upcoming .schedule-name-abbr {
    font-weight: 650 !important;
    color: rgba(var(--fg-rgb), 0.9) !important;
  }

  .schedule-compact-score {
    justify-self: end !important;
    color: #ffffff !important;
    font-size: clamp(1rem, 5vw, 1.25rem) !important;
    font-weight: 850 !important;
  }

  .schedule-compact-score.is-winner {
    color: #ffd64a !important;
    font-weight: 1000 !important;
    text-shadow:
      0 0 8px rgba(255, 214, 74, 0.44),
      0 0 16px rgba(255, 214, 74, 0.18) !important;
  }

  .schedule-compact-meta {
    display: grid !important;
    gap: 0.28rem !important;
    justify-items: end !important;
    align-content: center !important;
    min-width: 4.2rem !important;
    text-align: right !important;
  }

  .schedule-compact-meta strong {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    font-size: clamp(0.92rem, 4.5vw, 1.1rem) !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
  }

  .schedule-compact-card.is-final .schedule-compact-meta strong {
    color: #ffffff !important;
    font-size: clamp(0.82rem, 3.8vw, 0.98rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
  }

  .schedule-compact-card.is-final-ot .schedule-compact-meta strong {
    color: #ffd64a !important;
  }

  .schedule-compact-meta span {
    display: block !important;
    color: rgba(var(--accent-bright-rgb), 0.94) !important;
    font-size: clamp(0.62rem, 3vw, 0.72rem) !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  .schedule-compact-card.is-final .schedule-compact-meta strong {
    padding: 0.32rem 0.5rem !important;
    border-radius: 999px !important;
    background: rgba(56, 224, 139, 0.1) !important;
    border: 1px solid rgba(56, 224, 139, 0.34) !important;
    color: #63dd88 !important;
  }

  .schedule-compact-card.is-final-ot .schedule-compact-meta strong {
    background: rgba(255, 214, 74, 0.1) !important;
    border-color: rgba(255, 214, 74, 0.34) !important;
    color: #ffd64a !important;
  }

  .schedule-compact-card.is-upcoming .schedule-compact-meta strong {
    font-weight: 700 !important;
    color: rgba(var(--fg-rgb), 0.86) !important;
  }

  .schedule-date-heading {
    padding: 0.72rem 0.85rem !important;
  }

  .schedule-date-heading h2 {
    font-size: clamp(0.95rem, 4.6vw, 1.15rem) !important;
  }
}

@media (max-width: 390px) {
  .schedule-compact-card {
    gap: 0.55rem !important;
    padding: 0.62rem 0.65rem !important;
  }

  .schedule-compact-team {
    grid-template-columns: 1.45rem minmax(0, 1fr) auto !important;
    gap: 0.38rem !important;
  }

  .schedule-compact-team img,
  .schedule-compact-team .schedule-team-fallback {
    width: 1.45rem !important;
    height: 1.45rem !important;
    max-width: 1.45rem !important;
    max-height: 1.45rem !important;
  }

  .schedule-compact-meta {
    min-width: 3.75rem !important;
  }
}


/* AGL Schedule Compact Card Visual Polish v19
   CSS-only polish pass. No render logic changes.
*/
.schedule-date-heading {
  background:
    linear-gradient(135deg, rgba(4, 17, 30, 0.92), rgba(3, 9, 18, 0.86)),
    radial-gradient(circle at 8% 50%, rgba(var(--accent-bright-rgb), 0.08), transparent 38%);
  border-color: rgba(var(--accent-bright-rgb), 0.18);
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.05),
    0 10px 28px rgba(0, 0, 0, 0.22);
}

.schedule-date-heading h2 {
  text-shadow: 0 0 12px rgba(var(--fg-rgb), 0.08);
}

.schedule-date-heading span {
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: rgba(var(--accent-bright-rgb), 0.06);
  border: 1px solid rgba(var(--accent-bright-rgb), 0.12);
}

.schedule-compact-card {
  position: relative;
  isolation: isolate;
  border-color: rgba(var(--accent-bright-rgb), 0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-bright-rgb), 0.08), transparent 42%),
    linear-gradient(135deg, rgba(7, 25, 36, 0.92), rgba(5, 9, 17, 0.96) 48%, rgba(15, 10, 18, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.045),
    inset 0 0 26px rgba(var(--accent-bright-rgb), 0.025),
    0 8px 22px rgba(0, 0, 0, 0.3);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.schedule-compact-card::before {
  z-index: -1;
}

.schedule-compact-card::after {
  z-index: -1;
}

.schedule-compact-card.is-final {
  border-color: rgba(255, 214, 74, 0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 214, 74, 0.08), transparent 42%),
    linear-gradient(135deg, rgba(30, 16, 12, 0.92), rgba(7, 8, 14, 0.96) 52%, rgba(14, 10, 14, 0.92));
}

.schedule-compact-card.is-upcoming {
  border-color: rgba(var(--accent-bright-rgb), 0.22);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-bright-rgb), 0.075), transparent 42%),
    linear-gradient(135deg, rgba(5, 26, 36, 0.9), rgba(5, 10, 18, 0.96) 52%, rgba(8, 10, 18, 0.92));
}

@media (hover: hover) and (pointer: fine) {
  .schedule-compact-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-bright-rgb), 0.46);
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb), 0.07),
      inset 0 0 30px rgba(var(--accent-bright-rgb), 0.045),
      0 12px 32px rgba(0, 0, 0, 0.38),
      0 0 18px rgba(var(--accent-bright-rgb), 0.12);
  }

  .schedule-compact-card.is-final:hover {
    border-color: rgba(255, 214, 74, 0.4);
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb), 0.07),
      inset 0 0 30px rgba(255, 214, 74, 0.035),
      0 12px 32px rgba(0, 0, 0, 0.38),
      0 0 18px rgba(255, 214, 74, 0.1);
  }
}

.schedule-compact-name strong {
  text-shadow: 0 0 10px rgba(var(--fg-rgb), 0.045);
}

.schedule-compact-card.is-upcoming .schedule-compact-name strong {
  color: rgba(var(--fg-rgb), 0.92);
}

.schedule-compact-card.is-final .schedule-compact-name strong {
  color: rgba(var(--fg-rgb), 0.96);
}

.schedule-compact-score {
  color: rgba(241, 244, 248, 0.92);
}

.schedule-compact-score.is-winner {
  text-shadow:
    0 0 8px rgba(255, 214, 74, 0.5),
    0 0 18px rgba(255, 214, 74, 0.22),
    0 0 28px rgba(255, 214, 74, 0.08);
}

.schedule-compact-meta {
  padding-left: 0.65rem;
  border-left: 1px solid rgba(var(--fg-rgb), 0.08);
}

.schedule-compact-meta strong {
  text-shadow: 0 0 10px rgba(var(--fg-rgb), 0.05);
}

.schedule-compact-card.is-upcoming .schedule-compact-meta strong {
  color: rgba(var(--fg-rgb), 0.92);
}

.schedule-compact-meta span {
  color: rgba(var(--accent-bright-rgb), 0.82);
}

.schedule-compact-card.is-final .schedule-compact-meta strong {
  color: #ffffff;
}

.schedule-compact-card.is-final .schedule-compact-meta span {
  color: rgba(225, 238, 248, 0.66);
}
.schedule-compact-card.is-final .schedule-compact-team.is-winner img,
@media (max-width: 640px) {
  .schedule-compact-card {
    border-color: rgba(var(--accent-bright-rgb), 0.2);
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb), 0.045),
      0 8px 20px rgba(0, 0, 0, 0.24);
  }

  .schedule-compact-meta {
    padding-left: 0.5rem;
  }

  .schedule-compact-card.is-final .schedule-compact-meta strong {
    box-shadow: 0 0 12px rgba(56, 224, 139, 0.08);
  }

  .schedule-compact-card.is-final-ot .schedule-compact-meta strong {
    box-shadow: 0 0 12px rgba(255, 214, 74, 0.1);
  }
}


/* AGL Schedule Final Compact Polish v20
   CSS-only final visual pass. No layout or JS changes.
*/
.schedule-compact-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(70, 140, 255, 0.26) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-bright-rgb), 0.10), transparent 42%),
    linear-gradient(
      135deg,
      rgba(0, 140, 255, 0.075) 0%,
      rgba(0, 0, 0, 0.74) 46%,
      rgba(120, 0, 255, 0.06) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.055),
    inset 0 0 26px rgba(var(--accent-bright-rgb),0.035),
    0 0 0 1px rgba(0,140,255,0.045),
    0 8px 28px rgba(0,0,0,0.34) !important;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

.schedule-compact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(var(--accent-bright-rgb),0.14), transparent 30%, transparent 70%, rgba(var(--accent-bright-rgb),0.08));
  opacity: 0.42;
}

.schedule-compact-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(var(--fg-rgb),0.045), transparent 35%);
}

@media (hover: hover) and (pointer: fine) {
  .schedule-compact-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-strong-rgb), 0.48) !important;
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.07),
      inset 0 0 32px rgba(var(--accent-bright-rgb),0.052),
      0 0 0 1px rgba(0,140,255,0.08),
      0 12px 34px rgba(0,0,0,0.44),
      0 0 20px rgba(0,140,255,0.13) !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  .schedule-compact-card.is-final:hover {
    border-color: rgba(255, 214, 74, 0.44) !important;
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.07),
      inset 0 0 30px rgba(255,214,74,0.04),
      0 12px 34px rgba(0,0,0,0.44),
      0 0 20px rgba(255,214,74,0.12) !important;
  }
}
.schedule-compact-card.is-final .schedule-compact-score:not(.is-winner) {
  opacity: 0.76;
}

.schedule-compact-card.is-final .schedule-compact-meta strong {
  border-radius: 999px !important;
  padding: 0.34rem 0.62rem !important;
  font-size: clamp(0.7rem, 1vw, 0.82rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 0 14px rgba(90, 255, 120, 0.08);
}

.schedule-compact-card.is-final-ot .schedule-compact-meta strong {
  box-shadow: 0 0 14px rgba(255, 214, 74, 0.10);
}

.schedule-compact-meta span {
  text-shadow: 0 0 10px rgba(var(--accent-bright-rgb), 0.12);
}

.schedule-compact-card.is-upcoming .schedule-compact-name strong {
  font-weight: 660 !important;
  color: rgba(var(--fg-rgb),0.91) !important;
}

.schedule-compact-card.is-upcoming .schedule-compact-meta strong {
  font-weight: 760 !important;
  color: rgba(var(--fg-rgb),0.95) !important;
}

.schedule-compact-team img,
.schedule-compact-team .schedule-team-fallback {
  filter: drop-shadow(0 0 8px rgba(var(--accent-bright-rgb), 0.11));
}

.schedule-compact-card.is-final .schedule-compact-team.is-winner img,
.schedule-compact-card.is-final .schedule-compact-team.is-winner .schedule-team-fallback {
  filter: drop-shadow(0 0 10px rgba(255, 214, 74, 0.20));
}

@media (max-width: 640px) {
  .schedule-compact-card {
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.05),
      0 8px 22px rgba(0,0,0,0.28) !important;
  }

  .schedule-compact-card.is-final .schedule-compact-meta strong {
    font-size: clamp(0.64rem, 3vw, 0.78rem) !important;
    padding: 0.32rem 0.5rem !important;
  }
}


/* AGL Schedule Finalized Blue/Silver Glow v21
   Overrides finalized-game atmosphere only.
   Keeps gold winning score intact.
*/
.schedule-compact-card.is-final {
  border-color: rgba(170, 210, 255, 0.24) !important;
  background:
    radial-gradient(
      circle at top left,
      rgba(180, 220, 255, 0.08),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      rgba(80, 160, 255, 0.05) 0%,
      rgba(0, 0, 0, 0.82) 48%,
      rgba(180, 220, 255, 0.04) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.08),
    inset 0 0 24px rgba(180,220,255,0.035),
    0 0 0 1px rgba(120,180,255,0.06),
    0 10px 28px rgba(0,0,0,0.42),
    0 0 22px rgba(180,220,255,0.10) !important;
}

@media (hover: hover) and (pointer: fine) {
  .schedule-compact-card.is-final:hover {
    border-color: rgba(210, 230, 255, 0.42) !important;
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.10),
      inset 0 0 34px rgba(180,220,255,0.05),
      0 12px 34px rgba(0,0,0,0.48),
      0 0 30px rgba(180,220,255,0.14) !important;
  }
}
.schedule-compact-card.is-final-ot .schedule-compact-meta strong {
  background: rgba(220,235,255,0.12) !important;
  border-color: rgba(220,235,255,0.32) !important;
  color: #ffffff !important;
}


/* AGL Schedule Vibrant Blue/Silver Glow v22
   Brighter version of the finalized-card polish.
   Keeps the compact layout unchanged.
*/
.schedule-compact-card {
  border-color: rgba(48, 190, 255, 0.42) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-bright-rgb), 0.16), transparent 43%),
    linear-gradient(
      135deg,
      rgba(5, 55, 86, 0.66) 0%,
      rgba(3, 8, 18, 0.90) 48%,
      rgba(13, 21, 54, 0.82) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.10),
    inset 0 0 28px rgba(var(--accent-bright-rgb),0.07),
    0 0 0 1px rgba(var(--accent-bright-rgb),0.10),
    0 8px 28px rgba(0,0,0,0.36),
    0 0 18px rgba(var(--accent-bright-rgb),0.12) !important;
}
.schedule-compact-card.is-upcoming {
}

.schedule-compact-card.is-final {
  border-color: rgba(220, 238, 255, 0.72) !important;
  background:
    radial-gradient(circle at top left, rgba(230, 245, 255, 0.18), transparent 38%),
    radial-gradient(circle at 85% 50%, rgba(80, 180, 255, 0.12), transparent 42%),
    linear-gradient(
      135deg,
      rgba(74, 143, 190, 0.30) 0%,
      rgba(5, 8, 16, 0.91) 45%,
      rgba(180, 220, 255, 0.12) 100%
    ) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.18),
    inset 0 0 34px rgba(220,238,255,0.08),
    0 0 0 1px rgba(220,238,255,0.14),
    0 10px 30px rgba(0,0,0,0.44),
    0 0 22px rgba(180,220,255,0.24),
    0 0 34px rgba(48,190,255,0.10) !important;
}
.schedule-compact-card.is-final::after {
}

@media (hover: hover) and (pointer: fine) {
  .schedule-compact-card:hover {
    border-color: rgba(var(--accent-bright-rgb), 0.70) !important;
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.14),
      inset 0 0 34px rgba(var(--accent-bright-rgb),0.10),
      0 12px 34px rgba(0,0,0,0.44),
      0 0 26px rgba(var(--accent-bright-rgb),0.22) !important;
  }

  .schedule-compact-card.is-final:hover {
    border-color: rgba(245, 250, 255, 0.90) !important;
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.20),
      inset 0 0 40px rgba(220,238,255,0.10),
      0 12px 36px rgba(0,0,0,0.48),
      0 0 30px rgba(220,238,255,0.30),
      0 0 42px rgba(var(--accent-bright-rgb),0.16) !important;
  }
}
.schedule-compact-score.is-winner {
}
.schedule-date-heading {
}

.schedule-date-heading span {
  background: rgba(var(--accent-bright-rgb), 0.10) !important;
  border-color: rgba(var(--accent-bright-rgb), 0.20) !important;
  color: rgba(220, 240, 255, 0.88) !important;
}

@media (max-width: 640px) {
  .schedule-compact-card {
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.10),
      0 8px 24px rgba(0,0,0,0.34),
      0 0 16px rgba(var(--accent-bright-rgb),0.12) !important;
  }

  .schedule-compact-card.is-final {
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.16),
      0 8px 24px rgba(0,0,0,0.38),
      0 0 22px rgba(220,238,255,0.22) !important;
  }
}


/* AGL Schedule Crisp Outline v23
   Reduces interior wash. Makes final games crisp white/silver border glow.
   Upcoming games get metallic blue border glow.
*/
.schedule-compact-card {
  background:
    linear-gradient(135deg, rgba(3, 18, 28, 0.92), rgba(2, 6, 14, 0.97) 52%, rgba(7, 10, 23, 0.95)) !important;
  border-color: rgba(48, 176, 255, 0.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.055),
    0 0 0 1px rgba(0, 135, 255, 0.08),
    0 7px 20px rgba(0,0,0,0.34),
    0 0 10px rgba(48,176,255,0.12) !important;
}
.schedule-compact-card::after {
}

.schedule-compact-card.is-upcoming {
  background:
    linear-gradient(135deg, rgba(2, 28, 42, 0.92), rgba(2, 7, 16, 0.97) 52%, rgba(6, 10, 24, 0.94)) !important;
}

/* Finished games: crisp white/silver outline only, darker interior */
.schedule-compact-card.is-final {
  background:
    linear-gradient(135deg, rgba(8, 16, 25, 0.94), rgba(3, 6, 12, 0.98) 52%, rgba(8, 13, 21, 0.96)) !important;
  border-color: rgba(235, 247, 255, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.10),
    0 0 0 1px rgba(235,247,255,0.14),
    0 8px 22px rgba(0,0,0,0.40),
    0 0 10px rgba(235,247,255,0.22),
    0 0 18px rgba(var(--accent-strong-rgb),0.12) !important;
}
.schedule-compact-card.is-final::after {
}

@media (hover: hover) and (pointer: fine) {
  .schedule-compact-card:hover {
    border-color: rgba(var(--accent-bright-rgb), 0.72) !important;
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.07),
      0 0 0 1px rgba(var(--accent-bright-rgb),0.13),
      0 10px 26px rgba(0,0,0,0.42),
      0 0 16px rgba(var(--accent-bright-rgb),0.20) !important;
  }

  .schedule-compact-card.is-final:hover {
    border-color: rgba(var(--fg-rgb),0.95) !important;
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.12),
      0 0 0 1px rgba(var(--fg-rgb),0.18),
      0 10px 28px rgba(0,0,0,0.46),
      0 0 14px rgba(var(--fg-rgb),0.28),
      0 0 22px rgba(var(--accent-strong-rgb),0.16) !important;
  }
}

.schedule-compact-card.is-final .schedule-compact-meta strong {
  background: rgba(235,247,255,0.10) !important;
  border: 1px solid rgba(235,247,255,0.42) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.10),
    0 0 10px rgba(235,247,255,0.14) !important;
  text-shadow: 0 0 8px rgba(var(--fg-rgb),0.18) !important;
}

.schedule-compact-score.is-winner {
  color: #ffd85a !important;
  font-weight: 1000 !important;
  text-shadow:
    0 0 7px rgba(255,216,90,0.50),
    0 0 14px rgba(255,216,90,0.18) !important;
}

.schedule-compact-card.is-final .schedule-compact-score:not(.is-winner) {
  color: rgba(235, 242, 250, 0.88) !important;
  opacity: 0.86 !important;
}

.schedule-compact-meta span {
  color: rgba(var(--accent-bright-rgb), 0.95) !important;
  text-shadow: 0 0 8px rgba(var(--accent-bright-rgb),0.14) !important;
}

@media (max-width: 640px) {
  .schedule-compact-card.is-final {
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.10),
      0 7px 20px rgba(0,0,0,0.38),
      0 0 12px rgba(235,247,255,0.20) !important;
  }

  .schedule-compact-card.is-upcoming {
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.055),
      0 7px 18px rgba(0,0,0,0.34),
      0 0 10px rgba(var(--accent-strong-rgb),0.14) !important;
  }
}


/* AGL Schedule Grouped Date + Crisp Border v24 */

/* Date group becomes one grouped box holding its date bar and games */
.schedule-date-group {
  display: grid;
  gap: 0.65rem;
  padding: 0.82rem !important;
  border: 1px solid rgba(var(--accent-bright-rgb), 0.16) !important;
  border-radius: 1rem !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-bright-rgb), 0.055), transparent 36%),
    linear-gradient(135deg, rgba(5, 16, 27, 0.72), rgba(3, 7, 14, 0.86)) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.045),
    0 10px 28px rgba(0,0,0,0.25) !important;
}

.schedule-date-group + .schedule-date-group {
  margin-top: 1rem !important;
}

/* Remove game count from date bars */
.schedule-date-heading span {
  display: none !important;
}

.schedule-date-heading {
  padding: 0.78rem 0.95rem !important;
  border-radius: 0.78rem !important;
  border-color: rgba(var(--accent-bright-rgb), 0.18) !important;
  background:
    linear-gradient(135deg, rgba(var(--surface-deep-rgb), 0.92), rgba(var(--surface-deep-rgb), 0.90)) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.045),
    0 0 12px rgba(var(--accent-bright-rgb),0.055) !important;
}

/* Core card interiors stay dark; effects mostly live on border */
.schedule-compact-card {
  background:
    linear-gradient(135deg, rgba(3, 17, 27, 0.94), rgba(2, 5, 12, 0.985) 54%, rgba(6, 9, 20, 0.95)) !important;
  border-color: rgba(var(--accent-strong-rgb), 0.55) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.045),
    0 0 0 1px rgba(var(--accent-strong-rgb),0.08),
    0 7px 20px rgba(0,0,0,0.32),
    0 0 11px rgba(var(--accent-strong-rgb),0.15) !important;
}

.schedule-compact-card::before {
  opacity: 0.16 !important;
  background:
    linear-gradient(90deg, rgba(var(--accent-strong-rgb),0.34), transparent 16%, transparent 84%, rgba(var(--accent-strong-rgb),0.24)) !important;
}

.schedule-compact-card::after {
  opacity: 0.28 !important;
  background: linear-gradient(180deg, rgba(var(--fg-rgb),0.03), transparent 35%) !important;
}

.schedule-compact-card.is-upcoming {
  border-color: rgba(var(--sched-card-rgb), 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.045),
    0 0 0 1px rgba(var(--sched-card-rgb),0.09),
    0 7px 20px rgba(0,0,0,0.32),
    0 0 12px rgba(var(--sched-card-rgb),0.16) !important;
}

/* Finalized games: crisp border-only silver/white glow, no interior wash */
.schedule-compact-card.is-final {
  background:
    linear-gradient(135deg, rgba(var(--surface-panel-rgb), 0.96), rgba(var(--surface-deep-rgb), 0.99) 54%, rgba(var(--surface-panel-rgb), 0.96)) !important;
  border-color: rgba(235, 247, 255, 0.86) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.08),
    0 0 0 1px rgba(235,247,255,0.14),
    0 8px 22px rgba(0,0,0,0.38),
    0 0 9px rgba(235,247,255,0.22),
    0 0 16px rgba(var(--accent-strong-rgb),0.10) !important;
}

.schedule-compact-card.is-final::before {
  opacity: 0.30 !important;
  background:
    linear-gradient(90deg, rgba(var(--fg-rgb),0.46), transparent 12%, transparent 86%, rgba(235,247,255,0.30)) !important;
}

.schedule-compact-card.is-final::after {
  opacity: 0.24 !important;
  background: linear-gradient(180deg, rgba(var(--fg-rgb),0.04), transparent 32%) !important;
}

/* Records: only appear when JS finds record data, and only for unfinalized games */
.schedule-team-record {
  display: inline-block;
  margin-left: 0.45rem;
  color: rgba(215, 228, 240, 0.62);
  font-style: normal;
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: baseline;
}

.schedule-compact-card.is-final .schedule-team-record {
  display: none !important;
}

.schedule-compact-card.is-upcoming .schedule-team-record {
  color: rgba(215, 228, 240, 0.66);
  text-shadow: 0 0 8px rgba(var(--accent-bright-rgb),0.08);
}

/* Keep final badge clean silver/white */
.schedule-compact-card.is-final .schedule-compact-meta strong {
  background: rgba(235,247,255,0.10) !important;
  border: 1px solid rgba(235,247,255,0.42) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.10),
    0 0 10px rgba(235,247,255,0.14) !important;
  text-shadow: 0 0 8px rgba(var(--fg-rgb),0.18) !important;
}

@media (hover: hover) and (pointer: fine) {
  .schedule-compact-card:hover {
    border-color: rgba(78, 205, 255, 0.76) !important;
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.06),
      0 0 0 1px rgba(78,205,255,0.13),
      0 10px 26px rgba(0,0,0,0.40),
      0 0 15px rgba(78,205,255,0.20) !important;
  }

  .schedule-compact-card.is-final:hover {
    border-color: rgba(var(--fg-rgb),0.96) !important;
    box-shadow:
      inset 0 1px 0 rgba(var(--fg-rgb),0.10),
      0 0 0 1px rgba(var(--fg-rgb),0.16),
      0 10px 28px rgba(0,0,0,0.44),
      0 0 13px rgba(var(--fg-rgb),0.28),
      0 0 20px rgba(var(--accent-strong-rgb),0.14) !important;
  }
}

@media (max-width: 640px) {
  .schedule-date-group {
    padding: 0.7rem !important;
  }

  .schedule-team-record {
    margin-left: 0.35rem;
    font-size: 0.6em;
  }
}


/* AGL Schedule Same-Time Grouping v25 */
.schedule-time-groups {
  display: grid;
  gap: 0.82rem;
}

.schedule-time-group {
  display: grid;
  gap: 0.58rem;
}

.schedule-time-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0.45rem 0.25rem;
  border-bottom: 1px solid rgba(var(--accent-bright-rgb), 0.16);
  color: rgba(236, 248, 255, 0.96);
}

.schedule-time-heading strong {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #f4fbff;
  font-size: 0.9rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(var(--accent-bright-rgb), 0.2);
}

.schedule-time-heading strong::before {
  content: "";
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 999px;
  background: rgba(var(--accent-bright-rgb), 0.94);
  box-shadow: 0 0 12px rgba(var(--accent-bright-rgb), 0.52);
}

.schedule-time-heading span {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0.24rem 0.48rem;
  border: 1px solid rgba(var(--accent-bright-rgb), 0.18);
  border-radius: 999px;
  background: rgba(4, 16, 28, 0.58);
  color: rgba(190, 213, 230, 0.72);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule-time-group .schedule-date-games {
  margin: 0 !important;
}

@media (max-width: 640px) {
  .schedule-time-groups {
    gap: 0.7rem;
  }

  .schedule-time-heading {
    padding-inline: 0.25rem;
  }

  .schedule-time-heading strong {
    font-size: 0.8rem;
  }

  .schedule-time-heading span {
    display: none;
  }
}


/* AGL Schedule Hero Minimal Motion v26 */
.schedule-hero-minimal {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(190px, 22vw, 250px);
  place-items: center;
  overflow: hidden;
  padding: clamp(2.35rem, 5vw, 3.35rem) 1rem clamp(2rem, 4vw, 2.7rem);
  border-bottom: 1px solid rgba(var(--line-rgb), 0.18);
  background:
    linear-gradient(180deg, rgba(var(--surface-deep-rgb), 0.08), rgba(var(--surface-deep-rgb), 0.92)),
    radial-gradient(ellipse at 50% 18%, rgba(var(--accent-bright-rgb), 0.15), transparent 28rem),
    radial-gradient(ellipse at 16% 32%, rgba(255, 48, 72, 0.09), transparent 22rem),
    rgba(var(--surface-deep-rgb), 0.72);
}

.schedule-hero-minimal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(115deg, transparent 0 18%, rgba(var(--fg-rgb), 0.05) 18.15%, transparent 18.8%),
    repeating-linear-gradient(90deg, rgba(var(--fg-rgb), 0.022) 0 1px, transparent 1px 92px);
  opacity: 0.42;
  animation: scheduleHeroAmbient 8s ease-in-out infinite alternate;
}

.schedule-hero-minimal::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-bright-rgb), 0.7), rgba(255, 48, 72, 0.28), rgba(var(--accent-bright-rgb), 0.7), transparent);
  box-shadow: 0 0 10px rgba(var(--accent-bright-rgb), 0.24);
}

.schedule-hero-minimal > div {
  position: relative;
  width: min(700px, 100%);
  max-width: 700px;
  padding: 1.15rem 1rem 1.2rem;
  overflow: hidden;
  border: 1px solid rgba(var(--line-rgb), 0.12);
  border-radius: 14px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.02), rgba(var(--fg-rgb), 0.01)),
    rgba(3, 10, 18, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.04),
    0 14px 38px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(8px);
}

.schedule-hero-minimal > div::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0 38%, rgba(var(--fg-rgb), 0.075) 50%, transparent 62% 100%);
  opacity: 0.24;
  transform: translateX(-42%);
  animation: scheduleHeroGlassSweep 7s ease-in-out infinite;
}

.schedule-hero-minimal > div::after {
  content: "";
  display: block;
  width: min(260px, 44%);
  height: 1px;
  margin: 1rem auto 0;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-bright-rgb), 0.56), rgba(var(--fg-rgb), 0.36), rgba(var(--accent-bright-rgb), 0.56), transparent);
  background-size: 220% 100%;
  box-shadow: 0 0 12px rgba(var(--accent-bright-rgb), 0.18);
  animation: scheduleHeroDividerShimmer 5.8s ease-in-out infinite;
}

.schedule-hero-minimal h1 {
  margin: 0;
  font-size: clamp(1.4rem, 7vw, 3.8rem);
  line-height: 0.92;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-shadow:
    0 0 12px rgba(var(--accent-bright-rgb), 0.16),
    0 8px 22px rgba(0, 0, 0, 0.68);
  animation: scheduleHeroTitlePulse 7.5s ease-in-out infinite alternate;
}

@keyframes scheduleHeroAmbient {
  from {
    opacity: 0.34;
    transform: translate3d(-0.35%, 0, 0);
  }
  to {
    opacity: 0.52;
    transform: translate3d(0.35%, 0, 0);
  }
}

@keyframes scheduleHeroGlassSweep {
  0%, 58%, 100% {
    transform: translateX(-48%);
    opacity: 0;
  }
  70% {
    opacity: 0.22;
  }
  86% {
    transform: translateX(48%);
    opacity: 0;
  }
}

@keyframes scheduleHeroDividerShimmer {
  0%, 100% {
    background-position: 0% 50%;
    opacity: 0.72;
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
  }
}

@keyframes scheduleHeroTitlePulse {
  from {
    text-shadow:
      0 0 10px rgba(var(--accent-bright-rgb), 0.13),
      0 8px 22px rgba(0, 0, 0, 0.68);
  }
  to {
    text-shadow:
      0 0 16px rgba(var(--accent-bright-rgb), 0.24),
      0 0 30px rgba(var(--blue-rgb), 0.12),
      0 8px 22px rgba(0, 0, 0, 0.68);
  }
}

@media (prefers-reduced-motion: reduce) {
  .schedule-hero-minimal::before,
  .schedule-hero-minimal > div::before,
  .schedule-hero-minimal > div::after,
  .schedule-hero-minimal h1 {
    animation: none;
  }
}

@media (max-width: 640px) {
  .schedule-hero-minimal {
    min-height: 170px;
    padding: 2rem 0.75rem 1.85rem;
  }

  .schedule-hero-minimal > div {
    padding: 1rem 0.75rem;
  }

  .schedule-hero-minimal h1 {
    font-size: clamp(2.45rem, 15vw, 4rem);
  }
}


/* AGL Schedule Hero Motion v27 - Mobile Title Fix */
@media (max-width: 760px) {
  .schedule-hero-minimal {
    min-height: 160px;
  }

  .schedule-hero-minimal > div {
    padding: 0.95rem 0.65rem 1rem;
    overflow: hidden;
  }

  .schedule-hero-minimal h1 {
    font-size: clamp(1.8rem, 10vw, 3rem);
    letter-spacing: 0.022em;
    line-height: 0.94;
  }

  .schedule-hero-minimal > div::after {
    width: min(210px, 54%);
    margin-top: 0.82rem;
  }
}

@media (max-width: 380px) {
  .schedule-hero-minimal h1 {
    font-size: clamp(1.4rem, 10vw, 2.3rem);
    letter-spacing: 0.012em;
  }

  .schedule-hero-minimal > div {
    padding-inline: 0.5rem;
  }
}


/* Records mobile width fix */
@media (max-width: 640px) {
  .records-page {
    padding: 0.65rem;
    overflow: hidden;
  }

  .records-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .records-tabs::-webkit-scrollbar {
    display: none;
  }

  .records-tabs button {
    flex: 0 0 auto;
    padding: 0.5rem 0.6rem;
    font-size: 0.72rem;
  }

  .records-leader-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .records-season-select-wrap {
    flex-wrap: wrap;
  }

  .records-season-select-wrap select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    /* 16px stops iOS Safari from auto-zooming the page when the dropdown is tapped */
    font-size: 16px;
  }
.leader-controls .player-view-toggle {
    width: 100%;
    justify-content: center;
    overflow-x: auto;
    white-space: nowrap;
  }

  .leader-grid {
    grid-template-columns: 1fr;
  }

  .leader-card {
    max-width: 100%;
  }

  .leader-list a,
  .leader-top {
    min-width: 0;
  }

  .leader-top strong,
  .leader-list span {
    overflow-wrap: anywhere;
  }
}

/* Stats admin workflow tabs */
.stats-workflow-tabs {
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.stats-workflow-tabs [role="tab"] {
  border-color: rgba(89, 178, 255, 0.55);
}

.stats-workflow-tabs [role="tab"].is-active {
  box-shadow: 0 0 16px rgba(46, 156, 255, 0.35);
}

/* Maintenance buttons that live in the section heading, on the eyebrow's line. */
.stats-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.stats-workflow-tabs .is-health-check,
.stats-heading-actions .is-health-check {
  border-color: rgba(67, 255, 170, 0.65);
  color: #7affc8;
  background: rgba(19, 82, 61, 0.28);
}

.stats-workflow-tabs .is-health-check:hover,
.stats-workflow-tabs .is-health-check:focus-visible,
.stats-heading-actions .is-health-check:hover,
.stats-heading-actions .is-health-check:focus-visible {
  background: rgba(24, 128, 91, 0.42);
  box-shadow: 0 0 14px rgba(67, 255, 170, 0.28);
}

/* Column Order preset picker — rides in the workflow utility row. */
.stats-column-order-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.9;
}

.stats-column-order-switch select {
  min-height: 34px;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 0.6rem;
  outline: 0;
}

.stats-column-order-switch select:focus {
  border-color: rgba(var(--blue-soft-rgb), 0.75);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.14);
}

.stats-column-order-switch select option {
  background: rgb(var(--surface-panel-rgb));
  color: var(--text);
}

.stats-workflow-panel[hidden],
[data-stats-edit-panel][hidden],
[data-stats-form-panel][hidden] {
  display: none !important;
}

/* Generic admin tool switcher — same look as the stats workflow tabs, reused on events/team pages */
.admin-tool-switch-tabs {
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.admin-tool-switch-tabs [role="tab"] {
  border-color: rgba(89, 178, 255, 0.55);
}

.admin-tool-switch-tabs [role="tab"].is-active {
  box-shadow: 0 0 16px rgba(46, 156, 255, 0.35);
}

.admin-tool-option[hidden] {
  display: none !important;
}

/* Player profile insight cards */
.player-profile-extras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.player-profile-extra-card {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.08), transparent 52%),
    rgba(var(--surface-deep-rgb), 0.74);
  box-shadow: inset 0 0 24px rgba(var(--blue-soft-rgb), 0.05);
}

.player-profile-extra-card h3 {
  margin: 0 0 0.7rem;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.player-profile-mini-grid div {
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.24);
}

.player-profile-mini-grid span,
.player-profile-mini-grid small {
  display: block;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.player-profile-mini-grid strong {
  display: block;
  margin: 0.28rem 0 0.18rem;
  color: #ffffff;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

@media (max-width: 1180px) {
  .player-profile-extras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .player-profile-extras,
  .player-profile-mini-grid {
    grid-template-columns: 1fr;
  }
}


/* Player Profile Layout Polish - equal-height showcase + mobile name fit */
.player-showcase-featured {
  align-items: stretch;
}

.player-showcase-featured > .player-identity-card-featured,
.player-showcase-featured > .player-stat-board-featured {
  min-height: clamp(430px, 42vw, 545px);
  height: 100%;
}

.player-identity-card-featured {
  display: flex;
  flex-direction: column;
}

.player-identity-card-featured .player-position-card-image {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  object-fit: cover;
}

.player-stat-board-featured {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.player-card-header-featured h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  max-width: 100%;
}

.player-card-header-featured h2 span {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-card-header-featured .player-header-team-logo {
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .player-showcase-featured > .player-identity-card-featured,
  .player-showcase-featured > .player-stat-board-featured {
    min-height: auto;
  }

  .player-stat-board-featured {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .player-card-header-featured h2 {
    font-size: clamp(1.6rem, 10.5vw, 2.65rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
  }

  .player-card-header-featured h2 span {
    max-width: calc(100vw - 4rem);
  }
}

@media (max-width: 420px) {
  .player-card-header-featured h2 {
    font-size: clamp(1.35rem, 9.5vw, 2.15rem);
  }
}

/* Player Profile Compact Showcase + Mobile Name Fit v2
   Keeps the artwork/card at its natural previous height and compresses
   the stat/profile content to match it instead of stretching the whole card. */
.player-showcase-featured {
  align-items: stretch;
}

.player-showcase-featured > .player-identity-card-featured,
.player-showcase-featured > .player-stat-board-featured {
  min-height: 0 !important;
}

.player-showcase-featured > .player-identity-card-featured {
  height: auto !important;
}

.player-showcase-featured > .player-stat-board-featured {
  height: 100% !important;
  align-self: stretch;
  justify-content: center;
  gap: clamp(0.55rem, 0.9vw, 0.9rem);
  padding: clamp(0.75rem, 1.25vw, 1.05rem);
}

.player-stat-board-featured .player-card-header-featured {
  padding-bottom: clamp(0.55rem, 0.9vw, 0.85rem);
}

.player-stat-board-featured .player-card-kicker {
  margin-bottom: 0.22rem;
  font-size: clamp(0.72rem, 1vw, 0.98rem);
}

.player-stat-board-featured .player-card-header-featured h2 {
  font-size: clamp(2rem, 4.15vw, 4rem);
  line-height: 0.88;
}

.player-stat-board-featured .player-card-header-featured p {
  margin-top: 0.25rem;
  font-size: clamp(0.82rem, 1.45vw, 1.16rem);
}

.player-stat-board-featured .player-feature-badges {
  margin-top: 0.52rem;
  gap: 0.32rem;
}

.player-stat-board-featured .player-feature-badges span {
  min-height: 1.45rem;
  padding: 0.22rem 0.55rem;
  font-size: 0.64rem;
}

.player-stat-board-featured .player-stat-sections {
  gap: clamp(0.55rem, 0.85vw, 0.85rem);
}

.player-stat-board-featured .player-stat-sections section + section {
  padding-left: clamp(0.55rem, 0.85vw, 0.85rem);
}

.player-stat-board-featured .player-stat-sections h3 {
  margin-bottom: 0.45rem;
  font-size: clamp(1.25rem, 2.35vw, 2rem);
}

.player-stat-board-featured .player-section-impact-bar {
  margin-bottom: 0.48rem;
}

.player-stat-board-featured .player-section-impact-label {
  font-size: 0.58rem;
}

.player-stat-board-featured .player-section-impact-track {
  height: 0.42rem;
}

.player-stat-board-featured .player-stat-grid {
  gap: clamp(0.34rem, 0.55vw, 0.52rem);
}

.player-stat-board-featured .player-stat-tile {
  border-width: 1px;
}

.player-stat-board-featured .player-stat-tile span {
  padding: 0.32rem 0.25rem;
  font-size: clamp(0.56rem, 0.68vw, 0.72rem);
}

.player-stat-board-featured .player-stat-tile strong {
  padding: 0.4rem 0.25rem;
  font-size: clamp(0.95rem, 1.35vw, 1.28rem);
}

@media (max-width: 900px) {
  .player-showcase-featured {
    align-items: start;
  }

  .player-showcase-featured > .player-stat-board-featured {
    height: auto !important;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .player-card-header-featured {
    grid-template-columns: 1fr !important;
  }

  .player-card-header-featured .badge {
    justify-self: start;
  }

  .player-card-header-featured .player-header-team-logo {
    display: none;
  }

  .player-card-header-featured h2 {
    display: block;
    max-width: 100%;
    font-size: clamp(1.55rem, 8.2vw, 2.45rem) !important;
    line-height: 0.95;
    letter-spacing: -0.06em;
  }

  .player-card-header-featured h2 span {
    display: block;
    max-width: 100% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-stat-board-featured .player-card-header-featured p {
    font-size: clamp(0.95rem, 4.5vw, 1.18rem);
  }

  .player-stat-board-featured .player-feature-badges span {
    min-height: 1.7rem;
    padding: 0.28rem 0.62rem;
    font-size: 0.68rem;
  }
}

@media (max-width: 420px) {
  .player-card-header-featured h2 {
    font-size: clamp(1.35rem, 7.3vw, 2rem) !important;
    letter-spacing: -0.065em;
  }

  .player-stat-board-featured {
    padding: 0.85rem;
  }
}

/* Player profile icon cards + horizontal milestones */
.player-card-kicker {
  display: none !important;
}

.player-profile-extras {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.player-profile-extra-card,
.player-milestone-card {
  min-width: 0;
  border: 1px solid rgba(var(--blue-soft-rgb), 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.08), transparent 55%),
    rgba(var(--surface-deep-rgb), 0.76);
  padding: 0.85rem;
  box-shadow: inset 0 0 20px rgba(var(--blue-soft-rgb), 0.035);
}

.player-profile-extra-card h3,
.player-milestone-card h3 {
  margin: 0 0 0.65rem;
  color: #ffffff;
  font-size: clamp(0.9rem, 1.1vw, 1.05rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.player-profile-extra-card.is-wide .player-profile-mini-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.player-profile-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.player-profile-mini-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon label"
    "icon value"
    "icon detail";
  align-items: center;
  min-height: 72px;
  column-gap: 0.65rem;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 6px;
  background:
    radial-gradient(circle at left, rgba(var(--blue-soft-rgb), 0.13), transparent 46%),
    rgba(var(--surface-deep-rgb), 0.76);
  padding: 0.65rem 0.7rem;
}

.player-profile-mini-icon {
  grid-area: icon;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--blue-soft-rgb), 0.42);
  border-radius: 999px;
  color: var(--blue-soft);
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 12px rgba(var(--accent-bright-rgb), 0.55);
  box-shadow: 0 0 14px rgba(var(--accent-bright-rgb), 0.12);
}

.player-profile-mini-label {
  grid-area: label;
  color: rgba(var(--text-soft-rgb), 0.78);
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.player-profile-mini-card strong {
  grid-area: value;
  color: #ffffff;
  font-size: clamp(1.15rem, 1.65vw, 1.65rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
}

.player-profile-mini-card small {
  grid-area: detail;
  color: rgba(var(--text-soft-rgb), 0.7);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
}

.player-milestone-card {
  grid-column: 1 / -1;
}

.player-milestone-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem;
}

.player-milestone-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 6px;
  background: rgba(var(--surface-deep-rgb), 0.76);
  padding: 0.7rem;
}

.player-milestone-item strong,
.player-milestone-item span,
.player-milestone-item em {
  display: block;
}

.player-milestone-item strong {
  color: #ffffff;
  font-size: 0.72rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.player-milestone-item span {
  margin-top: 0.25rem;
  color: rgba(var(--text-soft-rgb), 0.75);
  font-size: 0.72rem;
  font-weight: 800;
}

.player-milestone-item em {
  color: rgba(var(--text-soft-rgb), 0.72);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
}

.player-milestone-meter {
  height: 5px;
  margin-top: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--text-soft-rgb), 0.13);
}

.player-milestone-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #00cfff, #67f28f);
  box-shadow: 0 0 10px rgba(var(--accent-bright-rgb), 0.32);
}

.player-milestone-level {
  display: inline-block;
  margin-left: 0.3rem;
  padding: 0.08rem 0.34rem;
  border: 1px solid rgba(var(--blue-soft-rgb), 0.35);
  border-radius: 999px;
  background: rgba(var(--blue-soft-rgb), 0.12);
  color: rgba(var(--text-soft-rgb), 0.9);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.player-milestone-item.is-maxed {
  border-color: rgba(255, 200, 64, 0.45);
}

.player-milestone-item.is-maxed .player-milestone-level {
  border-color: rgba(255, 200, 64, 0.55);
  background: rgba(255, 200, 64, 0.14);
  color: #ffd966;
}

.player-milestone-item.is-maxed .player-milestone-meter i {
  background: linear-gradient(90deg, #ffc840, #ffe38a);
  box-shadow: 0 0 10px rgba(255, 200, 64, 0.38);
}

.player-milestone-item.is-maxed em {
  color: #ffd966;
}

@media (max-width: 1180px) {
  .player-profile-extra-card.is-wide .player-profile-mini-grid,
  .player-milestone-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .player-profile-extras {
    grid-template-columns: 1fr;
  }

  .player-profile-extra-card.is-wide .player-profile-mini-grid,
  .player-profile-mini-grid,
  .player-milestone-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-profile-mini-card {
    min-height: 66px;
  }
}

@media (max-width: 460px) {
  .player-profile-extra-card.is-wide .player-profile-mini-grid,
  .player-profile-mini-grid,
  .player-milestone-row {
    grid-template-columns: 1fr;
  }
}


/* Player profile icon tile polish - bolder preview-style cyan icons */
.profile-insight-grid,
.profile-rank-grid,
.profile-milestone-grid {
  align-items: stretch;
}

.insight-card,
.rank-card,
.profile-mini-stat,
.milestone-card {
  position: relative;
  overflow: hidden;
}

.insight-card,
.rank-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  column-gap: 12px;
  min-height: 76px;
}

.insight-card::before,
.rank-card::before {
  content: attr(data-icon);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #00eaff;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 0 8px rgba(var(--accent-bright-rgb), 0.75),
    0 0 18px rgba(var(--accent-bright-rgb), 0.35);
  border: 1px solid rgba(var(--accent-bright-rgb), 0.28);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--accent-bright-rgb), 0.16), rgba(var(--accent-bright-rgb), 0.03) 58%, transparent 70%),
    linear-gradient(135deg, rgba(var(--accent-bright-rgb), 0.10), rgba(0, 0, 0, 0.18));
  box-shadow:
    inset 0 0 14px rgba(var(--accent-bright-rgb), 0.10),
    0 0 14px rgba(var(--accent-bright-rgb), 0.08);
}

.insight-card .agl-stat-icon-glyph,
.rank-card .agl-stat-icon-glyph,
.stat-tile-icon.agl-stat-icon-glyph,
.profile-stat-icon.agl-stat-icon-glyph,
.insight-icon.agl-stat-icon-glyph {
  width: 40px;
  height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #00eaff !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  text-shadow:
    0 0 8px rgba(var(--accent-bright-rgb), 0.75),
    0 0 18px rgba(var(--accent-bright-rgb), 0.35);
  border: 1px solid rgba(var(--accent-bright-rgb), 0.28);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--accent-bright-rgb), 0.16), rgba(var(--accent-bright-rgb), 0.03) 58%, transparent 70%),
    linear-gradient(135deg, rgba(var(--accent-bright-rgb), 0.10), rgba(0, 0, 0, 0.18));
  box-shadow:
    inset 0 0 14px rgba(var(--accent-bright-rgb), 0.10),
    0 0 14px rgba(var(--accent-bright-rgb), 0.08);
}

.insight-card[data-icon=""],
.rank-card[data-icon=""] {
  grid-template-columns: 1fr;
}

.insight-card[data-icon=""]::before,
.rank-card[data-icon=""]::before {
  display: none;
}

/* When older markup produced tiny circular icons, neutralize it */
.insight-card .icon-dot,
.rank-card .icon-dot,
.stat-icon-dot {
  display: none !important;
}

@media (max-width: 760px) {
  .insight-card,
  .rank-card {
    grid-template-columns: 42px 1fr;
    min-height: 68px;
    column-gap: 10px;
  }

  .insight-card::before,
  .rank-card::before,
  .insight-card .agl-stat-icon-glyph,
  .rank-card .agl-stat-icon-glyph {
    width: 34px;
    height: 34px;
    font-size: 27px !important;
    border-radius: 10px;
  }
}


/* Strong SVG icon styling for player profile insight/ranking cards */
.player-profile-mini-card {
  grid-template-columns: 46px minmax(0, 1fr) !important;
  column-gap: 0.75rem !important;
}

.player-profile-mini-icon {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--blue-soft) !important;
  font-size: 0 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.player-profile-mini-icon svg {
  display: block;
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 5px rgba(0, 231, 255, 0.8))
    drop-shadow(0 0 13px rgba(0, 231, 255, 0.28));
}

.player-profile-mini-card:hover .player-profile-mini-icon svg {
  filter:
    drop-shadow(0 0 7px rgba(0, 231, 255, 0.95))
    drop-shadow(0 0 18px rgba(0, 231, 255, 0.38));
}

@media (max-width: 760px) {
  .player-profile-mini-card {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 0.65rem !important;
  }

  .player-profile-mini-icon,
  .player-profile-mini-icon svg {
    width: 36px !important;
    height: 36px !important;
  }
}


/* Player profile performance pass */
html[data-player-profile-source="prebuilt-profile-json"] .player-profile-loading,
html[data-player-profile-source="session-prebuilt-profile"] .player-profile-loading {
  display: none !important;
}

[data-player-profile-perf] {
  margin-left: 0.5rem;
  color: rgba(114, 230, 255, 0.75);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.player-profile-shell,
.player-profile-main,
.player-card-wrap,
.profile-board,
.player-profile-dashboard {
  content-visibility: auto;
  contain-intrinsic-size: 900px;
}

.player-profile-mini-card,
.player-profile-panel,
.player-profile-section,
.profile-insight-card {
  content-visibility: auto;
  contain-intrinsic-size: 160px;
}

@media (prefers-reduced-motion: reduce) {
  .player-profile-shell *,
  .player-profile-main *,
  .player-profile-dashboard * {
    transition: none !important;
    animation: none !important;
  }
}


/* Remove profile insight/ranking icons */
.player-profile-mini-icon,
.agl-stat-icon-glyph,
.insight-icon,
.rank-icon,
.stat-tile-icon,
.profile-stat-icon,
.icon-dot,
.stat-icon-dot {
  display: none !important;
}

.player-profile-mini-card,
.insight-card,
.rank-card {
  grid-template-columns: minmax(0, 1fr) !important;
  column-gap: 0 !important;
}

.insight-card::before,
.rank-card::before {
  display: none !important;
  content: none !important;
}

.player-profile-mini-card {
  padding-left: 1rem !important;
}

@media (max-width: 760px) {
  .player-profile-mini-card,
  .insight-card,
  .rank-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


.team-profile-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.85fr);
  gap: 1rem;
  align-items: stretch;
}

.team-profile-summary-panel {
  display: grid;
  gap: 0.8rem;
  padding: 0.95rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
}

.team-profile-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
}

.team-profile-summary-panel + .team-profile-summary-panel .team-profile-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-profile-metric-card {
  display: grid;
  gap: 0.28rem;
  padding: 0.75rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.14);
  align-content: center;
}

.team-profile-metric-card span,
.team-profile-metric-card small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.team-profile-metric-card strong {
  color: #ffffff;
  font-size: clamp(1.05rem, 2vw, 1.65rem);
  line-height: 1;
  text-transform: uppercase;
}

.team-profile-link {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 0.8rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(var(--blue-soft-rgb), 0.35);
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-decoration: none;
  text-transform: uppercase;
}

.team-profile-link:hover,
.team-profile-link:focus-visible {
  background: rgba(var(--blue-soft-rgb), 0.12);
  color: var(--accent);
}

@media (max-width: 980px) {
  .team-profile-overview {
    grid-template-columns: 1fr;
  }

  .team-profile-metric-grid,
  .team-profile-summary-panel + .team-profile-summary-panel .team-profile-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .team-profile-metric-grid,
  .team-profile-summary-panel + .team-profile-summary-panel .team-profile-metric-grid {
    grid-template-columns: 1fr;
  }
}
.team-stat-block-grid,
.team-roster-summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.team-roster-summary-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.team-profile-roster-list li {
  padding: 0.7rem 0.75rem;
}

.team-profile-roster-list a {
  display: grid;
  gap: 0.16rem;
}

.team-profile-roster-list a span {
  color: #ffffff;
  font-weight: 950;
}

.team-profile-roster-list a small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.team-recent-games-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
}

.team-recent-game-card {
  display: grid;
  gap: 0.28rem;
  min-height: 86px;
  padding: 0.75rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.26);
}

.team-recent-game-card span,
.team-recent-game-card small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.team-recent-game-card strong {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.05;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .team-stat-block-grid,
  .team-recent-games-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .team-stat-block-grid,
  .team-roster-summary-strip,
  .team-recent-games-list {
    grid-template-columns: 1fr;
  }
}

/* Team profile — Schedule tab (condensed month calendar) */
.team-schedule-calendar {
  display: grid;
  gap: 0.65rem;
}

.team-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.team-cal-nav strong {
  min-width: 11ch;
  color: #ffffff;
  font-size: 0.9rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.team-cal-day-list {
  display: grid;
  gap: 0.6rem;
}

.team-cal-day-card {
  border: 1px solid rgba(var(--accent-strong-rgb), 0.14);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.team-cal-day-card.is-today {
  border-color: var(--cyan, var(--cyan));
  box-shadow: inset 0 0 0 1px var(--cyan, var(--cyan));
}

.team-cal-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.5rem 0.9rem;
  background: rgba(var(--accent-strong-rgb), 0.08);
  color: var(--text-soft);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.team-cal-day-header-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.team-cal-day-count {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
}

.team-cal-day-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.25);
  border-radius: 0.45rem;
  background: rgba(var(--accent-strong-rgb), 0.1);
  color: #ffffff;
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease;
}

.team-cal-day-toggle-btn:hover {
  background: rgba(var(--accent-strong-rgb), 0.2);
}

.team-cal-day-card.is-collapsed .team-cal-day-toggle-btn {
  transform: rotate(-90deg);
}

.team-cal-day-card.is-collapsed .team-cal-day-games {
  display: none;
}

.team-cal-day-games {
  display: grid;
}

.team-cal-game-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-top: 1px solid rgba(var(--line-rgb), 0.06);
  cursor: default;
}

.team-cal-day-games .team-cal-game-row:first-child {
  border-top: none;
}

.team-cal-game-row[data-team-box-score],
.team-cal-game-row[data-team-matchup-preview-key] {
  cursor: pointer;
}

.team-cal-game-row[data-team-box-score]:hover,
.team-cal-game-row[data-team-matchup-preview-key]:hover {
  background: rgba(var(--blue-soft-rgb), 0.08);
}

/* Explicit column placement — finalized rows omit .team-cal-game-code, and
   without a fixed position implicit grid auto-placement would shift the
   result column left for those rows, misaligning it against scheduled rows
   in the same day card that still show a code. */
.team-cal-game-loc {
  grid-column: 1;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.team-cal-game-loc.is-home { color: var(--cyan, var(--cyan)); }
.team-cal-game-loc.is-away { color: var(--muted); }

.team-cal-game-opp {
  grid-column: 2;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.team-cal-game-code {
  grid-column: 3;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.team-cal-game-server {
  color: var(--green, #4ade80);
}

.team-cal-game-result {
  grid-column: 4;
  min-width: 5.5ch;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
}

.team-cal-game-row.is-win .team-cal-game-result { color: var(--green, #4ade80); }
.team-cal-game-row.is-loss .team-cal-game-result { color: var(--red, #ff4646); }
.team-cal-game-row.is-tie .team-cal-game-result { color: var(--muted); }
.team-cal-game-row.is-scheduled .team-cal-game-result { color: var(--gold, #f5c518); }

@media (max-width: 640px) {
  .team-cal-game-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "loc opp result"
      "loc code result";
    row-gap: 0.15rem;
    column-gap: 0.5rem;
  }

  .team-cal-game-loc { grid-area: loc; }
  .team-cal-game-opp { grid-area: opp; font-size: 0.74rem; }
  .team-cal-game-code { grid-area: code; font-size: 0.58rem; }
  .team-cal-game-result { grid-area: result; font-size: 0.7rem; }
}

/* Team profile roster tuning */
.team-roster-groups {
  display: grid;
  gap: 0.8rem;
}

.team-roster-group {
  display: grid;
  gap: 0.55rem;
}

.team-roster-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.team-roster-group-heading h4 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 950;
  text-transform: uppercase;
}

.team-roster-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--blue-soft-rgb), 0.45), transparent);
}

.team-roster-position-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.65rem;
}

.team-roster-empty-row {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .team-hero-brand {
    min-width: 0;
  }

  .team-hero-brand > div {
    min-width: 0;
  }

  .team-hero h1,
  .team-hero > [data-team-hero-content] h1 {
    max-width: 100%;
    font-size: clamp(1.65rem, 11vw, 3rem);
    line-height: 0.92;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .team-roster-position-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .team-hero h1,
  .team-hero > [data-team-hero-content] h1 {
    font-size: clamp(1.35rem, 9vw, 2.1rem);
    letter-spacing: -0.045em;
  }

  .team-roster-position-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Team roster compliance card v2 */
.team-roster-compliance-card {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 0.85rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.045), rgba(122, 40, 255, 0.04)),
    rgba(var(--surface-deep-rgb), 0.34);
}

.team-roster-compliance-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.team-roster-compliance-heading h4 {
  margin: 0;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.team-roster-position-box {
  display: grid;
  align-content: center;
  gap: 0.3rem;
  min-height: 76px;
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
}

.team-roster-position-box.is-compliant {
  border-color: rgba(96, 220, 120, 0.42);
}

.team-roster-position-box.is-noncompliant {
  border-color: rgba(255, 88, 100, 0.42);
}

.team-roster-position-box span,
.team-roster-position-box small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.team-roster-position-box strong {
  color: #ffffff;
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-style: normal;
  font-weight: 950;
  line-height: 1;
}

.team-roster-position-box strong em {
  font-style: normal;
}

.team-roster-position-box.is-compliant strong,
.team-roster-position-box.is-compliant strong em {
  color: rgba(116, 236, 140, 0.82);
}

.team-roster-position-box.is-noncompliant strong em {
  color: rgba(255, 96, 112, 0.9);
}

.team-roster-warning {
  color: rgba(255, 96, 112, 0.95);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0.01em;
  text-align: center;
}

.compare-card small {
  display: inline-block;
  margin-top: 0.35rem;
  color: rgba(128, 217, 255, 0.88);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compare-stats-advanced {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.compare-stats-advanced .compare-stat-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.15rem 0.45rem;
  overflow: hidden;
  min-height: 64px;
}

.compare-stats-advanced .compare-stat-row strong {
  justify-self: end;
}

.compare-stats-advanced .compare-stat-row em {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  width: fit-content;
  padding: 0.1rem 0.42rem;
  border: 1px solid rgba(128, 217, 255, 0.22);
  border-radius: 999px;
  color: rgba(220, 245, 255, 0.82);
  background: rgba(var(--accent-strong-rgb), 0.08);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.compare-stats-advanced .compare-stat-row i {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.42rem;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.08);
}

.compare-stats-advanced .compare-stat-row i::after {
  content: "";
  display: block;
  width: var(--compare-strength, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(246, 92, 92, 0.75), rgba(239, 200, 74, 0.82), rgba(77, 214, 141, 0.88));
  box-shadow: 0 0 12px rgba(128, 217, 255, 0.22);
}

.compare-card-goalie {
  border-color: rgba(128, 217, 255, 0.32);
}

.compare-card-defense {
  border-color: rgba(126, 231, 135, 0.26);
}

.compare-card-forward {
  border-color: rgba(239, 200, 74, 0.28);
}

@media (max-width: 640px) {
  .compare-stats-advanced {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compare-stats-advanced .compare-stat-row {
    min-height: 58px;
  }
}


/* Team stats compact six-column layout */
.team-stats-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: stretch;
}

.team-stats-overview-grid .team-profile-metric-card {
  align-content: center;
}

.team-stats-overview-grid .team-profile-metric-card strong {
  font-size: clamp(1rem, 1.35vw, 1.35rem);
}

.team-stats-overview-grid .team-profile-metric-card span,
.team-stats-overview-grid .team-profile-metric-card small {
  font-size: 0.64rem;
}

.team-stats-overview-grid .team-metric-rank {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .team-stats-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .team-stats-overview-grid,
  .team-stats-overview-grid.team-stats-rate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-stats-overview-grid .team-profile-metric-card {
    min-height: 72px;
  }
}

/* Team Profile v3.1: Stat card event ranks */
.team-profile-metric-card {
  position: relative;
}

.team-metric-rank {
  --rank-hue: 190;
  --rank-saturation: 88%;
  --rank-lightness: 66%;
  --rank-alpha: 0.1;
  --rank-border-alpha: 0.36;
  --rank-glow-alpha: 0.08;
  justify-self: start;
  width: fit-content;
  margin-bottom: 0.08rem;
  padding: 0.16rem 0.38rem;
  border: 1px solid hsla(var(--rank-hue), var(--rank-saturation), var(--rank-lightness), var(--rank-border-alpha));
  border-radius: 999px;
  color: hsla(var(--rank-hue), var(--rank-saturation), 82%, 0.96);
  background:
    linear-gradient(135deg,
      hsla(var(--rank-hue), var(--rank-saturation), var(--rank-lightness), calc(var(--rank-alpha) + 0.05)),
      hsla(var(--rank-hue), var(--rank-saturation), 40%, var(--rank-alpha))
    );
  box-shadow:
    0 0 14px hsla(var(--rank-hue), var(--rank-saturation), var(--rank-lightness), var(--rank-glow-alpha)),
    inset 0 1px 0 rgba(var(--fg-rgb), 0.06);
  font-size: 0.6rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.team-metric-rank[data-rank-tone="high"] {
  --rank-hue: 145;
}

.team-metric-rank[data-rank-tone="mid"] {
  --rank-hue: 48;
}

.team-metric-rank[data-rank-tone="low"] {
  --rank-hue: 355;
}

/* Team Page Presentation Polish v1 - visual-only overrides */
.team-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.22);
  background:
    radial-gradient(circle at 12% 10%, rgba(var(--blue-soft-rgb), 0.16), transparent 34%),
    radial-gradient(circle at 88% 16%, rgba(122, 40, 255, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(3, 13, 28, 0.96), rgba(1, 7, 18, 0.92));
  box-shadow:
    0 22px 55px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(var(--fg-rgb), 0.06);
}

.team-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(var(--fg-rgb), 0.045) 1px, transparent 1px),
    linear-gradient(0deg, rgba(var(--fg-rgb), 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.78), transparent 75%);
}

.team-hero::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--blue-soft-rgb), 0.58), rgba(var(--fg-rgb),.22), transparent);
  pointer-events: none;
}

.team-hero h1 {
  letter-spacing: -0.045em;
  text-shadow: 0 0 28px rgba(var(--blue-soft-rgb), 0.18);
}

.teams-directory-panel {
  border-color: rgba(var(--accent-strong-rgb), 0.22);
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.035), rgba(var(--fg-rgb), 0.012)),
    rgba(var(--surface-deep-rgb), 0.64);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
}

.team-detail-tabs {
  width: fit-content;
  border-color: rgba(var(--blue-soft-rgb), 0.24);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(var(--blue-soft-rgb), 0.075), rgba(0, 0, 0, 0.26));
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb),.05);
}

.team-detail-tabs button {
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.team-detail-tabs button.is-active {
  background:
    linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.24), rgba(var(--accent-strong-rgb), 0.13));
  box-shadow:
    0 0 18px rgba(var(--blue-soft-rgb), 0.12),
    inset 0 0 0 1px rgba(var(--fg-rgb),.07);
}

.team-detail-panels {
  gap: 1.15rem;
}

.team-profile-summary-panel {
  position: relative;
  overflow: hidden;
  border-color: rgba(var(--accent-strong-rgb), 0.23);
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--blue-soft-rgb), 0.095), transparent 36%),
    linear-gradient(145deg, rgba(6, 20, 40, 0.76), rgba(1, 7, 18, 0.56));
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(var(--fg-rgb),.045);
}

.team-profile-summary-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(var(--blue-soft-rgb), 0.12), transparent 30%),
    linear-gradient(180deg, rgba(var(--fg-rgb),.035), transparent 34%);
  opacity: .8;
}

.team-profile-summary-panel > * {
  position: relative;
  z-index: 1;
}

.team-profile-summary-panel .panel-heading {
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),.075);
}

.team-profile-summary-panel .panel-heading h3 {
  letter-spacing: 0.015em;
}

.team-profile-summary-panel .panel-heading span {
  color: rgba(178, 220, 255, 0.76);
}

.team-profile-metric-card {
  min-height: 78px;
  border-color: rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 11px;
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb),.045), rgba(var(--fg-rgb),.012)),
    rgba(0, 0, 0, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),.045),
    0 8px 22px rgba(0,0,0,.16);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.team-profile-metric-card:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--blue-soft-rgb), 0.30);
  background:
    linear-gradient(180deg, rgba(var(--blue-soft-rgb),.06), rgba(var(--fg-rgb),.012)),
    rgba(0, 0, 0, 0.28);
}

.team-profile-metric-card span {
  color: rgba(178, 220, 255, 0.72);
}

.team-profile-metric-card strong {
  letter-spacing: -0.025em;
}

.team-profile-wide-panel {
  grid-column: 1 / -1;
}

.team-stats-overview-grid {
  align-items: stretch;
}

.team-stats-overview-grid .team-profile-metric-card {
  min-height: 80px;
  padding: 0.7rem 0.62rem;
}

.team-metric-rank {
  backdrop-filter: blur(8px);
}

.team-roster-panel .panel-heading {
  margin-bottom: 0.15rem;
}

.team-roster-groups {
  gap: 0.75rem;
}

.team-roster-group-heading {
  padding: 0.18rem 0.1rem 0.38rem;
}

.team-roster-group-heading h4 {
  color: #ffffff;
  letter-spacing: 0.06em;
}

.team-roster-group-heading span {
  border: 1px solid rgba(var(--blue-soft-rgb), 0.22);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
  background: rgba(var(--blue-soft-rgb), 0.08);
  color: rgba(194, 234, 255, 0.9);
}

.team-profile-roster-list li {
  border-color: rgba(var(--accent-strong-rgb), 0.12);
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(var(--blue-soft-rgb), 0.055), transparent 42%),
    rgba(var(--fg-rgb), 0.035);
}

.team-profile-roster-list li:hover {
  border-color: rgba(var(--blue-soft-rgb), 0.24);
  background:
    linear-gradient(90deg, rgba(var(--blue-soft-rgb), 0.09), transparent 46%),
    rgba(var(--fg-rgb), 0.045);
}

.team-roster-divider {
  opacity: .95;
  box-shadow: 0 0 18px rgba(var(--blue-soft-rgb),.08);
}

.team-position-compliance-card {
  margin-top: 0.25rem;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb),.035), rgba(var(--fg-rgb),.012)),
    rgba(0,0,0,.18);
}

.team-position-need {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.20);
}

.team-recent-games-list,
.team-profile-schedule-list {
  gap: 0.55rem;
}

.team-recent-game,
.team-profile-schedule-card {
  border-color: rgba(var(--accent-strong-rgb), 0.12);
  border-radius: 11px;
  background:
    linear-gradient(90deg, rgba(var(--blue-soft-rgb), 0.055), transparent 48%),
    rgba(var(--fg-rgb), 0.035);
}

.team-stats-section .panel-heading {
  padding: 0 0 0.55rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),.075);
}

.team-stats-table-wrap {
  border-radius: 12px;
  border-color: rgba(var(--accent-strong-rgb), 0.14);
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb),.026), transparent),
    rgba(0,0,0,.18);
}

.team-stats-table thead th {
  background:
    linear-gradient(180deg, rgba(var(--blue-soft-rgb), 0.11), rgba(var(--surface-deep-rgb), 0.96));
  color: rgba(219, 244, 255, 0.95);
}

.team-stats-table tbody tr:hover {
  background: rgba(var(--blue-soft-rgb), 0.06);
}

@media (min-width: 981px) {
  .team-profile-overview {
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.82fr);
  }
}

@media (max-width: 640px) {
  .team-hero {
    border-radius: 14px;
  }

  .team-detail-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .team-detail-tabs button {
    min-width: 0;
    padding: 0 0.52rem;
  }

  .team-profile-summary-panel {
    border-radius: 12px;
    padding: 0.82rem;
  }

  .team-profile-summary-panel .panel-heading {
    gap: 0.35rem;
  }

  .team-profile-metric-card {
    min-height: 74px;
  }
}

/* Team Page Mobile Tab Fit Fix */
@media (max-width: 640px){
    .team-profile-tabs,
    .team-tabs,
    .profile-tabs,
    .team-profile-tab-nav{
        gap: 6px;
    }

    .team-profile-tabs button,
    .team-tabs button,
    .profile-tabs button,
    .team-profile-tab,
    .team-tab,
    .tab-btn{
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
        padding-left: 10px;
        padding-right: 10px;
        font-size: clamp(0.68rem, 3.2vw, 0.82rem);
        line-height: 1.1;
        box-sizing: border-box;
    }

    .team-profile-tabs button.active,
    .team-tabs button.active,
    .profile-tabs button.active,
    .team-profile-tab.active,
    .team-tab.active,
    .tab-btn.active{
        width: auto;
        min-width: max-content;
    }
}

/* Team Page Mobile Tab Text Tightening Fix */
@media (max-width: 640px){
    .team-tabs,
    .team-profile-tabs,
    .profile-tabs,
    .team-profile-tab-nav{
        display:grid !important;
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
        gap:6px !important;
    }

    .team-tabs button,
    .team-profile-tabs button,
    .profile-tabs button,
    .team-profile-tab,
    .team-tab,
    .tab-btn{
        padding:10px 6px !important;
        font-size:clamp(12px, 3.15vw, 15px) !important;
        line-height:1 !important;
        letter-spacing:.02em !important;
        text-align:center !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:clip !important;
        box-sizing:border-box !important;
    }

    .team-tabs button.active,
    .team-profile-tabs button.active,
    .profile-tabs button.active,
    .team-profile-tab.active,
    .team-tab.active,
    .tab-btn.active{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        padding-left:6px !important;
        padding-right:6px !important;
    }
}

@media (max-width: 420px){
    .team-tabs button,
    .team-profile-tabs button,
    .profile-tabs button,
    .team-profile-tab,
    .team-tab,
    .tab-btn{
        font-size:12px !important;
        letter-spacing:0 !important;
    }
}

/* Team Page Presentation Polish v2 - safe visual-only refinements */
body:has(.team-hero) .team-hero {
  isolation: isolate;
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(var(--blue-soft-rgb), 0.05), rgba(122, 40, 255, 0.05)),
    radial-gradient(circle at 16% 18%, rgba(var(--blue-soft-rgb), 0.18), transparent 30%),
    radial-gradient(circle at 88% 26%, rgba(122, 40, 255, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(5, 17, 34, 0.98), rgba(2, 6, 18, 0.96));
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(var(--fg-rgb),0.08),
    inset 0 -1px 0 rgba(var(--accent-bright-rgb),0.10);
}

body:has(.team-hero) .team-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(var(--fg-rgb),0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--fg-rgb),0.028) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.2));
}

body:has(.team-hero) .team-hero-logo {
  border-color: rgba(130, 210, 255, 0.26);
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--fg-rgb),0.08), transparent 42%),
    rgba(2, 10, 22, 0.52);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(var(--fg-rgb),0.05),
    0 0 28px rgba(var(--accent-bright-rgb),0.08);
}

body:has(.team-hero) .team-hero h1 {
  text-shadow: 0 8px 28px rgba(var(--accent-bright-rgb),0.16);
  letter-spacing: 0.015em;
}

body:has(.team-hero) .team-hero .upcoming-games,
body:has(.team-hero) .team-hero [class*="upcoming"],
body:has(.team-hero) .upcoming-games-card,
body:has(.team-hero) .team-upcoming-card {
  border-color: rgba(155, 155, 255, 0.22);
  background:
    linear-gradient(135deg, rgba(var(--fg-rgb),0.065), rgba(116,54,255,0.055)),
    rgba(8, 9, 26, 0.68);
  box-shadow:
    0 16px 30px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(var(--fg-rgb),0.07);
  backdrop-filter: blur(8px);
}

body:has(.team-hero) .team-profile-summary-panel,
body:has(.team-hero) .team-profile-leaders-panel,
body:has(.team-hero) .team-profile-roster-panel,
body:has(.team-hero) .team-profile-stats-panel,
body:has(.team-hero) .team-panel,
body:has(.team-hero) .position-compliance-card {
  border-color: rgba(var(--accent-strong-rgb), 0.21);
  background:
    linear-gradient(145deg, rgba(var(--blue-soft-rgb), 0.055), rgba(122, 40, 255, 0.035)),
    rgba(var(--surface-deep-rgb), 0.58);
  box-shadow:
    0 18px 36px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(var(--fg-rgb),0.055);
}

body:has(.team-hero) .team-profile-summary-panel > header,
body:has(.team-hero) .team-profile-leaders-panel > header,
body:has(.team-hero) .team-profile-roster-panel > header,
body:has(.team-hero) .team-profile-stats-panel > header,
body:has(.team-hero) .position-compliance-title {
  border-bottom: 1px solid rgba(120, 180, 255, 0.12);
  padding-bottom: 0.6rem;
}

body:has(.team-hero) .team-profile-metric,
body:has(.team-hero) .team-leader-card,
body:has(.team-hero) .team-stat-card,
body:has(.team-hero) .team-profile-stat-card,
body:has(.team-hero) .roster-player-row,
body:has(.team-hero) .team-roster-row,
body:has(.team-hero) .pc-item {
  background:
    linear-gradient(135deg, rgba(var(--fg-rgb),0.048), rgba(var(--fg-rgb),0.018)),
    rgba(1, 7, 16, 0.72);
  border-color: rgba(138, 174, 220, 0.14);
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb),0.045);
}

body:has(.team-hero) .team-profile-metric:hover,
body:has(.team-hero) .team-leader-card:hover,
body:has(.team-hero) .team-stat-card:hover,
body:has(.team-hero) .team-profile-stat-card:hover,
body:has(.team-hero) .roster-player-row:hover,
body:has(.team-hero) .team-roster-row:hover {
  border-color: rgba(var(--accent-bright-rgb), 0.22);
  background:
    linear-gradient(135deg, rgba(var(--accent-bright-rgb),0.055), rgba(122,40,255,0.035)),
    rgba(1, 7, 16, 0.78);
}

body:has(.team-hero) .team-profile-section-title,
body:has(.team-hero) .team-section-title,
body:has(.team-hero) .team-profile-summary-panel h2,
body:has(.team-hero) .team-profile-leaders-panel h2,
body:has(.team-hero) .team-profile-roster-panel h2,
body:has(.team-hero) .team-profile-stats-panel h2 {
  letter-spacing: 0.02em;
  text-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

body:has(.team-hero) .team-profile-metric .value,
body:has(.team-hero) .team-stat-card .value,
body:has(.team-hero) .team-profile-stat-card .value,
body:has(.team-hero) .team-leader-card strong {
  text-shadow: 0 0 20px rgba(var(--accent-bright-rgb),0.10);
}

body:has(.team-hero) .team-profile-roster-panel .position-badge,
body:has(.team-hero) .team-roster-row .position-badge,
body:has(.team-hero) .roster-player-row .position-badge {
  border-color: rgba(var(--fg-rgb),0.22);
  background: rgba(var(--fg-rgb),0.045);
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb),0.04);
}

@media (min-width: 800px) {
  body:has(.team-hero) .team-profile-overview {
    gap: 1.1rem;
  }
}

@media (max-width: 640px) {
  body:has(.team-hero) .team-hero {
    border-radius: 14px;
  }

  body:has(.team-hero) .team-profile-summary-panel,
  body:has(.team-hero) .team-profile-leaders-panel,
  body:has(.team-hero) .team-profile-roster-panel,
  body:has(.team-hero) .team-profile-stats-panel,
  body:has(.team-hero) .position-compliance-card {
    box-shadow:
      0 12px 24px rgba(0,0,0,0.18),
      inset 0 1px 0 rgba(var(--fg-rgb),0.045);
  }
}


/* Team Page Presentation Polish v3 - team color accent variables */
body.has-team-color-theme .team-hero {
  background:
    linear-gradient(90deg, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.075), rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.065)),
    radial-gradient(circle at 15% 18%, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.22), transparent 32%),
    radial-gradient(circle at 88% 24%, rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.18), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(var(--agl-team-tertiary-rgb, 122, 40, 255), 0.10), transparent 40%),
    linear-gradient(135deg, rgba(5, 17, 34, 0.98), rgba(2, 6, 18, 0.96));
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.24);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(var(--fg-rgb),0.08),
    inset 0 -1px 0 rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.15),
    0 0 38px rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.07);
}

body.has-team-color-theme .team-hero-logo {
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.34);
  background:
    radial-gradient(circle at 50% 38%, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.12), transparent 44%),
    radial-gradient(circle at 50% 80%, rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.10), transparent 54%),
    rgba(2, 10, 22, 0.55);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(var(--fg-rgb),0.055),
    0 0 30px rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.12);
}

body.has-team-color-theme .team-hero h1,
body.has-team-color-theme .team-profile-metric .value,
body.has-team-color-theme .team-stat-card .value,
body.has-team-color-theme .team-profile-stat-card .value,
body.has-team-color-theme .team-leader-card strong {
  text-shadow: 0 0 22px rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.16);
}

body.has-team-color-theme .team-upcoming-board,
body.has-team-color-theme .team-hero .upcoming-games,
body.has-team-color-theme .team-hero [class*="upcoming"],
body.has-team-color-theme .upcoming-games-card,
body.has-team-color-theme .team-upcoming-card {
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.22);
  background:
    linear-gradient(135deg, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.07), rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.055)),
    rgba(8, 9, 26, 0.70);
}

body.has-team-color-theme .team-upcoming-head button,
body.has-team-color-theme .team-filter-tabs button.is-active,
body.has-team-color-theme [data-team-tabs] button.is-active,
body.has-team-color-theme [data-team-tabs] button.active,
body.has-team-color-theme .team-tabs button.active,
body.has-team-color-theme .team-tab.active,
body.has-team-color-theme .tab-btn.active {
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.32);
  background:
    linear-gradient(135deg, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.22), rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.13)),
    rgba(8, 20, 34, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.08),
    0 0 20px rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.10);
}

body.has-team-color-theme .team-profile-summary-panel,
body.has-team-color-theme .team-profile-leaders-panel,
body.has-team-color-theme .team-profile-roster-panel,
body.has-team-color-theme .team-profile-stats-panel,
body.has-team-color-theme .team-panel,
body.has-team-color-theme .position-compliance-card,
body.has-team-color-theme .team-roster-compliance-card {
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.20);
  background:
    linear-gradient(145deg, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.052), rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.038)),
    rgba(var(--surface-deep-rgb), 0.60);
}

body.has-team-color-theme .team-profile-summary-panel > header,
body.has-team-color-theme .team-profile-leaders-panel > header,
body.has-team-color-theme .team-profile-roster-panel > header,
body.has-team-color-theme .team-profile-stats-panel > header,
body.has-team-color-theme .position-compliance-title,
body.has-team-color-theme .team-roster-compliance-heading {
  border-bottom-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.16);
}

body.has-team-color-theme .team-profile-metric,
body.has-team-color-theme .team-leader-card,
body.has-team-color-theme .team-stat-card,
body.has-team-color-theme .team-profile-stat-card,
body.has-team-color-theme .roster-player-row,
body.has-team-color-theme .team-roster-row,
body.has-team-color-theme .pc-item,
body.has-team-color-theme .team-roster-position-box {
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.14);
  background:
    linear-gradient(135deg, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.035), rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.022)),
    rgba(1, 7, 16, 0.72);
}

body.has-team-color-theme .team-profile-metric:hover,
body.has-team-color-theme .team-leader-card:hover,
body.has-team-color-theme .team-stat-card:hover,
body.has-team-color-theme .team-profile-stat-card:hover,
body.has-team-color-theme .roster-player-row:hover,
body.has-team-color-theme .team-roster-row:hover {
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.28);
  background:
    linear-gradient(135deg, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.07), rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.04)),
    rgba(1, 7, 16, 0.80);
}

body.has-team-color-theme .team-position-badge,
body.has-team-color-theme .team-profile-roster-panel .position-badge,
body.has-team-color-theme .team-roster-row .position-badge,
body.has-team-color-theme .roster-player-row .position-badge {
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.30);
  background: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.075);
  color: rgba(245, 250, 255, 0.96);
}

body.has-team-color-theme .team-roster-position-box.is-compliant {
  border-color: rgba(80, 220, 130, 0.34);
}

body.has-team-color-theme .team-roster-position-box.is-noncompliant {
  border-color: rgba(255, 90, 110, 0.34);
}

/* Team roster row rating/number presentation patch - 2026-05-27 */
.team-profile-roster-list .team-profile-roster-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  min-height: 58px;
  padding: 0.72rem 0.85rem;
  border-radius: 12px;
  overflow: hidden;
}

body.has-team-color-theme .team-profile-roster-list .team-profile-roster-row {
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.22);
  background:
    radial-gradient(circle at 36% 50%, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.20), transparent 42%),
    linear-gradient(90deg, rgba(4, 13, 26, 0.86) 0%, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.14) 48%, rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.10) 100%),
    rgba(1, 7, 16, 0.82);
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb),0.055),
    inset 0 -1px 0 rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.09),
    0 10px 24px rgba(0,0,0,0.18);
}

body.has-team-color-theme .team-profile-roster-list .team-profile-roster-row:hover {
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.38);
  background:
    radial-gradient(circle at 38% 50%, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.28), transparent 44%),
    linear-gradient(90deg, rgba(5, 17, 34, 0.9) 0%, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.20) 50%, rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.13) 100%),
    rgba(1, 7, 16, 0.88);
}

.team-profile-roster-list .team-roster-player-link {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
  width: 100%;
}

.team-profile-roster-list .team-roster-player-number {
  display: grid;
  align-items: center;
  min-height: 42px;
  padding-right: 0.9rem;
  border-right: 1px solid rgba(var(--fg-rgb),0.22);
  color: #ffffff;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  text-shadow: 0 0 18px rgba(var(--fg-rgb),0.10);
}

body.has-team-color-theme .team-profile-roster-list .team-roster-player-number {
  border-right-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.55);
}

.team-profile-roster-list .team-roster-player-copy {
  display: grid;
  gap: 0.18rem;
  min-width: 0;
}

.team-profile-roster-list .team-roster-player-name {
  color: #ffffff;
  font-size: clamp(0.98rem, 1.45vw, 1.16rem);
  font-weight: 950;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-roster-mgmt-tag {
  font-size: 0.6em;
  font-weight: 700;
  opacity: 0.45;
  margin-left: 0.3em;
  letter-spacing: 0.03em;
}

/* Streaming indicator on team roster */
.team-roster-row.team-profile-roster-row.is-streaming-twitch,
.team-roster-row.team-profile-roster-row.is-streaming-twitch:hover {
  border-color: #9146FF !important;
  box-shadow: inset 0 0 12px rgba(145, 70, 255, 0.15), 0 0 6px rgba(145, 70, 255, 0.2) !important;
}
.team-roster-row.team-profile-roster-row.is-streaming-youtube,
.team-roster-row.team-profile-roster-row.is-streaming-youtube:hover {
  border-color: #FF0000 !important;
  box-shadow: inset 0 0 12px rgba(255, 0, 0, 0.15), 0 0 6px rgba(255, 0, 0, 0.2) !important;
}
.team-roster-row.team-profile-roster-row.is-streaming-kick,
.team-roster-row.team-profile-roster-row.is-streaming-kick:hover {
  border-color: #53FC18 !important;
  box-shadow: inset 0 0 12px rgba(83, 252, 24, 0.15), 0 0 6px rgba(83, 252, 24, 0.2) !important;
}
.team-roster-streaming-tag {
  font-size: 0.6em;
  font-weight: 700;
  margin-left: 0.5em;
  padding: 0.1em 0.45em;
  border-radius: 3px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  vertical-align: middle;
}
.team-roster-streaming-tag.is-streaming-twitch {
  color: #9146FF;
  background: rgba(145, 70, 255, 0.08);
  border: 1px solid rgba(145, 70, 255, 0.6);
}
.team-roster-streaming-tag.is-streaming-youtube {
  color: #FF0000;
  background: rgba(255, 0, 0, 0.08);
  border: 1px solid rgba(255, 0, 0, 0.6);
}
.team-roster-streaming-tag.is-streaming-kick {
  color: #53FC18;
  background: rgba(83, 252, 24, 0.08);
  border: 1px solid rgba(83, 252, 24, 0.6);
}
.team-roster-streaming-tag:hover {
  opacity: 0.8;
}

.team-profile-roster-list .team-roster-player-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: rgba(190, 209, 234, 0.9);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: none;
}

.team-profile-roster-list .team-roster-player-meta strong {
  color: var(--accent);
  font-size: inherit;
  font-weight: 950;
}

body.has-team-color-theme .team-profile-roster-list .team-roster-player-meta strong,
body.has-team-color-theme .team-profile-roster-list .team-roster-season-rating strong {
  color: rgb(var(--agl-team-primary-rgb, 0, 217, 255));
}

.team-profile-roster-list .team-roster-season-rating {
  display: grid;
  justify-items: end;
  gap: 0.08rem;
  min-width: 5.8rem;
  flex: 0 0 auto;
}

.team-profile-roster-list .team-roster-season-rating small {
  color: rgba(215, 227, 244, 0.78);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.team-profile-roster-list .team-roster-season-rating strong {
  color: var(--accent);
  font-size: clamp(1.08rem, 1.8vw, 1.45rem);
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 18px rgba(var(--blue-soft-rgb), 0.12);
}

@media (max-width: 640px) {
  .team-profile-roster-list .team-profile-roster-row {
    grid-template-columns: 1fr;
    gap: 0.52rem;
    padding: 0.68rem 0.7rem;
  }

  .team-profile-roster-list .team-roster-player-link {
    grid-template-columns: 3.15rem minmax(0, 1fr);
    gap: 0.7rem;
  }

  .team-profile-roster-list .team-roster-player-number {
    min-height: 36px;
    padding-right: 0.62rem;
  }

  .team-profile-roster-list .team-roster-season-rating {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    padding-left: 3.85rem;
  }
}


/* Admin player metadata tool */
.admin-player-tool-layout {
  grid-template-columns: minmax(300px, 0.8fr) minmax(360px, 1.2fr);
}

.admin-form-actions,
.admin-player-meta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.admin-player-search {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

/* Without an explicit style, <input type="search"> falls back to the
   native mobile chrome — a pill-shaped, near-transparent widget that
   was practically invisible against the dark admin theme. Force the
   same visible dark-panel styling every browser/device gets. */
.admin-player-search input,
.admin-player-search select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: 6px;
  outline: none;
  -webkit-appearance: none;
          appearance: none;
}
.admin-player-search input::placeholder {
  color: rgba(var(--fg-rgb), 0.4);
}
.admin-player-search input:focus,
.admin-player-search select:focus {
  border-color: rgba(var(--accent-strong-rgb), 0.55);
  background: rgba(0, 0, 0, 0.5);
}
.admin-player-search input[type="search"]::-webkit-search-decoration,
.admin-player-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Selects inside the label share the input's dark-panel look but need their own
   chevron (appearance:none strips the native one) and pointer affordance. Kept
   after the input/select block above so the background-image survives the
   `background` shorthands in the base and :focus rules. */
.admin-player-search select {
  padding-right: 1.9rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.6' d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.7rem;
}
.admin-player-search select:hover {
  border-color: rgba(var(--fg-rgb), 0.3);
}
/* Dark the native option list so the open dropdown matches the site. */
.admin-player-search select option {
  background: rgb(var(--surface-panel-rgb));
  color: var(--text);
}

/* Approved-members filter dropdowns (Role + Member Class) side by side. */
.admin-member-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.admin-member-filters .admin-player-search {
  margin-bottom: 0.75rem;
}
@media (max-width: 480px) {
  .admin-member-filters {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.admin-player-meta-list {
  display: grid;
  gap: 0.5rem;
  max-height: 460px;
  overflow: auto;
  padding: 0.45rem;
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}

.admin-player-meta-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(var(--fg-rgb), 0.07);
  border-radius: 8px;
  background:
    linear-gradient(120deg, rgba(var(--blue-soft-rgb), 0.08), transparent 52%),
    rgba(var(--fg-rgb), 0.04);
}

.admin-player-meta-number {
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: -0.03em;
}

.admin-player-meta-copy {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
}

.admin-player-meta-copy strong,
.admin-player-meta-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-player-meta-copy strong {
  color: #ffffff;
  font-weight: 900;
}

.admin-player-meta-copy small,
.admin-player-suggestion {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-player-suggestion {
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(var(--blue-soft-rgb), 0.2);
  border-radius: 8px;
  background: rgba(var(--blue-soft-rgb), 0.08);
}

.admin-player-suggestion strong {
  color: var(--accent);
}

@media (max-width: 760px) {
  .admin-player-tool-layout {
    grid-template-columns: 1fr;
  }

  .admin-player-meta-row {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .admin-player-meta-actions {
    grid-column: 1 / -1;
  }
}

/* Team detail event selector: event-scoped roster/stat views */
.team-hero-event-select-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  margin-top: 0;
  color: rgba(236, 248, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.team-hero-event-select,
.team-hero-event-label {
  border: 1px solid rgba(var(--team-primary-rgb, 0, 217, 255), 0.34);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(var(--team-primary-rgb, 0, 217, 255), 0.20), rgba(var(--team-secondary-rgb, 84, 238, 255), 0.08)),
    rgba(5, 12, 20, 0.86);
  color: #f5fbff;
  box-shadow: 0 0 20px rgba(var(--team-primary-rgb, 0, 217, 255), 0.14);
}

.team-hero-event-select {
  min-width: min(320px, 68vw);
  padding: 0.62rem 2.35rem 0.62rem 0.9rem;
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: none;
  outline: none;
}

.team-hero-event-select:focus-visible {
  border-color: rgba(var(--team-primary-rgb, 0, 217, 255), 0.76);
  box-shadow: 0 0 0 3px rgba(var(--team-primary-rgb, 0, 217, 255), 0.18), 0 0 24px rgba(var(--team-primary-rgb, 0, 217, 255), 0.24);
}

.team-hero-event-select option {
  background: #07111c;
  color: #f5fbff;
}

.team-hero-event-label {
  display: inline-flex;
  margin-top: 0.42rem;
  padding: 0.5rem 0.85rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .team-hero-event-control {
    width: 100%;
  }

  .team-hero-event-select-label {
    width: 100%;
  }

  .team-hero-event-select {
    width: 100%;
    min-width: 0;
  }
}

/* Admin player roster sync checkbox polish */
.admin-checkline {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0.95rem 0 0.4rem;
  padding: 0.75rem 0.8rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0.75rem;
  background: rgba(8, 17, 28, 0.52);
  cursor: pointer;
}

.admin-checkline input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0.12rem 0 0;
  padding: 0;
  accent-color: #22d3ee;
  cursor: pointer;
}

.admin-checkline span {
  display: block;
  color: #dbeafe;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  line-height: 1.25;
  text-transform: uppercase;
}

.admin-checkline + .admin-field-help {
  margin-top: 0.35rem;
}
/* =========================================
   HERO EVENT DROPDOWN - GRAYSCALE POLISH
========================================= */

.team-event-selector select,
.hero-event-selector select,
.team-hero-event-select {
    background: rgba(18, 18, 22, 0.92) !important;
    border: 1px solid rgba(180, 180, 180, 0.22) !important;
    color: #d7d7d7 !important;
    box-shadow: none !important;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

.team-event-selector select:hover,
.hero-event-selector select:hover,
.team-hero-event-select:hover {
    background: rgba(28, 28, 34, 0.96) !important;
    border-color: rgba(210, 210, 210, 0.38) !important;
    color: #ffffff !important;
}

.team-event-selector select:focus,
.hero-event-selector select:focus,
.team-hero-event-select:focus {
    outline: none !important;
    border-color: rgba(230, 230, 230, 0.55) !important;
    background: rgba(30, 30, 36, 0.98) !important;
    color: #ffffff !important;
}

.team-event-selector option,
.hero-event-selector option,
.team-hero-event-select option {
    background: #141418;
    color: #e2e2e2;
}
/* =========================================
   HERO EVENT PILL - GRAYSCALE POLISH
========================================= */

.team-current-event,
.current-team-event,
.hero-current-event,
.team-event-pill {
    background: rgba(22, 22, 28, 0.88) !important;
    border: 1px solid rgba(190, 190, 190, 0.18) !important;
    color: #d8d8d8 !important;
    box-shadow: none !important;
    backdrop-filter: blur(8px);
}

.team-current-event:hover,
.current-team-event:hover,
.hero-current-event:hover,
.team-event-pill:hover {
    background: rgba(32, 32, 38, 0.94) !important;
    border-color: rgba(220, 220, 220, 0.28) !important;
    color: #ffffff !important;
}

/* =========================================
   HERO EVENT CONTROL - GRAYSCALE FORCE PATCH
   Targets the active event pill/dropdown in the team hero.
========================================= */

.team-hero .team-hero-event-control,
.team-hero [data-team-event-control],
.team-hero [data-team-current-event],
.team-hero [data-current-event] {
  color: #d8d8d8 !important;
}

.team-hero .team-hero-event-control select,
.team-hero .team-event-selector select,
.team-hero .hero-event-selector select,
.team-hero .team-hero-event-select,
.team-hero .team-event-select,
.team-hero select[name*="event" i],
.team-hero select[id*="event" i] {
  appearance: none;
  background:
    linear-gradient(180deg, rgba(38, 38, 44, 0.96), rgba(18, 18, 23, 0.94)) !important;
  border: 1px solid rgba(210, 210, 210, 0.24) !important;
  border-radius: 999px !important;
  color: #dcdcdc !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.08),
    0 10px 24px rgba(0, 0, 0, 0.18) !important;
  min-height: 34px;
  padding: 0.35rem 2rem 0.35rem 0.8rem;
  font-size: 0.76rem;
  font-weight: 700;
}

.team-hero .team-hero-event-control select:hover,
.team-hero .team-event-selector select:hover,
.team-hero .hero-event-selector select:hover,
.team-hero .team-hero-event-select:hover,
.team-hero .team-event-select:hover,
.team-hero select[name*="event" i]:hover,
.team-hero select[id*="event" i]:hover {
  background:
    linear-gradient(180deg, rgba(48, 48, 54, 0.98), rgba(24, 24, 30, 0.96)) !important;
  border-color: rgba(235, 235, 235, 0.36) !important;
  color: #ffffff !important;
}

.team-hero .team-hero-event-control select:focus,
.team-hero .team-event-selector select:focus,
.team-hero .hero-event-selector select:focus,
.team-hero .team-hero-event-select:focus,
.team-hero .team-event-select:focus,
.team-hero select[name*="event" i]:focus,
.team-hero select[id*="event" i]:focus {
  outline: none !important;
  border-color: rgba(245, 245, 245, 0.52) !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.1),
    0 0 0 3px rgba(var(--fg-rgb), 0.08) !important;
}

.team-hero .team-hero-event-control option,
.team-hero .team-event-selector option,
.team-hero .hero-event-selector option,
.team-hero .team-hero-event-select option,
.team-hero .team-event-select option {
  background: #151519 !important;
  color: #eeeeee !important;
}

.team-hero .team-current-event,
.team-hero .current-team-event,
.team-hero .hero-current-event,
.team-hero .team-event-pill,
.team-hero .current-event-pill,
.team-hero .event-pill,
.team-hero [class*="event-pill" i],
.team-hero [class*="current-event" i],
.team-hero [class*="team-event" i]:not(select):not(option):not(.team-upcoming-board):not(.team-upcoming-table):not(.team-upcoming-row):not(.team-upcoming-head) {
  background:
    linear-gradient(180deg, rgba(38, 38, 44, 0.96), rgba(18, 18, 23, 0.94)) !important;
  border: 1px solid rgba(210, 210, 210, 0.24) !important;
  color: #dcdcdc !important;
  box-shadow:
    inset 0 1px 0 rgba(var(--fg-rgb), 0.08),
    0 10px 24px rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(8px);
}

.team-hero .team-current-event:hover,
.team-hero .current-team-event:hover,
.team-hero .hero-current-event:hover,
.team-hero .team-event-pill:hover,
.team-hero .current-event-pill:hover,
.team-hero .event-pill:hover,
.team-hero [class*="event-pill" i]:hover,
.team-hero [class*="current-event" i]:hover {
  background:
    linear-gradient(180deg, rgba(48, 48, 54, 0.98), rgba(24, 24, 30, 0.96)) !important;
  border-color: rgba(235, 235, 235, 0.36) !important;
  color: #ffffff !important;
}

/* Team profile polish patch: tab underline, leader panels, and recent game actions */
body.has-team-color-theme [data-team-tabs] {
  background: rgba(2, 12, 24, 0.7);
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.18);
}

body.has-team-color-theme [data-team-tabs] button,
body.has-team-color-theme .team-tabs button {
  position: relative;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--muted);
}

body.has-team-color-theme [data-team-tabs] button.is-active,
body.has-team-color-theme [data-team-tabs] button.active,
body.has-team-color-theme .team-tabs button.active {
  color: #fff !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.has-team-color-theme [data-team-tabs] button.is-active::after,
body.has-team-color-theme [data-team-tabs] button.active::after,
body.has-team-color-theme .team-tabs button.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--agl-team-primary), var(--agl-team-secondary));
  box-shadow: 0 0 14px rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.32);
}

.team-leader-selector {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  padding: 0.25rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.14);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.24);
  width: min(100%, 360px);
}

.team-leader-selector button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 0.55rem;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.team-leader-selector button.is-active {
  color: #fff;
  background: linear-gradient(135deg, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.24), rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.16));
  box-shadow: inset 0 0 0 1px rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.24);
}

.team-leader-panels {
  display: grid;
  gap: 0.65rem;
}

.team-recent-game-button {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.team-recent-game-button:hover,
.team-recent-game-button:focus-visible {
  border-color: rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.34);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 18px rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.1);
  outline: none;
}

.team-box-score-leaders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

@media (max-width: 640px) {
  .team-leader-selector,
  .team-box-score-leaders {
    grid-template-columns: 1fr;
  }
}

/* Mobile Team Leaders selector refinement: compact horizontal FWD/DEF/GOA tabs */
@media (max-width: 640px) {
  .team-leader-selector {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.25rem !important;
    border: 1px solid rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.22) !important;
  }

  .team-leader-selector button {
    position: relative !important;
    min-height: 2.25rem !important;
    padding: 0.55rem 0.35rem !important;
    border-radius: 999px !important;
    letter-spacing: 0.08em !important;
  }

  .team-leader-selector button::before {
    font-size: 0.78rem !important;
    font-weight: 950 !important;
    line-height: 1 !important;
  }
.team-leader-selector button[data-team-leader-tab="defense"]::before {
  }

  .team-leader-selector button[data-team-leader-tab="goalie"]::before {
    content: "GOA";
  }

  .team-leader-selector button.is-active {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.32), rgba(var(--agl-team-secondary-rgb, 78, 123, 255), 0.18)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.32),
      0 0 18px rgba(var(--agl-team-primary-rgb, 0, 217, 255), 0.12) !important;
  }

  .team-box-score-leaders {
    grid-template-columns: 1fr !important;
  }
}

/* Team page mobile submenu + tab fit cleanup */
@media (max-width: 768px) {
  /* Remove nested submenu indicator so it cannot overlap the Teams label. */
  .site-nav .nav-subdropdown > a::before {
    content: none !important;
    display: none !important;
  }

  .site-nav .nav-subdropdown > a {
    padding-right: 0 !important;
  }
}

@media (max-width: 640px) {
  /* Keep Overview / Roster / Stats / Ranks on one mobile row. */
  .team-detail-tabs,
  body.has-team-color-theme [data-team-tabs] {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 0.16rem !important;
    padding: 0.28rem !important;
    align-items: center !important;
  }

  .team-detail-tabs button,
  body.has-team-color-theme [data-team-tabs] button,
  body.has-team-color-theme .team-detail-tabs button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 34px !important;
    padding: 0 0.26rem !important;
    font-size: clamp(0.66rem, 2.75vw, 0.78rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.025em !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  body.has-team-color-theme [data-team-tabs] button.is-active::after,
  body.has-team-color-theme [data-team-tabs] button.active::after,
  body.has-team-color-theme .team-tabs button.active::after {
    left: 20% !important;
    right: 20% !important;
    bottom: 4px !important;
  }
}

@media (max-width: 390px) {
  .team-detail-tabs button,
  body.has-team-color-theme [data-team-tabs] button,
  body.has-team-color-theme .team-detail-tabs button {
    font-size: clamp(0.58rem, 2.65vw, 0.7rem) !important;
    letter-spacing: 0.01em !important;
    padding: 0 0.18rem !important;
  }
}


/* Team Leaders mobile selector: match compact one-row team panel tab style */
@media (max-width: 640px) {
  .team-leader-selector {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.16rem !important;
    padding: 0.28rem !important;
    align-items: center !important;
    border-radius: 999px !important;
  }

  .team-leader-selector button {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 34px !important;
    padding: 0 0.26rem !important;
    font-size: clamp(0.66rem, 2.75vw, 0.78rem) !important;
    line-height: 1 !important;
    letter-spacing: 0.025em !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .team-leader-selector button::before {
    content: none !important;
    display: none !important;
  }
}

@media (max-width: 390px) {
  .team-leader-selector button {
    font-size: clamp(0.58rem, 2.65vw, 0.7rem) !important;
    letter-spacing: 0.01em !important;
    padding: 0 0.18rem !important;
  }
}

/* Shared player rating badge columns - 2026-05-30 */
.rating-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 0.18rem 0.42rem;
  border: 1px solid rgba(var(--fg-rgb), 0.16);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--fg-rgb), 0.08), rgba(120, 150, 190, 0.08));
  color: rgba(239, 246, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  box-shadow: inset 0 0 12px rgba(var(--fg-rgb), 0.035);
}

.rating-pill--solid {
  border-color: rgba(150, 185, 220, 0.34);
  color: #d9e7f8;
  box-shadow: 0 0 12px rgba(130, 185, 255, 0.08), inset 0 0 12px rgba(var(--fg-rgb), 0.04);
}

.rating-pill--strong {
  border-color: rgba(96, 212, 255, 0.44);
  color: #ebfbff;
  background: linear-gradient(135deg, rgba(18, 118, 166, 0.24), rgba(var(--fg-rgb), 0.08));
  box-shadow: 0 0 14px rgba(40, 180, 255, 0.16), inset 0 0 14px rgba(var(--fg-rgb), 0.05);
}

.rating-pill--elite {
  border-color: rgba(255, 211, 103, 0.58);
  color: #fff3bc;
  background: linear-gradient(135deg, rgba(144, 96, 18, 0.34), rgba(255, 220, 120, 0.1));
  box-shadow: 0 0 16px rgba(255, 199, 73, 0.2), inset 0 0 16px rgba(var(--fg-rgb), 0.06);
}

.stats-page .stats-table th:nth-child(5),
.stats-page .stats-table td:nth-child(5) {
  width: 54px;
  text-align: center;
}

.stats-page .stats-table th:nth-child(n + 6),
.stats-page .stats-table td:nth-child(n + 6) {
  width: 50px;
  text-align: center;
}

.team-stats-table .rating-pill,
.player-card-page .stats-table .rating-pill {
  margin-inline: auto;
}

/* Finalized team ticker cards open the existing box score modal. */
.ticker-game-card.is-final[data-team-box-score] {
  cursor: pointer;
}

.ticker-game-card.is-final[data-team-box-score]:focus-visible {
  outline: 2px solid rgba(125, 185, 255, 0.9);
  outline-offset: 3px;
}


/* Homepage ticker finalized game box-score affordance */
.ticker-game-card[data-home-box-score] {
  cursor: pointer;
}

.ticker-game-card[data-home-box-score]:hover,
.ticker-game-card[data-home-box-score]:focus-visible {
  border-color: rgba(255, 229, 117, 0.8);
  box-shadow: 0 0 0 1px rgba(255, 229, 117, 0.22), 0 0 18px rgba(90, 166, 255, 0.22);
  outline: none;
}

/* Matchup preview modal for upcoming ticker games */
.ticker-game-card.is-upcoming[data-matchup-preview-key],
.ticker-game-card.is-upcoming[data-team-matchup-preview-key] {
  cursor: pointer !important;
}

.ticker-game-card.is-upcoming[data-matchup-preview-key]::after,
.ticker-game-card.is-upcoming[data-team-matchup-preview-key]::after {
  content: "Preview";
  position: absolute;
  right: 0.62rem;
  bottom: 0.3rem;
  color: rgba(var(--text-soft-rgb), 0.58);
  font-size: 0.48rem;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

.ticker-game-card.is-upcoming[data-matchup-preview-key]:hover::after,
.ticker-game-card.is-upcoming[data-matchup-preview-key]:focus-visible::after,
.ticker-game-card.is-upcoming[data-team-matchup-preview-key]:hover::after,
.ticker-game-card.is-upcoming[data-team-matchup-preview-key]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

.ticker-game-card.is-upcoming[data-matchup-preview-key]:focus-visible,
.ticker-game-card.is-upcoming[data-team-matchup-preview-key]:focus-visible {
  outline: 2px solid rgba(var(--accent-bright-rgb), 0.9);
  outline-offset: 4px;
}

.matchup-preview-modal[hidden] {
  display: none;
}

.matchup-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
}

.matchup-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(10px);
}

.matchup-preview-dialog {
  position: relative;
  width: min(920px, 100%);
  max-height: min(86vh, 880px);
  overflow: auto;
  border: 1px solid rgba(178, 220, 255, 0.26);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(32, 52, 82, 0.34), transparent 42%),
    linear-gradient(145deg, rgba(10, 14, 24, 0.98), rgba(3, 7, 15, 0.98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62), 0 0 36px rgba(var(--accent-bright-rgb), 0.16);
  color: #f5f8ff;
}

.matchup-preview-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 2;
  margin: 12px 12px 0 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(var(--fg-rgb), 0.18);
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.1);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.1);
}

.matchup-preview-content {
  padding: 30px 28px 34px;
}

.matchup-preview-loading {
  padding: 42px 20px;
  text-align: center;
  color: rgba(236, 246, 255, 0.78);
}

.matchup-preview-header {
  text-align: center;
  margin-bottom: 22px;
}

.matchup-preview-header .eyebrow {
  margin: 0 0 8px;
  color: #20dfff;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(32, 223, 255, 0.5);
}

.matchup-preview-header h2 {
  margin: 4px 0 6px;
  font-size: clamp(2.15rem, 5vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55);
}

.matchup-preview-header > span,
.matchup-preview-team span,
.matchup-preview-team small,
.matchup-preview-series div,
.matchup-preview-players li {
  color: rgba(230, 240, 255, 0.74);
}

.matchup-preview-scoreboard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 26px;
  align-items: center;
  margin-bottom: 22px;
}

.matchup-preview-team {
  position: relative;
  display: grid;
  min-height: 276px;
  justify-items: center;
  align-content: center;
  gap: 9px;
  padding: 28px 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--matchup-team-secondary, #ffffff) 28%, rgba(var(--fg-rgb), 0.18));
  border-radius: 20px;
  background:
    radial-gradient(circle at 35% 18%, color-mix(in srgb, var(--matchup-team-secondary, #ffffff) 24%, transparent), transparent 31%),
    radial-gradient(circle at 12% 4%, color-mix(in srgb, var(--matchup-team-primary, var(--blue-soft)) 70%, transparent), transparent 47%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--matchup-team-primary, var(--blue-soft)) 78%, rgba(8, 13, 22, 0.92)) 0%,
      color-mix(in srgb, var(--matchup-team-primary, var(--blue-soft)) 46%, rgba(8, 13, 22, 0.96)) 48%,
      color-mix(in srgb, var(--matchup-team-tertiary, #000000) 72%, rgba(5, 8, 14, 0.98)) 100%);
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.12), 0 0 30px color-mix(in srgb, var(--matchup-team-primary, var(--blue-soft)) 24%, transparent);
}

.matchup-preview-team::after,
.matchup-preview-players::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--fg-rgb), 0.08), transparent 36%, rgba(0, 0, 0, 0.18));
}

.matchup-preview-team > *,
.matchup-preview-players > * {
  position: relative;
  z-index: 1;
}

.matchup-preview-team img {
  width: 98px;
  height: 98px;
  object-fit: contain;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 14px rgba(var(--fg-rgb), 0.24)) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.42));
}

.matchup-preview-team strong {
  font-size: 1.85rem;
  line-height: 1;
  letter-spacing: 0.1em;
}

.matchup-preview-team span {
  font-size: 1.15rem;
}

.matchup-preview-team b {
  font-size: 1.16rem;
  color: #fff;
}

.matchup-preview-vs {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 20%, rgba(40, 229, 255, 0.3), rgba(0, 133, 160, 0.28) 48%, rgba(2, 18, 28, 0.96));
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 0 18px rgba(var(--accent-bright-rgb), 0.22);
}

.matchup-preview-series {
  margin-bottom: 22px;
  padding: 20px 16px;
  text-align: center;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 164, 214, 0.16), transparent 42%),
    rgba(var(--fg-rgb), 0.045);
}

.matchup-preview-players {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--matchup-team-primary, #ffffff) 42%, rgba(var(--fg-rgb), 0.1));
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--matchup-team-primary, var(--blue-soft)) 44%, transparent), transparent 52%),
    linear-gradient(145deg,
      color-mix(in srgb, var(--matchup-team-primary, var(--blue-soft)) 28%, rgba(10, 14, 24, 0.94)),
      color-mix(in srgb, var(--matchup-team-tertiary, #000000) 42%, rgba(5, 8, 14, 0.98)) 72%);
  padding: 18px;
  box-shadow: 0 0 24px color-mix(in srgb, var(--matchup-team-primary, var(--blue-soft)) 16%, transparent);
}

.matchup-preview-series h3,
.matchup-preview-players h3 {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  font-weight: 900;
  color: color-mix(in srgb, var(--matchup-team-primary, #20dfff) 72%, #ffffff);
  text-shadow: 0 0 12px color-mix(in srgb, var(--matchup-team-primary, #20dfff) 36%, transparent);
}

.matchup-preview-series h3 {
  color: #42dfff;
}

.matchup-preview-series strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.32rem;
  letter-spacing: 0.04em;
}

.matchup-preview-series div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  font-size: 0.95rem;
}

.matchup-preview-player-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.matchup-preview-players ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.matchup-preview-players li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.9rem;
}

.matchup-preview-players li span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.1);
  color: #fff;
  font-weight: 800;
}

.matchup-preview-players li strong {
  color: #f8fbff;
  font-weight: 700;
}

.matchup-preview-players li.is-empty {
  display: block;
  text-align: center;
  padding: 12px;
}

@media (max-width: 680px) {
  .matchup-preview-modal {
    padding: 10px;
  }

  .matchup-preview-dialog {
    max-height: 90vh;
  }

  .matchup-preview-content {
    padding: 22px 16px;
  }

  .matchup-preview-scoreboard {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .matchup-preview-team {
    min-height: 220px;
  }

  .matchup-preview-vs {
    width: 42px;
    height: 42px;
    justify-self: center;
  }

  .matchup-preview-player-grid {
    grid-template-columns: 1fr;
  }
}
}



/* Box score three stars panel - 2026-05-31 */
.box-score-heading-with-stars {
  display: block;
}

.box-score-stars {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0.75rem 0 0.85rem;
  padding: 0.8rem;
  border: 1px solid rgba(var(--blue-soft-rgb), 0.16);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(16, 41, 50, 0.92), rgba(7, 14, 25, 0.94)),
    rgba(4, 11, 22, 0.86);
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.055), 0 12px 36px rgba(0, 0, 0, 0.2);
}

.box-score-stars-kicker {
  grid-column: 1 / -1;
  color: rgba(176, 218, 255, 0.95);
  font-size: 0.66rem;
  font-weight: 1000;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.box-score-star-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 76px;
  padding: 0.65rem 0.7rem;
  border: 1px solid rgba(50, 125, 165, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(14, 42, 49, 0.88), rgba(7, 15, 27, 0.92)),
    rgba(2, 9, 18, 0.72);
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.05);
}

.box-score-star-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 0%, rgba(var(--blue-soft-rgb), 0.12), transparent 42%);
  opacity: 0.9;
}

.box-score-star-card > * {
  position: relative;
  z-index: 1;
}

.box-score-star-card--1 {
  border-color: rgba(255, 215, 91, 0.38);
  box-shadow: inset 3px 0 0 rgba(255, 215, 91, 0.78), inset 0 1px 0 rgba(var(--fg-rgb), 0.06);
}

.box-score-star-card--2 {
  border-color: rgba(205, 218, 230, 0.28);
  box-shadow: inset 3px 0 0 rgba(205, 218, 230, 0.62), inset 0 1px 0 rgba(var(--fg-rgb), 0.06);
}

.box-score-star-card--3 {
  border-color: rgba(205, 127, 50, 0.32);
  box-shadow: inset 3px 0 0 rgba(205, 127, 50, 0.66), inset 0 1px 0 rgba(var(--fg-rgb), 0.06);
}

.box-score-star-rank {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(var(--blue-soft-rgb), 0.1);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 1000;
}

.box-score-star-card--1 .box-score-star-rank {
  background: rgba(255, 215, 91, 0.15);
  color: #ffd75b;
}

.box-score-star-main {
  min-width: 0;
}

.box-score-star-main strong {
  display: block;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.88rem;
  font-weight: 1000;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.box-score-star-main span {
  display: block;
  margin-top: 0.12rem;
  color: rgba(176, 218, 255, 0.82);
  font-size: 0.58rem;
  font-weight: 1000;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.box-score-star-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.24rem;
  margin-top: 0.38rem;
}

.box-score-star-stats em {
  padding: 0.12rem 0.32rem;
  border-radius: 999px;
  background: rgba(var(--blue-soft-rgb), 0.1);
  color: rgba(235, 245, 255, 0.9);
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

.box-score-star-rating {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 48px;
  padding: 0.32rem 0.38rem;
  border-left: 1px solid rgba(var(--fg-rgb), 0.08);
  color: #ffd75b;
}

.box-score-star-rating strong {
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 1000;
  line-height: 1;
}

.box-score-star-rating span {
  margin-top: 0.14rem;
  color: rgba(176, 218, 255, 0.82);
  font-size: 0.5rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  line-height: 1;
}

.box-score-stars-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.7rem;
  border: 1px solid rgba(50, 125, 165, 0.32);
  border-radius: 8px;
  background: rgba(2, 9, 18, 0.58);
  color: rgba(226, 236, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
}

@media (max-width: 980px) {
  .box-score-stars {
    grid-template-columns: 1fr;
  }
}


/* ECU player picker for admin game stat entry rows */
.stat-entry-row:has(.stat-entry-field-ecu) {
  grid-template-columns: 280px 112px 72px;
}

.stat-entry-field-ecu {
  width: 72px;
}

.stat-entry-field-ecu input[type="checkbox"] {
  width: 100%;
  min-height: 38px;
  accent-color: var(--link-blue);
  cursor: pointer;
}

.stat-entry-row.is-ecu-row {
  border-color: rgba(255, 203, 92, 0.42);
  box-shadow: inset 0 0 0 1px rgba(255, 203, 92, 0.08), 0 0 20px rgba(255, 203, 92, 0.08);
}

.stat-entry-row.is-ecu-row .stat-entry-field-player input {
  border-color: rgba(255, 203, 92, 0.38);
  background: linear-gradient(180deg, rgba(255, 203, 92, 0.12), rgba(var(--surface-panel-rgb), 0.82));
}

/* ECU modal picker refinement for admin game stat entry rows */
.stat-entry-field-ecu input[type="checkbox"] {
  width: 50%;
  min-height: 19px;
  justify-self: center;
  align-self: center;
  margin: 0 auto;
}

.admin-ecu-inline-picker {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(255, 203, 92, 0.38);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 203, 92, 0.14), rgba(var(--surface-panel-rgb), 0.86));
  color: #f8fbff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.42rem 0.58rem;
  cursor: pointer;
  text-align: left;
}

.admin-ecu-inline-picker strong {
  font-size: 0.82rem;
  line-height: 1.05;
}

.admin-ecu-inline-picker small {
  color: rgba(255, 220, 140, 0.78);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-ecu-modal[hidden] {
  display: none;
}

.admin-ecu-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.admin-ecu-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 5, 14, 0.78);
  backdrop-filter: blur(8px);
}

.admin-ecu-dialog {
  position: relative;
  z-index: 1;
  width: min(560px, 94vw);
  max-height: min(680px, 88vh);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.36);
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(var(--accent-strong-rgb), 0.18), transparent 34%),
    linear-gradient(180deg, rgba(8, 20, 38, 0.98), rgba(2, 8, 18, 0.98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.62), inset 0 0 0 1px rgba(var(--fg-rgb), 0.045);
  padding: 1rem;
}

.admin-ecu-header,
.admin-ecu-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.admin-ecu-kicker {
  margin: 0 0 0.15rem;
  color: rgba(255, 203, 92, 0.86);
  font-size: 0.68rem;
  font-weight: 1000;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.admin-ecu-header h3 {
  margin: 0;
  color: #f8fbff;
  font-size: 1.15rem;
}

/* Maintenance detail modal (opened by clicking the dashboard maintenance tile). */
[data-maintenance-detail-body] {
  overflow-y: auto;
  min-height: 0;
  display: grid;
  gap: 0.6rem;
  padding-right: 0.25rem;
}
[data-maintenance-detail-body] h4 {
  margin: 0;
  color: #f8fbff;
  font-size: 0.95rem;
}
[data-maintenance-detail-body] li {
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(var(--fg-rgb), 0.85);
  list-style: none;
  margin-top: 0.3rem;
}
.admin-maint-note {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(var(--fg-rgb), 0.72);
}
.admin-maint-note a {
  color: rgba(255, 203, 92, 0.9);
}

.admin-ecu-search {
  width: 100%;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.32);
  border-radius: 12px;
  background: rgba(2, 9, 18, 0.86);
  color: #f8fbff;
  padding: 0.78rem 0.9rem;
  font-size: 1rem;
  outline: none;
}

.admin-ecu-search:focus {
  border-color: rgba(var(--accent-strong-rgb), 0.72);
  box-shadow: 0 0 0 3px rgba(var(--accent-strong-rgb), 0.16);
}

.admin-ecu-list {
  min-height: 220px;
  max-height: 390px;
  overflow: auto;
  display: grid;
  gap: 0.45rem;
  padding-right: 0.25rem;
}

.admin-ecu-player-option {
  width: 100%;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 12px;
  background: rgba(5, 17, 32, 0.78);
  color: #f8fbff;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 0.65rem;
  align-items: center;
  padding: 0.62rem 0.7rem;
  cursor: pointer;
  text-align: left;
}

.admin-ecu-player-option:hover,
.admin-ecu-player-option.is-selected {
  border-color: rgba(255, 203, 92, 0.58);
  background: linear-gradient(135deg, rgba(255, 203, 92, 0.18), rgba(10, 28, 52, 0.92));
}

.admin-ecu-player-number {
  min-height: 34px;
  border-radius: 9px;
  background: rgba(var(--fg-rgb), 0.07);
  display: grid;
  place-items: center;
  color: rgba(255, 220, 140, 0.92);
  font-weight: 1000;
}

.admin-ecu-player-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.admin-ecu-player-copy strong {
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-ecu-player-copy small {
  color: rgba(218, 229, 246, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
}

.admin-ecu-empty {
  border: 1px dashed rgba(var(--accent-strong-rgb), 0.26);
  border-radius: 12px;
  padding: 1rem;
  color: rgba(226, 236, 255, 0.72);
  font-weight: 800;
  text-align: center;
}

.admin-ecu-actions {
  justify-content: flex-end;
}

.admin-ecu-actions [data-select-ecu-player]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* 2026-05-31 multi-system polish patch */

/* Admin stat entry: keep ECU anchored to the far-left of each stat-entry row. */
.stat-entry-row:has(.stat-entry-field-ecu) {
  grid-template-columns: 42px 280px 112px 72px;
  align-items: end;
}

.stat-entry-field-ecu {
  order: -10;
  width: 42px;
  min-width: 42px;
  align-self: stretch;
}

.stat-entry-field-ecu span {
  text-align: center;
}

.stat-entry-field-ecu input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-height: 20px;
  justify-self: center;
  align-self: center;
}

/* Box score: keep the tab rail horizontal on mobile. */
@media (max-width: 640px) {
  .schedule-modal-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 0.25rem;
    padding: 0.28rem;
  }

  .schedule-modal-tabs button {
    min-height: 34px;
    max-width: none;
    padding: 0 0.28rem;
    font-size: clamp(0.58rem, 2.4vw, 0.68rem);
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* .box-score-stat's middle column had a hard 130px minimum, which alone
     (plus the two 68px label/value columns and gaps) exceeded the available
     width inside the modal on narrow phones and forced the whole box score
     panel into horizontal scroll. Drop the hard floor below 480px. */
  .box-score-stat {
    grid-template-columns: minmax(44px, 0.3fr) minmax(0, 1fr) minmax(44px, 0.3fr);
  }
}

/* Matchup preview mobile: keep team boxes side-by-side while tightening the layout. */
@media (max-width: 680px) {
  .matchup-preview-scoreboard {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    gap: 7px;
    align-items: stretch;
  }

  .matchup-preview-team {
    min-height: 164px;
    padding: 16px 8px;
    border-radius: 16px;
    gap: 5px;
  }

  .matchup-preview-team img {
    width: 68px;
    height: 68px;
    margin-bottom: 6px;
  }

  .matchup-preview-team strong {
    font-size: clamp(1.05rem, 6vw, 1.35rem);
    letter-spacing: 0.06em;
  }

  .matchup-preview-team span,
  .matchup-preview-team small,
  .matchup-preview-team b {
    font-size: 0.72rem;
  }

  .matchup-preview-vs {
    width: 34px;
    height: 34px;
    align-self: center;
    font-size: 0.7rem;
  }
}

/* Player cards: bring current/career stat boxes closer to the site stat-block style. */
.player-card-page .player-stat-tile,
.player-stat-board-featured .player-stat-tile {
  border: 1px solid rgba(var(--accent-strong-rgb), 0.24);
  border-radius: 14px;
  background:
    radial-gradient(circle at 24% 0%, rgba(var(--blue-soft-rgb), 0.16), transparent 46%),
    linear-gradient(145deg, rgba(var(--surface-mid-rgb), 0.92), rgba(var(--surface-deep-rgb), 0.96));
  color: #f4f8ff;
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.06), 0 10px 26px rgba(0, 0, 0, 0.2);
}

.player-card-page .player-stat-tile span,
.player-stat-board-featured .player-stat-tile span {
  background: linear-gradient(135deg, rgba(var(--blue-soft-rgb), 0.22), rgba(var(--accent-strong-rgb), 0.08));
  color: rgba(var(--pale-blue-rgb), 0.9);
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.06);
  letter-spacing: 0.08em;
}

.player-card-page .player-stat-tile strong,
.player-stat-board-featured .player-stat-tile strong {
  color: #ffffff;
  text-shadow: 0 0 16px rgba(var(--blue-soft-rgb), 0.16);
}

/* ── Card style (donor perk): featured stat board tint ──
   Deliberately placed AFTER the glass tile styles above — those share
   specificity with these selectors, so source order decides, and the theme
   must win. player.js puts card-theme-<slug> on .player-showcase, so
   everything here scopes to descendants of that class. */
[class*="card-theme-"] .player-stat-board {
  border-color: rgba(var(--card-accent-rgb, 23, 165, 255), 0.35);
  background:
    linear-gradient(115deg, rgba(var(--card-accent-rgb, 23, 165, 255), 0.13), transparent 42%),
    rgba(var(--surface-deep-rgb), 0.68);
  box-shadow: inset 0 0 34px rgba(var(--card-accent-rgb, 23, 165, 255), 0.08);
}
[class*="card-theme-"] .player-stat-sections h3 {
  text-shadow: 0 0 18px rgba(var(--card-accent-rgb, 23, 165, 255), 0.45);
}
[class*="card-theme-"] .player-stat-board-featured .player-stat-tile {
  border-color: rgba(var(--card-accent-rgb, 88, 166, 255), 0.32);
  background:
    radial-gradient(circle at 24% 0%, rgba(var(--card-accent-rgb, 0, 198, 255), 0.2), transparent 46%),
    linear-gradient(145deg, rgba(var(--surface-mid-rgb), 0.92), rgba(var(--surface-deep-rgb), 0.96));
}
[class*="card-theme-"] .player-card-page .player-stat-tile span,
[class*="card-theme-"] .player-stat-tile span {
  background: linear-gradient(135deg, rgba(var(--card-accent-rgb, 0, 198, 255), 0.3), rgba(var(--card-accent-rgb, 88, 166, 255), 0.08));
  color: var(--card-accent-text, rgba(var(--pale-blue-rgb), 0.9));
}
[class*="card-theme-"] .player-card-page .player-stat-tile strong,
[class*="card-theme-"] .player-stat-tile strong {
  text-shadow: 0 0 16px rgba(var(--card-accent-rgb, 0, 198, 255), 0.28);
}

/* Season rankings + career rankings sections (both render as
   .player-profile-extra-card) follow the card style too. */
[class*="card-theme-"] .player-profile-extra-card {
  border-color: rgba(var(--card-accent-rgb, 88, 166, 255), 0.32);
  background:
    linear-gradient(135deg, rgba(var(--card-accent-rgb, 23, 165, 255), 0.1), transparent 52%),
    rgba(var(--surface-deep-rgb), 0.74);
  box-shadow: inset 0 0 24px rgba(var(--card-accent-rgb, 23, 165, 255), 0.07);
}
[class*="card-theme-"] .player-profile-extra-card h3 {
  text-shadow: 0 0 14px rgba(var(--card-accent-rgb, 23, 165, 255), 0.45);
}
[class*="card-theme-"] .player-profile-mini-card {
  border-color: rgba(var(--card-accent-rgb, 88, 166, 255), 0.28);
  background:
    radial-gradient(circle at left, rgba(var(--card-accent-rgb, 0, 210, 255), 0.14), transparent 46%),
    rgba(var(--surface-deep-rgb), 0.76);
}
/* !important matches the icon restyle block above that force-sets the cyan. */
[class*="card-theme-"] .player-profile-mini-icon {
  color: var(--card-accent-tile-b, var(--blue-soft)) !important;
}

/* Game log / Season-by-Season panel (.player-season-panel) — accent border,
   corner wash, and heading glow; the table itself stays neutral for
   readability. */
[class*="card-theme-"] .player-season-panel {
  border-color: rgba(var(--card-accent-rgb, 23, 165, 255), 0.32);
  box-shadow: inset 0 0 34px rgba(var(--card-accent-rgb, 23, 165, 255), 0.07);
}
[class*="card-theme-"] .player-season-panel .panel-heading h2 {
  text-shadow: 0 0 16px rgba(var(--card-accent-rgb, 23, 165, 255), 0.45);
}

/* ── "Team Colors" card style: bolder than the preset washes ──
   The presets pick accents that contrast with the site's blue, but a team's
   primary can BE blue, so translucent tints alone read as "no theme". Team
   cards instead get a jersey-stripe treatment: each stat-tile label strip is
   a solid band of the primary with a secondary-color underline, so both team
   colors are unmistakable. player.js supplies --card-accent-2-rgb (secondary)
   and --card-accent-strip-text (black/white per the primary's brightness)
   alongside the shared accent vars. Placed after the generic theme rules —
   same specificity, so source order lets the team treatment win. */
.card-theme-team .player-card-page .player-stat-tile span,
.card-theme-team .player-stat-tile span {
  background: linear-gradient(90deg, rgba(var(--card-accent-rgb, 23, 165, 255), 0.92), rgba(var(--card-accent-rgb, 23, 165, 255), 0.62));
  color: var(--card-accent-strip-text, #ffffff);
  border-bottom: 2px solid rgba(var(--card-accent-2-rgb, var(--card-accent-rgb, 23, 165, 255)), 0.95);
}
.card-theme-team .player-stat-board-featured .player-stat-tile {
  border-color: rgba(var(--card-accent-rgb, 88, 166, 255), 0.5);
}
.card-theme-team .player-stat-board,
.card-theme-team .player-profile-extra-card,
.card-theme-team .player-season-panel {
  border-color: rgba(var(--card-accent-rgb, 23, 165, 255), 0.55);
}

@media (max-width: 640px) {
  .player-card-page .player-stat-grid,
  .player-stat-board-featured .player-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.48rem;
  }

  .player-card-page .player-stat-tile span,
  .player-stat-board-featured .player-stat-tile span {
    padding: 0.32rem 0.22rem;
    font-size: clamp(0.52rem, 2.6vw, 0.64rem);
  }

  .player-card-page .player-stat-tile strong,
  .player-stat-board-featured .player-stat-tile strong {
    padding: 0.4rem 0.22rem;
    font-size: clamp(0.92rem, 5vw, 1.18rem);
  }
}

/* ── Player card stat tiles: number-led treatment ───────────────────────────
   Replaces the filled label strip with a large tabular number and a small
   tracked-out caption beneath it.

   The previous "label strip" design is archived at
   archive/stat-tile-classic.css — both verbatim and as a reusable
   .stat-tile-classic component. Reverting is just deleting THIS block: none of
   the older rules were removed, they sit above and are only being out-ordered,
   so they come straight back.

   The markup is unchanged — statTile() in player.js still emits
   <span>label</span><strong>value</strong> — so flex column-reverse does the
   visual reordering and the JS stays untouched.

   Placed last on purpose. Three earlier blocks match these tiles at equal or
   higher specificity (the card-page glass styles, the [class*="card-theme-"]
   tint block, and the .card-theme-team jersey stripe), plus the max-640px
   sizing block; source order is what lets this win. The selectors are doubled
   with the [class*="card-theme-"] prefix for the same reason — without those
   copies the themed label strip would out-specify this and come back.

   Sizes are single viewport-aware clamps rather than a desktop rule plus a
   mobile override, since this block now supersedes the max-640px sizing above
   for these two elements.

   Everything is token-driven, so the Bleached theme keeps working: it flips
   --surface-mid/-deep to light values (the tile goes light with it) and its own
   higher-specificity rule still owns the number's colour. */
.player-card-page .player-stat-tile,
.player-stat-board-featured .player-stat-tile,
[class*="card-theme-"] .player-card-page .player-stat-tile,
[class*="card-theme-"] .player-stat-board-featured .player-stat-tile {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(var(--card-accent-rgb, 88, 166, 255), 0.3);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(var(--surface-mid-rgb), 0.8), rgba(var(--surface-deep-rgb), 0.86));
  padding: 0.7rem 0.7rem 0.75rem;
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.05);
}

.player-card-page .player-stat-tile strong,
.player-stat-board-featured .player-stat-tile strong,
[class*="card-theme-"] .player-card-page .player-stat-tile strong,
[class*="card-theme-"] .player-stat-board-featured .player-stat-tile strong {
  padding: 0;
  font-family: 'Barlow Condensed', 'Segoe UI Semibold', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 5vw, 1.62rem);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  /* One line, always. player.js fitStatTileValues() shrinks the font to fit
     the tile when a value outgrows it (long records, big pass totals), so the
     base rule's overflow-wrap:anywhere must not be allowed to break it first. */
  white-space: nowrap;
  color: #ffffff;
  text-shadow: none;
}

.player-card-page .player-stat-tile span,
.player-stat-board-featured .player-stat-tile span,
[class*="card-theme-"] .player-card-page .player-stat-tile span,
[class*="card-theme-"] .player-stat-board-featured .player-stat-tile span {
  margin-top: 0.3rem;
  padding: 0;
  background: none;
  border-bottom: 0;
  font-family: 'Barlow Condensed', 'Segoe UI Semibold', 'Arial Narrow', sans-serif;
  font-weight: 500;
  font-size: clamp(0.58rem, 2.4vw, 0.7rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(var(--text-soft-rgb), 0.5);
}

/* "Team Colors" keeps needing BOTH team colors visible, and the old jersey
   stripe it relied on is the very thing this design removes. The stripe moves
   to a bar across the foot of each tile: primary into secondary, clipped by the
   tile's own overflow:hidden so it follows the rounded corners. */
.card-theme-team .player-card-page .player-stat-tile span,
.card-theme-team .player-stat-board-featured .player-stat-tile span {
  background: none;
  border-bottom: 0;
  color: rgba(var(--text-soft-rgb), 0.5);
}

.card-theme-team .player-card-page .player-stat-tile::after,
.card-theme-team .player-stat-board-featured .player-stat-tile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    rgba(var(--card-accent-rgb, 23, 165, 255), 0.95),
    rgba(var(--card-accent-2-rgb, var(--card-accent-rgb, 23, 165, 255)), 0.95)
  );
}

/* Admin stats entry width + ECU/player column fit polish */
.admin-dashboard:has(.game-stats-form) {
  width: 100%;
  max-width: min(1580px, calc(100vw - 1.25rem));
}

.section:has(.game-stats-form) {
  padding-inline: clamp(0.75rem, 2vw, 1.75rem);
}

.admin-tool-page:has(.game-stats-form),
.stats-workflow-panel:has(.game-stats-form),
.game-stats-form,
.game-stat-stack,
.team-stat-section {
  width: 100%;
}

.stat-entry-scroll {
  width: 100%;
  scrollbar-gutter: stable both-edges;
}

.stat-entry-row:has(.stat-entry-field-ecu) {
  grid-template-columns: 54px 340px 112px;
  grid-auto-columns: 84px;
  align-items: end;
}

.stat-entry-row:has(.stat-entry-field-ecu) .stat-entry-field-ecu {
  width: 54px;
  min-width: 54px;
}

.stat-entry-row:has(.stat-entry-field-ecu) .stat-entry-field-player,
.stat-entry-row:has(.stat-entry-field-ecu) .stat-entry-field-player-ecu {
  width: 340px;
  min-width: 340px;
}

.stat-entry-field-ecu span {
  text-align: center;
  letter-spacing: 0.06em;
}

.stat-entry-field-ecu input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .admin-dashboard:has(.game-stats-form) {
    max-width: calc(100vw - 0.5rem);
  }

  .section:has(.game-stats-form) {
    padding-inline: 0.4rem;
  }

  .stat-entry-row:has(.stat-entry-field-ecu) {
    grid-template-columns: 50px 300px 104px;
  }

  .stat-entry-row:has(.stat-entry-field-ecu) .stat-entry-field-ecu {
    width: 50px;
    min-width: 50px;
  }

  .stat-entry-row:has(.stat-entry-field-ecu) .stat-entry-field-player,
  .stat-entry-row:has(.stat-entry-field-ecu) .stat-entry-field-player-ecu {
    width: 300px;
    min-width: 300px;
  }
}


/* Box score team stat tables aligned with team-page player stat bars */
.schedule-player-table-wrap {
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.14);
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb),.026), transparent),
    rgba(0,0,0,.18);
  overflow: auto;
}

.schedule-player-table {
  border-collapse: separate;
  border-spacing: 0;
}

.schedule-player-table th {
  background:
    linear-gradient(180deg, rgba(var(--blue-soft-rgb), 0.11), rgba(var(--surface-deep-rgb), 0.96));
  color: rgba(219, 244, 255, 0.95);
}

.schedule-player-table tbody tr {
  background: rgba(var(--surface-deep-rgb), 0.72);
}

.schedule-player-table tbody tr:nth-child(even) {
  background: rgba(var(--surface-mid-rgb), 0.78);
}

.schedule-player-table tbody tr:hover {
  background: rgba(var(--blue-soft-rgb), 0.06);
}

.schedule-player-table .rating-pill {
  margin-inline: auto;
}


/* Box score / matchup modal selectable links */
.matchup-preview-team {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.matchup-preview-team:hover,
.matchup-preview-team:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(var(--accent-bright-rgb), 0.18), inset 0 0 34px rgba(var(--fg-rgb), 0.08);
  outline: 1px solid rgba(var(--fg-rgb), 0.28);
}

.matchup-preview-player-link,
.box-score-player-link {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

.matchup-preview-player-link:hover,
.matchup-preview-player-link:focus-visible,
.box-score-player-link:hover,
.box-score-player-link:focus-visible {
  color: #79e8ff;
  text-shadow: 0 0 10px rgba(var(--accent-bright-rgb), 0.45);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Player current panel: 8-wide rating contributor rank row */
.player-profile-extra-card.is-eight {
  grid-column: 1 / -1;
}

.player-profile-extra-card.is-eight .player-profile-mini-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.player-profile-extra-card.is-eight .player-profile-mini-card {
  min-height: 76px;
}

.player-profile-extra-card.is-eight .player-profile-mini-card strong {
  font-size: clamp(0.98rem, 1.2vw, 1.28rem);
}

@media (max-width: 1280px) {
  .player-profile-extra-card.is-eight .player-profile-mini-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .player-profile-extra-card.is-eight .player-profile-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .player-profile-extra-card.is-eight .player-profile-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* Player current panel: position-based ranking cards styled like team rank blocks */
.player-current-position-rankings {
  grid-column: 1 / -1;
}

.player-profile-rank-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.5rem;
}

.player-profile-rank-card {
  position: relative;
  min-height: 86px;
  padding: 0.78rem 0.72rem 0.68rem;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb), 0.035), transparent 44%),
    radial-gradient(circle at top left, rgba(var(--blue-soft-rgb), 0.13), transparent 48%),
    rgba(var(--surface-deep-rgb), 0.78);
  box-shadow: inset 0 0 20px rgba(var(--blue-soft-rgb), 0.035);
}

.player-profile-rank-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 1rem;
  margin-bottom: 0.28rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 83, 118, 0.35);
  background: rgba(255, 83, 118, 0.20);
  color: rgba(255, 214, 224, 0.96);
  font-size: 0.54rem;
  font-weight: 1000;
  letter-spacing: 0.03em;
  line-height: 1;
}

.player-profile-rank-pill.is-top {
  border-color: rgba(67, 255, 170, 0.35);
  background: rgba(24, 128, 91, 0.42);
  color: rgba(197, 255, 226, 0.98);
  box-shadow: 0 0 14px rgba(67, 255, 170, 0.18);
}

.player-profile-rank-label,
.player-profile-rank-card small {
  display: block;
  color: rgba(var(--text-soft-rgb), 0.70);
  font-size: 0.58rem;
  font-weight: 950;
  line-height: 1.1;
  text-transform: uppercase;
}

.player-profile-rank-card strong {
  display: block;
  margin: 0.22rem 0 0.18rem;
  color: #ffffff;
  font-size: clamp(1.05rem, 1.45vw, 1.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

@media (max-width: 1280px) {
  .player-profile-rank-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .player-profile-rank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 460px) {
  .player-profile-rank-grid {
    grid-template-columns: 1fr;
  }
}

/* Player awards panel layout */
.player-showcase-awards .player-stat-board-featured {
  justify-content: flex-start;
}

.player-showcase-awards .player-card-header-featured {
  border-bottom: 1px solid rgba(110, 210, 255, 0.16);
  padding-bottom: 18px;
}

.player-awards-info-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.player-awards-info-panel article,
.player-awards-recent-card,
.player-award-count-box {
  border: 1px solid rgba(82, 185, 255, 0.18);
  background: linear-gradient(180deg, rgba(8, 23, 35, 0.96), rgba(var(--surface-deep-rgb), 0.96));
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.04), 0 12px 30px rgba(0, 0, 0, 0.22);
}

.player-awards-info-panel article {
  border-radius: 12px;
  padding: 12px;
}

.player-awards-info-panel span,
.player-award-count-box span,
.player-awards-count-header span,
.player-awards-recent-card span {
  display: block;
  color: rgba(209, 222, 236, 0.68);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.player-awards-info-panel strong {
  display: block;
  color: #f6fbff;
  font-size: 1.05rem;
  line-height: 1.15;
  margin-top: 6px;
}

.player-awards-panel-layout {
  display: grid;
  gap: 14px;
}

.player-awards-recent-card,
.player-awards-count-panel {
  border-radius: 16px;
  padding: 16px;
}

.player-awards-recent-card h3,
.player-awards-count-header h3 {
  color: #f8fbff;
  font-size: 0.98rem;
  font-weight: 1000;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}

.player-awards-recent-card strong {
  color: #ffffff;
  display: block;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 1000;
  letter-spacing: 0.02em;
  margin-top: 10px;
  text-transform: uppercase;
}

.player-awards-recent-card span {
  margin-top: 5px;
}

.player-awards-count-panel {
  border: 1px solid rgba(82, 185, 255, 0.2);
  background: linear-gradient(180deg, rgba(8, 16, 26, 0.96), rgba(2, 8, 15, 0.98));
}

.player-awards-count-header {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.player-awards-count-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.player-award-count-box {
  border-radius: 12px;
  min-height: 82px;
  padding: 12px;
}

.player-award-count-box strong {
  color: #ffffff;
  display: block;
  font-size: 1.45rem;
  font-weight: 1000;
  line-height: 1;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .player-awards-info-panel,
  .player-awards-count-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .player-awards-info-panel,
  .player-awards-count-grid {
    grid-template-columns: 1fr;
  }

  .player-awards-count-header {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Awards panel championships summary row */
.player-awards-info-divider {
  grid-column: 1 / -1;
  height: 1px;
  margin: 4px 0 2px;
  background: linear-gradient(90deg, transparent, rgba(110, 210, 255, 0.34), rgba(var(--fg-rgb), 0.12), transparent);
}

.player-awards-championships-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid rgba(82, 185, 255, 0.18);
  border-radius: 12px;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--blue-soft-rgb), 0.12), transparent 34%),
    linear-gradient(180deg, rgba(8, 23, 35, 0.96), rgba(var(--surface-deep-rgb), 0.96));
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb), 0.04), 0 12px 30px rgba(0, 0, 0, 0.22);
}

.player-awards-championships-row span {
  color: rgba(209, 222, 236, 0.8);
  font-size: 0.76rem;
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.player-awards-championships-row strong {
  color: #f6fbff;
  font-size: 1.45rem;
  font-weight: 1000;
  line-height: 1;
}



/* ═══════════════════════════════════════════════════════════
   GAME OF THE NIGHT  —  metallic broadcast feature
   ═══════════════════════════════════════════════════════════ */

.gotn-feature {
  width: min(100%, 1400px);
  margin: 0 auto 2.5rem;
}

/* ── Time tabs ── */
.gotn-tabs {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 0 .75rem;
}

.gotn-tabs button {
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  border: 1px solid rgba(70,190,255,.28);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(var(--fg-rgb),.055), transparent 38%),
    linear-gradient(135deg, rgba(12,18,28,.95), rgba(3,6,11,.95));
  color: #cbd7e9;
  font-weight: 900;
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .55rem 1.4rem;
  box-shadow: inset 0 0 18px rgba(var(--fg-rgb),.035);
  cursor: pointer;
  transition: border-color .2s, color .2s, box-shadow .2s;
}

.gotn-tabs button:hover {
  border-color: rgba(70,190,255,.55);
  color: #e8f2ff;
  box-shadow:
    0 0 12px rgba(var(--accent-strong-rgb),.18),
    inset 0 0 18px rgba(var(--fg-rgb),.04);
}

.gotn-tabs button span {
  font-size: .72rem;
  letter-spacing: .12em;
  opacity: .7;
}

.gotn-tabs button.is-active {
  color: #fff;
  border-color: rgba(var(--accent-bright-rgb),.78);
  box-shadow:
    0 0 18px rgba(var(--accent-strong-rgb),.32),
    inset 0 0 24px rgba(var(--accent-strong-rgb),.14);
}

.gotn-tabs button.is-active span { opacity: 1; }

/* ── Board — brushed steel ── */
.gotn-board {
  position: relative;
  padding: clamp(1rem,1.8vw,1.8rem) clamp(1rem,2vw,2rem);
  border: 1px solid rgba(140,150,165,.22);
  background:
    /* Team-color ambient glow from each side — set by JS */
    radial-gradient(ellipse at 6% 50%, color-mix(in srgb, var(--away-color, #888) 14%, transparent), transparent 42%),
    radial-gradient(ellipse at 94% 50%, color-mix(in srgb, var(--home-color, #888) 14%, transparent), transparent 42%),
    /* Subtle diagonal brushed texture */
    repeating-linear-gradient(
      108deg,
      transparent 0px, transparent 3px,
      rgba(var(--fg-rgb),.012) 3px, rgba(var(--fg-rgb),.012) 4px
    ),
    linear-gradient(160deg,
      rgba(8,8,10,1)  0%,
      rgba(4,4,6,1)   45%,
      rgba(6,6,8,1)   75%,
      rgba(2,2,3,1)   100%
    );
  box-shadow:
    0 0 0 1px rgba(var(--fg-rgb),.05),
    0 24px 80px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(var(--fg-rgb),.09),
    inset 0 -1px 0 rgba(0,0,0,.5);
}

.gotn-empty {
  padding: 3rem;
  text-align: center;
  color: #4a5260;
  font-size: .88rem;
  letter-spacing: .06em;
}

/* ── Header: logo | title | logo ── */
.gotn-header {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 1.2rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

/* Team logo panels */
.gotn-logo-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.2rem 1.4rem;
  min-height: 150px;
  border: 2px solid color-mix(in srgb, var(--tc,#888) 70%, rgba(200,210,225,.4));
  border-top: 2px solid color-mix(in srgb, var(--tc,#888) 90%, white);
  background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--tc,#888) 32%, transparent), transparent 65%),
    linear-gradient(160deg, rgba(34,36,46,.98), rgba(10,11,14,1));
  box-shadow:
    0 0 70px color-mix(in srgb, var(--tc,#888) 35%, transparent),
    0 0 24px color-mix(in srgb, var(--tc,#888) 22%, transparent),
    inset 0 1px 0 rgba(var(--fg-rgb),.18),
    inset 0 0 40px color-mix(in srgb, var(--tc,#888) 12%, transparent);
}

.gotn-logo-panel img {
  max-width: min(180px,80%);
  max-height: 110px;
  object-fit: contain;
  filter:
    drop-shadow(0 6px 20px rgba(0,0,0,.9))
    drop-shadow(0 0 28px color-mix(in srgb, var(--tc,#888) 50%, transparent));
}

.gotn-logo-name {
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tc,#888) 70%, #fff 30%);
}

/* Title block */
.gotn-title-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

/* Chrome metallic title text */
.gotn-main-title {
  margin: 0;
  font-size: clamp(1.8rem, 3.8vw, 4.2rem);
  font-weight: 900;
  font-style: italic;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: .95;
  background: linear-gradient(180deg,
    #ffffff  0%,
    #d8dde6 18%,
    #8a9099 42%,
    #c5cad4 58%,
    #6b7280 78%,
    #9aa2ae 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.8));
}

.gotn-date-line {
  font-size: clamp(.7rem,1vw,.9rem);
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #6b7585;
}

/* ── Two-column matchup grid ── */
/* ── Matchup rows — away | pos | home ── */
.gotn-matchup-rows {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.gotn-matchup-row {
  display: grid;
  grid-template-columns: 1fr 54px 1fr;
  gap: .5rem;
  align-items: center;
}

/* Central position badge */
.gotn-pos-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  padding: .3rem 0;
}

.gotn-pos-label {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a96a8;
  line-height: 1;
  padding: .28rem .5rem;
  border: 1px solid rgba(140,158,180,.28);
  background: linear-gradient(180deg, rgba(38,42,52,.92), rgba(20,22,30,.96));
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb),.06);
}

.gotn-pos-vs {
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #384050;
}

/* Position-specific badge colors */
.gotn-pos-lw .gotn-pos-label { color: #22c55e; border-color: rgba(34,197, 94,.45); }
.gotn-pos-c  .gotn-pos-label { color: #ef4444; border-color: rgba(239, 68, 68,.45); }
.gotn-pos-rw .gotn-pos-label { color: #3b82f6; border-color: rgba(59,130,246,.45); }
.gotn-pos-ld .gotn-pos-label { color: #06b6d4; border-color: rgba(  6,182,212,.45); }
.gotn-pos-rd .gotn-pos-label { color: #eab308; border-color: rgba(234,179,  8,.45); }
.gotn-pos-g  .gotn-pos-label { color: #a855f7; border-color: rgba(168, 85,247,.45); }

/* ── Team stats comparison bar ── */
.gotn-stats-bar {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 1rem;
  align-items: center;
  margin-top: .9rem;
  padding: .9rem 1.6rem;
  border: 1px solid rgba(140,150,165,.2);
  border-top: 1px solid rgba(160,172,188,.3);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--away-color, #888) 10%, rgba(12,13,18,.97)),
      rgba(12,13,18,.97) 38%,
      rgba(12,13,18,.97) 62%,
      color-mix(in srgb, var(--home-color, #888) 10%, rgba(12,13,18,.97))
    );
  box-shadow: inset 0 1px 0 rgba(var(--fg-rgb),.05), 0 4px 24px rgba(0,0,0,.4);
}

.gotn-stats-side {
  display: flex;
  gap: clamp(.8rem, 2.5vw, 2rem);
  align-items: center;
}

.gotn-stats-away { justify-content: flex-start; }
.gotn-stats-home { justify-content: flex-end; }

.gotn-stat-item {
  display: flex;
  flex-direction: column;
  gap: .22rem;
}

.gotn-stats-away .gotn-stat-item { align-items: flex-start; }
.gotn-stats-home .gotn-stat-item { align-items: flex-end; }

.gotn-stat-label {
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #404c5c;
}

.gotn-stat-value {
  font-size: 1.38rem;
  font-weight: 900;
  letter-spacing: .05em;
  color: #b8c4d2;
}

.gotn-stats-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gotn-stats-logo {
  width: 81px;
  height: 81px;
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

/* ── Player-bar animations ── */
@property --pulse-a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes gotn-border-pulse {
  to { --pulse-a: 360deg; }
}


/* ── Gamer-tag player bar ── */
.gotn-tag {
  position: relative;
  /* Glass-translucent team-color border — softened, premium feel */
  background: color-mix(in srgb, var(--tc, #888) 35%, transparent);
  padding: 3px;
  min-width: 0;      /* prevent grid item from overflowing its column */
  overflow: hidden;  /* lock width — box never grows with content */
}

/* Clockwise border pulse — bright team-color comet sweeps the perimeter */
.gotn-tag::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from var(--pulse-a),
    transparent                                        0deg,
    transparent                                      300deg,
    color-mix(in srgb, var(--tc, #888) 20%, transparent) 320deg,
    color-mix(in srgb, var(--tc, #888) 80%, white)    350deg,
    color-mix(in srgb, var(--tc, #888) 60%, white)    358deg,
    transparent                                      360deg
  );
  animation: gotn-border-pulse 8s linear infinite;
  pointer-events: none;
}

/* Away: chamfered left edge */
.gotn-tag-away {
  clip-path: polygon(36px 0%, 100% 0%, 100% 100%, 36px 100%, 0% calc(100% - 36px), 0% 36px);
}

/* Home: chamfered right edge (mirrored) */
.gotn-tag-home {
  clip-path: polygon(0% 0%, calc(100% - 36px) 0%, 100% 36px, 100% calc(100% - 36px), calc(100% - 36px) 100%, 0% 100%);
}

/* Dark inner body — fixed height, text scales to fit */
.gotn-tag-inner {
  position: relative;
  z-index: 1; /* sit above .gotn-tag::before pulse layer */
  width: 100%;
  height: 80px; /* fixed — box never grows with content */
  background: linear-gradient(170deg, #080809, #020203); /* near-black */
  clip-path: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .45rem 1.1rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Metallic sheen — top-lit highlight fading to dark base, above PNG, below text */
.gotn-tag-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(210,220,240,.13)  0%,
    rgba(170,185,210,.07)  14%,
    rgba(130,145,170,.03)  32%,
    transparent            54%,
    rgba(0,0,0,.22)       100%
  );
  z-index: 0;
  pointer-events: none;
}

/* PNG base layer — away (normal orientation) */
.gotn-tag-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/player-box.png') center / 100% 100% no-repeat;
  z-index: 0;
  pointer-events: none;
}

/* Home: mirror the PNG so the chamfer graphic matches the right-side clip-path */
.gotn-tag-home .gotn-tag-inner::before {
  transform: scaleX(-1);
}

/* Home border pulse runs counter-clockwise */
.gotn-tag-home::before {
  animation-direction: reverse;
}

.gotn-tag-away .gotn-tag-inner { padding-left: clamp(2rem, 6%, 3.2rem); }
.gotn-tag-home .gotn-tag-inner { padding-right: clamp(2rem, 6%, 3.2rem); align-items: flex-end; text-align: right; }

/* Player name — metallic chrome */
/* Headline row: name | #jersey | OVR */
.gotn-tag-headline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: .3rem;
  margin-bottom: .2rem;
  overflow: hidden;
  flex-shrink: 0;
}
.gotn-tag-home .gotn-tag-headline { justify-content: flex-end; }

.gotn-tag-name {
  margin: 0;
  /* Max 1.15rem so headline + stats row fit in the 66px content area */
  font-size: clamp(.7rem, 1.3vw, 1.15rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  /* Stone texture: warm pale stone top, fading to dark gray at bottom 30% */
  background: linear-gradient(
    to bottom,
    #e2ddd5 0%,
    #ccc6ba 18%,
    #d6d0c6 32%,
    #bcb6a8 52%,
    #8c877e 68%,
    #585450 80%,
    #3e3c3a 92%,
    #2c2b29 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.9));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.gotn-tag-hdivider {
  flex-shrink: 0;
  font-style: normal;
  font-weight: 300;
  font-size: clamp(.7rem, 1.3vw, 1.15rem); /* tracks name */
  color: rgba(var(--fg-rgb),.18);
  line-height: 1;
}

.gotn-tag-jersey {
  flex-shrink: 0;
  font-size: clamp(.7rem, 1.3vw, 1.15rem); /* tracks name */
  font-style: italic;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(205,215,230,.65);
  white-space: nowrap;
}

.gotn-tag-ovr-val {
  flex-shrink: 0;
  font-size: clamp(.62rem, 1.05vw, .98rem);
  font-style: italic;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(185,200,220,.35);
  white-space: nowrap;
}

.gotn-tag-ovr-lbl {
  font-size: .78em;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-style: normal;
  color: rgba(160,175,195,.2);
}

/* Stats row with flanking lines */
.gotn-tag-level {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
}

.gotn-tag-home .gotn-tag-level { flex-direction: row-reverse; }

.gotn-tag-line {
  flex: 1;
  height: 1.5px;
  opacity: .85;
}

/* Away — left line fades in toward center, right line fades out from center */
.gotn-tag-away .gotn-tag-line:first-child {
  background: linear-gradient(to right, transparent, var(--tc, #888));
}
.gotn-tag-away .gotn-tag-line:last-child {
  background: linear-gradient(to right, var(--tc, #888), transparent);
}

/* Home — row-reverse flips visual order, so DOM first-child is on the right */
.gotn-tag-home .gotn-tag-line:first-child {
  background: linear-gradient(to right, var(--tc, #888), transparent);
}
.gotn-tag-home .gotn-tag-line:last-child {
  background: linear-gradient(to right, transparent, var(--tc, #888));
}

.gotn-tag-stats {
  font-size: clamp(.53rem, .79vw, .71rem);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

/* ── Mobile ── */
@media (max-width: 680px) {
  .gotn-tabs button { padding: .5rem .85rem; font-size: .76rem; }
  .gotn-header {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .gotn-title-block {
    grid-column: 1 / -1;
    order: -1;
    text-align: center;
  }
  .gotn-logo-panel {
    display: flex;
    min-height: 80px;
    padding: 0.5rem 0.6rem;
  }
  .gotn-logo-panel img {
    max-width: min(80px, 70%);
    max-height: 60px;
  }
  .gotn-logo-name { font-size: .55rem; }
  .gotn-main-title { font-size: clamp(1.5rem, 8vw, 2.4rem); }

  /* Condensed 3-column layout — mirrors desktop, scaled for mobile */
  .gotn-matchup-rows { gap: .3rem; }

  .gotn-matchup-row {
    grid-template-columns: 1fr 32px 1fr;
    gap: .25rem;
  }

  /* Smaller chamfer to fit narrow screens */
  .gotn-tag-away {
    clip-path: polygon(20px 0%, 100% 0%, 100% 100%, 20px 100%, 0% calc(100% - 20px), 0% 20px);
  }
  .gotn-tag-home {
    clip-path: polygon(0% 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0% 100%);
  }

  /* Tighter inner padding — fixed height on mobile */
  .gotn-tag-inner {
    height: 54px;
    padding: .25rem .4rem;
  }
  .gotn-tag-away .gotn-tag-inner { padding-left: 1rem; }
  .gotn-tag-home .gotn-tag-inner { padding-right: 1rem; }

  /* Mobile: hide jersey, dividers and OVR — box is too narrow for all three */
  .gotn-tag-hdivider,
  .gotn-tag-jersey,
  .gotn-tag-ovr-val,
  .gotn-tag-ovr-lbl   { display: none; }

  /* Name and stats scaled to fit narrower boxes */
  .gotn-tag-name  { font-size: clamp(.48rem, 2.4vw, .7rem); margin-bottom: .08rem; }
  .gotn-tag-stats { font-size: clamp(.36rem, 1.4vw, .48rem); }

  /* Compact position badge */
  .gotn-pos-badge { gap: .12rem; padding: .2rem 0; }
  .gotn-pos-label { font-size: .58rem; padding: .18rem .28rem; letter-spacing: .08em; }
  .gotn-pos-vs    { font-size: .42rem; }

  /* Stats bar — compact side-by-side */
  .gotn-stats-bar {
    grid-template-columns: 1fr 30px 1fr;
    padding: .6rem .7rem;
    gap: .4rem;
    margin-top: .6rem;
  }
  .gotn-stats-side { gap: .5rem; }
  .gotn-stat-label { font-size: .66rem; }
  .gotn-stat-value { font-size: 1.08rem; }
  .gotn-stats-logo { width: 39px; height: 39px; }

  /* Hide Goals/Game (2nd) and GAA (3rd) — Season Record only on mobile */
  .gotn-stats-side .gotn-stat-item:nth-child(2),
  .gotn-stats-side .gotn-stat-item:nth-child(3) { display: none; }
}

/* ══════════════════════════  STREAM PAGE WIDTH OVERRIDE  ══════════════════════════ */
/* Only applies to stream-tjchalkboard.html */
.stream-page .site-header,
.stream-page .page-shell {
  width: min(2000px, calc(100% - 1rem));
}

/* Video column capped at current size; sidebar takes all new space — desktop only */
@media (min-width: 801px) {
  .stream-page .stream-layout {
    grid-template-columns: minmax(0, 1380px) 1fr;
  }
}

/* Scale up sidebar content to fill the wider column — desktop only */
@media (min-width: 801px) {
  .stream-page .stream-sidebar {
    gap: 1.3rem;
  }
  .stream-page .stream-game-card {
    padding: 1.6rem 1.5rem;
  }
  .stream-page .stream-game-meta {
    font-size: .95rem;
    margin-bottom: 1.1rem;
  }
  .stream-page .stream-matchup {
    gap: 1rem;
  }
  .stream-page .stream-team-side {
    gap: .5rem;
  }
  .stream-page .stream-team-logo {
    width: 100px;
    height: 100px;
  }
  .stream-page .stream-team-abbr {
    font-size: 1.55rem;
  }
  .stream-page .stream-team-name {
    font-size: .9rem;
  }
  .stream-page .stream-team-record {
    font-size: .95rem;
  }
  .stream-page .stream-vs span {
    font-size: 1rem;
  }
  .stream-page .stream-comp-stats {
    gap: 0.3rem;
    margin-top: 1.2rem;
  }
  .stream-page .stream-comp-header {
    font-size: .82rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.25rem;
  }
  .stream-page .stream-stat-row {
    padding: .42rem .55rem;
  }
  .stream-page .stream-stat-label {
    font-size: .82rem;
  }
  .stream-page .stream-stat-val {
    font-size: 0.72rem;
  }
  .stream-page .stream-slot-tabs button {
    padding: .55rem .5rem;
    font-size: .88rem;
  }
  .stream-page .stream-lineup-toggle {
    padding: .85rem 1rem;
    font-size: 1rem;
  }
  .stream-page .stream-back-link {
    font-size: .88rem;
  }
}

/* ══════════════════════════  LIVE STREAM BANNER  ══════════════════════════ */

.live-banner {
  background: linear-gradient(90deg, rgba(220,38,38,.18) 0%, rgba(var(--surface-panel-rgb),.7) 60%);
  border: 1px solid rgba(220,38,38,.45);
  border-radius: 8px;
  margin-bottom: 1.5rem;
  padding: .75rem 1.1rem;
  box-shadow: 0 0 24px rgba(220,38,38,.18);
  animation: live-banner-pulse 3s ease-in-out infinite;
}

@keyframes live-banner-pulse {
  0%, 100% { box-shadow: 0 0 18px rgba(220,38,38,.18); }
  50%       { box-shadow: 0 0 36px rgba(220,38,38,.32); }
}

.live-banner-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.live-banner-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239,68,68,.9);
  animation: live-dot-blink 1.2s ease-in-out infinite;
}

@keyframes live-dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}

.live-banner-text {
  flex: 1;
  min-width: 0;
}

.live-banner-text strong {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .03em;
}

.live-banner-text span {
  font-size: .78rem;
  color: rgba(200,210,230,.7);
}

.live-banner-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.2rem;
  border-radius: 6px;
  background: linear-gradient(135deg, #dc2626, #991b1b);
  border: 1px solid rgba(239,68,68,.6);
  color: #fff;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s, box-shadow .2s, transform .15s;
  box-shadow: 0 0 16px rgba(220,38,38,.35);
}

.live-banner-cta:hover {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  box-shadow: 0 0 28px rgba(239,68,68,.55);
  transform: translateY(-1px);
}

/* ══════════════════════════  STREAM PAGE  ══════════════════════════ */

/* Stream hero */
.stream-hero {
  background: linear-gradient(135deg, rgba(10,5,25,.98) 0%, rgba(14,6,36,.95) 100%);
  border-bottom: 1px solid rgba(100,60,255,.2);
  padding: 1.4rem 1.5rem;
}

.stream-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.live-dot-hero {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239,68,68,.95), 0 0 24px rgba(239,68,68,.5);
  animation: live-dot-blink 1.2s ease-in-out infinite;
}

.stream-hero-text {
  flex: 1;
  min-width: 0;
}

.stream-hero-text h1 {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  font-weight: 800;
  color: #e2e8f0;
  margin: 0 0 .15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.stream-hero-text h1 span {
  color: #ef4444;
}

.stream-hero-text p {
  font-size: .82rem;
  color: rgba(180,195,220,.65);
  margin: 0;
}

.stream-twitch-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .9rem;
  border-radius: 6px;
  background: rgba(145,70,255,.18);
  border: 1px solid rgba(145,70,255,.4);
  color: #c084fc;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
}

.stream-twitch-link:hover {
  background: rgba(145,70,255,.32);
  border-color: rgba(145,70,255,.7);
}

/* Main stream layout — embed + sidebar */
.stream-layout {
  width: 100%;
  padding: 1.2rem 1.2rem;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.4rem;
  align-items: start;
}

/* Twitch embed wrapper */
.stream-embed-wrap {
  width: 100%;
}

.stream-embed-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  border: 2px solid rgba(var(--accent-bright-rgb),.45);
  box-shadow:
    0 0 0 1px rgba(var(--accent-bright-rgb),.12),
    0 0 32px rgba(var(--accent-bright-rgb),.22),
    0 0 72px rgba(var(--accent-bright-rgb),.1);
  overflow: hidden;
  background: #000;
}

.stream-embed-frame #twitch-embed,
.stream-embed-frame iframe {
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* Sidebar */
.stream-sidebar {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

/* Game card */
.stream-game-card {
  background: linear-gradient(160deg, rgba(12,18,36,.98) 0%, rgba(6,10,24,.96) 100%);
  border: 1px solid rgba(var(--accent-bright-rgb),.22);
  border-radius: 10px;
  padding: 1.1rem 1rem;
  box-shadow: 0 0 20px rgba(var(--accent-bright-rgb),.08);
}

.stream-game-loading,
.stream-no-game {
  text-align: center;
  color: rgba(180,195,220,.5);
  font-size: .82rem;
  padding: 1rem 0;
}

.stream-game-meta {
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(var(--accent-bright-rgb),.75);
  margin-bottom: .85rem;
}

/* Matchup row — away | VS | home */
.stream-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
}

.stream-team-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  text-align: center;
}

.stream-team-side.stream-team-home {
  align-items: center;
}

.stream-team-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(var(--tc, 20,196,255), .4));
}

.stream-team-abbr {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e2e8f0;
}

.stream-team-name {
  font-size: .68rem;
  color: rgba(180,195,220,.6);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.stream-team-record {
  font-size: .7rem;
  color: rgba(var(--accent-bright-rgb),.75);
  font-weight: 600;
}

.stream-vs {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stream-vs span {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: rgba(180,195,220,.4);
}

/* Slot tabs */
.stream-slot-tabs {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
}

.stream-slot-tabs button {
  flex: 1;
  padding: .4rem .3rem;
  font-size: .72rem;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-bright-rgb),.22);
  background: rgba(12,18,36,.9);
  color: rgba(180,200,230,.65);
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  white-space: nowrap;
}

.stream-slot-tabs button.is-active,
.stream-slot-tabs button:hover {
  background: rgba(var(--accent-bright-rgb),.12);
  border-color: rgba(var(--accent-bright-rgb),.55);
  color: #fff;
}

/* View Lineups button */
.stream-lineup-toggle {
  width: 100%;
  padding: .65rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-bright-rgb),.4);
  background: linear-gradient(135deg, rgba(var(--accent-bright-rgb),.14), rgba(0,140,220,.1));
  color: #7dd3fc;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}

.stream-lineup-toggle:hover {
  background: linear-gradient(135deg, rgba(var(--accent-bright-rgb),.24), rgba(0,140,220,.18));
  border-color: rgba(var(--accent-bright-rgb),.7);
  box-shadow: 0 0 18px rgba(var(--accent-bright-rgb),.2);
}

/* Back link */
.stream-back-link {
  text-align: center;
  font-size: .76rem;
  color: rgba(180,195,220,.45);
  text-decoration: none;
  transition: color .2s;
  padding: .25rem 0;
}

.stream-back-link:hover {
  color: rgba(var(--accent-bright-rgb),.8);
}

/* ── Lineup panel ── */
/* Comparative team stats bar in game card */
.stream-comp-stats {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.stream-comp-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  text-align: center;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(180,195,220,.5);
  padding: 0 0.3rem 0.4rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),.07);
  margin-bottom: 0.15rem;
}
.stream-comp-header span:first-child { text-align: left; }
.stream-comp-header span:last-child  { text-align: right; }
.stream-stat-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.3rem;
  border-radius: 4px;
}
.stream-stat-row:nth-child(even) {
  background: rgba(var(--fg-rgb),.025);
}
.stream-stat-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(180,195,220,.45);
  text-align: center;
  white-space: nowrap;
}
.stream-stat-val {
  font-size: .88rem;
  font-weight: 700;
  color: rgba(200,215,235,.65);
  text-align: left;
  transition: color .15s;
}
.stream-stat-val-home {
  text-align: right;
}
.stream-stat-val.is-better {
  color: #46e89a;
  font-weight: 800;
}

/* Lineup panel — full width of page container */
.stream-lineup-panel {
  width: 100%;
  margin: 0 0 2rem;
  padding: 0 1.2rem;
}

.stream-lineup-inner {
  background: linear-gradient(160deg, rgba(10,16,32,.98), rgba(5,9,22,.97));
  border: 1px solid rgba(var(--accent-bright-rgb),.18);
  border-radius: 10px;
  padding: 1.2rem 1.2rem;
  box-shadow: 0 0 28px rgba(var(--accent-bright-rgb),.07);
}

.sl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.sl-team-col {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.sl-team-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(var(--tc, 20,196,255), .25);
}

.sl-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.sl-team-header strong {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: rgba(var(--tc, 20,196,255), 1);
  text-transform: uppercase;
}

.sl-rows {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.sl-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  border-radius: 6px;
  background: rgba(var(--fg-rgb),.03);
  border: 1px solid rgba(var(--fg-rgb),.05);
  flex-wrap: wrap;
}

.sl-pos {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .2rem .45rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.sl-pos-lw { background: rgba(34,197, 94,.18); color: #22c55e; }
.sl-pos-c  { background: rgba(239, 68, 68,.18); color: #ef4444; }
.sl-pos-rw { background: rgba(59,130,246,.18); color: #3b82f6; }
.sl-pos-ld { background: rgba( 6,182,212,.18); color: #06b6d4; }
.sl-pos-rd { background: rgba(234,179,  8,.18); color: #eab308; }
.sl-pos-g  { background: rgba(159, 86,255,.18); color: #a855f7; }

.sl-jersey {
  font-size: .82rem;
  color: rgba(180,195,220,.5);
  font-weight: 600;
  min-width: 32px;
}

.sl-name {
  flex: 1;
  font-size: .98rem;
  font-weight: 600;
  color: #e2e8f0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-ovr {
  font-size: .8rem;
  font-weight: 800;
  color: #14b8d4;
  padding: .15rem .38rem;
  border-radius: 3px;
  background: rgba(20,184,212,.12);
  border: 1px solid rgba(20,184,212,.25);
}

.sl-ecu {
  font-size: .6rem;
  font-weight: 700;
  color: #f59e0b;
  padding: .1rem .28rem;
  border-radius: 3px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sl-stats {
  font-size: .82rem;
  color: rgba(180,195,220,.55);
  white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 800px) {
  .stream-layout {
    grid-template-columns: 1fr;
  }

  /* Embed appears first, sidebar below */
  .stream-embed-wrap { order: 1; }
  .stream-sidebar    { order: 2; }

  /* Reorder sidebar children: game times → matchup info → lineup btn → back link */
  .stream-slot-tabs      { order: 1; }
  .stream-game-card      { order: 2; }
  .stream-lineup-toggle  { order: 3; }
  .stream-back-link      { order: 4; }

  .stream-team-logo {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 540px) {
  .sl-grid {
    grid-template-columns: 1fr;
  }

  /* Scale player rows for narrow screens */
  .sl-row {
    padding: .4rem .55rem;
    gap: .4rem;
  }
  .sl-name {
    font-size: clamp(.72rem, 3.5vw, .92rem);
  }
  .sl-pos {
    font-size: clamp(.6rem, 2.8vw, .75rem);
    padding: .15rem .32rem;
  }
  .sl-jersey {
    font-size: clamp(.62rem, 2.8vw, .78rem);
    min-width: 24px;
  }
  .sl-stats {
    font-size: clamp(.6rem, 2.6vw, .76rem);
    width: 100%;
  }
  /* Hide OVR badge on mobile — not enough room */
  .sl-ovr { display: none; }

  .live-banner-inner {
    gap: .65rem;
  }
}

/* ══════════════════════════  TRANSACTIONS  ══════════════════════════ */



/* ── Admin tool: Sign / Release + Trade Center ── */
.txn-pool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}

.txn-pool-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.txn-add-fa-form {
  gap: 0.65rem;
}

.txn-fa-list,
.txn-roster-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 420px;
  overflow-y: auto;
}

.txn-pool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.6rem;
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.04);
}

.txn-pool-name {
  min-width: 0;
  overflow: hidden;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.txn-pool-name small {
  color: var(--accent);
  font-weight: 700;
  text-transform: uppercase;
}

.txn-pool-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.4rem;
}

.txn-pool-actions select {
  padding: 0.3rem 0.4rem;
  font-size: 0.74rem;
}

.txn-trade-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}

.txn-trade-grid.has-team-c {
  grid-template-columns: 1fr 1fr 1fr;
}

.txn-trade-side {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.txn-trade-side[hidden] {
  display: none !important;
}

.txn-trade-player-row .txn-trade-dest-select {
  margin-left: auto;
  padding: 0.2rem 0.35rem;
  font-size: 0.72rem;
  border-radius: 5px;
  background: rgba(var(--fg-rgb), 0.06);
  color: #ffffff;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.26);
}

.txn-trade-roster {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 360px;
  overflow-y: auto;
}

.txn-trade-player-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.04);
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
}

.txn-trade-player-row small {
  color: var(--accent);
  font-weight: 700;
}

.txn-trade-value-bar {
  position: relative;
  height: 14px;
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.26);
  border-radius: 999px;
  background: rgba(255, 78, 112, 0.28);
}

.txn-trade-value-fill {
  height: 100%;
  background: rgba(var(--accent-strong-rgb), 0.55);
  transition: width 200ms ease;
}

.txn-trade-value-labels {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #d7e6ff;
}

.txn-trade-verdict {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.txn-trade-verdict.is-success {
  color: #b8ffd3;
}

.txn-trade-verdict.is-warning {
  color: #ffe2a6;
}

.txn-trade-verdict.is-danger {
  color: #ff8a8a;
}

/* ── Trade Analysis (revamped) ── */
.txn-anl-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.txn-anl-col-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clr-accent, var(--link-blue));
  margin-bottom: 0.5rem;
}

.txn-anl-player-card {
  background: rgba(var(--fg-rgb), 0.03);
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 7px;
  padding: 0.65rem 0.75rem;
  margin-bottom: 0.5rem;
}

.txn-anl-player-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.4rem;
}

.txn-anl-player-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.txn-anl-pos {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.38rem;
  border-radius: 4px;
  background: rgba(var(--accent-strong-rgb), 0.14);
  color: var(--pale-blue);
  flex-shrink: 0;
}

.txn-anl-ovr {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--link-blue);
  flex-shrink: 0;
}

.txn-anl-ovr.is-muted {
  color: rgba(var(--fg-rgb), 0.4);
}

.txn-anl-current {
  font-size: 0.74rem;
  color: rgba(var(--fg-rgb), 0.72);
  line-height: 1.5;
  margin-bottom: 0.35rem;
}

.txn-anl-blend-note {
  font-size: 0.68rem;
  color: rgba(var(--fg-rgb), 0.4);
  margin: -0.1rem 0 0.35rem;
}

.txn-anl-blend-legend {
  font-size: 0.72rem;
  color: rgba(var(--fg-rgb), 0.45);
  font-style: italic;
  margin: 0 0 0.75rem;
}

.txn-anl-nodata {
  font-size: 0.72rem;
  color: rgba(var(--fg-rgb), 0.35);
  font-style: italic;
  margin: 0 0 0.35rem;
}

.txn-anl-warn {
  font-size: 0.72rem;
  color: #ffe2a6;
  margin: 0.15rem 0;
}

.txn-anl-section-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb), 0.35);
  margin: 0.45rem 0 0.2rem;
}

.txn-anl-hist-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: rgba(var(--fg-rgb), 0.65);
  padding: 0.08rem 0;
  line-height: 1.5;
}

.txn-anl-hist-row span:first-child {
  font-size: 0.66rem;
  color: rgba(var(--fg-rgb), 0.35);
  min-width: 70px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.txn-anl-hist-row.is-muted {
  color: rgba(var(--fg-rgb), 0.3);
  font-style: italic;
}

.txn-anl-value-bar-wrap {
  margin: 0.75rem 0 0.5rem;
}

.txn-anl-value-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.73rem;
  font-weight: 700;
  color: #d7e6ff;
  margin-top: 0.35rem;
}

.txn-anl-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0.75rem 0 0.25rem;
}

.txn-anl-detail-block {
  /* container */
}

.txn-anl-impact-grid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: rgba(var(--fg-rgb), 0.75);
}

.txn-anl-impact-grid .is-up   { color: #7dffb4; }
.txn-anl-impact-grid .is-down { color: #ff8a8a; }

/* Grade badges */
.txn-anl-grade {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 0.1rem 0.32rem;
  border-radius: 4px;
  flex-shrink: 0;
}

.txn-anl-grade.grade-a { background: rgba(125, 255, 180, 0.15); color: #7dffb4; border: 1px solid rgba(125,255,180,0.25); }
.txn-anl-grade.grade-b { background: rgba(var(--accent-strong-rgb), 0.14);  color: var(--pale-blue); border: 1px solid rgba(var(--accent-strong-rgb),0.25); }
.txn-anl-grade.grade-c { background: rgba(255, 220, 100, 0.12); color: #ffe2a6; border: 1px solid rgba(255,220,100,0.2); }
.txn-anl-grade.grade-d { background: rgba(255, 138, 138, 0.12); color: #ff8a8a; border: 1px solid rgba(255,138,138,0.2); }

/* Historical grade tags */
.txn-anl-hist-grade {
  font-size: 0.62rem;
  font-weight: 900;
  padding: 0.08rem 0.28rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.txn-anl-hist-grade.grade-a { color: #7dffb4; }
.txn-anl-hist-grade.grade-b { color: var(--pale-blue); }
.txn-anl-hist-grade.grade-c { color: #ffe2a6; }
.txn-anl-hist-grade.grade-d { color: #ff8a8a; }

/* Attribute bars */
.txn-anl-attrs {
  margin: 0.45rem 0 0.25rem;
}

.txn-anl-attr-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.txn-anl-attr-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb), 0.4);
  width: 68px;
  flex-shrink: 0;
}

.txn-anl-attr-track {
  flex: 1;
  height: 5px;
  background: rgba(var(--fg-rgb), 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.txn-anl-attr-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--accent-strong-rgb),0.6), rgba(var(--accent-strong-rgb),0.9));
  border-radius: 999px;
  transition: width 300ms ease;
}

.txn-anl-attr-val {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(var(--fg-rgb), 0.45);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* Admin recommendation block */
.txn-anl-recommendation {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 0.65rem 1rem;
  border-radius: 7px;
  border-width: 1px;
  border-style: solid;
}

.txn-anl-recommendation.is-approve {
  background: rgba(125, 255, 180, 0.07);
  border-color: rgba(125, 255, 180, 0.25);
}

.txn-anl-recommendation.is-review {
  background: rgba(255, 220, 100, 0.07);
  border-color: rgba(255, 220, 100, 0.25);
}

.txn-anl-recommendation.is-deny {
  background: rgba(255, 138, 138, 0.07);
  border-color: rgba(255, 138, 138, 0.25);
}

.txn-anl-rec-label {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.is-approve .txn-anl-rec-label { color: #7dffb4; }
.is-review  .txn-anl-rec-label { color: #ffe2a6; }
.is-deny    .txn-anl-rec-label { color: #ff8a8a; }

.txn-anl-rec-reason {
  font-size: 0.78rem;
  color: rgba(var(--fg-rgb), 0.7);
  line-height: 1.4;
}

/* Deny Trade button */
.txn-deny-btn {
  border: 1px solid rgba(255, 138, 138, 0.4) !important;
  color: #ff8a8a !important;
  background: rgba(255, 138, 138, 0.08) !important;
}

.txn-deny-btn:hover:not(:disabled) {
  background: rgba(255, 138, 138, 0.16) !important;
  border-color: rgba(255, 138, 138, 0.6) !important;
}

.txn-deny-btn:disabled {
  opacity: 0.38;
}

@media (max-width: 680px) {
  .txn-anl-columns,
  .txn-anl-details {
    grid-template-columns: 1fr;
  }
}

/* ── Pending Trade Requests section ── */
.txn-pending-requests-section {
  margin-bottom: 0.25rem;
}

.txn-trade-divider-line {
  border: none;
  border-top: 1px solid rgba(var(--fg-rgb), 0.1);
  margin: 1rem 0 1.25rem;
}

#txn-pending-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 2px;
}

.txn-req-card {
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: opacity 0.2s;
}

.txn-req-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.txn-req-team {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--clr-accent, var(--link-blue));
}

.txn-req-date {
  font-size: 0.72rem;
  color: rgba(var(--fg-rgb), 0.45);
}

.txn-req-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  align-items: start;
}

.txn-req-side-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(var(--fg-rgb), 0.45);
  margin-bottom: 0.3rem;
}

.txn-req-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.txn-req-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.txn-req-chip-offer {
  background: rgba(var(--accent-strong-rgb), 0.15);
  color: var(--pale-blue);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.25);
}

.txn-req-chip-want {
  background: rgba(180, 255, 180, 0.1);
  color: #b8ffd3;
  border: 1px solid rgba(180, 255, 180, 0.2);
}

.txn-req-chip small {
  opacity: 0.7;
  font-size: 0.68rem;
}

.txn-req-chip-team {
  font-weight: 800;
  opacity: 0.85;
}

.txn-req-divider {
  font-size: 1rem;
  color: rgba(var(--fg-rgb), 0.3);
  padding-top: 1.1rem;
  text-align: center;
}

.txn-req-note {
  font-size: 0.78rem;
  color: rgba(var(--fg-rgb), 0.6);
  font-style: italic;
  padding: 0.25rem 0.5rem;
  background: rgba(var(--fg-rgb), 0.03);
  border-left: 2px solid rgba(var(--fg-rgb), 0.15);
  border-radius: 0 3px 3px 0;
}

.txn-req-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.txn-req-actions .button {
  flex: 1 1 auto;
}

@media (max-width: 480px) {
  .txn-req-actions {
    flex-direction: column;
  }

  .txn-req-actions .button {
    width: 100%;
  }
}

/* ── History list ── */
.txn-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 480px;
  overflow-y: auto;
}

.txn-history-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem 0.65rem;
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.04);
}

.txn-history-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #ffffff;
}

.txn-history-body small {
  color: rgba(var(--fg-rgb), 0.55);
  font-weight: 600;
}

.txn-history-badge,
.txn-feed-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.txn-badge-sign {
  background: rgba(51, 255, 141, 0.12);
  border: 1px solid rgba(51, 255, 141, 0.44);
  color: #b8ffd3;
}

.txn-badge-release {
  background: rgba(255, 78, 112, 0.12);
  border: 1px solid rgba(255, 78, 112, 0.44);
  color: #ffbac8;
}

.txn-badge-trade {
  background: rgba(var(--accent-strong-rgb), 0.12);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.44);
  color: var(--pale-blue);
}

.txn-badge-trade-denial {
  background: rgba(255, 100, 60, 0.12);
  border: 1px solid rgba(255, 100, 60, 0.44);
  color: #ffbdaa;
}

.txn-history-filters {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.txn-history-filters .ww-select {
  flex: 1;
  min-width: 0;
}

/* ── Public transactions feed ── */
.txn-feed-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.txn-feed-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.14);
  border-radius: 10px;
  background: rgba(var(--fg-rgb), 0.02);
  overflow: hidden;
  min-height: 90px;
}

/* Sign: 1px solid primary team color (set via inline border style in JS) */
.txn-feed-card-sign {
  border-width: 1px;
}

/* Release — waiver countdown active: gold pulsing border */
@keyframes txn-waiver-pulse {
  0%, 100% {
    border-color: rgba(255, 200, 80, 1);
    box-shadow: 0 0 0 0 rgba(255, 200, 80, 0);
  }
  50% {
    border-color: rgba(255, 200, 80, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 200, 80, 0.07);
  }
}

.txn-release-waiver-active {
  border: 1px solid rgba(255, 200, 80, 1);
  animation: txn-waiver-pulse 2s ease-in-out infinite;
}

/* Release — waiver cleared: teal border, no animation. Uses the themeable
   teal so full themes (Blackout) restyle cleared/free-agent cards; the gold
   waiver-countdown pulse above stays literal — it's a semantic state. */
.txn-release-expired {
  border: 1px solid rgba(var(--accent-teal-rgb), 1);
  animation: none;
}

/* Trade: solid border matching the TRADE pill color */
.txn-feed-card-trade {
  border: 1px solid rgba(var(--accent-strong-rgb), 0.44);
}

/* Badge rail: left strip with site bg + right divider */
.txn-feed-badge-rail {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 106px;
  padding: 0.85rem 0.6rem;
  background: var(--bg);
  border-right: 1px solid rgba(var(--accent-strong-rgb), 0.18);
}

.txn-feed-rail-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  width: 100%;
}

.txn-feed-rail-meta span {
  font-family: 'Ropa Sans', sans-serif;
  color: rgba(var(--fg-rgb), 0.35);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ── Banner layout ── */

/* Full-width gradient wrapper — spans both logo col and text, carries team color bg */
.txn-banner-wrap {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

/* Visible logo column — full card height, 100% opacity, cropped to fill */
.txn-banner-logo-col {
  position: relative;
  flex-shrink: 0;
  align-self: stretch;
  width: 200px;
  overflow: hidden;
  background: transparent;
}

.txn-banner-logo-col img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 1;
}

/* Trade logo cols are narrower — two per card, still 4× (trade card has less horizontal room) */
.txn-trade-logo-col {
  width: 200px;
}

/* Banner body — text content, transparent so gradient from parent shows through */
.txn-banner-body {
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-width: 0;
  background: transparent;
}

.txn-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.18rem;
  padding: 1rem 1.4rem;
  min-width: 0;
}

.txn-banner-name-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Player name — Barlow Condensed display font */
.txn-banner-player {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Position — Ropa Sans, dot-separator style */
.txn-banner-pos {
  font-family: 'Ropa Sans', sans-serif;
  font-size: 1rem;
  color: rgba(var(--fg-rgb), 0.55);
  letter-spacing: 0.06em;
}

/* Full team name below the player name */
.txn-banner-team-name {
  font-family: 'Ropa Sans', sans-serif;
  font-size: 0.68rem;
  color: rgba(var(--fg-rgb), 0.3);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Sub-row: team name + optional divider + position (mobile layout for sign cards) */
.txn-banner-sub-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Vertical divider between team name and position in sub-row */
.txn-banner-sub-divider {
  display: none;
  width: 1px;
  height: 0.7em;
  background: rgba(var(--fg-rgb), 0.25);
  flex-shrink: 0;
}

/* Position shown in sub-row (mobile only) */
.txn-pos-sub {
  display: none;
}

/* ── Waiver block — release cards, far right ── */
.txn-banner-waiver-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  padding: 1rem 1.4rem;
  flex-shrink: 0;
}

.txn-waiver-label {
  font-family: 'Ropa Sans', sans-serif;
  font-size: 0.6rem;
  color: rgba(255, 200, 80, 0.65);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.txn-waiver-countdown {
  font-family: 'Ropa Sans', sans-serif;
  font-size: 1.05rem;
  color: #ffe2a6;
  letter-spacing: 0.04em;
}

.txn-waiver-countdown.is-expired {
  color: #b8ffd3;
}

/* ── Re-signed badge — clickable button on release cards ── */
.txn-resigned-badge {
  font-family: 'Ropa Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #b8ffd3;
  background: transparent;
  border: 1px solid rgba(184, 255, 211, 0.35);
  border-radius: 3px;
  padding: 0.2em 0.55em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.txn-resigned-badge:hover {
  background: rgba(184, 255, 211, 0.1);
  border-color: rgba(184, 255, 211, 0.65);
}

.txn-release-resigned {
  border: 1px solid rgba(184, 255, 211, 0.25);
}

/* ── Highlight animation — fired on the target sign card ── */
@keyframes txn-card-highlight-anim {
  0%   { box-shadow: 0 0 0 0   rgba(var(--fg-rgb),0),   0 0  0px 0px rgba(var(--fg-rgb),0); }
  10%  { box-shadow: 0 0 0 3px rgba(var(--fg-rgb),0.75), 0 0 22px 6px rgba(var(--fg-rgb),0.25); }
  20%  { box-shadow: 0 0 0 1px rgba(var(--fg-rgb),0.15), 0 0  6px 2px rgba(var(--fg-rgb),0.05); }
  33%  { box-shadow: 0 0 0 3px rgba(var(--fg-rgb),0.75), 0 0 22px 6px rgba(var(--fg-rgb),0.25); }
  43%  { box-shadow: 0 0 0 1px rgba(var(--fg-rgb),0.15), 0 0  6px 2px rgba(var(--fg-rgb),0.05); }
  56%  { box-shadow: 0 0 0 3px rgba(var(--fg-rgb),0.75), 0 0 22px 6px rgba(var(--fg-rgb),0.25); }
  66%  { box-shadow: 0 0 0 1px rgba(var(--fg-rgb),0.15), 0 0  6px 2px rgba(var(--fg-rgb),0.05); }
  79%  { box-shadow: 0 0 0 3px rgba(var(--fg-rgb),0.75), 0 0 22px 6px rgba(var(--fg-rgb),0.25); }
  100% { box-shadow: 0 0 0 0   rgba(var(--fg-rgb),0),   0 0  0px 0px rgba(var(--fg-rgb),0); }
}

.txn-card-highlight {
  animation: txn-card-highlight-anim 8s ease-in-out forwards;
}

/* ── Trade banner — two halves side by side ── */
.txn-trade-banner-body {
  position: relative;
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}

.txn-trade-half {
  flex: 1;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  min-height: 90px;
}

/* Divider strip between the two trade halves — arrow only, gradient handled by parent */
.txn-trade-divider {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  position: relative;
  z-index: 5;
}

.txn-trade-half {
  background: transparent;
}

/* Definitive divider between trade sides — vertical on desktop's row layout.
   Each half paints its own team gradient, so colors stop exactly here. */
.txn-trade-half + .txn-trade-half {
  border-left: 1px solid rgba(var(--fg-rgb), 0.9);
}

/* Phone-only trade elements — the ≤720px block swaps these in for the
   single name row. Hidden on desktop. */
.txn-trade-receive-label,
.txn-trade-pills {
  display: none;
}

/* Exchange arrow centered on the divider */
.txn-trade-arrow {
  font-size: 1.4rem;
  color: rgba(var(--fg-rgb), 0.9);
  line-height: 1;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

@media (max-width: 720px) {
  .txn-pool-grid,
  .txn-trade-grid {
    grid-template-columns: 1fr;
  }

  /* Badge rail becomes a slim strip across the top of every card — frees the
     full phone width for player names and fits event + date on one line. */
  .txn-feed-card {
    flex-direction: column;
  }

  .txn-feed-badge-rail {
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    border-right: 0;
    border-bottom: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  }

  .txn-feed-badge {
    font-size: 0.58rem;
    padding: 0.15rem 0.4rem;
    flex-shrink: 0;
  }

  .txn-feed-rail-meta {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.45rem;
    width: auto;
    min-width: 0;
  }

  .txn-feed-rail-meta span {
    font-size: 0.55rem;
    text-align: left;
  }

  .txn-feed-rail-meta span + span::before {
    content: "· ";
  }

  .txn-feed-rail-meta span:last-child {
    flex-shrink: 0;
  }

  .txn-banner-logo-col {
    width: 80px;
  }

  .txn-trade-logo-col {
    width: 65px;
  }

  .txn-banner-player {
    font-size: 1.0rem;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Trade cards: swap the comma-run name row for a "TEAM RECEIVE" section
     with one pill per player. The stacked team gradient stays exactly as
     before — pills sit on a translucent dark wash so each team's colors
     read through around them. */
  .txn-feed-card-trade .txn-banner-name-row,
  .txn-feed-card-trade .txn-banner-team-name {
    display: none;
  }

  .txn-trade-receive-label {
    display: block;
    margin-bottom: 0.4rem;
    color: rgba(255, 255, 255, 0.92);
    font-family: 'Ropa Sans', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }

  /* Plain stacked names, one per line — same treatment as sign/release player
     names. The drop shadow keeps white text readable over lighter team
     gradient colors (it inherits onto the position span too). */
  .txn-trade-pills {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .txn-trade-pill {
    color: #ffffff;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.15;
    overflow-wrap: anywhere;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
  }

  .txn-trade-pill b {
    margin-left: 0.2rem;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Ropa Sans', sans-serif;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.06em;
  }

  /* Sign cards: hide position from name row, show it in sub-row next to team name */
  .txn-feed-card-sign .txn-pos-inline {
    display: none;
  }

  .txn-feed-card-sign .txn-banner-sub-divider {
    display: block;
  }

  .txn-feed-card-sign .txn-pos-sub {
    display: inline;
  }

  .txn-banner-pos {
    font-size: 0.72rem;
    flex-shrink: 0;
  }

  .txn-banner-name-row {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .txn-banner-team-name {
    font-size: 0.58rem;
  }

  .txn-banner-content {
    padding: 0.6rem 0.65rem;
  }

  /* Release cards: break position onto its own line below player name */
  .txn-feed-card-release .txn-banner-name-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
  }

  /* Release cards: stack waiver block below player name */
  .txn-feed-card-release .txn-banner-body {
    flex-direction: column;
    align-items: stretch;
  }

  .txn-feed-card-release .txn-banner-waiver-block {
    align-items: flex-start;
    padding: 0 0.65rem 0.6rem;
    gap: 0.05rem;
  }

  .txn-banner-waiver-block {
    padding: 0.6rem 0.65rem;
    gap: 0.05rem;
  }

  .txn-waiver-label {
    font-size: 0.5rem;
  }

  .txn-waiver-countdown {
    font-size: 0.72rem;
  }

  .txn-trade-banner-body {
    flex-direction: column;
    --trade-grad-dir: to bottom;
  }

  /* Stacked sections: the divider runs horizontally instead */
  .txn-trade-half + .txn-trade-half {
    border-left: 0;
    border-top: 1px solid rgba(var(--fg-rgb), 0.9);
  }

  .txn-trade-arrow {
    position: static;
    transform: none;
    display: block;
    text-align: center;
    padding: 0.2rem 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MANAGEMENT HUB
   ═══════════════════════════════════════════════════════════════ */

:root {
  --mgmt-team-color:  var(--accent);
  --mgmt-team-color2: #1a2030;
  --danger: #e05252;
}

/* ── Login Wall ─────────────────────────────────────────────────────────────── */

.mgmt-login-wall {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--surface-panel-rgb), 0.96);
  backdrop-filter: blur(6px);
}
.mgmt-login-wall[hidden] { display: none !important; }

.mgmt-login-card {
  width: min(420px, 92vw);
  background: var(--surface-2, #111827);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 10px;
  padding: 2.2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

.mgmt-login-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 0.4rem;
}

.mgmt-login-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.12em;
  margin: 0;
  color: #e7edf5;
}

.mgmt-login-sub {
  font-size: 0.82rem;
  color: rgba(var(--fg-rgb),0.5);
  margin: 0 0 0.8rem;
  text-align: center;
}

/* Escape hatch out of the fixed login overlay — without it the site header
   is buried under the wall and back/URL are the only exits. */
.mgmt-login-home-link {
  font-size: 0.78rem;
  color: rgba(var(--fg-rgb),0.55);
  text-decoration: none;
  margin-top: 0.5rem;
}

.mgmt-login-home-link:hover {
  color: var(--link-blue, #4da3ff);
  text-decoration: underline;
}

.mgmt-login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.mgmt-login-form[hidden] {
  display: none;
}

.mgmt-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mgmt-form-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb),0.55);
}

/* Custom typeahead dropdown (Safari doesn't render native <input list="datalist">
   suggestions at all, so this is a hand-built replacement) */
.mgmt-autocomplete-wrap {
  position: relative;
}

.mgmt-autocomplete-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 220px;
  overflow-y: auto;
  background: #111827;
  border: 1px solid rgba(var(--fg-rgb),0.15);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}

.mgmt-autocomplete-option {
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  color: #e7edf5;
  cursor: pointer;
}

.mgmt-autocomplete-option:hover,
.mgmt-autocomplete-option:active {
  background: rgba(var(--fg-rgb),0.08);
}

.mgmt-autocomplete-option + .mgmt-autocomplete-option {
  border-top: 1px solid rgba(var(--fg-rgb),0.06);
}

.mgmt-form-select,
.mgmt-form-input {
  width: 100%;
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--fg-rgb),0.12);
  border-radius: 5px;
  color: #e7edf5;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.mgmt-form-select:focus,
.mgmt-form-input:focus {
  outline: none;
  border-color: var(--accent);
}

.mgmt-form-select option {
  background: #111827;
}

/* Header event switcher — compact inline select next to the hub buttons */
.mgmt-hub-event-select {
  width: auto;
  max-width: min(260px, 40vw);
  padding: 0.4rem 1.8rem 0.4rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.mgmt-login-btn {
  margin-top: 0.4rem;
  width: 100%;
  padding: 0.65rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

/* Multi-team chooser on the login wall — shown instead of auto-sign-in when the
   member manages 2+ teams (management-auth.php action=check / switch-team) */
.mgmt-team-choice {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mgmt-team-choice[hidden] {
  display: none;
}

.mgmt-team-choice-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mgmt-team-choice-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.55rem 0.8rem;
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--fg-rgb),0.12);
  border-radius: 6px;
  color: #e7edf5;
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.mgmt-team-choice-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(var(--fg-rgb),0.1);
}

.mgmt-team-choice-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.mgmt-team-choice-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.mgmt-team-choice-name {
  flex: 1;
  font-weight: 700;
}

.mgmt-team-choice-abbr {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(var(--fg-rgb),0.5);
}

:root[data-agl-theme|="bleached"] .mgmt-team-choice-btn {
  color: var(--text);
}

.mgmt-login-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb),0.45);
  margin: 0.3rem 0 0.2rem;
}

.mgmt-login-divider::before,
.mgmt-login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--fg-rgb),0.12);
}

.mgmt-login-error {
  color: var(--danger, #e05);
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0.75rem;
  background: rgba(238, 0, 85, 0.1);
  border: 1px solid rgba(238, 0, 85, 0.3);
  border-radius: 6px;
  text-align: center;
}

/* ── Page shell override ─────────────────────────────────────────────────────── */

.mgmt-page-shell {
  padding-top: 1rem;
}

/* ── Hub Header ─────────────────────────────────────────────────────────────── */

.mgmt-hub-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 2rem;
  background: linear-gradient(to right, var(--mgmt-team-color, #1e2a41) 0%, var(--mgmt-team-color2, #0c1220) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  margin-bottom: 1.5rem;
}

.mgmt-team-badge {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.mgmt-team-logo {
  height: 3.6rem;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.mgmt-team-identity {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.mgmt-team-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  -webkit-text-stroke: 0.5px var(--mgmt-header-text, rgba(var(--fg-rgb),0.4));
}

.mgmt-team-abbr {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.55;
  line-height: 1.4;
}

.mgmt-standing-badge {
  font-size: 0.82rem;
  color: rgba(var(--fg-rgb),0.6);
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.mgmt-hub-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #e7edf5;
  text-shadow: none;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  width: fit-content;
  border-bottom: 2px solid rgba(var(--fg-rgb),0.5);
  padding-bottom: 0.2rem;
}

.mgmt-logout-btn {
  justify-self: end;
  background: transparent;
  border: 1px solid rgba(var(--fg-rgb),0.2);
  border-radius: 5px;
  color: rgba(var(--fg-rgb),0.6);
  cursor: pointer;
  padding: 0.35rem 0.9rem;
  font-size: 0.78rem;
  font-family: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s;
}

.mgmt-logout-btn:hover {
  border-color: var(--danger);
  color: var(--danger);
}

/* ── Section tabs (Players / Schedule) ──────────────────────────────────────── */

.mgmt-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0 1.5rem 1.2rem;
  padding: 0.45rem;
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.mgmt-section-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0.55rem 1.2rem;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: 6px;
  background: rgba(var(--surface-panel-rgb), 0.72);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mgmt-section-tab.is-active {
  border-color: var(--mgmt-team-color, rgb(var(--accent-teal-rgb)));
  background: rgba(var(--mgmt-team-color, 0, 188, 188), 0.16);
  color: #fff;
}

.mgmt-section-dropdown-wrap {
  display: none;
}

@media (max-width: 600px) {
  .mgmt-section-tabs {
    display: none !important;
  }
  .mgmt-section-dropdown-wrap {
    display: block;
    margin: 0 0.75rem 1rem;
  }
  .mgmt-section-dropdown {
    width: 100%;
    padding: 0.65rem 1rem;
    border: 1px solid rgba(var(--fg-rgb), 0.12);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
    color: #fff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
    cursor: pointer;
  }
  .mgmt-section-dropdown option {
    background: #0a1628;
    color: #fff;
  }
}

/* ── Schedule tab layout ─────────────────────────────────────────────────────── */

.mgmt-schedule-tab-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  padding: 0 1.5rem 2rem;
  align-items: start;
}

/* ── Availability tab ────────────────────────────────────────────────────────── */

.mgmt-availability-tab-body {
  padding: 0 1.5rem 2rem;
}

.mgmt-availability-wrap {
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(var(--fg-rgb),0.08);
  overflow: hidden;
}

/* ── Messages tab ─────────────────────────────────────────────────────────── */

.mgmt-messages-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 0;
}

/* Broadcast notification banner */
.mgmt-broadcast-banner {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(var(--blue-soft-rgb),0.12) 0%, rgba(var(--blue-soft-rgb),0.06) 100%);
  border: 1px solid rgba(var(--blue-soft-rgb),0.3);
  border-left: 4px solid rgba(var(--blue-soft-rgb),0.8);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.mgmt-broadcast-body { flex: 1; min-width: 0; }

.mgmt-broadcast-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.2rem;
}

.mgmt-broadcast-text {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
  white-space: pre-wrap;
}

.mgmt-broadcast-dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}

.mgmt-broadcast-dismiss:hover { color: #fff; }

/* Folder tab bar + compose button */
.mgmt-msg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.mgmt-msg-folder-tabs {
  display: flex;
  gap: 0.35rem;
}

.mgmt-msg-folder-tab {
  padding: 0.3rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: rgba(var(--fg-rgb),0.05);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 5px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.mgmt-msg-folder-tab.is-active,
.mgmt-msg-folder-tab:hover {
  background: rgba(var(--blue-soft-rgb),0.14);
  border-color: rgba(var(--blue-soft-rgb),0.35);
  color: #fff;
}

/* Compose card */
.mgmt-compose-card {
  background: rgba(var(--fg-rgb),0.03);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 8px;
  padding: 1rem;
}

.mgmt-compose-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.mgmt-compose-form textarea {
  width: 100%;
  resize: vertical;
  font: inherit;
  font-size: 0.85rem;
}

.mgmt-compose-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.mgmt-compose-status {
  font-size: 0.8rem;
  color: var(--muted);
}

.mgmt-compose-status.is-ok    { color: var(--green, #2ad872); }
.mgmt-compose-status.is-error { color: var(--red, #ff3048); }

/* Message list */
.mgmt-msg-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mgmt-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(var(--fg-rgb),0.03);
  border: 1px solid rgba(var(--fg-rgb),0.07);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
}

.mgmt-msg-row:hover { background: rgba(var(--fg-rgb),0.06); }

.mgmt-msg-row.is-unread {
  border-left: 3px solid rgba(var(--blue-soft-rgb),0.7);
  background: rgba(var(--blue-soft-rgb),0.06);
}

.mgmt-msg-meta {
  flex: 1;
  min-width: 0;
}

.mgmt-msg-from {
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.mgmt-msg-subject {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgmt-msg-date {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Expanded message body */
.mgmt-msg-body-wrap {
  padding: 0.6rem 1rem 0.75rem;
  border-top: 1px solid rgba(var(--fg-rgb),0.06);
  font-size: 0.82rem;
  color: var(--muted);
  white-space: pre-wrap;
  line-height: 1.6;
}

.mgmt-msg-actions {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 1rem 0.6rem;
}

/* Unread badge on the tab button */
.mgmt-msg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  font-size: 0.62rem;
  font-weight: 900;
  background: rgba(var(--blue-soft-rgb),0.85);
  color: #fff;
  border-radius: 999px;
  padding: 0 0.3rem;
  margin-left: 0.35rem;
  vertical-align: middle;
  line-height: 1;
}

.mgmt-availability-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mgmt-availability-table th,
.mgmt-availability-table td {
  text-align: center;
  white-space: nowrap;
}

.mgmt-availability-opp {
  font-weight: 400;
  opacity: 0.7;
  text-transform: none;
  letter-spacing: normal;
}

.mgmt-availability-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

.mgmt-availability-badge.is-available   { background: rgba(38, 214, 124, 0.18); color: var(--green, #26d67c); font-size: 0.9rem; font-weight: 900; padding: 0.25rem 0.55rem; }
.mgmt-availability-badge.is-unavailable { background: rgba(255, 70, 70, 0.15);  color: var(--red, #ff3048); font-size: 0.9rem; font-weight: 900; padding: 0.25rem 0.55rem; }
.mgmt-availability-badge.is-unknown     { background: rgba(var(--fg-rgb), 0.06); color: var(--muted); }
.mgmt-availability-badge.is-ir          { background: rgba(245, 197, 24, 0.16); color: var(--gold, #f5c518); font-weight: 800; }

.mgmt-availability-group-row td {
  text-align: left;
  padding: 0.4rem 0.75rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--avail-pos-color, var(--muted));
  background: color-mix(in srgb, var(--avail-pos-color, transparent) 8%, rgba(var(--fg-rgb),0.03));
  border-top: 1px solid color-mix(in srgb, var(--avail-pos-color, rgba(var(--fg-rgb),0.06)) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--avail-pos-color, rgba(var(--fg-rgb),0.06)) 25%, transparent);
  border-left: 3px solid var(--avail-pos-color, rgba(var(--fg-rgb),0.08));
  white-space: nowrap;
}

select.mgmt-week-select {
  font-size: 0.78rem;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  border: 1px solid rgba(var(--fg-rgb), 0.15);
  border-radius: 6px;
  outline: 0;
  cursor: pointer;
  min-width: 0;
}

select.mgmt-week-select:focus {
  border-color: rgba(var(--blue-soft-rgb), 0.75);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.14);
}

select.mgmt-week-select option {
  background: rgb(var(--surface-panel-rgb));
  color: var(--text);
}

/* ── Upcoming Opponents — server veto/pick cards ────────────────────────────── */

.mgmt-upcoming-wrap {
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(var(--fg-rgb),0.08);
  overflow: hidden;
}

.mgmt-upcoming-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  padding: 1.1rem;
}

.mgmt-upcoming-col {
  flex: 1 1 280px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mgmt-upcoming-col-header {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mgmt-team-color, var(--accent, rgb(var(--accent-teal-rgb))));
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.1);
}

.mgmt-upcoming-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "time  time"
    "left  right";
  gap: 0.6rem 0.5rem;
  padding: 1rem 1.1rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--fg-rgb),0.08);
  background: rgba(var(--fg-rgb),0.03);
  min-height: 132px;
}

.mgmt-upcoming-time {
  grid-area: time;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb),0.65);
}

.mgmt-upcoming-left {
  grid-area: left;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.mgmt-upcoming-logo {
  width: 104px;
  height: 104px;
  object-fit: contain;
  flex-shrink: 0;
}

.mgmt-upcoming-opp {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mgmt-upcoming-loc {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mgmt-team-color, var(--accent, rgb(var(--accent-teal-rgb))));
}

.mgmt-upcoming-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mgmt-upcoming-right {
  grid-area: right;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mgmt-upcoming-right > * {
  width: 100%;
  max-width: 286px;
}

.mgmt-server-select {
  min-height: 42px;
  padding: 0 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(var(--fg-rgb),0.18);
  background: rgba(0,0,0,0.3);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
}

.mgmt-server-select:disabled {
  color: rgba(var(--fg-rgb),0.35);
  border-color: rgba(var(--fg-rgb),0.08);
  cursor: not-allowed;
}

.mgmt-server-status {
  font-size: 0.78rem;
  color: rgba(var(--fg-rgb),0.5);
  text-align: center;
}

.mgmt-server-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 0.9rem;
  border-radius: 6px;
  border: 1px solid rgba(38, 214, 124, 0.4);
  background: rgba(38, 214, 124, 0.1);
  color: var(--green, #26d67c);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mgmt-final-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.mgmt-final-score {
  font-size: 1.7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.mgmt-final-score.win  { color: var(--green, #26d67c); }
.mgmt-final-score.loss { color: var(--red, #ff3048); }
.mgmt-final-score.tie  { color: var(--muted); }

.mgmt-final-boxscore-btn {
  padding: 0.4rem 1.2rem;
  border-radius: 6px;
  border: 1px solid rgba(var(--fg-rgb),0.18);
  background: rgba(var(--fg-rgb),0.06);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.mgmt-final-boxscore-btn:hover,
.mgmt-final-boxscore-btn:focus-visible {
  background: rgba(var(--fg-rgb),0.14);
  border-color: rgba(var(--fg-rgb),0.3);
  outline: none;
}

/* ── Hub Body Grid ───────────────────────────────────────────────────────────── */

.mgmt-hub-body {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 1.4rem;
  padding: 0 1.5rem 2rem;
  align-items: start;
}

/* ── Roster Tables ───────────────────────────────────────────────────────────── */

.mgmt-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid rgba(var(--fg-rgb),0.08);
}

.mgmt-goalies-wrap {
  margin-top: 1.2rem;
}

.mgmt-roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.mgmt-roster-table thead tr {
  background: var(--mgmt-team-color);
}

.mgmt-roster-table thead th {
  padding: 0.55rem 0.7rem;
  text-align: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  background: var(--mgmt-team-color, #1a2030);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mgmt-header-text, #fff);
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  border: none;
}

.mgmt-roster-table tbody tr {
  background: rgba(var(--fg-rgb),0.025);
  border-bottom: 1px solid rgba(var(--fg-rgb),0.05);
  transition: background 0.1s;
}

.mgmt-roster-table tbody tr:nth-child(even) {
  background: rgba(var(--fg-rgb),0.05);
}

.mgmt-roster-table tbody tr:hover {
  background: rgba(var(--fg-rgb),0.08);
}

/* Status row variants */
.mgmt-row-tb {
  background: rgba(255, 140, 0, 0.1) !important;
  border-left: 3px solid #ff8c00;
}

.mgmt-row-ir {
  background: rgba(60, 120, 220, 0.1) !important;
  border-left: 3px solid #3c78dc;
}

.mgmt-row-dropped {
  background: rgba(224, 82, 82, 0.08) !important;
  border-left: 3px solid var(--danger);
  opacity: 0.65;
}

.mgmt-roster-table td {
  padding: 0.5rem 0.7rem;
  color: #d8e0ea;
  vertical-align: middle;
}

/* Standings table only — doubled text size + matching padding, scoped so it
   doesn't affect the shared .mgmt-roster-table skater/goalie tables. */
.mgmt-standings-table {
  font-size: 1.66rem;
}

.mgmt-standings-table thead th {
  font-size: 1.56rem;
  padding: 1.1rem 1.4rem;
}

.mgmt-standings-table td {
  padding: 1rem 1.4rem;
}

.mgmt-player-name {
  font-weight: 600;
  text-align: left;
  min-width: 120px;
}

.mgmt-pos {
  text-align: center;
  color: rgba(var(--fg-rgb),0.7);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.mgmt-seasons {
  text-align: center;
  font-size: 0.78rem;
  color: rgba(var(--fg-rgb),0.65);
  letter-spacing: 0.06em;
}

.mgmt-options-cell {
  text-align: center;
  white-space: nowrap;
}

.mgmt-loading-cell {
  text-align: center;
  color: rgba(var(--fg-rgb),0.4);
  padding: 1rem !important;
  font-size: 0.82rem;
}

/* ── Mgmt badge (management players) ────────────────────────────────────────── */

.mgmt-badge-mgmt {
  display: inline-block;
  padding: 0.18rem 0.6rem;
  background: rgba(var(--mgmt-team-color), 0.15);
  background: rgba(120,80,200,0.2);
  border: 1px solid rgba(160,110,230,0.4);
  border-radius: 4px;
  color: #c4a8f0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mgmt-badge-in-game {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: rgba(0,200,100,0.15);
  border: 1px solid rgba(0,200,100,0.4);
  border-radius: 4px;
  color: #4ade80;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.4rem;
}

/* ── Action buttons ──────────────────────────────────────────────────────────── */

.mgmt-action-group {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  justify-content: center;
}

.mgmt-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 5px;
  color: rgba(var(--fg-rgb),0.55);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  padding: 0;
  flex-shrink: 0;
}

.mgmt-action-btn:hover {
  background: rgba(var(--fg-rgb),0.12);
  color: #e7edf5;
}

/* Trade block active */
.mgmt-action-btn.is-active-tb {
  background: rgba(255, 140, 0, 0.2);
  border-color: #ff8c00;
  color: #ff8c00;
}

/* IR active */
.mgmt-action-btn.is-active-ir {
  background: rgba(60, 120, 220, 0.2);
  border-color: #3c78dc;
  color: #6ba0f0;
}

/* Drop active */
.mgmt-action-btn.is-active-drop {
  background: rgba(224, 82, 82, 0.2);
  border-color: var(--danger);
  color: var(--danger);
}

/* Trade request button accent */
.mgmt-trade-req-btn:hover {
  background: rgba(var(--accent-rgb, 0,188,188), 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Side Panels (Trade Block / IR) ──────────────────────────────────────────── */

.mgmt-panels-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mgmt-panel {
  background: rgba(var(--fg-rgb),0.03);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 6px;
  overflow: hidden;
  min-height: 120px;
}

.mgmt-panel-resources {
  min-height: 0;
}

.mgmt-resources-list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
}

.mgmt-resource-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  color: var(--steel-blue);
  font-size: 0.84rem;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.mgmt-resource-link:hover {
  background: rgba(var(--accent-strong-rgb), 0.08);
  color: #90cdf4;
}

.mgmt-resource-link svg {
  flex-shrink: 0;
  opacity: 0.75;
}

.mgmt-panel-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e7edf5;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--fg-rgb),0.06);
  border-bottom: 1px solid rgba(var(--fg-rgb),0.08);
}

.mgmt-panel-list {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
}

.mgmt-panel-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.04);
}

.mgmt-panel-player {
  flex: 1;
  color: #d8e0ea;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgmt-panel-pos {
  font-size: 0.72rem;
  color: rgba(var(--fg-rgb),0.45);
  white-space: nowrap;
}

/* IR date range tag shown in the IR panel */
.mgmt-panel-ir-dates {
  font-size: 0.68rem;
  color: rgba(255,200,100,0.75);
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* IR modal form */
.mgmt-ir-modal-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mgmt-ir-modal-form .mgmt-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mgmt-ir-modal-cap {
  font-size: 0.78rem;
  color: rgba(var(--fg-rgb),0.55);
  margin: 0;
}
.mgmt-ir-days-used {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.45rem 0.75rem;
  border-radius: 6px;
  background: rgba(var(--fg-rgb),0.05);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  margin-bottom: 0.25rem;
}
.mgmt-ir-days-used.is-warning { color: #f5a623; border-color: rgba(245,166,35,0.3); }
.mgmt-ir-days-used.is-danger  { color: var(--danger, #e05); border-color: rgba(220,0,85,0.3); }

/* FA/Waiver Claims monitor — the table can genuinely need more width than a phone
   viewport has (team list + contingent-drop note + two action buttons per row), so it
   scrolls horizontally within its own card instead of stretching the whole page. */
.txn-claims-table-wrap {
  overflow-x: auto;
  margin: 0 0 1rem;
}

.txn-claims-event-block {
  margin-bottom: 1.25rem;
}

.txn-claims-table-wrap .txn-ir-table {
  min-width: 640px;
}

.txn-claims-table-wrap .txn-ir-table td .button {
  display: block;
  width: 100%;
  margin-bottom: 0.3rem;
}

.txn-claims-table-wrap .txn-ir-table td .button:last-child {
  margin-bottom: 0;
}

/* ── Drop Log (admin Transactions → FA / Waiver Claims tab) ───────────────── */
.txn-drop-log-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.05);
  min-width: 0;
}
.txn-drop-log-row:last-child { border-bottom: 0; }
.txn-drop-log-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1 1 auto;
}
.txn-drop-log-meta {
  font-size: 0.72rem;
  color: rgba(var(--fg-rgb),0.55);
  overflow: hidden;
  text-overflow: ellipsis;
}
.txn-drop-log-actions {
  flex: 0 0 auto;
}

/* Mobile: FA / Waiver Claims panel was overflowing the viewport in portrait
   because the inner .txn-ir-table has a hard 640px min-width for horizontal
   scroll inside its wrap, but the .admin-tool-card grid ancestor and its
   grid item defaulted to min-width:auto, letting the whole page grow to fit
   the table instead of the wrap scrolling internally. Same failure pattern
   as the WW mobile grid trap fixed in Session 19. */
#txn-claims-panel,
#txn-claims-panel > * {
  min-width: 0;
}
.txn-claims-table-wrap { max-width: 100%; }
@media (max-width: 720px) {
  .admin-tool-stack,
  .admin-tool-card {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .txn-claims-table-wrap .txn-ir-table {
    min-width: 480px;
  }
  .txn-drop-log-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .txn-drop-log-actions {
    width: 100%;
  }
  .txn-drop-log-actions .button {
    width: 100%;
  }
}

/* Admin IR tracker */
.txn-ir-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.txn-ir-table th {
  text-align: left;
  padding: 0.4rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(var(--fg-rgb),0.5);
  border-bottom: 1px solid rgba(var(--fg-rgb),0.1);
}
.txn-ir-table td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.05);
}
.txn-ir-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.txn-ir-badge-active  { background: rgba(255,200,80,0.18); color: #f5c842; }
.txn-ir-badge-expired { background: rgba(var(--fg-rgb),0.07); color: rgba(var(--fg-rgb),0.4); }
.txn-ir-badge-pending { background: rgba(129,140,248,0.18); color: #a5b4fc; }

/* ── Players of the Week ────────────────────────────────────────────────────── */
.potw-section {
  position: relative;
  margin-bottom: 1.5rem;
  background-image: url('assets/rink-bg.png');
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
  min-height: 820px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Dark gradient scrim — lighter at top so the rink breathes behind the forwards */
.potw-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(4,8,18,.62) 0%,
    rgba(4,8,18,.74) 38%,
    rgba(4,8,18,.85) 65%,
    rgba(4,8,18,.95) 100%);
  z-index: 0;
  pointer-events: none;
}

/* Blue-line accent stripe at section bottom */
.potw-section::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(30,160,220,.7) 25%, rgba(30,160,220,.7) 75%, transparent);
  z-index: 2;
  pointer-events: none;
}

/* All children float above the scrim */
.potw-section > * { position: relative; z-index: 1; }


.potw-section .panel-heading {
  margin-bottom: 1.75rem;
}

.media-entry-select {
  height: 30px;
  padding: 0 0.6rem;
  background: rgba(0,0,0,0.35);
  color: var(--text, #fff);
  border: 1px solid rgba(var(--fg-rgb),0.15);
  border-radius: 6px;
  font: inherit;
  font-size: 0.78rem;
  max-width: 180px;
  cursor: pointer;
}
.media-entry-select:focus {
  outline: none;
  border-color: rgba(var(--accent-strong-rgb),0.6);
}

.potw-collapse-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  background: rgba(var(--fg-rgb),.06);
  border: 1px solid rgba(140,155,175,.2);
  border-radius: 4px;
  color: rgba(var(--fg-rgb),.5);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.potw-collapse-btn:hover { background: rgba(var(--fg-rgb),.12); color: #fff; }
.potw-collapse-btn svg { width: 16px; height: 16px; transition: transform .25s ease; }
.potw-section.is-collapsed .potw-collapse-btn svg { transform: rotate(180deg); }
.potw-section.is-collapsed .potw-grid { display: none; }
.potw-section.is-collapsed,
.media-page .potw-section.is-collapsed { min-height: 0 !important; padding-bottom: 1.25rem; }
.potw-section.is-collapsed::before,
.potw-section.is-collapsed::after { display: none; }

/* ── Ice formation grid — 6 equal cols, cards span 2 each ── */
.potw-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: .85rem;
  row-gap: 7rem;
}

/* Hockey position placements */
.potw-card-lw { grid-column: 1 / 3; grid-row: 1; }
.potw-card-c  { grid-column: 3 / 5; grid-row: 1; }
.potw-card-rw { grid-column: 5 / 7; grid-row: 1; }
.potw-card-ld { grid-column: 2 / 4; grid-row: 2; }
.potw-card-rd { grid-column: 4 / 6; grid-row: 2; }
.potw-card-g  { grid-column: 3 / 5; grid-row: 3; }

/* ── Card base ── */
.potw-card {
  position: relative;
  background: linear-gradient(145deg, rgba(9,13,24,.96), rgba(5,8,17,.98));
  border: 1px solid rgba(var(--fg-rgb),.07);
  border-left: 4px solid var(--pos-color, rgb(var(--accent-teal-rgb)));
  border-radius: 10px;
  overflow: hidden;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.2rem;
  transition: transform 0.15s, box-shadow 0.15s;
}

.potw-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(0,0,0,.55);
}

.potw-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, color-mix(in srgb, var(--pos-color, rgb(var(--accent-teal-rgb))) 10%, transparent) 0%, transparent 52%);
  pointer-events: none;
}

/* ── Card anatomy ── */
.potw-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

.potw-card-pos-badge {
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #000;
  background: var(--pos-color, rgb(var(--accent-teal-rgb)));
  border-radius: 4px;
  padding: .1rem .42rem;
  line-height: 1.5;
  flex-shrink: 0;
}

.potw-card-team-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: .88;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.5));
}

.potw-card-name-row {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  min-width: 0;
}

.potw-card-name {
  font-size: 1.22rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.05;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Barlow Condensed', sans-serif;
  flex: 1;
  min-width: 0;
}

.potw-card-ovr {
  display: none;
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  padding: .12rem .45rem;
  border-radius: 3px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.3;
}
.potw-card-ovr:not(:empty) { display: inline-block; }

.potw-card-ovr--high {
  background: rgba(96, 220, 120, .12);
  border-color: rgba(96, 220, 120, .35);
  color: #74ec8c;
}
.potw-card-ovr--mid {
  background: rgba(250, 200, 80, .10);
  border-color: rgba(250, 200, 80, .30);
  color: #fad264;
}
.potw-card-ovr--low {
  background: rgba(var(--fg-rgb), .05);
  border-color: rgba(var(--fg-rgb), .12);
  color: rgba(var(--fg-rgb),.55);
}

.potw-card-team-abbr {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(var(--fg-rgb),.38);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.potw-card-stats {
  font-size: .78rem;
  font-weight: 700;
  color: #c0d0df;
  font-variant-numeric: tabular-nums;
  line-height: 1.65;
  border-top: 1px solid rgba(var(--fg-rgb),.07);
  padding-top: .4rem;
  margin-top: auto;
}

.potw-card-note {
  font-size: .68rem;
  color: rgba(var(--fg-rgb),.35);
  font-style: italic;
  line-height: 1.4;
}

/* ── POTW expanded overlay ── */
.potw-overlay {
  position: absolute;
  inset: 6% 5%;
  z-index: 20;
  background: linear-gradient(160deg, rgba(16,20,36,.98) 0%, rgba(8,11,22,.99) 100%);
  border: 1px solid rgba(var(--fg-rgb),.1);
  border-left: 4px solid var(--pos-color, rgb(var(--accent-teal-rgb)));
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 16px 64px rgba(0,0,0,.75);
  animation: potw-overlay-in .18s ease;
}
@keyframes potw-overlay-in {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* Close button */
.potw-overlay-close {
  position: absolute;
  top: .65rem;
  right: .65rem;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--fg-rgb),.07);
  border: 1px solid rgba(var(--fg-rgb),.12);
  border-radius: 4px;
  color: rgba(var(--fg-rgb),.5);
  font-size: .85rem;
  cursor: pointer;
  line-height: 1;
  transition: background .15s, color .15s;
  z-index: 2;
}
.potw-overlay-close:hover { background: rgba(var(--fg-rgb),.16); color: #fff; }

/* Main content area — logo + identity, fills available height */
.potw-overlay-header {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1.75rem 2.5rem 1.5rem;
  padding-right: 3.5rem;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--pos-color, rgb(var(--accent-teal-rgb))) 12%, transparent) 0%,
    transparent 60%
  );
  overflow: hidden;
}
.potw-overlay-logo {
  width: 300px;
  height: 300px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.55));
}
.potw-overlay-identity {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
}
.potw-overlay-team-name {
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pos-color, rgb(var(--accent-teal-rgb)));
  line-height: 1;
}
.potw-overlay-name-row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  min-width: 0;
}

.potw-overlay-name {
  font-size: 6rem;
  font-weight: 900;
  color: #fff;
  margin: 0;
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.potw-overlay-name-row .potw-overlay-ovr {
  flex-shrink: 0;
  margin-left: 0;
}
.potw-overlay-ovr {
  display: inline-block;
  font-size: 2rem;
  font-weight: 900;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: 4px;
  border: 1px solid transparent;
  margin-left: 1rem;
  white-space: nowrap;
  vertical-align: middle;
}
.potw-overlay-pos {
  font-size: 2.25rem;
  font-weight: 700;
  color: rgba(var(--fg-rgb),.4);
  letter-spacing: .04em;
  line-height: 1;
}

/* Two-row stat area pinned to the bottom */
.potw-overlay-stats-wrap {
  background: rgba(0,0,0,.35);
  border-top: 1px solid rgba(var(--fg-rgb),.07);
  padding: 0 0 .15rem;
}
.potw-overlay-stats-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb),.28);
  padding: .55rem 1.25rem .25rem;
}
.potw-overlay-stats-row {
  display: flex;
  border-top: 1px solid rgba(var(--fg-rgb),.05);
}
.potw-overlay-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .85rem .25rem;
  border-right: 1px solid rgba(var(--fg-rgb),.05);
  min-width: 0;
}
.potw-overlay-stat:last-child { border-right: none; }
.potw-overlay-stat-val {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--pos-color, rgb(var(--accent-teal-rgb)));
  line-height: 1;
  white-space: nowrap;
}
.potw-overlay-stat-label {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(var(--fg-rgb),.32);
  margin-top: .25rem;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .potw-overlay { inset: 4% 3%; }
  .potw-overlay-logo { width: 160px; height: 160px; }
  .potw-overlay-name { font-size: 3rem; }
  .potw-overlay-team-name { font-size: 1.2rem; }
  .potw-overlay-pos { font-size: 1.2rem; }
  .potw-overlay-stat-val { font-size: 1.5rem; }
  .potw-overlay-stat-label { font-size: .75rem; }
  .potw-overlay-header { padding: 1rem 1.25rem .9rem; gap: 1.25rem; }
  .potw-overlay-stat { padding: .6rem .2rem; }
}
@media (max-width: 480px) {
  .potw-overlay { inset: 2% 1%; }
  .potw-overlay-logo { width: 90px; height: 90px; }
  .potw-overlay-name { font-size: 1.8rem; }
  .potw-overlay-team-name { font-size: .9rem; }
  .potw-overlay-pos { font-size: .9rem; }
  .potw-overlay-stat-val { font-size: 1.1rem; }
  .potw-overlay-stat-label { font-size: .6rem; }
  .potw-overlay-stat { padding: .45rem .1rem; }
}

.stat-sep {
  color: rgba(var(--fg-rgb),.25);
  font-weight: 400;
}

@media (min-width: 921px) {
  .potw-card {
    padding: 1.2rem 1.5rem;
    gap: 1.45rem;
    min-height: 130px;
  }
  .potw-card-featured-logo {
    width: 108px;
    height: 108px;
  }
  .potw-card-name { font-size: 1.46rem; }
  .potw-card-stats { font-size: .86rem; }
}

/* Goalie name slightly larger */

.potw-card-featured-logo {
  width: 90px;
  height: 90px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: .9;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.6));
}

.potw-card-featured-body {
  display: flex;
  flex-direction: column;
  gap: .42rem;
  flex: 1;
  min-width: 0;
}

.potw-card-g .potw-card-name { font-size: 1.35rem; }

.potw-meta-line {
  font-size: 0.72rem;
  color: rgba(var(--fg-rgb),0.35);
  margin-top: 0.5rem;
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .potw-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: .75rem;
  }
  .potw-card-lw, .potw-card-c,  .potw-card-rw,
  .potw-card-ld, .potw-card-rd, .potw-card-g {
    grid-column: auto;
    grid-row: auto;
  }
  .potw-card-g { grid-column: 1 / -1; }
  .potw-card-featured-logo { width: 72px; height: 72px; }
  .potw-card-name { font-size: 1.05rem; }
}

@media (max-width: 480px) {
  .potw-grid { grid-template-columns: 1fr; row-gap: .6rem; }
  .potw-card { padding: .85rem 1rem; gap: .9rem; min-height: 155px; }
  .potw-card-featured-logo { width: 64px; height: 64px; flex-shrink: 0; }
  .potw-card-name { font-size: 1rem; white-space: nowrap; }
  .potw-card-stats { font-size: .66rem; line-height: 1.5; }
}

/* ── Power Rankings ─────────────────────────────────────────────────────────── */
.power-rankings-section { margin-bottom: 1.5rem; }

.power-rankings-list {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: flex-start;
}
.pr-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-width: 0;
}

/* ── ESPN-style PR card ── */
.pr-card {
  position: relative;
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: 0 1rem;
  padding: .85rem 1rem .85rem .9rem;
  border: 1px solid rgba(var(--fg-rgb),.09);
  border-left: 5px solid var(--pr-clr, rgba(var(--fg-rgb),.2));
  border-radius: 7px;
  background: rgba(var(--fg-rgb),.03);
  overflow: hidden;
  transition: background .15s;
}
.pr-card:hover { background: rgba(var(--fg-rgb),.06); }

/* Team-color gradient overlay */
.pr-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pr-clr, transparent) 28%, transparent) 0%, transparent 55%);
  pointer-events: none;
}

/* Giant rank watermark */
.pr-card::after {
  content: attr(data-rank);
  position: absolute;
  right: .5rem; top: 50%; transform: translateY(-50%);
  font-size: 5.5rem; font-weight: 900; line-height: 1;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: -.04em;
  color: rgba(var(--fg-rgb),.055);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.pr-card--gold   {
  border-left-color: #ffd700;
  box-shadow: 0 0 0 1px rgba(255,215,0,.15), inset 0 0 40px rgba(255,215,0,.05);
}
.pr-card--silver {
  border-left-color: #b0b8c4;
  box-shadow: 0 0 0 1px rgba(176,184,196,.12), inset 0 0 40px rgba(176,184,196,.04);
}
.pr-card--bronze {
  border-left-color: #c97d3a;
  box-shadow: 0 0 0 1px rgba(201,125,58,.12), inset 0 0 40px rgba(201,125,58,.04);
}

.pr-card-logo {
  width: 3.75rem; height: 3.75rem;
  object-fit: contain;
  position: relative; z-index: 1;
}
.pr-card-logo-bubble {
  width: 3.75rem; height: 3.75rem;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 800;
  color: rgba(var(--fg-rgb),.7);
  letter-spacing: .06em;
  position: relative; z-index: 1;
}

.pr-card-body { min-width: 0; position: relative; z-index: 1; }

.pr-card-name {
  font-size: 1.28rem;
  font-weight: 900;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
  margin-bottom: .28rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mobile abbreviation / full-name toggle */
.pr-name-abbr { display: none; }
.pr-name-full { display: inline; }
/* Full-name pill injected into body by JS on mobile tap */
.pr-name-pill {
  background: rgba(8,15,26,.97);
  color: #e8f0fc;
  font-size: .8rem;
  font-weight: 700;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .32rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--fg-rgb),.2);
  z-index: 9999;
  pointer-events: none;
}
.pr-card--gold .pr-card-name {
  background: linear-gradient(180deg,
    #5c3a00 0%,
    #c8860a 18%,
    #ffd700 34%,
    #fffaaa 46%,
    #ffd700 58%,
    #a86800 76%,
    #4a2c00 88%,
    #c8860a 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pr-card--silver .pr-card-name {
  background: linear-gradient(180deg,
    #2a2a2a 0%,
    #7a8490 16%,
    #c8d0d8 32%,
    #ffffff 46%,
    #c8d0d8 58%,
    #6a7480 76%,
    #2a2a2a 88%,
    #8a9099 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pr-card--bronze .pr-card-name {
  background: linear-gradient(180deg,
    #2e0e00 0%,
    #8b4010 18%,
    #cd7f32 34%,
    #f8d58a 46%,
    #cd7f32 58%,
    #6b3008 76%,
    #2e0e00 88%,
    #8b4010 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Analysis chips */
.pr-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .28rem;
  margin-top: .3rem;
}
.pr-chip {
  font-size: .62rem;
  font-weight: 800;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .12rem .38rem;
  border-radius: 3px;
  background: rgba(var(--fg-rgb),.06);
  border: 1px solid rgba(var(--fg-rgb),.1);
  color: rgba(var(--fg-rgb),.45);
  white-space: nowrap;
}
.pr-chip--record { color: #fff; background: rgba(var(--fg-rgb),.1); }
.pr-chip--pos  { color: #4ade80; background: rgba(74,222,128,.08); border-color: rgba(74,222,128,.22); }
.pr-chip--neg  { color: #f87171; background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.22); }
.pr-chip--tough { color: #fb923c; background: rgba(251,146,60,.07); border-color: rgba(251,146,60,.22); }
.pr-chip--easy  { color: #4ade80; background: rgba(74,222,128,.07); border-color: rgba(74,222,128,.18); }
.pr-chip--ovr     { color: #a78bfa; background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.2); }
.pr-chip--opp-ovr { color: #7dd3fc; background: rgba(125,211,252,.08); border-color: rgba(125,211,252,.2); }

/* Chip tooltips */
.pr-chip[data-tooltip] {
  position: relative;
  cursor: default;
}
.pr-chip[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(8, 15, 26, 0.97);
  color: #e8f0fc;
  font-size: .65rem;
  font-weight: 600;
  font-family: 'Segoe UI', Arial, sans-serif;
  letter-spacing: .03em;
  text-transform: none;
  white-space: nowrap;
  padding: .28rem .6rem;
  border-radius: 4px;
  border: 1px solid rgba(var(--fg-rgb),.14);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 20;
}
.pr-chip[data-tooltip]:hover::after,
.pr-chip[data-tooltip].tt-active::after {
  opacity: 1;
}

.pr-card-note {
  font-size: .72rem;
  color: rgba(var(--fg-rgb),.42);
  font-style: italic;
  margin-top: .4rem;
  line-height: 1.5;
}

/* Playoff cut line */
.pr-playoff-line {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(248,113,113,.65);
  font-size: .6rem;
  font-weight: 800;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: .1rem 0;
}
.pr-playoff-line::before,
.pr-playoff-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(248,113,113,.3);
}

/* Movement */
.pr-card-mv { display: flex; align-items: center; position: relative; z-index: 1; }
.pr-mv {
  font-size: .88rem;
  font-weight: 900;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: .04em;
  white-space: nowrap;
}
.pr-mv--up   { color: #4ade80; }
.pr-mv--down { color: #f87171; }
.pr-mv--same { color: rgba(var(--fg-rgb),.2); }
.pr-mv--new  { font-size: .7rem; color: #60a5fa; letter-spacing: .08em; }

.pr-updated {
  font-size: .72rem;
  color: rgba(var(--fg-rgb),.28);
  padding: .5rem .25rem;
  text-align: right;
}

/* ── Power Rankings collapse ── */
.power-rankings-section.is-pr-collapsed .pr-col:last-child { display: none; }
.power-rankings-section.is-pr-collapsed .pr-col:first-child .pr-card:nth-child(n+4) { display: none; }
.power-rankings-section.is-pr-collapsed .pr-playoff-line { display: none; }
.power-rankings-section.is-pr-collapsed .pr-updated { display: none; }
.power-rankings-section.is-pr-collapsed .potw-collapse-btn svg { transform: rotate(180deg); }

/* Condensed horizontal row — keep same internal layout, 3 cards side by side */
.power-rankings-section.is-pr-collapsed .pr-col:first-child {
  flex-direction: row;
  gap: .5rem;
}
.power-rankings-section.is-pr-collapsed .pr-card {
  flex: 1;
  min-width: 0;
  grid-template-columns: 3rem 1fr;
  padding: .7rem .7rem .7rem .7rem;
}
.power-rankings-section.is-pr-collapsed .pr-card-mv,
.power-rankings-section.is-pr-collapsed .pr-card-note { display: none; }
.power-rankings-section.is-pr-collapsed .pr-card-logo,
.power-rankings-section.is-pr-collapsed .pr-card-logo-bubble {
  width: 3rem; height: 3rem;
}
.power-rankings-section.is-pr-collapsed .pr-card-name {
  font-size: 1rem;
  white-space: normal;
  line-height: 1.15;
  margin-bottom: .2rem;
}
.power-rankings-section.is-pr-collapsed .pr-chip { font-size: .55rem; }
.power-rankings-section.is-pr-collapsed .pr-card::after {
  font-size: 3.2rem;
  right: .45rem;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  color: rgba(var(--fg-rgb),.2);
}

/* ── Power Rankings mobile ── */
@media (max-width: 640px) {
  .power-rankings-section.is-pr-collapsed .pr-col:first-child {
    flex-direction: column;
  }
  .power-rankings-section.is-pr-collapsed .pr-card {
    grid-template-columns: 4rem 1fr auto;
    padding: .85rem 1rem .85rem .9rem;
  }
  .power-rankings-section.is-pr-collapsed .pr-card-mv { display: flex; }
  .power-rankings-section.is-pr-collapsed .pr-card-logo,
  .power-rankings-section.is-pr-collapsed .pr-card-logo-bubble { width: 3.75rem; height: 3.75rem; }
  .power-rankings-section.is-pr-collapsed .pr-card-name { font-size: 1.1rem; white-space: nowrap; }
  .power-rankings-section.is-pr-collapsed .pr-chip { font-size: .58rem; }
  .power-rankings-section.is-pr-collapsed .pr-card::after { font-size: 4.2rem; right: .5rem; top: 50%; transform: translateY(-50%); color: rgba(var(--fg-rgb),.055); }
}

@media (max-width: 640px) {
  .power-rankings-list {
    flex-direction: column;
    gap: .55rem;
  }
  .pr-col { width: 100%; }
  .pr-card {
    grid-template-columns: 3.5rem 1fr auto;
    padding: .75rem .85rem .75rem .75rem;
  }
  .pr-card-logo,
  .pr-card-logo-bubble { width: 3.25rem; height: 3.25rem; }
  .pr-card::after { font-size: 4.2rem; }
  .pr-card-name { font-size: 1.1rem; }
  .pr-chip { font-size: .58rem; }
  /* show abbr, hide full name on mobile */
  .pr-name-abbr { display: inline; }
  .pr-name-full { display: none; }
  /* tap abbreviation to show full name pill — pill is injected into body via JS */
  .pr-card-name[data-fullname] { cursor: pointer; }
}

/* Admin media tools */
.media-potw-slots {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.media-potw-slot {
  background: rgba(var(--fg-rgb),0.04);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 8px;
  padding: 0.9rem 1rem;
}

.media-potw-slot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.media-potw-slot-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(var(--fg-rgb),0.5);
  text-transform: uppercase;
}

.media-potw-slot-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.media-potw-slot-fields label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.72rem;
  color: rgba(var(--fg-rgb),0.5);
}

.media-potw-slot-fields input,
.media-potw-slot-fields select {
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--fg-rgb),0.12);
  border-radius: 5px;
  color: #fff;
  font-size: 0.82rem;
  padding: 0.3rem 0.5rem;
  outline: none;
  font-family: inherit;
}

.media-potw-slot-fields input:focus,
.media-potw-slot-fields select:focus {
  border-color: var(--accent, rgb(var(--accent-teal-rgb)));
}

.media-potw-slot-fields .full-width { grid-column: 1 / -1; }

.media-rankings-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.media-ranking-row {
  display: grid;
  grid-template-columns: 2rem 5rem 7rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  background: rgba(var(--fg-rgb),0.04);
  border: 1px solid rgba(var(--fg-rgb),0.08);
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
}

.media-ranking-row .rank-num {
  font-size: 0.9rem;
  font-weight: 800;
  color: rgba(var(--fg-rgb),0.35);
  font-family: 'Barlow Condensed', sans-serif;
  text-align: center;
}

.media-ranking-row input,
.media-ranking-row select {
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--fg-rgb),0.12);
  border-radius: 5px;
  color: #fff;
  font-size: 0.8rem;
  padding: 0.25rem 0.4rem;
  outline: none;
  font-family: inherit;
  width: 100%;
}

.media-ranking-row input:focus,
.media-ranking-row select:focus { border-color: var(--accent, rgb(var(--accent-teal-rgb))); }

.media-ranking-row .remove-row-btn {
  background: transparent;
  border: none;
  color: rgba(var(--fg-rgb),0.3);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.1rem;
  transition: color 0.15s;
  flex-shrink: 0;
}

.media-ranking-row .remove-row-btn:hover { color: var(--danger, #e05); }

.pr-row-analysis {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .28rem;
  padding-top: .35rem;
  margin-top: .2rem;
  border-top: 1px solid rgba(var(--fg-rgb),.06);
}
.pr-chip--gd-pos  { color: #4ade80; background: rgba(74,222,128,.08);  border-color: rgba(74,222,128,.2);  }
.pr-chip--gd-neg  { color: #f87171; background: rgba(248,113,113,.08); border-color: rgba(248,113,113,.2); }
.pr-chip--sos-tough { color: #fb923c; background: rgba(251,146,60,.07);  border-color: rgba(251,146,60,.2);  }
.pr-chip--sos-easy  { color: #4ade80; background: rgba(74,222,128,.07);  border-color: rgba(74,222,128,.15); }

.mgmt-panel-remove {
  background: transparent;
  border: none;
  color: rgba(var(--fg-rgb),0.3);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.1rem;
  flex-shrink: 0;
  transition: color 0.15s;
}

.mgmt-panel-remove:hover {
  color: var(--danger);
}

.mgmt-panel-empty {
  color: rgba(var(--fg-rgb),0.3);
  font-size: 0.78rem;
  padding: 0.75rem;
  list-style: none;
}

/* ── Targets Table ───────────────────────────────────────────────────────────── */

.mgmt-targets-wrap {
  border-radius: 6px;
  overflow-x: auto;
}

.mgmt-targets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.mgmt-targets-table thead tr {
  background: var(--mgmt-team-color, var(--accent, rgb(var(--accent-teal-rgb))));
}

.mgmt-targets-table thead th {
  padding: 0.5rem 0.6rem;
  text-align: center;
  background: var(--mgmt-team-color, var(--accent, rgb(var(--accent-teal-rgb))));
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mgmt-header-text, #fff);
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

.mgmt-targets-table tbody tr {
  background: rgba(var(--fg-rgb),0.025);
  border-bottom: 1px solid rgba(var(--fg-rgb),0.05);
}

.mgmt-targets-table tbody tr:nth-child(even) {
  background: rgba(var(--fg-rgb),0.05);
}

.mgmt-targets-table td {
  padding: 0.45rem 0.6rem;
  color: #d8e0ea;
  vertical-align: middle;
  text-align: center;
}

.mgmt-tgt-team-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.mgmt-tgt-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ── Add Target Row ──────────────────────────────────────────────────────────── */

.mgmt-add-target-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem;
  background: rgba(var(--fg-rgb),0.02);
  border-top: 1px solid rgba(var(--fg-rgb),0.06);
  align-items: center;
}

.mgmt-target-team-sel,
.mgmt-target-player-sel {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  font-size: 0.78rem;
}

.mgmt-add-target-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(var(--accent-rgb, 0,188,188), 0.15);
  border: 1px solid var(--accent, rgb(var(--accent-teal-rgb)));
  border-radius: 5px;
  color: var(--accent, rgb(var(--accent-teal-rgb)));
  cursor: pointer;
  padding: 0.4rem 0.7rem;
  font-size: 0.75rem;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.06em;
  white-space: nowrap;
  transition: background 0.15s;
}

.mgmt-add-target-btn:hover {
  background: rgba(var(--accent-rgb, 0,188,188), 0.25);
}

/* ── Schedule Table ──────────────────────────────────────────────────────────── */

.mgmt-schedule-wrap {
  border-radius: 6px;
  overflow-x: auto;
}

.mgmt-schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.mgmt-schedule-table thead tr {
  background: var(--mgmt-team-color, var(--accent, rgb(var(--accent-teal-rgb))));
}

.mgmt-schedule-table thead th {
  padding: 0.45rem 0.4rem;
  text-align: center;
  background: var(--mgmt-team-color, var(--accent, rgb(var(--accent-teal-rgb))));
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mgmt-header-text, #fff);
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  line-height: 1.2;
}

.mgmt-schedule-table tbody tr {
  background: rgba(var(--fg-rgb),0.025);
  border-bottom: 1px solid rgba(var(--fg-rgb),0.05);
}

.mgmt-schedule-table tbody tr:nth-child(even) {
  background: rgba(var(--fg-rgb),0.05);
}

/* Pending Transactions widget — center every cell under its header.
   Scoped to the txn wrap so the schedule table's own .mgmt-sched-*
   alignments are unaffected. */
.mgmt-pending-txn-wrap td {
  text-align: center;
  vertical-align: middle;
}

.mgmt-sched-day {
  padding: 0.5rem 0.6rem;
  color: rgba(var(--fg-rgb),0.7);
  font-size: 0.76rem;
  font-weight: 600;
  white-space: nowrap;
  text-align: left;
}

.mgmt-sched-cell {
  text-align: center;
  padding: 0.35rem 0.3rem;
  vertical-align: middle;
  color: rgba(var(--fg-rgb),0.3);
}

.mgmt-sched-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
}

/* ── Modals ──────────────────────────────────────────────────────────────────── */

.mgmt-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(6px);
}
.mgmt-modal-backdrop[hidden] { display: none !important; }

.mgmt-modal-card {
  width: min(480px, 94vw);
  max-height: min(90vh, 700px);
  background: #0d1117;
  border: 1px solid rgba(var(--fg-rgb),0.09);
  border-radius: 12px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(var(--fg-rgb),0.03);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* top accent stripe */
  position: relative;
}
.mgmt-modal-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, rgb(var(--accent-teal-rgb))) 0%, transparent 75%);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}

.mgmt-modal-card-sm {
  width: min(400px, 92vw);
}

.mgmt-rulebook-modal-card {
  width: min(920px, 93vw);
  height: 82vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mgmt-rulebook-modal-search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.07);
  background: rgba(0,0,0,0.14);
  flex-shrink: 0;
}

.mgmt-rb-search-input {
  flex: 1;
  padding: 0.42rem 0.75rem;
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--accent-strong-rgb),0.22);
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.15s;
}

.mgmt-rb-search-input:focus {
  border-color: rgba(var(--accent-strong-rgb),0.5);
}

.mgmt-rb-search-count {
  font-size: 0.78rem;
  color: rgba(226,232,240,0.45);
  white-space: nowrap;
  min-width: 5rem;
  text-align: right;
}

.mgmt-rb-search-nav {
  display: flex;
  gap: 0.2rem;
  margin-left: 0.25rem;
}

.mgmt-rb-nav-arrow {
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--fg-rgb),0.12);
  border-radius: 4px;
  color: rgba(226,232,240,0.7);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  transition: background 0.15s, color 0.15s;
}

.mgmt-rb-nav-arrow:hover {
  background: rgba(var(--accent-strong-rgb),0.18);
  color: var(--steel-blue);
}

/* KEY: flex + min-height:0 allows children to scroll within a fixed height parent */
.mgmt-rulebook-modal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.mgmt-rb-sidebar {
  width: 210px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0.75rem 0.5rem;
  border-right: 1px solid rgba(var(--fg-rgb),0.07);
  background: rgba(0,0,0,0.1);
}

#mgmt-rb-nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.mgmt-rb-nav-link {
  display: block;
  padding: 0.35rem 0.6rem;
  color: rgba(226,232,240,0.6);
  font-size: 0.8rem;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, opacity 0.15s;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  line-height: 1.35;
}

.mgmt-rb-nav-link:hover {
  color: var(--steel-blue);
  background: rgba(var(--accent-strong-rgb),0.08);
}

.mgmt-rb-nav-link.is-active {
  color: var(--steel-blue);
  background: rgba(var(--accent-strong-rgb),0.1);
  font-weight: 600;
  border-left: 2px solid var(--steel-blue);
  padding-left: calc(0.6rem - 2px);
}

.mgmt-rb-nav-link.is-dimmed {
  opacity: 0.2;
}

.mgmt-rb-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 1.25rem 1.75rem 2.5rem;
}

.mgmt-rb-section {
  margin-bottom: 2.25rem;
}

.mgmt-rb-section.is-section-dimmed {
  opacity: 0.15;
}

.mgmt-rb-section-heading {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 0.25rem;
}

.mgmt-rb-sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.4rem;
  background: rgba(var(--accent-strong-rgb),0.15);
  border: 1px solid rgba(var(--accent-strong-rgb),0.3);
  border-radius: 5px;
  color: var(--steel-blue);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.mgmt-rb-section-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-strong-rgb),0.25), transparent);
  margin-bottom: 1rem;
}

.mgmt-rb-rule {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0 0.75rem;
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.04);
  border-radius: 4px;
  transition: background 0.15s, opacity 0.15s;
}

.mgmt-rb-rule.is-dimmed {
  opacity: 0.12;
}

.mgmt-rb-rule.is-match {
  background: rgba(var(--accent-strong-rgb),0.07);
}

.mgmt-rb-rule.is-current-match {
  background: rgba(var(--accent-strong-rgb),0.18);
  outline: 1px solid rgba(var(--accent-strong-rgb),0.4);
}

.mgmt-rb-rule-num {
  color: var(--steel-blue);
  font-size: 0.8rem;
  font-weight: 700;
  padding-top: 0.15rem;
  white-space: nowrap;
}

.mgmt-rb-rule-text {
  min-width: 0;
  color: rgba(226,232,240,0.82);
  font-size: 0.88rem;
  line-height: 1.65;
}

.mgmt-rb-rule-title {
  margin: 0 0 0.35rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
}

.mgmt-rb-rule-text p {
  margin: 0 0 0.45rem;
}

.mgmt-rb-rule-text p:last-child,
.mgmt-rb-rule-text .rb-list:last-child {
  margin-bottom: 0;
}

.mgmt-rb-rule-text .rb-subhead {
  margin-top: 0.8rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(226,232,240,0.95);
}

.mgmt-rb-rule-text .rb-list {
  margin: 0 0 0.55rem;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.mgmt-rb-rule-text .rb-list li::marker {
  color: rgba(74,159,212,0.8);
}

mark.rb-match {
  background: rgba(255,210,0,0.28);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

@media (max-width: 600px) {
  .mgmt-rulebook-modal-card {
    width: 100vw;
    height: 90vh;
    border-radius: 10px 10px 0 0;
    align-self: flex-end;
  }
  .mgmt-rb-sidebar {
    display: none;
  }
}

.mgmt-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.35rem 1rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.07);
  gap: 0.75rem;
}

.mgmt-modal-header h3 {
  margin: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.2;
}

.mgmt-modal-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  background: rgba(var(--fg-rgb),0.05);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 6px;
  color: rgba(var(--fg-rgb),0.45);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mgmt-modal-close:hover {
  background: rgba(var(--fg-rgb),0.1);
  border-color: rgba(var(--fg-rgb),0.18);
  color: #fff;
}

.mgmt-modal-body {
  padding: 1.1rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mgmt-modal-sub {
  font-size: 0.82rem;
  color: rgba(var(--fg-rgb),0.45);
  margin: 0;
  line-height: 1.55;
}

.mgmt-trade-target-display {
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 5px;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: #e7edf5;
  font-size: 0.9rem;
}

/* ── Two-sided trade modal ───────────────────────────────────────────────────── */

.mgmt-trade-modal-card {
  width: min(680px, 96vw);
}

.mgmt-trade-modal-body {
  gap: 0.6rem;
}

.mgmt-trade-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.75rem;
  align-items: start;
}

.mgmt-trade-side {
  background: rgba(var(--fg-rgb),0.03);
  border: 1px solid rgba(var(--fg-rgb),0.08);
  border-radius: 7px;
  overflow: hidden;
}

.mgmt-trade-side-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb),0.45);
  padding: 0.45rem 0.65rem;
  background: rgba(var(--fg-rgb),0.04);
  border-bottom: 1px solid rgba(var(--fg-rgb),0.07);
}

.mgmt-trade-player-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  min-height: 48px;
}

.mgmt-trade-empty-side {
  font-size: 0.75rem;
  color: rgba(var(--fg-rgb),0.25);
  padding: 0.5rem 0.65rem;
  font-style: italic;
}

.mgmt-trade-player-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.05);
}

.mgmt-trade-player-chip:last-child {
  border-bottom: none;
}

.mgmt-trade-chip-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #e7edf5;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgmt-trade-chip-pos,
.mgmt-trade-chip-team {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(var(--fg-rgb),0.4);
  background: rgba(var(--fg-rgb),0.06);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.mgmt-trade-chip-team {
  color: var(--accent, rgb(var(--accent-teal-rgb)));
  background: rgba(var(--accent-teal-rgb),0.1);
}

.mgmt-trade-chip-remove {
  background: transparent;
  border: none;
  color: rgba(var(--fg-rgb),0.3);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.1rem;
  flex-shrink: 0;
  transition: color 0.15s;
}

.mgmt-trade-chip-remove:hover {
  color: var(--danger, #e05);
}

.mgmt-trade-add-row {
  display: flex;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  border-top: 1px solid rgba(var(--fg-rgb),0.07);
  background: rgba(var(--fg-rgb),0.02);
}

.mgmt-trade-want-add-row {
  flex-wrap: wrap;
}

.mgmt-trade-add-sel {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  padding: 0.25rem 0.4rem;
}

.mgmt-trade-add-btn {
  background: rgba(var(--fg-rgb),0.08);
  border: 1px solid rgba(var(--fg-rgb),0.15);
  border-radius: 4px;
  color: rgba(var(--fg-rgb),0.7);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0.25rem 0.5rem;
  transition: background 0.15s, color 0.15s;
}

.mgmt-trade-add-btn:hover {
  background: var(--accent, rgb(var(--accent-teal-rgb)));
  border-color: var(--accent, rgb(var(--accent-teal-rgb)));
  color: #000;
}

.mgmt-trade-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: rgba(var(--fg-rgb),0.2);
  padding-top: 2rem;
  user-select: none;
}

textarea.mgmt-form-input {
  resize: vertical;
  min-height: 70px;
}

/* ── 3-team trade proposal builder ───────────────────────────────────────── */

.mgmt-trade-mode-row {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.mgmt-trade-mode-btn {
  flex: 1;
}

.mgmt-trade-team-pick-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.mgmt-trade-team-pick-row select {
  flex: 1;
  min-width: 120px;
}

.mgmt-trade-3sides {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.mgmt-trade-3sides .mgmt-trade-side-label small {
  opacity: 0.6;
  font-weight: 600;
}

@media (max-width: 720px) {
  .mgmt-trade-3sides {
    grid-template-columns: 1fr;
  }
}

.mgmt-proposal-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mgmt-proposal-approve-btn,
.mgmt-proposal-deny-btn {
  flex: 1;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid rgba(var(--fg-rgb),0.15);
  background: rgba(var(--fg-rgb),0.06);
  color: rgba(var(--fg-rgb),0.75);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.mgmt-proposal-approve-btn:hover {
  background: rgba(60,200,120,0.18);
  border-color: rgba(60,200,120,0.5);
  color: #7cf0a8;
}

.mgmt-proposal-deny-btn:hover {
  background: rgba(255,78,112,0.18);
  border-color: rgba(255,78,112,0.5);
  color: #ff8fa3;
}

.mgmt-proposal-approve-btn:disabled,
.mgmt-proposal-deny-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.mgmt-proposal-status-line {
  font-size: 0.72rem;
  color: rgba(var(--fg-rgb),0.45);
  margin-top: 0.35rem;
}

.mgmt-modal-footer {
  display: flex;
  gap: 0.55rem;
  justify-content: flex-end;
  align-items: center;
  padding: 0.85rem 1.35rem 1.1rem;
  border-top: 1px solid rgba(var(--fg-rgb),0.07);
  background: rgba(0,0,0,0.18);
}

.mgmt-modal-cancel {
  background: transparent !important;
  color: rgba(var(--fg-rgb),0.55) !important;
  border: 1px solid rgba(var(--fg-rgb),0.1) !important;
  font-size: 0.82rem !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}
.mgmt-modal-cancel:hover {
  background: rgba(var(--fg-rgb),0.06) !important;
  color: rgba(var(--fg-rgb),0.85) !important;
  border-color: rgba(var(--fg-rgb),0.18) !important;
}

.mgmt-modal-submit {
  background: var(--accent, rgb(var(--accent-teal-rgb))) !important;
  color: #000 !important;
  border-color: var(--accent, rgb(var(--accent-teal-rgb))) !important;
  font-weight: 700;
  font-size: 0.82rem !important;
  transition: opacity 0.15s !important;
}
.mgmt-modal-submit:hover {
  opacity: 0.88;
}

.mgmt-drop-confirm-btn {
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  color: #fff !important;
}

/* ── Panel title row (Upcoming Opponents, etc.) ──────────────────────────────── */

.mgmt-panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--fg-rgb),0.06);
  border-bottom: 1px solid rgba(var(--fg-rgb),0.08);
}

.mgmt-panel-title-row .mgmt-panel-title {
  padding: 0;
  background: none;
  border: none;
}

/* Upcoming Opponents header matches the team-color bar used on the
   standings/roster table headers, rather than the muted panel-title style
   shared by Trade Block/IR/etc. */
.mgmt-upcoming-wrap > .mgmt-panel-title-row {
  background: var(--mgmt-team-color, #1a2030);
  border-bottom: none;
}

.mgmt-upcoming-wrap > .mgmt-panel-title-row .mgmt-panel-title {
  color: var(--mgmt-header-text, #fff);
  letter-spacing: 0.1em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

/* ── Upload Game Stats section ── */

.mgmt-upload-stats-wrap {
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(var(--fg-rgb),0.08);
  overflow: hidden;
  margin-top: 1.2rem;
}

.mgmt-upload-stats-wrap > .mgmt-panel-title-row {
  background: var(--mgmt-team-color, #1a2030);
  border-bottom: none;
}

.mgmt-upload-stats-wrap > .mgmt-panel-title-row .mgmt-panel-title {
  color: var(--mgmt-header-text, #fff);
  letter-spacing: 0.1em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}

.mgmt-upload-stats-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  flex-wrap: wrap;
}

.mgmt-upload-game-select {
  min-width: 220px;
}

.mgmt-upload-file-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.mgmt-upload-status {
  padding: 0 1.1rem;
  font-size: 0.82rem;
  min-height: 1.2em;
}

.mgmt-upload-status.is-success { color: #4dd88a; }
.mgmt-upload-status.is-error   { color: #f66; }
.mgmt-upload-status.is-warn    { color: #f5a623; }

.mgmt-upload-review-note {
  margin: 0.75rem 0 0.25rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(245, 166, 35, 0.35);
  border-radius: 8px;
  background: rgba(245, 166, 35, 0.1);
  color: #f5c777;
  font-size: 0.8rem;
  line-height: 1.45;
}

.mgmt-upload-lineup-note {
  margin: 0.6rem 0 0.25rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(var(--blue-soft-rgb), 0.3);
  border-radius: 8px;
  background: rgba(var(--blue-soft-rgb), 0.08);
  color: var(--pale-blue);
  font-size: 0.78rem;
  line-height: 1.45;
}

.mgmt-upload-pos-sel {
  padding: 2px 6px;
  font-size: 0.75rem;
  min-width: 60px;
}

.mgmt-upload-pos-cell.is-dup { background: rgba(245, 166, 35, 0.12); }

.mgmt-upload-toi-input {
  width: 68px;
  padding: 3px 6px;
  font-size: 0.78rem;
  text-align: center;
  color: #fff;
  background: rgba(var(--fg-rgb), 0.08);
  border: 1px solid rgba(var(--fg-rgb), 0.2);
  border-radius: 6px;
}

.mgmt-upload-toi-input:focus {
  outline: none;
  border-color: rgba(var(--blue-soft-rgb), 0.6);
}

.mgmt-upload-verify {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  color: rgba(var(--fg-rgb), 0.85);
  cursor: pointer;
}

.mgmt-upload-verify input { cursor: pointer; }

#mgmt-upload-gate { padding: 0; margin-top: 0.5rem; }

.mgmt-upload-preview {
  padding: 0 1.1rem 1.1rem;
}

.mgmt-upload-table-wrap {
  overflow-x: auto;
  margin-top: 0.75rem;
}

.mgmt-upload-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  white-space: nowrap;
}

.mgmt-upload-table th {
  background: rgba(var(--fg-rgb),0.06);
  padding: 6px 10px;
  text-align: center;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb),0.65);
  border-bottom: 1px solid rgba(var(--fg-rgb),0.1);
}

.mgmt-upload-table th:first-child {
  text-align: left;
}

.mgmt-upload-table td {
  padding: 5px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.05);
  color: rgba(var(--fg-rgb),0.85);
}

.mgmt-upload-table td:first-child {
  text-align: left;
  font-weight: 600;
}

.mgmt-upload-table tbody tr:hover {
  background: rgba(var(--fg-rgb),0.04);
}

/* ── Trade Block panel: league-wide directory / own-team tabs + filters ── */

.mgmt-tb-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.08);
}

.mgmt-tb-tab {
  flex: 1;
  padding: 0.55rem 0.75rem;
  background: rgba(var(--fg-rgb),0.03);
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(var(--fg-rgb),0.55);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.mgmt-tb-tab:hover {
  color: rgba(var(--fg-rgb),0.85);
  background: rgba(var(--fg-rgb),0.05);
}

.mgmt-tb-tab.is-active {
  color: #e7edf5;
  background: rgba(var(--fg-rgb),0.06);
  border-bottom-color: var(--accent, rgb(var(--accent-teal-rgb)));
}

.mgmt-tb-filters {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--fg-rgb),0.02);
  border-bottom: 1px solid rgba(var(--fg-rgb),0.06);
}

.mgmt-tb-filters .mgmt-form-select {
  flex: 1;
  min-width: 0;
}

.mgmt-tb-list .mgmt-panel-team {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(var(--fg-rgb),0.5);
  white-space: nowrap;
}

/* ── Registered Players (management hub) ────────────────────────────────────── */

.mgmt-regplayers-section {
  margin: 1.25rem 2rem 0;
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 10px;
  background: rgba(var(--fg-rgb),0.02);
  padding: 1rem 1.25rem 1.25rem;
}

.mgmt-regplayers-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.85rem;
}

.mgmt-regplayers-tab {
  background: transparent;
  border: 1px solid rgba(var(--fg-rgb),0.15);
  border-radius: 4px;
  color: rgba(var(--fg-rgb),0.5);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 0.22rem 0.65rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.mgmt-regplayers-tab.is-active {
  background: rgba(var(--accent-teal-rgb),0.12);
  border-color: var(--accent, rgb(var(--accent-teal-rgb)));
  color: var(--accent, rgb(var(--accent-teal-rgb)));
}

.mgmt-regplayers-tab:hover:not(.is-active) {
  border-color: rgba(var(--fg-rgb),0.35);
  color: rgba(var(--fg-rgb),0.85);
}

.mgmt-regplayers-status-tab {
  background: transparent;
  border: 1px solid rgba(var(--fg-rgb),0.15);
  border-radius: 4px;
  color: rgba(var(--fg-rgb),0.5);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  padding: 0.22rem 0.75rem;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.mgmt-regplayers-status-tab.is-active {
  background: rgba(var(--mgmt-team-color, 0,188,188), 0.12);
  background: color-mix(in srgb, var(--mgmt-team-color, rgb(var(--accent-teal-rgb))) 15%, transparent);
  border-color: var(--mgmt-team-color, rgb(var(--accent-teal-rgb)));
  color: var(--mgmt-team-color, rgb(var(--accent-teal-rgb)));
}

.mgmt-regplayers-status-tab:hover:not(.is-active) {
  border-color: rgba(var(--fg-rgb),0.35);
  color: rgba(var(--fg-rgb),0.85);
}

@media (max-width: 640px) {
  .mgmt-regplayers-section {
    margin: 1rem 0.75rem 0;
  }
}

/* ── Pending Trade Requests (management hub) ─────────────────────────────────── */

.mgmt-pending-section {
  margin: 1.25rem 2rem 1rem;
  border: 1px solid rgba(255, 226, 166, 0.2);
  border-radius: 10px;
  background: rgba(255, 210, 100, 0.04);
  padding: 1rem 1.25rem 1.25rem;
}

.mgmt-pending-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.mgmt-pending-header h3 {
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffe2a6;
  margin: 0;
}

.mgmt-pending-count {
  font-size: 0.72rem;
  color: rgba(255, 226, 166, 0.55);
  font-weight: 700;
}

.mgmt-pending-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mgmt-pending-req {
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--fg-rgb), 0.09);
  border-radius: 7px;
  padding: 0.75rem 1rem;
}

.mgmt-pending-req-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.mgmt-pending-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: rgba(255, 226, 166, 0.14);
  color: #ffe2a6;
  border: 1px solid rgba(255, 226, 166, 0.2);
}

.mgmt-pending-date {
  font-size: 0.7rem;
  color: rgba(var(--fg-rgb), 0.4);
}

.mgmt-pending-req-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: rgba(var(--fg-rgb), 0.75);
  margin-bottom: 0.6rem;
}

.mgmt-pending-label {
  font-weight: 700;
  color: rgba(var(--fg-rgb), 0.45);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.3rem;
}

.mgmt-pending-cancel-btn,
.mgmt-pending-dismiss-btn {
  padding: 0.3rem 0.75rem;
  font-size: 0.74rem;
  font-weight: 700;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.mgmt-pending-cancel-btn {
  border: 1px solid rgba(255, 138, 138, 0.35);
  background: rgba(255, 138, 138, 0.08);
  color: #ff8a8a;
}

.mgmt-pending-cancel-btn:hover {
  background: rgba(255, 138, 138, 0.16);
  border-color: rgba(255, 138, 138, 0.55);
}

.mgmt-pending-dismiss-btn {
  border: 1px solid rgba(var(--fg-rgb), 0.15);
  background: rgba(var(--fg-rgb), 0.05);
  color: rgba(var(--fg-rgb), 0.55);
}

.mgmt-pending-dismiss-btn:hover {
  background: rgba(var(--fg-rgb), 0.09);
  color: rgba(var(--fg-rgb), 0.75);
}

.mgmt-pending-cancel-btn:disabled,
.mgmt-pending-dismiss-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mgmt-pending-badge.is-denied {
  background: rgba(255, 138, 138, 0.14);
  color: #ff8a8a;
  border-color: rgba(255, 138, 138, 0.3);
}

.mgmt-pending-req.is-denied {
  border-color: rgba(255, 138, 138, 0.2);
  background: rgba(255, 138, 138, 0.04);
}

.mgmt-pending-denied-note {
  font-size: 0.76rem;
  color: #ff8a8a;
  font-style: italic;
  margin: 0.1rem 0 0.5rem;
  line-height: 1.4;
}

/* Deny button in admin Trade Requests panel */
.txn-req-deny-btn {
  border-color: rgba(255, 138, 138, 0.4) !important;
  color: #ff8a8a !important;
  background: rgba(255, 138, 138, 0.08) !important;
}

.txn-req-deny-btn:hover {
  background: rgba(255, 138, 138, 0.16) !important;
}

@media (max-width: 640px) {
  .mgmt-pending-section {
    margin: 1rem 0.75rem 0.75rem;
  }
}

/* ── Position Compliance (management hub) ────────────────────────────────────── */

.mgmt-compliance-card {
  margin-top: 0.75rem;
  border-radius: 8px;
}

/* ── OVR badge (management hub) ─────────────────────────────────────────────── */

.mgmt-ovr-cell {
  text-align: center;
  white-space: nowrap;
}

.mgmt-ovr-badge {
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

.mgmt-ovr-high {
  background: rgba(96, 220, 120, 0.15);
  border-color: rgba(96, 220, 120, 0.4);
  color: rgb(116, 236, 140);
}

.mgmt-ovr-mid {
  background: rgba(250, 200, 80, 0.12);
  border-color: rgba(250, 200, 80, 0.35);
  color: rgb(250, 210, 100);
}

.mgmt-ovr-low {
  background: rgba(var(--fg-rgb), 0.06);
  border-color: rgba(var(--fg-rgb), 0.12);
  color: rgba(var(--fg-rgb), 0.6);
}

.mgmt-ovr-none {
  background: transparent;
  border-color: transparent;
  color: rgba(var(--fg-rgb), 0.25);
}

/* ── Player name links ───────────────────────────────────────────────────────── */

.mgmt-name-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(var(--fg-rgb),0.2);
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.mgmt-name-link:hover {
  color: var(--accent, rgb(var(--accent-teal-rgb)));
  text-decoration-color: var(--accent, rgb(var(--accent-teal-rgb)));
}

/* ── Player stats modal ──────────────────────────────────────────────────────── */

.mgmt-player-modal-card {
  width: min(600px, 96vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.mgmt-player-tabs {
  display: flex;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.08);
}

.mgmt-player-tab {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(var(--fg-rgb),0.5);
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.6rem 1rem;
  text-transform: uppercase;
  transition: color 0.15s, border-color 0.15s;
}

.mgmt-player-tab.is-active {
  border-bottom-color: var(--accent, rgb(var(--accent-teal-rgb)));
  color: var(--accent, rgb(var(--accent-teal-rgb)));
}

.mgmt-player-tab:hover:not(.is-active) {
  color: rgba(var(--fg-rgb),0.8);
}

.mgmt-player-modal-body {
  overflow-y: auto;
  flex: 1;
}

.mgmt-stats-table-wrap {
  overflow-x: auto;
}

.mgmt-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  white-space: nowrap;
}

.mgmt-stats-table th {
  background: rgba(var(--fg-rgb),0.05);
  color: rgba(var(--fg-rgb),0.5);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.45rem 0.6rem;
  text-align: center;
  text-transform: uppercase;
}

.mgmt-stats-table th:first-child {
  text-align: left;
}

.mgmt-stats-table td {
  border-bottom: 1px solid rgba(var(--fg-rgb),0.05);
  color: #e7edf5;
  padding: 0.4rem 0.6rem;
  text-align: center;
}

.mgmt-stats-table td:first-child {
  text-align: left;
  color: rgba(var(--fg-rgb),0.8);
  font-size: 0.75rem;
}

.mgmt-stats-table tr:hover td {
  background: rgba(var(--fg-rgb),0.03);
}

/* ── Hub button (header, all pages) ─────────────────────────────────────────── */

.mgmt-hub-button {
  border-color: var(--cyan, var(--cyan)) !important;
  color: var(--cyan, var(--cyan)) !important;
  background: rgba(var(--blue-soft-rgb), 0.07) !important;
}

.mgmt-hub-button:hover,
.mgmt-hub-button:focus-visible {
  background: rgba(var(--blue-soft-rgb), 0.18) !important;
  box-shadow: 0 0 22px rgba(var(--blue-soft-rgb), 0.28) !important;
  color: #ffffff !important;
}

/* ── Admin Setup Tool ────────────────────────────────────────────────────────── */

.ms-textarea {
  width: 100%;
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--fg-rgb),0.12);
  border-radius: 5px;
  color: #e7edf5;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
}

.ms-input {
  flex: 1;
  min-width: 0;
  background: rgba(var(--fg-rgb),0.06);
  border: 1px solid rgba(var(--fg-rgb),0.12);
  border-radius: 5px;
  color: #e7edf5;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  box-sizing: border-box;
}

.ms-password-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.ms-generated-note {
  font-size: 0.78rem;
  color: var(--accent);
  margin: 0.3rem 0 0;
  font-family: monospace;
}

.ms-form-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}

.ms-status {
  font-size: 0.82rem;
  margin: 0;
}

/* Lets the table scroll horizontally on narrow viewports instead of
   overflowing the page width — the Managers/Password/Actions columns
   don't have room to fit AND wrap cleanly at mobile widths. */
#ms-team-list-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ms-config-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.ms-config-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(var(--fg-rgb),0.5);
  border-bottom: 1px solid rgba(var(--fg-rgb),0.1);
}

.ms-config-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.05);
  color: #d8e0ea;
  vertical-align: middle;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .mgmt-hub-body,
  .mgmt-schedule-tab-body {
    grid-template-columns: 1fr;
  }

  .mgmt-upcoming-col {
    flex-basis: 100%;
  }

  .mgmt-hub-header {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    padding: 0.75rem 1rem;
  }

  .mgmt-team-badge {
    grid-column: 1;
    grid-row: 1;
  }

  .mgmt-hub-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
  }

  .mgmt-logout-btn {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    font-size: 0.7rem;
    padding: 0.25rem 0.65rem;
    min-width: unset;
  }
}

@media (max-width: 900px) {
  .mgmt-team-identity {
    display: none;
  }
}

@media (max-width: 600px) {
  .mgmt-hub-header {
    padding: 0.6rem 0.75rem;
  }

  .mgmt-hub-body,
  .mgmt-schedule-tab-body {
    padding: 0 0.75rem 1.5rem;
  }

  .mgmt-section-tabs {
    margin: 0 0.75rem 1rem;
  }

  .mgmt-hub-body > *,
  .mgmt-schedule-tab-body > * {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .mgmt-table-wrap,
  .mgmt-targets-wrap,
  .mgmt-schedule-wrap {
    overflow-x: auto;
  }

  .mgmt-team-logo {
    height: 2.4rem;
  }

  .mgmt-logout-btn {
    font-size: 0.65rem;
    padding: 0.2rem 0.55rem;
  }
}

/* ══════════════════════════════════════════
   Rulebook — Public Page
══════════════════════════════════════════ */

/* ── Hero ── */
.rulebook-hero {
  position: relative;
  overflow: hidden;
  /* 20% shorter than the base .stats-hero vertical padding */
  padding-top: clamp(1.3rem, 3.2vw, 2.4rem);
  padding-bottom: clamp(0.9rem, 2.1vw, 1.45rem);
}

.rulebook-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 88% 30%, rgba(var(--accent-strong-rgb), 0.14), transparent 24rem);
  pointer-events: none;
}

.rulebook-hero-inner {
  position: relative;
  z-index: 1;
}

.rulebook-hero h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.02;
  background: linear-gradient(178deg, var(--text) 35%, var(--pale-blue) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rulebook-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.rb-meta-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.05);
  color: var(--text-soft);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.rb-meta-chip.rb-meta-version {
  border-color: rgba(var(--accent-strong-rgb), 0.45);
  background: rgba(var(--accent-strong-rgb), 0.14);
  color: var(--steel-blue);
}

/* ── Layout ── */
.rulebook-layout {
  display: grid;
  grid-template-columns: 258px 1fr;
  gap: 2.75rem;
  align-items: start;
  max-width: 1140px;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 5rem;
}

/* ── Sidebar ── */
.rulebook-sidebar {
  position: sticky;
  top: 5rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: 1.1rem 0.9rem 1.25rem;
  background: rgba(var(--surface-panel-rgb), 0.72);
  border: 1px solid rgba(var(--fg-rgb), 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.rulebook-sidebar-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.25rem 0.8rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.rulebook-sidebar-label::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--steel-blue);
  flex-shrink: 0;
}

.rulebook-search-wrap {
  margin-bottom: 1rem;
}

.rulebook-search-box {
  position: relative;
}

.rulebook-search-icon {
  position: absolute;
  left: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}

.rulebook-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.75rem 0.55rem 2.05rem;
  background: rgba(var(--fg-rgb), 0.05);
  border: 1px solid rgba(var(--fg-rgb), 0.12);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.rulebook-search-input::placeholder {
  color: var(--muted);
}

.rulebook-search-input:focus {
  border-color: rgba(var(--accent-strong-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--accent-strong-rgb), 0.12);
}

.rulebook-search-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
  min-height: 1.1rem;
}

.rulebook-search-count {
  padding-left: 0.15rem;
  font-size: 0.74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.rulebook-search-nav {
  display: flex;
  gap: 0.3rem;
  margin-left: auto;
}

.rb-search-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.3);
  border-radius: 5px;
  background: rgba(var(--accent-strong-rgb), 0.08);
  color: var(--steel-blue);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.rb-search-arrow:hover {
  background: rgba(var(--accent-strong-rgb), 0.2);
  border-color: rgba(var(--accent-strong-rgb), 0.55);
}

.rulebook-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rulebook-nav-link {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  color: rgba(var(--text-soft-rgb), 0.78);
  font-size: 0.84rem;
  text-decoration: none;
  border-radius: 7px;
  border-left: 2px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s, opacity 0.15s;
  line-height: 1.35;
}

.rulebook-nav-link:hover {
  color: var(--text);
  background: rgba(var(--fg-rgb), 0.05);
}

.rulebook-nav-link.is-active {
  color: var(--text);
  background: rgba(var(--accent-strong-rgb), 0.1);
  border-left-color: var(--steel-blue);
  font-weight: 600;
}

.rulebook-nav-link.is-dimmed {
  opacity: 0.2;
}

.rb-nav-num {
  color: var(--steel-blue);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 1.1em;
  flex-shrink: 0;
}

.rb-nav-title {
  flex: 1 1 auto;
  min-width: 0;
}

.rb-nav-count {
  align-self: center;
  flex-shrink: 0;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: background 0.15s, color 0.15s;
}

.rulebook-nav-link.is-active .rb-nav-count {
  background: rgba(var(--accent-strong-rgb), 0.18);
  color: var(--steel-blue);
}

/* ── Main content ── */
.rulebook-main {
  min-width: 0;
}

.rulebook-loading,
.rulebook-empty {
  color: var(--muted);
  padding: 3rem 0;
  font-size: 0.95rem;
}

.rulebook-error {
  color: var(--red);
}

/* ── Section card (one section shown at a time, switched from the sidebar) ── */
.rulebook-section {
  display: none;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.75rem;
  padding: 1.5rem 1.75rem 1.1rem;
  background: rgba(var(--surface-panel-rgb), 0.55);
  border: 1px solid rgba(var(--fg-rgb), 0.07);
  border-radius: 14px;
  scroll-margin-top: 5.5rem;
}

@keyframes rb-sec-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.rulebook-section.is-active-section {
  display: block;
  animation: rb-sec-in 0.25s ease;
}

.rulebook-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(var(--accent-strong-rgb), 0.7), rgba(var(--accent-strong-rgb), 0.08) 55%, transparent);
}

/* Oversized ghost section number in the card's top-right corner (JS stamps
   data-num on each section element). */
.rulebook-section::after {
  content: attr(data-num);
  position: absolute;
  top: -1.4rem;
  right: 0.6rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 7rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(var(--fg-rgb), 0.04);
  pointer-events: none;
  user-select: none;
}

.rulebook-section.is-section-dimmed {
  opacity: 0.15;
  transition: opacity 0.2s;
}

.rulebook-section-heading {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.45rem;
  font-weight: 800;
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0 0 0.6rem;
}

.rulebook-section-heading .rb-sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 0.45rem;
  background: linear-gradient(145deg, rgba(var(--accent-strong-rgb), 0.28), rgba(var(--accent-strong-rgb), 0.08));
  border: 1px solid rgba(var(--accent-strong-rgb), 0.4);
  border-radius: 8px;
  color: var(--steel-blue);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.rulebook-section-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--accent-strong-rgb), 0.3), transparent);
  margin-bottom: 0.35rem;
}

/* ── Rules list (stacked header bar + full-width body panel) ── */
.rulebook-rules {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rulebook-rule {
  scroll-margin-top: 5.5rem;
  transition: opacity 0.15s;
}

.rulebook-rule.is-dimmed {
  opacity: 0.12;
}

/* header bar: number chip + title on a tinted strip with an accent edge */
.rulebook-rule-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.8rem;
  background: rgba(var(--accent-strong-rgb), 0.09);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.22);
  border-left: 3px solid var(--steel-blue);
  border-radius: 0 8px 8px 0;
  transition: background 0.15s;
}

.rulebook-rule.is-match .rulebook-rule-header {
  background: rgba(var(--accent-strong-rgb), 0.17);
}

@keyframes rb-rule-flash {
  0% { background: rgba(var(--accent-strong-rgb), 0.35); }
  100% { background: rgba(var(--accent-strong-rgb), 0.09); }
}

.rulebook-rule.is-linked .rulebook-rule-header {
  animation: rb-rule-flash 1.6s ease-out;
}

.rulebook-rule-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.16rem 0.5rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.35);
  border-radius: 6px;
  background: rgba(var(--accent-strong-rgb), 0.16);
  color: var(--steel-blue);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.rulebook-rule-number:hover {
  background: rgba(var(--accent-strong-rgb), 0.3);
  border-color: rgba(var(--accent-strong-rgb), 0.6);
}

.rulebook-rule-header .rulebook-rule-title {
  margin: 0;
  min-width: 0;
}

/* body panel attached under the header */
.rulebook-rule-content {
  min-width: 0;
  padding: 0.75rem 0.95rem 0.85rem;
  background: rgba(var(--surface-deep-rgb), 0.6);
  border: 1px solid rgba(var(--fg-rgb), 0.06);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  color: rgba(var(--text-soft-rgb), 0.92);
  font-size: 0.94rem;
  line-height: 1.7;
}

/* a rule with no body text: header bar stands alone */
.rulebook-rule-content:empty {
  display: none;
}

.rulebook-rule-title {
  margin: 0 0 0.45rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.rulebook-rule-content p {
  margin: 0 0 0.5rem;
}

.rulebook-rule-content p:last-child,
.rulebook-rule-content .rb-list:last-child {
  margin-bottom: 0;
}

.rulebook-rule-content .rb-subhead {
  margin-top: 0.9rem;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-blue);
}

.rulebook-rule-content .rb-list {
  margin: 0 0 0.6rem;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.rulebook-rule-content .rb-list li::marker {
  color: rgba(var(--accent-strong-rgb), 0.75);
}

mark.rb-match {
  background: rgba(255, 210, 0, 0.28);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

/* the occurrence the search is currently cycled to */
mark.rb-match.is-current {
  background: #ffd200;
  color: #10151c;
  box-shadow: 0 0 0 2px rgba(255, 210, 0, 0.35);
}

/* ── Inline formatting (rendered from **bold** / *italic* / __underline__ /
   ~~strike~~ / ==highlight== markers in rule text) ── */
mark.rb-hl {
  background: rgba(var(--accent-strong-rgb), 0.22);
  color: inherit;
  border-radius: 3px;
  padding: 0 3px;
}

.rulebook-rule-content strong,
.mgmt-rb-rule-text strong,
.rb-rule-preview strong {
  color: var(--text);
  font-weight: 700;
}

.rulebook-rule-content u,
.mgmt-rb-rule-text u,
.rb-rule-preview u {
  text-decoration-color: rgba(var(--accent-strong-rgb), 0.7);
  text-underline-offset: 2px;
}

.rulebook-rule-content s,
.mgmt-rb-rule-text s,
.rb-rule-preview s {
  opacity: 0.65;
}

/* ── Rule tables (from "| a | b |" pipe rows) ── */
.rb-table-wrap {
  overflow-x: auto;
  margin: 0.4rem 0 0.75rem;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 10px;
  background: rgba(var(--surface-deep-rgb), 0.4);
}

.rb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.5;
}

.rb-table th {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: left;
  color: var(--steel-blue);
  background: rgba(var(--accent-strong-rgb), 0.08);
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid rgba(var(--accent-strong-rgb), 0.35);
  white-space: nowrap;
}

.rb-table td {
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.05);
  vertical-align: top;
}

.rb-table tbody tr:nth-child(even) td {
  background: rgba(var(--fg-rgb), 0.02);
}

.rb-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ── Back to top ── */
.rulebook-top-btn {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.35);
  background: rgba(var(--surface-mid-rgb), 0.92);
  color: var(--steel-blue);
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s, background 0.15s;
  backdrop-filter: blur(6px);
}

.rulebook-top-btn svg {
  width: 18px;
  height: 18px;
}

.rulebook-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.rulebook-top-btn:hover {
  background: rgba(var(--accent-strong-rgb), 0.2);
}

@media (max-width: 768px) {
  .rulebook-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.25rem 1rem 3rem;
  }

  .rulebook-sidebar {
    position: static;
    max-height: none;
    padding: 0.9rem 0.8rem 1rem;
  }

  /* Nav collapses to a horizontally scrollable chip rail. */
  .rulebook-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 0.4rem;
    padding-bottom: 0.35rem;
    -webkit-overflow-scrolling: touch;
  }

  .rulebook-nav-link {
    flex-shrink: 0;
    align-items: center;
    padding: 0.38rem 0.75rem;
    border: 1px solid rgba(var(--fg-rgb), 0.12);
    border-radius: 999px;
    white-space: nowrap;
  }

  .rulebook-nav-link.is-active {
    border-color: rgba(var(--accent-strong-rgb), 0.5);
  }

  .rb-nav-count {
    display: none;
  }

  .rulebook-section {
    padding: 1.15rem 1rem 0.8rem;
  }

  .rulebook-section::after {
    font-size: 4.5rem;
    top: -0.9rem;
  }

  .rulebook-section-heading {
    font-size: 1.2rem;
  }

  .rulebook-rule-header {
    padding: 0.5rem 0.65rem;
  }

  .rulebook-rule-content {
    padding: 0.65rem 0.75rem 0.75rem;
  }
}

/* Print: clean black-on-white document — chrome, sidebar, and decorations
   dropped; tokens are dark-theme-tuned so colors are pinned explicitly. */
@media print {
  body {
    background: #fff !important;
    color: #111 !important;
  }

  body::before,
  body::after,
  .arena-glow,
  .site-header,
  .site-footer,
  .rulebook-sidebar,
  .rulebook-top-btn,
  #agl-chat-tab,
  #agl-chat-drawer {
    display: none !important;
  }

  .rulebook-hero {
    background: none !important;
    border-bottom: 2px solid #111;
    padding: 0 0 0.75rem;
  }

  .rulebook-hero::before {
    display: none;
  }

  .rulebook-hero h1 {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: #000;
  }

  .rulebook-hero p:not(.eyebrow),
  .rulebook-hero .eyebrow,
  .rb-meta-chip {
    color: #333 !important;
  }

  .rb-meta-chip {
    border-color: #999;
    background: none;
  }

  .rulebook-layout {
    display: block;
    padding: 1rem 0 0;
  }

  .rulebook-section {
    display: block !important;   /* print every section, not just the active one */
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin-bottom: 1.5rem;
    overflow: visible;
    break-inside: avoid-page;
  }

  .rulebook-section::before,
  .rulebook-section::after {
    display: none;
  }

  .rulebook-section-heading,
  .rulebook-rule-title {
    color: #000;
  }

  .rulebook-section-heading .rb-sec-num {
    background: none;
    border-color: #333;
    color: #000;
  }

  .rulebook-section-divider {
    background: #ccc;
  }

  .rulebook-rule {
    break-inside: avoid;
  }

  .rulebook-rule-header {
    background: none;
    border: 0;
    border-bottom: 1px solid #999;
    border-radius: 0;
    padding: 0.2rem 0;
  }

  .rulebook-rule-number {
    background: none;
    border-color: #999;
    color: #333;
  }

  .rulebook-rule-content {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0.35rem 0 0.6rem;
    color: #222;
  }

  .rulebook-rule-content .rb-subhead {
    color: #333;
  }

  mark.rb-hl {
    background: #eee;
    color: #111;
  }

  .rb-table-wrap {
    border-color: #ccc;
    background: none;
    overflow: visible;
  }

  .rb-table th {
    color: #000;
    background: none;
    border-bottom-color: #333;
  }

  .rb-table td {
    color: #222;
    border-bottom-color: #ddd;
  }

  .rb-table tbody tr:nth-child(even) td {
    background: none;
  }
}

/* ══════════════════════════════════════════
   Rulebook — Admin Tools
══════════════════════════════════════════ */

.rb-upload-area {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.rb-file-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.rb-file-label span {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.35);
  border-radius: 6px;
  color: var(--steel-blue);
  font-size: 0.85rem;
  transition: background 0.15s, border-color 0.15s;
}

.rb-file-label:hover span {
  background: rgba(var(--accent-strong-rgb), 0.1);
  border-color: rgba(var(--accent-strong-rgb), 0.55);
}

.rb-file-input {
  display: none;
}

.rb-upload-divider {
  color: rgba(226, 232, 240, 0.4);
  font-size: 0.82rem;
}

.rb-paste-area {
  width: 100%;
  box-sizing: border-box;
  min-height: 280px;
  padding: 0.75rem;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
  border-radius: 6px;
  color: #e2e8f0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.84rem;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}

.rb-paste-area:focus {
  border-color: rgba(var(--accent-strong-rgb), 0.5);
}

.rb-parse-preview {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.18);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
}

.rb-preview-heading {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  color: rgba(226, 232, 240, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rb-preview-section {
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  color: #e2e8f0;
}

.rb-preview-rule-count {
  color: rgba(226, 232, 240, 0.45);
  font-size: 0.82rem;
}

.rb-preview-rules {
  margin: 0.35rem 0 0 1rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rb-preview-rules li {
  color: rgba(226, 232, 240, 0.65);
  font-size: 0.82rem;
}

.rb-preview-num {
  color: var(--steel-blue);
  font-weight: 600;
  margin-right: 0.4rem;
}

/* Edit panel */
.rb-sections-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rb-edit-loading {
  color: rgba(226, 232, 240, 0.45);
  font-size: 0.9rem;
}

.rb-section-card {
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
  border-radius: 8px;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rb-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.rb-section-header-fields {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.rb-sec-num-input {
  width: 4rem;
  padding: 0.4rem 0.5rem;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
  border-radius: 5px;
  color: var(--steel-blue);
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  outline: none;
}

.rb-sec-title-input {
  flex: 1;
  padding: 0.4rem 0.6rem;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.2);
  border-radius: 5px;
  color: #e2e8f0;
  font-size: 0.95rem;
  font-weight: 600;
  outline: none;
  min-width: 0;
}

.rb-sec-num-input:focus,
.rb-sec-title-input:focus {
  border-color: rgba(var(--accent-strong-rgb), 0.5);
}

.rb-rules-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 0.5rem;
}

.rb-rule-row {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  gap: 0.5rem;
  align-items: start;
}

.rb-rule-num-input {
  padding: 0.4rem 0.5rem;
  background: rgba(var(--fg-rgb), 0.05);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.15);
  border-radius: 5px;
  color: var(--steel-blue);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  outline: none;
}

.rb-rule-text-input {
  padding: 0.4rem 0.6rem;
  background: rgba(var(--fg-rgb), 0.04);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.15);
  border-radius: 5px;
  color: rgba(226, 232, 240, 0.85);
  font-size: 0.875rem;
  line-height: 1.5;
  resize: vertical;
  overflow-y: auto;
  min-height: 3rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.rb-rule-num-input:focus,
.rb-rule-text-input:focus {
  border-color: rgba(var(--accent-strong-rgb), 0.45);
}

.rb-section-footer {
  padding-top: 0.25rem;
}

.rb-delete-btn {
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.3);
  color: #fc8181;
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.rb-delete-btn:hover {
  background: rgba(220, 38, 38, 0.2);
  border-color: rgba(220, 38, 38, 0.55);
}

.rb-delete-rule-btn {
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  margin-top: 0.25rem;
}

/* ── Formatting toolbar (follows the focused rule textarea) ── */
.rb-fmt-toolbar {
  grid-column: 2;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0;
}

.rb-fmt-table {
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.rb-table-builder {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: rgba(var(--surface-mid-rgb), 0.98);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.35);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.rb-table-builder label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-soft);
  white-space: nowrap;
}

.rb-table-builder input {
  width: 3.2rem;
  padding: 0.3rem 0.4rem;
  background: rgba(var(--fg-rgb), 0.06);
  border: 1px solid rgba(var(--fg-rgb), 0.15);
  border-radius: 5px;
  color: var(--text);
  font-size: 0.8rem;
  outline: none;
}

.rb-table-builder input:focus {
  border-color: rgba(var(--accent-strong-rgb), 0.5);
}

.rb-tb-insert {
  color: var(--steel-blue);
  border-color: rgba(var(--accent-strong-rgb), 0.4);
  background: rgba(var(--accent-strong-rgb), 0.12);
}

/* ── Rulebook editions panel ── */
.rb-edition-save-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.rb-edition-save-row input {
  flex: 1 1 240px;
  padding: 0.5rem 0.75rem;
  background: rgba(var(--fg-rgb), 0.05);
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.875rem;
  outline: none;
}

.rb-edition-save-row input:focus {
  border-color: rgba(var(--accent-strong-rgb), 0.5);
}

.rb-editions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.rb-edition-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.7rem 0.9rem;
  background: rgba(var(--surface-mid-rgb), 0.6);
  border: 1px solid rgba(var(--fg-rgb), 0.09);
  border-radius: 9px;
}

.rb-edition-row.is-auto {
  background: rgba(var(--surface-deep-rgb), 0.45);
  border-style: dashed;
}

.rb-edition-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.rb-edition-label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}

.rb-edition-auto-badge {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.08);
  color: var(--muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rb-edition-meta {
  font-size: 0.76rem;
  color: var(--muted);
}

.rb-edition-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-shrink: 0;
}

.rb-edition-actions .utility-button {
  font-size: 0.75rem;
  padding: 0.32rem 0.7rem;
}

.rb-fmt-btn {
  min-width: 26px;
  height: 26px;
  padding: 0 0.45rem;
  border: 1px solid rgba(var(--fg-rgb), 0.15);
  border-radius: 5px;
  background: rgba(var(--fg-rgb), 0.05);
  color: var(--text-soft);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.rb-fmt-btn:hover {
  background: rgba(var(--accent-strong-rgb), 0.15);
  border-color: rgba(var(--accent-strong-rgb), 0.4);
  color: var(--text);
}

.rb-fmt-bold      { font-weight: 800; }
.rb-fmt-italic    { font-style: italic; }
.rb-fmt-underline { text-decoration: underline; text-underline-offset: 2px; }
.rb-fmt-strike    { text-decoration: line-through; }

.rb-fmt-highlight {
  background: rgba(var(--accent-strong-rgb), 0.18);
}

.rb-fmt-preview {
  margin-left: auto;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rb-fmt-preview.is-on {
  background: rgba(var(--accent-strong-rgb), 0.2);
  border-color: rgba(var(--accent-strong-rgb), 0.5);
  color: var(--steel-blue);
}

/* ── Formatted rule preview (renders like the public page) ── */
.rb-rule-preview {
  grid-column: 2;
  padding: 0.75rem 0.9rem;
  background: rgba(var(--surface-deep-rgb), 0.55);
  border: 1px dashed rgba(var(--fg-rgb), 0.16);
  border-radius: 8px;
  color: rgba(var(--text-soft-rgb), 0.92);
  font-size: 0.88rem;
  line-height: 1.65;
}

.rb-rule-preview p {
  margin: 0 0 0.5rem;
}

.rb-rule-preview p:last-child,
.rb-rule-preview .rb-list:last-child {
  margin-bottom: 0;
}

.rb-rule-preview .rulebook-rule-title {
  font-size: 1.05rem;
}

.rb-rule-preview .rb-subhead {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel-blue);
}

.rb-rule-preview .rb-list {
  margin: 0 0 0.6rem;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.rb-rule-preview .rb-list li::marker {
  color: rgba(var(--accent-strong-rgb), 0.75);
}

.rb-rule-preview .rb-preview-empty {
  color: var(--muted);
  font-style: italic;
}

.rb-fmt-hint code {
  padding: 0.05rem 0.3rem;
  background: rgba(var(--fg-rgb), 0.07);
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 4px;
  font-size: 0.8rem;
}

/* ════════════════════════════════════════════════
   JOIN PAGE
   ════════════════════════════════════════════════ */

.join-panel {
  max-width: 640px;
  margin: 0 auto;
}

.join-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.join-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.join-label-full {
  grid-column: 1 / -1;
}

.join-required {
  color: var(--color-accent);
  font-size: 0.85em;
}

.join-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.join-fieldset legend {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.join-radio-group {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.25rem;
}

.join-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Discord section on join page */
.join-discord-section {
  border-top: 1px solid var(--color-border);
  padding-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.join-discord-label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.join-discord-hint {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.join-discord-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #5865F2;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}

.join-discord-btn:hover {
  background: #4752C4;
}

/* Connected banner */
.join-discord-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(88, 101, 242, 0.12);
  border: 1px solid rgba(88, 101, 242, 0.35);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-size: 0.875rem;
  color: #a5b4fc;
  margin-bottom: 1rem;
}

.join-discord-unlink {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  text-decoration: underline;
}

.join-captcha {
  margin-bottom: 0.75rem;
}

.join-login-prompt {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* Success state */
.join-success {
  text-align: center;
  padding: 3rem 1rem;
}

.join-success-icon {
  width: 3.5rem;
  height: 3.5rem;
  background: rgba(34, 197, 94, 0.15);
  border: 2px solid rgba(34, 197, 94, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #4ade80;
  margin: 0 auto 1.25rem;
}

.join-success-sub {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

/* ════════════════════════════════════════════════
   MEMBERS DASHBOARD
   ════════════════════════════════════════════════ */

.member-login-wall {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--surface-panel-rgb), 0.96);
  backdrop-filter: blur(6px);
}

.member-login-card {
  width: min(420px, 92vw);
  background: var(--surface-2, #111827);
  border: 1px solid rgba(var(--fg-rgb),0.1);
  border-radius: 10px;
  padding: 2.2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

/* The card centers its flex children, so this wrapper (and the forms inside
   it) collapsed to the inputs' narrow intrinsic width — stretch it so the
   email/password fields span the card like the Discord button does. */
#member-login-step {
  width: 100%;
}

.member-discord-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 1rem;
  background: #5865F2;
  color: #fff;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.15s, opacity 0.15s;
  box-sizing: border-box;
  margin-top: 0.4rem;
}

.member-discord-login-btn:hover {
  background: #4752c4;
}

.member-login-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(var(--fg-rgb),0.3);
  font-size: 0.78rem;
  width: 100%;
  margin: 0.25rem 0;
}

.member-login-divider::before,
.member-login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(var(--fg-rgb),0.1);
}

.member-login-apply {
  font-size: 0.82rem;
  color: rgba(var(--fg-rgb),0.4);
  margin: 0.5rem 0 0;
  text-align: center;
}

.member-login-forgot {
  font-size: 0.78rem;
  margin: 0.6rem 0 0;
  text-align: center;
}

.member-login-forgot a {
  color: var(--gold);
  text-decoration: none;
}

.member-login-forgot a:hover {
  text-decoration: underline;
}

.member-login-apply a {
  color: var(--gold);
  text-decoration: none;
}

.member-login-apply a:hover {
  text-decoration: underline;
}

.member-dashboard {
  max-width: 680px;
  margin: 0 auto;
}

.member-dashboard-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.member-avatar {
  width: 3.25rem;
  height: 3.25rem;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.member-gamertag {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

.member-logout-btn {
  margin-left: auto;
}

.member-section {
  margin-bottom: 1.75rem;
}

.member-section-title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.member-info-hint {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}

.member-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
}

.member-info-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.member-info-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.member-info-value {
  font-size: 0.9375rem;
}

/* ════════════════════════════════════════════════
   PLAYER DASHBOARD (members.html)
   ════════════════════════════════════════════════ */

.member-dashboard {
  --plr-team: var(--gold);
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.member-dashboard[hidden],
.member-login-wall[hidden],
.member-login-card[hidden],
.plr-hero[hidden] {
  display: none !important;
}

/* ── Hero — full-width gradient bar ── */
.plr-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0;
  overflow: hidden;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  padding: 2.5rem 3.5rem;
  gap: 2.5rem;
  height: 240px;       /* fixed height prevents logo blowout */
  transition: background 0.4s;
}

/* Left: name + inline logo, sub-row below */
.plr-hero-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.plr-hero-name-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.plr-hero-name {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: 5.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Team logo inline, right of the player name */
.plr-hero-logo-inline {
  width: 104px;
  height: 104px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
  transition: transform 0.15s ease, filter 0.15s ease;
}

#plr-team-logo-link:hover .plr-hero-logo-inline,
#plr-team-logo-link:focus-visible .plr-hero-logo-inline {
  transform: scale(1.08);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4)) drop-shadow(0 0 8px rgba(var(--blue-soft-rgb), 0.5));
}

.plr-hero-sub-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.plr-hero-team-name {
  font-family: 'Ropa Sans', sans-serif;
  font-size: 2.16rem;
  line-height: 1;
  color: rgba(var(--fg-rgb),0.46);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.15s ease;
}

.plr-hero-team-name:hover,
.plr-hero-team-name:focus-visible {
  color: rgba(var(--fg-rgb),0.75);
}

.plr-hero-pos-sep {
  font-family: 'Ropa Sans', sans-serif;
  font-size: 2.16rem;
  line-height: 1;
  color: rgba(var(--fg-rgb),0.46);
  letter-spacing: 0.1em;
}

/* Jersey number — member self-service (click to open the set-number modal) */
.plr-jersey-display {
  font-family: 'Ropa Sans', sans-serif;
  font-size: 2.16rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: rgba(var(--fg-rgb),0.46);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.plr-jersey-display:hover,
.plr-jersey-display:focus-visible {
  color: rgba(var(--fg-rgb),0.75);
  text-decoration-color: currentColor;
}

/* Jersey number modal input */
.plr-jersey-input-label {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.82rem;
}

#jersey-number-input {
  width: 100%;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.28);
  color: #ffffff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

#jersey-number-input:focus {
  outline: 0;
  border-color: rgba(var(--blue-soft-rgb), 0.75);
  box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.14);
}

/* Right: sign out, vertically centered in the hero */
.plr-hero-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-shrink: 0;
}

/* Profile picture circle (clickable upload) */
.plr-pfp-wrap {
  display: block;
  position: relative;
  cursor: pointer;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.plr-pfp {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(var(--fg-rgb),0.25);
  background: rgba(0,0,0,0.45);
  display: block;
}

.plr-pfp-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.plr-pfp-wrap:hover .plr-pfp-overlay {
  opacity: 1;
}

.plr-signout {
  font-size: 1.44rem;
  padding: 0.6rem 1.6rem;
  min-height: 0;
  white-space: nowrap;
}

/* ── Shared panel shell ── */
.plr-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.plr-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid rgba(var(--line-rgb),0.1);
  gap: 0.75rem;
  flex-wrap: wrap;
}
.plr-team-switcher {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  border: 1px solid rgba(var(--line-rgb), 0.15);
  background: rgba(10, 18, 30, 0.6);
  color: var(--text);
  cursor: pointer;
  max-width: 260px;
}
.plr-team-switcher:focus { border-color: var(--blue); outline: none; }

.plr-panel-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.plr-panel-body {
  padding: 0.75rem 1.25rem 1.25rem;
}

/* ── Toggle: Recent / Season ── */
.plr-toggle-group {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.plr-toggle {
  background: transparent;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.plr-toggle.is-active {
  background: var(--gold);
  color: #000;
}

/* ── Availability panel ── */
.plr-availability-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem 1.5rem 1.25rem;
}

.plr-availability-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  background: rgba(var(--fg-rgb),0.03);
  border: 1px solid rgba(var(--fg-rgb),0.06);
  flex-wrap: wrap;
}

.plr-availability-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.plr-availability-day {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
}

.plr-availability-opp {
  font-size: 0.75rem;
  color: var(--muted);
}

.plr-availability-toggle .plr-toggle[data-status="available"].is-active {
  background: var(--green, #26d67c);
  color: #04150c;
}

.plr-availability-toggle .plr-toggle[data-status="unavailable"].is-active {
  background: var(--red, #ff3048);
  color: #fff;
}

/* ── Event dropdown (rankings panel) ── */
.plr-select {
  background: var(--panel-strong);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  outline: none;
  appearance: auto;
  max-width: 220px;
}

.plr-select:focus {
  border-color: var(--gold);
}

/* ── Performance bar chart ── */
.plr-bar-chart {
  padding: 1.25rem 1.5rem;
}

.perf-header {
  margin-bottom: 1rem;
}

.perf-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.perf-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.perf-row {
  display: grid;
  grid-template-columns: 52px 1fr 48px;
  align-items: center;
  gap: 0.85rem;
}

.perf-stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
  letter-spacing: 0.04em;
}

.perf-track {
  height: 11px;
  background: rgba(var(--line-rgb),0.07);
  border-radius: 999px;
  overflow: hidden;
}

.perf-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  min-width: 3px;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.perf-val {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
  text-align: left;
}

/* ── Game logs ── */
.plr-game-logs {
  padding: 0 1.5rem 1.25rem;
}

.logs-table {
  font-size: 0.78rem;
  width: 100%;
}

.logs-head,
.logs-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr repeat(5, 0.6fr);
  align-items: center;
  padding: 0.45rem 0;
  gap: 0.5rem;
}

.logs-head {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.logs-row {
  border-bottom: 1px solid rgba(var(--line-rgb),0.05);
}

.logs-row:last-child {
  border-bottom: none;
}

/* ── Season Stats & Rankings ── */
.plr-rankings {
  padding: 0.5rem 1.5rem 1.25rem;
}

.rank-row {
  display: grid;
  grid-template-columns: 72px 52px 1fr 88px;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(var(--line-rgb),0.06);
}

.rank-row:last-child {
  border-bottom: none;
}

.rank-lbl {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.rank-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rank-track {
  height: 7px;
  background: rgba(var(--line-rgb),0.08);
  border-radius: 999px;
  overflow: hidden;
}

.rank-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--blue-soft), var(--cyan));
  border-radius: 999px;
  min-width: 3px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.rank-fill.good {
  background: linear-gradient(90deg, var(--gold), #ff9900);
}

.rank-fill.elite {
  background: linear-gradient(90deg, var(--green), var(--cyan));
}

.rank-pos {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.rank-of {
  color: var(--muted);
  font-weight: 400;
}

/* ── League — you vs. per-position league leader ── */
.league-legend {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.league-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.league-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--plr-team, var(--gold));
}

.league-legend-swatch-leader {
  background: linear-gradient(180deg, #c7ced8, #838a96);
}

.plr-league-chart-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.plr-league-chart {
  display: flex;
  align-items: flex-end;
  gap: 2.2rem;
  padding: 1.8rem 1.8rem 1.4rem;
  min-width: max-content;
}

.league-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

/* Diverging: bars originate from a shared zero line at vertical-center so
   negative values (+/-, TO DIFF) grow downward instead of getting clamped
   into a misleading small positive-looking bar. */
.league-bars {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 280px;
}

.league-zero-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(var(--fg-rgb), 0.18);
  pointer-events: none;
}

.league-bar-track {
  position: relative;
  width: 32px;
  height: 100%;
}

.league-bar-val {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.league-bar {
  position: absolute;
  left: 0;
  width: 100%;
  min-height: 2px;
}

.league-bar-you {
  background: var(--plr-team, var(--gold));
  box-shadow: 0 0 12px var(--plr-team-glow, rgba(239, 200, 74, 0.5));
}

.league-bar-leader {
  background: linear-gradient(180deg, #c7ced8, #838a96);
}

.league-cat-label {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Team Schedule — tab body ── */
.plr-sched-body {
  padding: 0.5rem 0;
}

.sched-day-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sched-day-column {
  border-right: 1px solid rgba(var(--line-rgb),0.07);
}

.sched-day-column:nth-child(2n) {
  border-right: none;
}

.sched-day-col-header {
  padding: 0.55rem 1.25rem 0.4rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 640px) {
  .sched-day-columns {
    grid-template-columns: 1fr;
  }
  .sched-day-column {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .sched-day-column:last-child {
    border-bottom: none;
  }

  .sched-row-upcoming {
    flex-wrap: wrap;
  }

  .sched-row-left {
    flex: 1 1 100%;
  }

  .sched-row-availability {
    flex: 1 1 100%;
    margin-top: 0.5rem;
  }

  .sched-row-upcoming.has-scheduled-badge {
    display: flex !important;
    flex-wrap: wrap;
  }
  .sched-row-upcoming.has-scheduled-badge .sched-row-left {
    flex: 1 1 100% !important;
    justify-self: auto;
    order: 0;
  }
  .sched-row-upcoming.has-scheduled-badge .sched-row-availability {
    flex: 1 1 100% !important;
    justify-self: auto;
    order: 1;
    margin-top: 0.5rem;
  }
  .sched-row-upcoming.has-scheduled-badge .sched-in-game-badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.35rem;
    order: 2;
    flex: 1 1 100%;
    background: none;
    border: none;
    border-top: 1px solid rgba(0,200,100,0.15);
    border-radius: 0;
    padding: 0.4rem 0 0;
    margin-top: 0.35rem;
    font-size: 0.72rem;
  }
  .sched-row-upcoming.has-scheduled-badge .sched-in-game-pos {
    font-size: 0.72rem;
    margin-top: 0;
  }
}

.sched-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.sched-row:last-child {
  border-bottom: none;
}

/* Upcoming rows split into a left 50% (logo + matchup info) and a right 50%
   (availability). Regular result rows are untouched. */
.sched-row-upcoming {
  align-items: center;
}

.sched-row-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex: 1 1 50%;
  min-width: 0;
}

.sched-row-availability {
  display: flex;
  gap: 0.5rem;
  flex: 1 1 50%;
  min-width: 0;
}

.sched-avail-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem 0.4rem;
  border-radius: 6px;
  border: 1px solid rgba(var(--fg-rgb),0.12);
  background: rgba(var(--fg-rgb),0.03);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sched-avail-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.sched-avail-label {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sched-avail-btn[data-status="available"].is-active {
  border-color: rgba(38, 214, 124, 0.5);
  background: rgba(38, 214, 124, 0.14);
  color: var(--green, #26d67c);
}

.sched-avail-btn[data-status="unavailable"].is-active {
  border-color: rgba(255, 70, 70, 0.5);
  background: rgba(255, 70, 70, 0.12);
  color: var(--red, #ff3048);
}

.sched-avail-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sched-opp-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.sched-logo-placeholder {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.sched-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sched-row-matchup {
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sched-loc {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sched-row-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sched-row-event {
  font-size: 0.68rem;
  color: var(--muted);
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sched-in-game-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.7rem;
  background: rgba(0,200,100,0.15);
  border: 1px solid rgba(0,200,100,0.4);
  border-radius: 6px;
  color: #4ade80;
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
  white-space: nowrap;
}

.sched-in-game-label {
  display: block;
  font-weight: 400;
}

.sched-in-game-pos {
  display: block;
  font-weight: 800;
  /* +50% larger than the SCHEDULED label above */
  font-size: 0.945rem;
  margin-top: 0.2rem;
}

/* When a row carries the Scheduled pill, switch the row to a 3-column
   grid: game info left, pill in a natural-width middle track, availability
   right. justify-self on the outer children anchors them to the row edges
   (instead of the availability box filling its whole 1fr track and butting
   the pill against it), which is what makes the pill visually centered
   between the two content blocks. */
.sched-row-upcoming.has-scheduled-badge {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.9rem;
}
.sched-row-upcoming.has-scheduled-badge .sched-row-left {
  flex: initial;
  min-width: 0;
  justify-self: start;
}
.sched-row-upcoming.has-scheduled-badge .sched-row-availability {
  flex: initial;
  min-width: 0;
  justify-self: end;
}

/* Score row in recent results */
.sched-score-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sched-score-badge {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.sched-score-badge.win  { background: rgba(80,200,120,0.18); color: var(--green); }
.sched-score-badge.loss { background: rgba(255,70,70,0.15);  color: var(--red); }
.sched-score-badge.tie  { background: rgba(var(--line-rgb),0.1); color: var(--muted); }

.sched-score {
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Player per-game performance in recent results */
.sched-player-perf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(var(--line-rgb),0.07);
}

.sched-perf-stat {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.sched-perf-pm {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.sched-perf-pm.pos { color: var(--green); }
.sched-perf-pm.neg { color: var(--red); }

.sched-date {
  font-size: 0.75rem;
  color: var(--muted);
}

.sched-time {
  font-size: 0.75rem;
  color: var(--gold);
  font-weight: 600;
}

.sched-server {
  font-size: 0.68rem;
  color: var(--green, #4ade80);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sched-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(var(--line-rgb),0.08);
  color: var(--muted);
}

.sched-empty {
  font-size: 0.8rem;
  color: var(--muted);
  font-style: italic;
  padding: 1rem 1.25rem;
  margin: 0;
}

/* ── Bottom panels row ── */
.plr-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.plr-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(var(--line-rgb),0.06);
  margin: 0;
  gap: 0.5rem;
}

.plr-kv:last-child {
  border-bottom: none;
}

.plr-kv-label {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}

.plr-kv-val {
  font-size: 0.875rem;
  font-weight: 600;
  text-align: right;
}

/* ── Socials add button + menu ── */
.socials-add-wrap {
  position: relative;
  margin-left: auto;
}
.socials-add-btn {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(var(--fg-rgb), 0.18);
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.06);
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.socials-add-btn:hover {
  background: rgba(var(--fg-rgb), 0.12);
  border-color: rgba(var(--fg-rgb), 0.3);
}
.socials-add-btn.is-open {
  background: rgba(var(--fg-rgb), 0.14);
  border-color: var(--accent);
}
.socials-add-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 140px;
  padding: 0.35rem 0;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: 8px;
  background: rgba(10, 18, 32, 0.96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 10;
}
.socials-add-menu[hidden] {
  display: none;
}
.socials-add-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.9rem;
  border: none;
  background: none;
  color: #fff;
  font-size: 0.84rem;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.socials-add-option:hover {
  background: rgba(var(--fg-rgb), 0.1);
}
.socials-add-option[hidden] {
  display: none;
}

/* ── Socials panel (member hub) ── */
.socials-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.06);
}
.socials-row[hidden] {
  display: none;
}
.socials-row:last-child {
  border-bottom: none;
}
.socials-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  flex-shrink: 0;
}
.socials-icon-discord { background: #5865F2; color: #fff; }
.socials-icon-twitch  { background: #9146FF; color: #fff; }
.socials-icon-youtube  { background: #FF0000; color: #fff; }
.socials-icon-kick     { background: #53FC18; color: #000; }
.socials-username {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.socials-connected {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}
.socials-connected[hidden] {
  display: none;
}
.socials-unconnected {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}
.socials-unconnected[hidden] {
  display: none;
}
.socials-input {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  border-radius: 4px;
  border: 1px solid var(--muted);
  background: var(--panel);
  color: var(--text);
}
.socials-connect-btn {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--muted);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.socials-connect-btn:hover {
  background: rgba(var(--fg-rgb), 0.08);
}
.socials-disconnect-btn {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0 0.2rem;
  opacity: 0.5;
}
.socials-disconnect-btn:hover { opacity: 1; }
.socials-live-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  margin-left: auto;
  user-select: none;
}
.socials-live-toggle input {
  display: none;
}
.socials-live-slider {
  width: 28px;
  height: 16px;
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.15);
  position: relative;
  transition: background 0.2s;
}
.socials-live-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
}
.socials-live-toggle input:checked + .socials-live-slider {
  background: var(--red);
}
.socials-live-toggle input:checked + .socials-live-slider::after {
  transform: translateX(12px);
}
.socials-live-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.socials-live-toggle input:checked ~ .socials-live-label {
  color: var(--red);
}

.member-info-hint {
  font-size: 0.825rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .plr-hero {
    padding: 1rem 1.1rem;
    gap: 0.85rem;
    height: auto;
    min-height: 100px;
  }

  /* Name + logo scale down together and stay on one row instead of
     wrapping/overlapping inside the hero's fixed height. */
  .plr-hero-name-row {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .plr-hero-name {
    font-size: 1.25rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .plr-hero-logo-inline {
    width: 32px;
    height: 32px;
  }

  /* Team name + position + jersey number scale down together to stay on
     one row too — team name (the only variable-length piece) ellipsizes
     first if it's still too long. */
  .plr-hero-sub-row {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .plr-hero-team-name {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .plr-hero-pos-sep,
  .plr-jersey-display {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
  }

  .plr-pfp {
    width: 48px;
    height: 48px;
  }

  .plr-pfp-wrap {
    width: 48px;
    height: 48px;
  }

  .plr-pfp-overlay {
    width: 48px;
    height: 48px;
  }

  /* Panel headers with a toggle group (Team Schedule, Performance) wrap
     onto their own row instead of squeezing/truncating next to the label. */
  .plr-panel-hd {
    flex-wrap: wrap;
  }

  .plr-toggle-group {
    flex: 1 1 100%;
  }

  .plr-toggle {
    flex: 1 1 0;
    padding: 0.3rem 0.5rem;
    text-align: center;
  }

  .plr-bottom {
    grid-template-columns: 1fr;
  }

  .rank-row {
    grid-template-columns: 60px 44px 1fr 72px;
    gap: 0.6rem;
  }

  .perf-row {
    grid-template-columns: 44px 1fr 40px;
    gap: 0.6rem;
  }
}

/* ════════════════════════════════════════════════
   ADMIN MEMBERS TOOL
   ════════════════════════════════════════════════ */

.member-tab-count {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-left: 0.25rem;
}

.admin-members-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-member-row {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface-2, rgba(var(--fg-rgb),0.03));
}

.admin-member-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  background: var(--color-surface-3, rgba(var(--fg-rgb),0.04));
}

.admin-member-identity {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Gamertag/Discord tag is the predominant identity in this list — bigger,
   full-strength text color; the member's real name is secondary/muted. */
.admin-member-name-primary {
  font-size: 1.05rem;
  font-weight: 800;
}

.admin-member-name-secondary {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.admin-member-reveal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.6rem 1rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: rgba(var(--fg-rgb),0.03);
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.admin-member-reveal-toggle:hover {
  color: var(--text);
  border-color: rgba(var(--fg-rgb),0.3);
}

.admin-member-reveal-toggle .reveal-chevron {
  display: inline-block;
  transition: transform 150ms ease;
}

.admin-member-reveal-toggle.is-revealed .reveal-chevron {
  transform: rotate(90deg);
}

/* Without this, `hidden` on .admin-member-details does nothing — its own
   display:grid (author origin) always beats the browser's default
   [hidden]{display:none} (user-agent origin) regardless of specificity,
   same site-wide gotcha documented elsewhere in this file for .button etc. */
.admin-member-details[hidden] {
  display: none;
}

.admin-member-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* "Already in Discord" toggle sitting inline with the review buttons. */
.admin-member-discord-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted, #aab);
  cursor: pointer;
  white-space: nowrap;
}

.admin-member-discord-check input {
  accent-color: var(--primary, #4da3ff);
  cursor: pointer;
}

.admin-member-details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
}

.admin-member-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem 1rem;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.admin-member-field:last-child,
.admin-member-field-full {
  grid-column: 1 / -1;
  border-right: none;
}

.admin-member-field > span:first-child {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}

.admin-member-field > span:last-child {
  font-size: 0.875rem;
}

.admin-disconnect-discord-btn {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  margin-left: 0.4rem;
  padding: 0 0.2rem;
  opacity: 0.6;
  vertical-align: middle;
}
.admin-disconnect-discord-btn:hover {
  opacity: 1;
}

.admin-request-discord-btn {
  background: none;
  border: 1px solid rgba(23,165,255,0.45);
  border-radius: 4px;
  color: var(--blue-soft);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
}
.admin-request-discord-btn:hover {
  background: rgba(23,165,255,0.12);
}
.admin-discord-requested-note {
  font-size: 0.72rem;
  opacity: 0.6;
  margin-left: 0.35rem;
}

.admin-member-link-player {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid rgba(var(--fg-rgb),0.07);
  flex-wrap: wrap;
}

.admin-member-link-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.member-player-input {
  flex: 1;
  min-width: 160px;
  height: 34px;
  padding: 0 0.65rem;
  border: 1px solid rgba(var(--fg-rgb),0.15);
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
}

.member-player-input:focus {
  outline: none;
  border-color: var(--yellow, #f5c518);
}

.member-role-select,
.member-class-select {
  height: 34px;
  padding: 0 1.9rem 0 0.6rem;
  border: 1px solid rgba(var(--fg-rgb), 0.15);
  border-radius: 6px;
  background-color: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.6' d='M2 4.5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.7rem;
}

.member-role-select:hover,
.member-class-select:hover {
  border-color: rgba(var(--fg-rgb), 0.3);
}

.member-role-select:focus,
.member-class-select:focus {
  outline: none;
  border-color: var(--yellow, #f5c518);
}

/* Dark the native option list so the open dropdown matches the site (not the
   OS default light popup). */
.member-role-select option,
.member-class-select option {
  background: rgb(var(--surface-panel-rgb));
  color: var(--text);
}

.admin-member-mgmt-note {
  margin: 0;
  padding: 0 1rem 0.75rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.admin-member-mgmt-note a {
  color: var(--blue-soft, var(--link-blue));
}

/* Status badges */
.member-status-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.member-status-badge.is-warning {
  color: #fbbf24;
  background: rgba(251,191,36,0.1);
}

.member-status-badge.is-success {
  color: #4ade80;
  background: rgba(74,222,128,0.1);
}

.member-status-badge.is-error {
  color: #f87171;
  background: rgba(248,113,113,0.1);
}

/* The duplicate badge is a button (it opens the explainer modal), so it has to
   shed the browser's default button chrome to match the sibling status pills. */
button.member-status-badge {
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

button.member-status-badge:hover,
button.member-status-badge:focus-visible {
  filter: brightness(1.25);
}

#dup-modal code {
  font-size: 0.82rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(255,255,255,0.07);
  word-break: break-all;
}

/* ── Vet note field ── */
.admin-vet-note-field {
  background: rgba(251, 191, 36, 0.07);
  border-left: 3px solid rgba(251, 191, 36, 0.6) !important;
  border-right: none;
}

.admin-vet-note-field > span:first-child {
  color: #fbbf24;
}

/* ── Broadcast admin list ── */
.admin-broadcast-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.admin-broadcast-row {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.9rem 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.admin-broadcast-row.is-inactive {
  opacity: 0.55;
}

.admin-broadcast-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.admin-broadcast-meta strong {
  font-size: 0.95rem;
}

.admin-broadcast-expires {
  font-size: 0.75rem;
  color: var(--color-text-muted, #888);
}

.admin-broadcast-body {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted, #aaa);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ── Lines Tab ───────────────────────────────────────────────────────────────── */

.mgmt-lines-wrap {
  padding: 1.25rem 1.5rem 2rem;
}

.mgmt-lines-game-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 1.25rem;
}

.mgmt-lines-game-tab {
  background: transparent;
  border: 1px solid rgba(var(--fg-rgb),0.15);
  border-radius: 5px;
  color: rgba(var(--fg-rgb),0.6);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.mgmt-lines-game-tab.is-active {
  background: rgba(var(--accent-teal-rgb),0.12);
  border-color: var(--accent, rgb(var(--accent-teal-rgb)));
  color: var(--accent, rgb(var(--accent-teal-rgb)));
}

.mgmt-lines-game-tab:hover:not(.is-active) {
  border-color: rgba(var(--fg-rgb),0.35);
  color: rgba(var(--fg-rgb),0.85);
}

.mgmt-lines-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 480px;
}

.mgmt-lines-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mgmt-lines-pos {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  width: 2.2rem;
  text-align: right;
  flex-shrink: 0;
}

.mgmt-lines-sel {
  flex: 1;
}

.mgmt-lines-footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

.mgmt-lines-submit-btn {
  font-size: 0.82rem;
  padding: 0.4rem 1.1rem;
  font-weight: 700;
}

.mgmt-lines-copy-btn {
  font-size: 0.82rem;
  padding: 0.4rem 1.1rem;
  font-weight: 700;
  background: rgba(var(--accent-strong-rgb), 0.12);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.4);
  color: #cde3ff;
}
.mgmt-lines-copy-btn:hover:not(:disabled) {
  background: rgba(var(--accent-strong-rgb), 0.22);
}
.mgmt-lines-copy-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.mgmt-lines-copy-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
  font-size: 0.88rem;
  cursor: pointer;
}
.mgmt-lines-copy-target-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid rgba(var(--fg-rgb),0.06);
  font-size: 0.85rem;
  cursor: pointer;
}
.mgmt-lines-copy-target-row:last-child {
  border-bottom: 0;
}
.mgmt-lines-copy-target-row:hover {
  background: rgba(var(--fg-rgb),0.03);
}
#mgmt-lines-copy-target-list {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid rgba(var(--fg-rgb),0.08);
  border-radius: 6px;
  background: rgba(0,0,0,0.2);
}

.mgmt-lines-status {
  font-size: 0.8rem;
  color: #4ade80;
}

.mgmt-lines-ecu-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(var(--fg-rgb),0.55);
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}

.mgmt-lines-ecu-label input[type="checkbox"] {
  accent-color: var(--accent, rgb(var(--accent-teal-rgb)));
  cursor: pointer;
}

.mgmt-lines-ecu-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mgmt-lines-ecu-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  text-align: left;
  padding: 0.45rem 0.7rem;
  border-radius: 5px;
  border: 1px solid rgba(var(--fg-rgb),0.12);
  background: transparent;
  color: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.mgmt-lines-ecu-option:hover {
  border-color: rgba(var(--fg-rgb),0.3);
}

.mgmt-lines-ecu-option.is-active {
  border-color: var(--accent, rgb(var(--accent-teal-rgb)));
  background: rgba(var(--accent-teal-rgb),0.12);
}

.mgmt-lines-ecu-option-meta {
  font-size: 0.72rem;
  opacity: 0.55;
  white-space: nowrap;
}

/* ── Member alerts: bell + dropdown ────────────────────────────────────── */
.alert-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.alert-bell-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-strong-rgb), 0.32);
  background: rgba(var(--surface-deep-rgb), 0.55);
  color: rgba(205, 227, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.alert-bell-btn:hover {
  background: rgba(var(--accent-strong-rgb), 0.14);
  border-color: rgba(var(--accent-strong-rgb), 0.55);
  color: #fff;
}
.alert-bell-btn[aria-expanded="true"] {
  background: rgba(var(--accent-strong-rgb), 0.18);
  border-color: rgba(var(--accent-strong-rgb), 0.7);
  color: #fff;
}
.alert-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #dc2626;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  border: 2px solid rgba(var(--surface-deep-rgb), 1);
  box-sizing: content-box;
}
.alert-bell-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: 480px;
  display: flex;
  flex-direction: column;
  background: rgba(4, 8, 18, 0.98);
  border: 1px solid rgba(var(--accent-strong-rgb), 0.28);
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 200;
}
/* Author `display: flex` above beats the UA `[hidden] { display: none }`
   rule at equal specificity because origin ranks author over UA, so `hidden`
   alone did nothing. Same fix pattern as `.button[hidden]` site-wide. */
.alert-bell-dropdown[hidden],
.alert-bell-badge[hidden] {
  display: none !important;
}
.alert-bell-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(205, 227, 255, 0.75);
  font-weight: 700;
}
.alert-bell-clear-all {
  background: none;
  border: 1px solid rgba(var(--fg-rgb), 0.15);
  color: rgba(var(--fg-rgb), 0.55);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto;
  margin-right: 0.5rem;
}
.alert-bell-clear-all:hover { color: #f87171; border-color: rgba(248,113,113,0.4); }
.alert-bell-close {
  background: transparent;
  border: 0;
  color: rgba(var(--fg-rgb), 0.55);
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0 0.25rem;
}
.alert-bell-close:hover { color: #fff; }
.alert-bell-list {
  overflow-y: auto;
  padding: 0.25rem 0;
  min-width: 0;
}
.alert-bell-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: rgba(var(--fg-rgb), 0.45);
  font-size: 0.85rem;
}
.alert-bell-item {
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.05);
  min-width: 0;
}
.alert-bell-item:last-child { border-bottom: 0; }
.alert-bell-item.is-unseen {
  background: rgba(var(--accent-strong-rgb), 0.06);
  border-left: 3px solid var(--link-blue);
  padding-left: calc(0.85rem - 3px);
}
.alert-bell-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}
.alert-bell-item-type {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: rgba(var(--accent-strong-rgb), 0.18);
  color: #a5c8ff;
}
.alert-bell-item-type-signed    { background: rgba(74,222,128,0.18);  color: #4ade80; }
.alert-bell-item-type-released  { background: rgba(248,113,113,0.18); color: #f87171; }
.alert-bell-item-type-traded    { background: rgba(250,204,21,0.22);  color: #facc15; }
.alert-bell-item-type-scheduled { background: rgba(6,182,212,0.22);   color: #22d3ee; }
.alert-bell-item-type-potw      { background: rgba(168,85,247,0.24);  color: #c084fc; }
.alert-bell-item-type-record    { background: rgba(245,158,11,0.24);  color: #fbbf24; }
.alert-bell-item-type-broadcast { background: rgba(139,92,246,0.22);  color: #a78bfa; }
.alert-bell-dismiss {
  background: none;
  border: none;
  color: rgba(var(--fg-rgb), 0.35);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
  margin-left: auto;
  flex-shrink: 0;
}
.alert-bell-dismiss:hover { color: #f87171; }
.alert-bell-item-time {
  font-size: 0.68rem;
  color: rgba(var(--fg-rgb), 0.45);
  white-space: nowrap;
}
.alert-bell-item-msg {
  font-size: 0.85rem;
  color: rgba(var(--fg-rgb), 0.9);
  line-height: 1.35;
  word-break: break-word;
}
.alert-bell-item-msg a {
  color: var(--link-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.alert-bell-item-msg a:hover { color: #79bbff; }
@media (max-width: 520px) {
  .alert-bell-dropdown {
    position: fixed;
    top: 60px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
  }
}

/* ── Transaction Window Banner (Management Hub) ── */
.txn-window-banner {
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--muted);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  margin: 0 1.5rem 1rem;
}
.txn-window-banner.is-open {
  border-color: var(--green);
  box-shadow: 0 0 8px rgba(38, 214, 124, 0.45), 0 0 18px rgba(38, 214, 124, 0.2), inset 0 0 12px rgba(38, 214, 124, 0.06);
  background: linear-gradient(90deg, rgba(38, 214, 124, 0.1), transparent 60%), var(--panel);
}
.txn-window-banner.is-closed {
  border-color: var(--red);
  box-shadow: 0 0 8px rgba(255, 48, 72, 0.45), 0 0 18px rgba(255, 48, 72, 0.2), inset 0 0 12px rgba(255, 48, 72, 0.06);
  background: linear-gradient(90deg, rgba(255, 48, 72, 0.1), transparent 60%), var(--panel);
}
.txn-window-banner-title {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.txn-window-banner.is-open .txn-window-banner-title {
  color: var(--green);
}
.txn-window-banner.is-closed .txn-window-banner-title {
  color: var(--red);
}
.txn-window-banner-detail {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
}
.txn-window-banner-detail strong {
  color: var(--text);
  font-weight: 700;
}
.txn-window-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text);
}
.txn-window-drop-divider {
  color: var(--muted);
  opacity: 0.4;
  margin: 0 0.25rem;
}
.txn-window-drop-label {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--text);
}
.txn-window-drop-label.is-closed {
  color: var(--red);
}
@media (max-width: 640px) {
  .txn-window-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.6rem 1rem;
  }
  .txn-window-banner-detail {
    white-space: normal;
  }
}
/* display:flex on the banners would otherwise override the hidden attribute,
   leaving an empty bordered box when a hub has no active window/disclosure. */
.txn-window-banner[hidden],
.line-disclosure-banner[hidden] {
  display: none;
}
/* ── Playoff line disclosure banner (mirrors the txn-window banner) ── */
.line-disclosure-banner {
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--accent, #17a5ff);
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  margin: 0 1.5rem 1rem;
  box-shadow: 0 0 8px rgba(23, 165, 255, 0.35), inset 0 0 12px rgba(23, 165, 255, 0.05);
  background: linear-gradient(90deg, rgba(23, 165, 255, 0.08), transparent 60%), var(--panel);
}

.line-disclosure-banner .txn-window-banner-title {
  color: var(--accent, #17a5ff);
}

.line-disclosure-banner.is-complete {
  border-color: var(--green);
  box-shadow: 0 0 8px rgba(38, 214, 124, 0.45), inset 0 0 12px rgba(38, 214, 124, 0.06);
  background: linear-gradient(90deg, rgba(38, 214, 124, 0.1), transparent 60%), var(--panel);
}

.line-disclosure-banner.is-complete .txn-window-banner-title {
  color: var(--green);
}

.line-disclosure-banner.is-missed {
  border-color: var(--red);
  box-shadow: 0 0 8px rgba(255, 48, 72, 0.45), inset 0 0 12px rgba(255, 48, 72, 0.06);
  background: linear-gradient(90deg, rgba(255, 48, 72, 0.1), transparent 60%), var(--panel);
}

.line-disclosure-banner.is-missed .txn-window-banner-title {
  color: var(--red);
}

.line-disclosure-toggle {
  margin-left: auto;
  padding: 0.25rem 0.7rem;
  border: 1px solid rgba(var(--fg-rgb), 0.2);
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.05);
  color: inherit;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.line-disclosure-toggle:hover {
  border-color: rgba(var(--fg-rgb), 0.4);
}

.line-disclosure-toggle i {
  font-style: normal;
}

.line-disclosure-panel {
  flex-basis: 100%;
  display: grid;
  gap: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(var(--fg-rgb), 0.1);
}

.line-disclosure-seednote {
  margin: 0 0 0.2rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.line-disclosure-seednote strong {
  color: var(--text);
}

.line-disclosure-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.04);
  font-size: 0.78rem;
}

.line-disclosure-mark {
  width: 1.2rem;
  font-style: normal;
  font-weight: 900;
  text-align: center;
  color: var(--muted);
}

.line-disclosure-row.is-done .line-disclosure-mark {
  color: var(--green);
}

.line-disclosure-row.is-late .line-disclosure-mark,
.line-disclosure-row.is-late .line-disclosure-row-timing {
  color: var(--red);
}

.line-disclosure-row-label {
  font-weight: 800;
  min-width: 6.5rem;
}

.line-disclosure-row-due,
.line-disclosure-row-count {
  color: var(--muted);
}

.line-disclosure-row.is-done .line-disclosure-row-timing {
  color: var(--green);
  font-weight: 700;
}

.line-disclosure-row-timing {
  margin-left: auto;
}

.line-disclosure-footnote {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.mgmt-lines-locknote {
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(var(--fg-rgb), 0.16);
  border-radius: 6px;
  background: rgba(var(--fg-rgb), 0.05);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.mgmt-lines-locknote.is-late {
  border-color: rgba(255, 48, 72, 0.4);
  background: rgba(255, 48, 72, 0.08);
  color: var(--red);
}

/* Opponent's disclosed line (playoff Lines tab) */
.mgmt-opp-line {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(var(--fg-rgb), 0.14);
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.03);
}

.mgmt-opp-line .mgmt-panel-title {
  margin-bottom: 0.55rem;
}

.mgmt-opp-line-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.4rem 1rem;
}

.mgmt-opp-line-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.mgmt-opp-line-row .mgmt-lines-pos {
  width: 2.2rem;
  font-weight: 900;
}

.mgmt-opp-line-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mgmt-opp-ecu {
  padding: 0.05rem 0.35rem;
  border: 1px solid rgba(var(--fg-rgb), 0.25);
  border-radius: 4px;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.mgmt-opp-line-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 720px) {
  .line-disclosure-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.6rem 1rem;
  }

  .line-disclosure-toggle {
    margin-left: 0;
  }

  .line-disclosure-row-timing {
    margin-left: 0;
    flex-basis: 100%;
  }
}

body.drop-window-closed .mgmt-action-btn[data-action="dropped"] {
  opacity: 0.35;
  cursor: not-allowed;
}
body.txn-window-closed .mgmt-action-btn[data-action="trade_request"],
body.txn-window-closed #mgmt-propose-trade-btn,
body.txn-window-closed [data-request-sign] {
  opacity: 0.35;
  cursor: not-allowed;
}
body.trade-deadline-passed .mgmt-action-btn[data-action="trade_request"],
body.trade-deadline-passed #mgmt-propose-trade-btn,
body.roster-locked .mgmt-action-btn[data-action="trade_request"],
body.roster-locked .mgmt-action-btn[data-action="dropped"],
body.roster-locked #mgmt-propose-trade-btn,
body.roster-locked [data-request-sign] {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ── Playoff events: no transactions ──
   management.js sets body.mgmt-playoff-event when the signed-in event is
   playoff-category. Every trade/sign/drop container and control disappears;
   IR stays (injury availability is still managed during playoffs). */
body.mgmt-playoff-event #mgmt-propose-trade-btn,
body.mgmt-playoff-event #txn-window-banner,
body.mgmt-playoff-event .mgmt-panel-tb-full,
body.mgmt-playoff-event .mgmt-targets-wrap,
body.mgmt-playoff-event .mgmt-pending-txn-wrap,
body.mgmt-playoff-event #mgmt-regplayers-section,
body.mgmt-playoff-event #mgmt-proposals-section,
body.mgmt-playoff-event #mgmt-pending-section,
body.mgmt-playoff-event .mgmt-action-btn[data-action="trade_block"],
body.mgmt-playoff-event .mgmt-action-btn[data-action="trade_request"],
body.mgmt-playoff-event .mgmt-action-btn[data-action="dropped"] {
  display: none !important;
}

/* ── Full atmosphere theme: AGL Cyan (bleached-cyan) ──
   The league's puck cyan #02BCDF painted on, bright: rides the entire
   Bleached light architecture via the |= prefix selectors (every
   [data-agl-theme|="bleached"] rule matches this slug too), then swaps
   Bleached's white canvas and navy accents for the brand cyan. Surfaces the
   text sits on stay pale for readability; the atmosphere (page wash, heroes,
   header bars, glows) carries the color itself. */
:root[data-agl-theme="bleached-cyan"] {
  /* Signature pairing: puck cyan #02BCDF over crest navy #0C345E. */
  --blue: #0c345e;
  --blue-soft: #02bcdf;
  --blue-rgb: 12, 52, 94;
  --blue-soft-rgb: 2, 188, 223;
  --accent-glow: rgba(2, 188, 223, 0.3);
  --bg: #eef1f4;
  --line: rgba(12, 52, 94, 0.28);
  --line-rgb: 12, 52, 94;
  /* Surfaces: silver/steel (the sticks + shield trim), no ice-blue cast. */
  --surface-deep-rgb: 203, 211, 219;
  --surface-panel-rgb: 250, 251, 253;
  --surface-mid-rgb: 231, 235, 240;
  --table-head-rgb: 12, 52, 94;
  --surface-2: #ffffff;
  --shadow: 0 10px 26px rgba(12, 52, 94, 0.14);
  --accent-strong-rgb: 12, 52, 94;
  --accent-bright-rgb: 2, 188, 223;
  --accent-teal-rgb: 2, 140, 168;
  --sched-card-rgb: 12, 52, 94;
  --link-blue: #0a4a86;
  --steel-blue: #1d5d8f;
  --pale-blue: #0c345e;
  --cyan: #018aa8;
}
/* The canvas is silver/steel — the sticks and shield trim — with a faint
   navy undertone sweep. The cyan-over-navy combo stays on the chrome bands
   (header, heroes, table heads) where it pops against the steel. */
:root[data-agl-theme="bleached-cyan"] body {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.35), rgba(12, 52, 94, 0.12)),
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.3), transparent 24rem),
    linear-gradient(180deg, #f2f4f6 0%, #dde2e8 44%, #ccd4dc 100%);
}
:root[data-agl-theme="bleached-cyan"] body::before {
  background:
    linear-gradient(90deg, transparent 0 49.8%, rgba(1, 90, 110, 0.3) 49.8% 50.2%, transparent 50.2%),
    repeating-linear-gradient(90deg, rgba(2, 60, 75, 0.05) 0 1px, transparent 1px 88px),
    linear-gradient(180deg, transparent 0 42%, rgba(2, 60, 75, 0.08) 42.2%, transparent 42.7%);
}
:root[data-agl-theme="bleached-cyan"] .arena-glow {
  background:
    radial-gradient(ellipse at 8% 18%, rgba(2, 188, 223, 0.1), transparent 16rem),
    radial-gradient(ellipse at 86% 18%, rgba(12, 52, 94, 0.1), transparent 18rem),
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(214, 220, 227, 0.85));
}
/* Heroes wear the header's cyan-over-navy combo, with white text on top. */
:root[data-agl-theme="bleached-cyan"] .stats-hero:not(.team-hero) {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(12, 52, 94, 0.44)),
    linear-gradient(180deg, #02bcdf, #0b86bd);
  border-color: rgba(12, 52, 94, 0.45);
}
:root[data-agl-theme="bleached-cyan"] .stats-hero:not(.team-hero) h1,
:root[data-agl-theme="bleached-cyan"] .stats-hero:not(.team-hero) p,
:root[data-agl-theme="bleached-cyan"] .stats-hero:not(.team-hero) .eyebrow {
  color: #ffffff;
}
:root[data-agl-theme="bleached-cyan"] .hero {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(12, 52, 94, 0.4)),
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.24), transparent 26rem),
    linear-gradient(180deg, #02bcdf, #4796ba 58%, #d6dce3);
}
:root[data-agl-theme="bleached-cyan"] .hero::after {
  background:
    linear-gradient(90deg, transparent 0 49.6%, rgba(12, 52, 94, 0.42) 49.6% 50.4%, transparent 50.4%),
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.25), transparent 40%);
}
:root[data-agl-theme="bleached-cyan"] .schedule-hero-minimal:not(.team-hero) {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(12, 52, 94, 0.44)),
    linear-gradient(180deg, #02bcdf, #0b86bd);
}
/* Header: wears the brand cyan like the heroes (overrides bleached's white). */
:root[data-agl-theme="bleached-cyan"] .site-header {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(12, 52, 94, 0.44)),
    linear-gradient(180deg, #02bcdf, #0b86bd);
  border-bottom: 2px solid rgba(12, 52, 94, 0.55);
  box-shadow: 0 8px 24px rgba(12, 52, 94, 0.3);
}
/* Event/date pickers: the default pink-red "goal line" borders go navy. */
:root[data-agl-theme="bleached-cyan"] .standings-toolbar select,
:root[data-agl-theme="bleached-cyan"] .team-event-select-wrap select,
:root[data-agl-theme="bleached-cyan"] .schedule-toolbar select,
:root[data-agl-theme="bleached-cyan"] .schedule-toolbar input[type="date"] {
  border-color: rgba(12, 52, 94, 0.5);
}

/* ── Stats admin: matchup-of-the-day board ────────────────────────────────── */
.matchup-board-card {
  margin-bottom: 1rem;
}

.matchup-board-date {
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.65;
  margin-left: 0.35rem;
}

.stats-form-mobile-bar {
  display: none;
}

.stats-form-mobile-title {
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

.matchup-board-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.matchup-day-picker {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 0 1 14rem;
  min-width: 10rem;
}

.matchup-slot-picker {
  display: none;
  flex-direction: column;
  gap: 0.3rem;
  flex: 0 1 14rem;
  min-width: 10rem;
}

.matchup-slot-picker[hidden] {
  display: none !important;
}

.matchup-board-grid {
  display: grid;
  grid-template-columns: repeat(var(--matchup-slot-count, 4), minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.matchup-slot-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.matchup-slot-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.matchup-slot-title small {
  font-size: 0.62rem;
  opacity: 0.6;
}

.matchup-game-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.matchup-game-card:hover,
.matchup-game-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

/* Both teams have submitted their stats — subtle pulsing glow so ready games
   stand out on the board without a separate list. */
.matchup-game-card.is-ready {
  border-color: rgba(51, 255, 141, 0.45);
  animation: matchup-ready-pulse 2.6s ease-in-out infinite;
}

@keyframes matchup-ready-pulse {
  0%,
  100% {
    box-shadow: 0 0 4px rgba(51, 255, 141, 0.14);
  }
  50% {
    box-shadow: 0 0 16px rgba(51, 255, 141, 0.42);
  }
}

@media (prefers-reduced-motion: reduce) {
  .matchup-game-card.is-ready {
    animation: none;
    box-shadow: 0 0 10px rgba(51, 255, 141, 0.3);
  }
}

.matchup-game-teams {
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.matchup-game-event {
  font-size: 0.68rem;
  opacity: 0.7;
}

.matchup-status {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.matchup-status.is-ready {
  background: rgba(51, 255, 141, 0.12);
  border: 1px solid rgba(51, 255, 141, 0.44);
  color: #b8ffd3;
}

.matchup-status.is-partial {
  background: rgba(255, 200, 80, 0.1);
  border: 1px solid rgba(255, 200, 80, 0.4);
  color: #ffe2a6;
}

.matchup-status.is-waiting {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.6);
}

.matchup-status.is-saved {
  background: rgba(120, 170, 255, 0.12);
  border: 1px solid rgba(120, 170, 255, 0.4);
  color: #c6dbff;
}

@media (max-width: 860px) {
  .matchup-slot-picker {
    display: flex;
  }

  .matchup-board-grid {
    display: block;
  }

  .matchup-slot-column {
    display: none;
  }

  .matchup-slot-column.is-active {
    display: flex;
  }

  /* The dropdown already names the slot on mobile. */
  .matchup-slot-column .matchup-slot-title {
    display: none;
  }
}

/* ── Stats admin: phone layout rebuild ────────────────────────────────────── */

/* Admin sub-nav: compact horizontal scroll strip instead of an 11-button
   tower (overrides the flex-direction:column stack in the 980px block). */
@media (max-width: 980px) {
  .admin-page-tabs {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 0.4rem;
  }

  .admin-page-tabs button,
  .admin-page-tabs a {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 860px) {
  /* Section heading: eyebrow on top, maintenance buttons full-width below. */
  .admin-tool-group-heading:has(.stats-heading-actions) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .stats-heading-actions {
    justify-content: flex-start;
  }

  .stats-heading-actions .button {
    flex: 1 1 auto;
  }

  /* Reclaim width eaten by nested container paddings so the stat inputs get
     as much of the phone screen as possible. */
  .admin-tool-card {
    padding: 0.6rem;
  }

  .team-stat-section {
    padding: 0.6rem;
  }

  .panel.admin-dashboard {
    padding: 0.6rem;
  }

  /* Stat entry: keep the desktop presentation — one wide row per player,
     all rows in a section sweeping sideways together inside the section's
     scroller. Only the gutter changes: no reserved both-edge gutters eating
     phone width. */
  .stat-entry-scroll {
    scrollbar-gutter: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Slimmer player/position columns than desktop so the first stat columns
     peek in on a phone screen, hinting that the row scrolls. */
  .stat-entry-row {
    grid-template-columns: 200px 96px;
  }

  .stat-entry-row:has(.stat-entry-field-ecu) {
    grid-template-columns: 46px 200px 96px;
  }

  .stat-entry-field-player,
  .stat-entry-row:has(.stat-entry-field-ecu) .stat-entry-field-player,
  .stat-entry-row:has(.stat-entry-field-ecu) .stat-entry-field-player-ecu {
    width: 200px;
    min-width: 200px;
  }

  .stat-entry-field-position {
    width: 96px;
  }

  .stat-entry-row:has(.stat-entry-field-ecu) .stat-entry-field-ecu {
    width: 46px;
    min-width: 46px;
  }

  /* Entry form as its own full-screen container: instead of extending the
     already-long page, the Add/Edit form takes over the viewport with a
     sticky Back bar, and the page behind it is scroll-locked. */
  body.stats-form-overlay-open {
    overflow: hidden;
  }

  [data-stats-form-panel]:not([hidden]) {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* above the site header (100) and ticker (300), below toasts/modals */
    z-index: 400;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: rgb(var(--surface-panel-rgb));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* keep swipes inside the overlay from scrolling the locked page behind it */
    overscroll-behavior: contain;
    padding: 0 0.6rem 4.5rem;
  }

  [data-stats-form-panel]:not([hidden]) .stats-form-mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 -0.6rem 0.85rem;
    padding: 0.6rem;
    background: rgb(var(--surface-panel-rgb));
    border-bottom: 1px solid rgba(var(--fg-rgb), 0.12);
  }

  /* 16px input text stops iOS Safari from zooming the page on focus.
     (.admin-form-scoped selectors outgun the form's font-size:inherit reset.) */
  .stat-entry-row select,
  .stat-entry-row input,
  .admin-form .stat-entry-row select,
  .admin-form .stat-entry-row input:not([type="radio"]):not([type="checkbox"]) {
    font-size: 16px;
    min-height: 42px;
  }

  /* Same focus-zoom guard for every other admin form control on this page —
     notably the eHockeyPro URL box and the filter/date/score fields. */
  .admin-form input:not([type="radio"]):not([type="checkbox"]),
  .admin-form select,
  .admin-input,
  .schedule-toolbar select,
  .schedule-toolbar input,
  .matchup-day-picker select,
  .matchup-slot-picker select {
    font-size: 16px;
  }
}

/* ── Stats admin: phone view dropdown ─────────────────────────────────────────
   On phones one dropdown picks the active view (Games of the Day / Add / Edit)
   so only that view renders below the toolbar — the Add/Edit buttons and the
   always-present matchup board stacking a screen's worth of content above the
   tools was the "tap adds blank space" problem. Desktop keeps the buttons. */
.stats-mobile-view-switch {
  display: none;
}

@media (max-width: 860px) {
  .stats-mobile-view-switch {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
  }

  /* Same dress as .admin-form selects — this one lives outside the form. */
  .stats-mobile-view-switch select {
    width: 100%;
    max-width: 100%;
    min-height: 44px;
    border: 1px solid rgba(var(--fg-rgb), 0.1);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.28);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: 0 0.8rem;
    outline: 0;
  }

  .stats-mobile-view-switch select:focus {
    border-color: rgba(var(--blue-soft-rgb), 0.75);
    box-shadow: 0 0 0 3px rgba(var(--blue-soft-rgb), 0.14);
  }

  .stats-mobile-view-switch select option {
    background: rgb(var(--surface-panel-rgb));
    color: var(--text);
  }

  /* Regroup: heading + maintenance buttons, utility remnant of the workflow
     row, then the dropdown, then whichever view it selected. */
  .admin-tool-page:has([data-stats-view-select]) > * {
    order: 9;
  }

  .admin-tool-page:has([data-stats-view-select]) > .admin-tool-group-heading {
    order: 1;
  }

  .admin-tool-page:has([data-stats-view-select]) > .stats-workflow-tabs {
    order: 2;
  }

  .admin-tool-page:has([data-stats-view-select]) > .stats-mobile-view-switch {
    order: 3;
  }

  .admin-tool-page:has([data-stats-view-select]) > .matchup-board-card {
    order: 4;
    margin-bottom: 0;
  }

  /* The dropdown replaces the Add/Edit buttons; Refresh OVR and Event
     Display Order stay as a compact utility pair. */
  .admin-tool-page:has([data-stats-view-select]) .stats-workflow-tabs [data-stats-workflow] {
    display: none;
  }

  .admin-tool-page:has([data-stats-view-select]) .stats-workflow-tabs [data-stats-refresh-ovr],
  .admin-tool-page:has([data-stats-view-select]) .stats-workflow-tabs [data-season-order-open],
  .admin-tool-page:has([data-stats-view-select]) .stats-workflow-tabs .stats-column-order-switch {
    flex: 1 1 auto;
  }

  .admin-tool-page:has([data-stats-view-select]) [data-stats-workflow-help] {
    display: none;
  }

  /* Only the selected view renders. */
  .admin-tool-page[data-stats-mobile-view="add"] > .matchup-board-card,
  .admin-tool-page[data-stats-mobile-view="edit"] > .matchup-board-card {
    display: none;
  }
}

/* ── Mgmt hub Lines tab: week picker + finalized-game states ──────────────── */
.mgmt-lines-week-row {
  display: flex;
  margin: 0.35rem 0 0.75rem;
}

.mgmt-lines-week-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 12rem;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.9;
}

.mgmt-lines-game-tab.is-final {
  opacity: 0.55;
}

.mgmt-lines-game-tab.is-final.is-active {
  opacity: 0.85;
}

/* ── Mgmt hub: EA match import modal ── */
.mgmt-ea-modal-card {
  width: min(880px, 96vw);
}

.mgmt-ea-modal-body {
  min-height: 160px;
}

.mgmt-ea-modal-status {
  flex: 1;
  margin: 0;
  text-align: left;
}

.mgmt-ea-modal-status:empty {
  display: none;
}

.mgmt-ea-assign-row {
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.mgmt-ea-assign-row .mgmt-ea-match-row {
  border-bottom: 0;
}

.mgmt-ea-assign-select {
  flex-shrink: 0;
  width: 250px;
  min-height: 34px;
  font-size: 0.72rem;
}

.mgmt-ea-assign-status {
  padding: 0 0 0.4rem;
  font-size: 0.66rem;
}

.mgmt-ea-assign-status.is-ok {
  color: #9fe8bf;
}

.mgmt-ea-assign-status.is-error {
  color: #ff9fb0;
}

.mgmt-ea-review-section {
  margin-bottom: 0.85rem;
  border: 1px solid rgba(var(--fg-rgb), 0.1);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
}

.mgmt-ea-review-section.is-submitted {
  border-color: rgba(51, 255, 141, 0.35);
  opacity: 0.75;
}

.mgmt-ea-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.mgmt-ea-review-head strong {
  font-size: 0.85rem;
}

.mgmt-ea-review-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mgmt-ea-badge {
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  background: rgba(var(--blue-soft-rgb), 0.18);
  color: #bfe3ff;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.mgmt-ea-badge.is-done {
  background: rgba(51, 255, 141, 0.16);
  color: #b8ffd3;
}

/* ── Mgmt hub: EA match picker — compact single-line rows ── */
.mgmt-ea-match-blurb {
  margin-bottom: 0.4rem;
  font-size: 0.7rem;
  opacity: 0.65;
}

.mgmt-ea-match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.08);
}

.mgmt-ea-match-info {
  display: grid;
  gap: 0.05rem;
  flex: 1;
  min-width: 0;
}

.mgmt-ea-match-info strong {
  font-size: 0.8rem;
  line-height: 1.25;
}

.mgmt-ea-match-info span {
  font-size: 0.66rem;
  opacity: 0.65;
}

@media (max-width: 600px) {
  .mgmt-ea-match-row {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }

  .mgmt-ea-match-info {
    flex-basis: 100%;
  }

  .mgmt-ea-assign-select {
    width: 100%;
  }
}

.mgmt-lines-upload-btn.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

button.mgmt-lines-upload-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Mgmt hub: team-name verification stop on stat imports ────────────────── */
.mgmt-team-verify p {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  line-height: 1.45;
}

.mgmt-team-verify-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.mgmt-team-verify-btns [data-verify-team] {
  border-color: rgba(255, 200, 80, 0.55);
  color: #ffe2a6;
  background: rgba(255, 200, 80, 0.08);
}

.mgmt-team-verify-btns [data-verify-team]:hover,
.mgmt-team-verify-btns [data-verify-team]:focus-visible {
  background: rgba(255, 200, 80, 0.18);
  box-shadow: 0 0 12px rgba(255, 200, 80, 0.25);
}

/* ── Mgmt hub: eHockeyPro import row / URL field ──────────────────────────── */
.mgmt-lines-upload-row.mgmt-ehp-import-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.7rem;
}

.mgmt-ehp-import-row .mgmt-input {
  flex: 1 1 16rem;
  min-width: 0;
  min-height: 40px;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(var(--fg-rgb), 0.18);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
}

.mgmt-ehp-import-row .mgmt-input::placeholder {
  color: rgba(var(--fg-rgb), 0.4);
}

.mgmt-ehp-import-row .mgmt-input:focus {
  border-color: var(--accent, rgb(var(--accent-teal-rgb)));
  outline: none;
}

@media (max-width: 860px) {
  /* Phone: URL box on its own full-width line, buttons stacked under it,
     16px so iOS doesn't zoom the page when the field is focused. */
  .mgmt-lines-upload-row.mgmt-ehp-import-row {
    flex-direction: column;
    align-items: stretch;
  }

  .mgmt-ehp-import-row .mgmt-input {
    /* In the stacked column the 16rem flex-basis would become HEIGHT — reset it. */
    flex: 0 0 auto;
    width: 100%;
    font-size: 16px;
  }

  .mgmt-ehp-import-row .mgmt-lines-upload-btn {
    width: 100%;
  }

  .mgmt-lines-footer {
    flex-wrap: wrap;
    gap: 0.6rem;
  }
}

/* ══════════ League Chat drawer (chat-widget.js, all pages) ══════════ */

/* The widget toggles its pieces with the HTML hidden attribute; several of
   them also carry display:flex, which would otherwise override hidden and
   leave them permanently visible (the empty reply bar bug). */
#agl-chat-drawer [hidden],
#agl-chat-drawer[hidden],
#agl-chat-tab[hidden] {
  display: none !important;
}

/* Collapsed state: slim tab pinned to the right viewport edge, same idea as
   the draft stream hub's collapsed view bar. */
#agl-chat-tab {
  position: fixed;
  right: 0;
  top: 40%;
  z-index: 940;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 0.45rem 0.8rem;
  background: rgba(var(--surface-mid-rgb), 0.95);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 8px 0 0 8px;
  color: var(--pale-blue);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.2s ease;
}

#agl-chat-tab:hover {
  background: rgba(var(--blue-rgb), 0.35);
}

#agl-chat-tab.is-hidden {
  transform: translateX(110%);
  pointer-events: none;
}

.agl-chat-tab-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.agl-chat-tab-label {
  writing-mode: vertical-rl;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

#agl-chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: min(380px, 94vw);
  z-index: 950;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 0.9rem 0.75rem;
  background: rgba(var(--surface-panel-rgb), 0.98);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  transform: translateX(100%);
  transition: transform 0.22s ease;
}

#agl-chat-drawer.is-open {
  transform: translateX(0);
}

.agl-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.6rem;
}

.agl-chat-title {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-weight: 800;
  color: var(--text);
}

.agl-chat-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--muted);
}

.agl-chat-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}

.agl-chat-close:hover {
  color: var(--text);
}

.agl-chat-channels {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.agl-chat-channel-btn {
  background: rgba(var(--surface-deep-rgb), 0.85);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.28rem 0.75rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.agl-chat-channel-btn:hover {
  color: var(--text);
  border-color: rgba(var(--accent-strong-rgb), 0.5);
}

.agl-chat-channel-btn.is-active {
  color: var(--cyan);
  border-color: rgba(var(--accent-bright-rgb), 0.55);
  background: rgba(var(--blue-rgb), 0.2);
}

.chat-mention {
  color: var(--steel-blue);
  background: rgba(var(--blue-rgb), 0.22);
  border-radius: 4px;
  padding: 0 0.2rem;
  font-weight: 600;
}

.agl-chat-state {
  overflow-y: auto;
  font-size: 0.9rem;
}

.agl-chat-state h3 {
  margin: 0.3rem 0 0.4rem;
  color: var(--text);
}

.agl-chat-state p {
  margin: 0.5rem 0;
  color: var(--muted);
}

.agl-chat-live {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chat-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-right: 0.35rem;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

.chat-empty {
  color: var(--muted);
  font-size: 0.9rem;
  margin: auto;
  text-align: center;
}

.chat-row {
  position: relative;
  display: flex;
  gap: 0.65rem;
  padding: 0.3rem 0.4rem;
  border-radius: 8px;
  margin-top: 0.55rem;
}

@keyframes chat-row-flash {
  0%   { background: rgba(var(--blue-rgb), 0.4); }
  100% { background: transparent; }
}

.chat-row.is-flash {
  animation: chat-row-flash 1.6s ease-out 1;
}

.chat-reply-btn {
  position: absolute;
  top: 0.15rem;
  right: 0.3rem;
  display: none;
  background: rgba(var(--surface-deep-rgb), 0.9);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
}

.chat-reply-btn:hover {
  color: var(--cyan);
  border-color: rgba(var(--accent-bright-rgb), 0.5);
}

#agl-chat-drawer.can-send .chat-row:hover .chat-reply-btn,
#agl-chat-drawer.can-send .chat-row:focus-within .chat-reply-btn {
  display: block;
}

.chat-reply-context {
  font-size: 0.76rem;
  color: var(--muted);
  margin-bottom: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-reply-context.is-jumpable {
  cursor: pointer;
}

.chat-reply-context.is-jumpable:hover {
  color: var(--pale-blue);
}

.agl-chat-replybar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
  background: rgba(var(--surface-deep-rgb), 0.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
}

.agl-chat-replybar-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agl-chat-replybar-cancel {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.1rem;
}

.agl-chat-replybar-cancel:hover {
  color: var(--red);
}

.chat-row.is-grouped {
  margin-top: 0;
  padding-top: 0.1rem;
  padding-bottom: 0.1rem;
}

.chat-row:hover {
  background: rgba(var(--surface-mid-rgb), 0.6);
}

.chat-avatar {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(var(--blue-rgb), 0.25);
  color: var(--pale-blue);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-row.is-grouped .chat-avatar {
  height: 1px;
  background: transparent;
}

.chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-body {
  flex: 1;
  min-width: 0;
}

.chat-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.chat-name {
  font-weight: 700;
  color: var(--steel-blue);
  font-size: 0.92rem;
  text-decoration: none;
}

a.chat-name:hover {
  text-decoration: underline;
}

.chat-name.is-site {
  color: var(--cyan);
}

.chat-badge {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cyan);
  border: 1px solid rgba(var(--accent-bright-rgb), 0.45);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
}

.chat-time {
  font-size: 0.72rem;
  color: var(--muted);
}

.chat-text {
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.chat-attachment-note {
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
}

.chat-status {
  min-height: 1.1rem;
  margin: 0;
}

.chat-emoji {
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.28em;
  object-fit: contain;
}

/* Members hub: the League Chat toggle row tucks under the Discord row as one
   group — no divider between them, tightened spacing. Only while the toggle
   row is actually shown (it hides for members who can't use chat). */
.socials-row:has(+ .plr-chat-toggle-row:not([hidden])) {
  border-bottom: none;
}

.plr-chat-toggle-row {
  padding-top: 0.15rem;
}

.agl-chat-emoji-btn {
  background: rgba(var(--surface-deep-rgb), 0.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 0.55rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.agl-chat-emoji-btn:hover {
  border-color: rgba(var(--accent-strong-rgb), 0.6);
}

.agl-chat-emoji-panel {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(var(--surface-deep-rgb), 0.92);
  padding: 0.55rem 0.6rem;
  scrollbar-width: thin;
}

.agl-chat-emoji-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin: 0.35rem 0 0.25rem;
}

.agl-chat-emoji-label:first-child {
  margin-top: 0;
}

.agl-chat-emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem;
}

.agl-chat-emoji-grid button {
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.22rem;
  border-radius: 6px;
  cursor: pointer;
}

.agl-chat-emoji-grid button:hover {
  background: rgba(var(--blue-rgb), 0.3);
}

.agl-chat-emoji-grid button img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.chat-composer {
  display: flex;
  gap: 0.6rem;
  border-top: 1px solid var(--line);
  padding-top: 0.75rem;
}

.chat-composer input {
  flex: 1;
  min-width: 0;
  background: rgba(var(--surface-deep-rgb), 0.85);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
}

.chat-composer input:focus {
  outline: none;
  border-color: rgba(var(--accent-strong-rgb), 0.7);
}

@media (max-width: 640px) {
  #agl-chat-drawer {
    width: 100vw;
    border-left: none;
  }

  .chat-composer .button {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}