/* ─── Self-hosted display font: Barlow Condensed (SIL OFL 1.1) ────────────────
   Used only via var(--nb-font-display) by the premium-* stylesheets.
   latin + latin-ext per weight; unicode-range means latin-ext only downloads
   when a glyph such as the "ć" in Dončić needs it. font-display: swap keeps
   text visible in the Arial Narrow fallback while the file loads.
   License: assets/fonts/barlow-condensed/OFL-LICENSE.txt */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed/barlow-condensed-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed/barlow-condensed-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed/barlow-condensed-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed/barlow-condensed-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed/barlow-condensed-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed/barlow-condensed-latin-800-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ─── Design Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Court-inspired palette: deep charcoal floor, hardwood amber, orange accent */
  --bg:          #111318;
  --bg-card:     rgba(26, 29, 36, 0.94);   /* was solid #1a1d24 — slightly translucent so the global background image (see body, below) stays visible behind cards/panels instead of being fully hidden */
  --bg-hover:    #22262f;
  --border:      #2a2e38;
  --border-light:#363b48;

  --text:        #e8eaf0;
  --text-muted:  #7a8099;
  --text-dim:    #4a5068;

  --accent:      #e8630a;       /* NBA orange */
  --accent-dim:  rgba(232,99,10,0.15);
  --accent-hover:#f07520;

  --green:       #2ecc71;
  --red:         #e74c3c;
  --yellow:      #f1c40f;

  /* Player pool identity — Green Pool (active 2K26 players) / Blue Pool
     (legendary/prime/special). Distinct from --green/--red status colors
     above; these two are reserved for the pool tabs/badges only. */
  --pool-green:      #34d17c;
  --pool-green-dim:  rgba(52,209,124,0.14);
  --pool-blue:       #4d9bf5;
  --pool-blue-dim:   rgba(77,155,245,0.14);

  /* Typography */
  --font-ui:     'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing */
  --r:           6px;
  --r-lg:        10px;
}

/* ─── Redesign Tokens (Phase 1 — additive only) ────────────────────────────────
   New design-system vocabulary for the sidebar + light-workspace redesign
   (see UI/UX Redesign Spec, §8 and §11). These are namespaced under --nb-*
   and layered ADDITIVELY alongside the tokens above — nothing above this
   block is renamed, removed, or repointed here, so every screen that has
   not yet been migrated keeps rendering exactly as it does today. Only
   the new shell (css/shell.css) and the new public Draft view
   (css/draft-public.css) reference these for now. */
:root {
  /* Sidebar (dark navy/charcoal, per spec §8.1) */
  --nb-sidebar-bg:        #161a24;
  --nb-sidebar-bg-active: #1f2432;
  --nb-sidebar-border:    #262b3a;
  --nb-sidebar-text:      #aab0c4;
  --nb-sidebar-text-dim:  #8189a0;   /* Phase 2 Step 2: was #6d7488 (3.73:1) -> 4.99:1 on sidebar bg */
  --nb-sidebar-text-active: #ffffff;

  /* Main workspace (light, per spec §8.1/§11) */
  /* Phase 2 Step 5 — the light-theme tokens below keep their names but now hold DARK values
     (dark cinematic direction). Every existing consumer flips together, so no page
     stylesheet had to be edited. Layers, darkest to lightest: --nb-canvas < --nb-surface-card
     (panel) < --nb-surface-raised < --nb-surface-lift. */
  --nb-surface:        var(--nb-canvas);   /* Step 5: page background and inset wells: the darkest layer */
  --nb-surface-card:   #151a24;   /* Step 5: primary panel (cards, tables, forms): one step above the canvas */
  --nb-surface-border: #262b3a;   /* Step 5: subtle panel border */
  --nb-surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 6px 20px rgba(0, 0, 0, 0.28);   /* Step 5: dark value */

  --nb-text:        #f2f4fa;   /* Step 5: primary text; 16:1 on panel */
  --nb-text-muted:  #a4abc0;   /* Step 5: secondary text; 7.8:1 on panel */
  --nb-text-dim:    #8189a0;   /* Step 5: tertiary/decorative text; 5:1 on panel */

  /* Primary accent — purple/blue, per spec §8.1 (orange --accent above is
     kept as-is for now; whether it stays as a secondary brand color is
     still an open call, not decided by this token pass). */
  --nb-primary:      #5b5bf0;
  --nb-primary-dim:  rgba(91, 91, 240, 0.18);   /* Step 5: dark value */
  --nb-primary-hover:#4a4ae0;

  /* Status colors — reuses the existing --green/--red hues so status
     meaning stays consistent app-wide, adds the gold draft-highlight
     color the spec calls for. */
  --nb-positive:  #1fa971;
  --nb-negative:  #e0483a;
  --nb-gold:      #d4a017;
  --nb-gold-dim:  rgba(212, 160, 23, 0.14);

  /* Spacing scale (spec §8.2: 4/8/12/16/24/32) */
  --nb-space-1: 4px;
  --nb-space-2: 8px;
  --nb-space-3: 12px;
  --nb-space-4: 16px;
  --nb-space-5: 24px;
  --nb-space-6: 32px;

  /* Radius/shadow vocabulary for the new light surfaces */
  --nb-r:    10px;
  --nb-r-lg: 14px;

  /* Shell geometry */
  --nb-sidebar-width:           240px;
  --nb-sidebar-width-collapsed: 64px;
  --nb-topbar-height:           56px;
}

/* ─── Design Tokens — Phase 2, Step 1 (token foundation) ───────────────────────
   STRICTLY ADDITIVE. Every name below is new and, at the time of this commit,
   referenced by nothing, so this block cannot change how any screen renders.
   It extends the --nb-* vocabulary above; no existing token is renamed,
   removed, repointed, or re-valued here, and the legacy-only names that are
   used-but-undeclared elsewhere (--surface, --surface-2, --surface-hover,
   --bg-elevated, --pool-white, --pool-white-ink, --nb-warning) are
   deliberately NOT declared — they are resolved per component in later steps.

   Text-on-light rule: the "-ink" variants are for text/icons on light
   surfaces (AA contrast); the bright fills (gold, orange, green, pools) are
   for dots, bars and dark chrome only. Ratios were computed for the pairs
   noted inline.

   Breakpoint constants (cannot be custom properties): compact <=640px,
   medium <=900px (shell boundary, unchanged), wide >900px. */
:root {
  /* Surfaces & borders */
  --nb-surface-sunken: #0a0c10;   /* Step 5: input wells, tab tracks, disabled fills */
  --nb-surface-hover:  rgba(255, 255, 255, 0.04);   /* Step 5: interactive row/hover tint */
  --nb-border-strong:  #6a7390;   /* Step 5: control borders: 3:1+ on panel and raised */

  /* Primary (indigo) — ink for text on light surfaces */
  --nb-primary-ink:    #b4b6ff;   /* Step 5: indigo text on dark; 9:1 on panel */

  /* Sports/brand accent (orange): brand mark, playoffs, elite OVR ONLY */
  --nb-brand-orange:         #e8630a;            /* = legacy --accent; fills/marks */
  --nb-brand-orange-dim:     rgba(232, 99, 10, 0.15);
  --nb-brand-orange-ink:     #ff8a3d;   /* Step 5: orange text on dark; 7.6:1 on panel */
  --nb-brand-orange-on-dark: #ff7a1f;            /* small text on dark chrome */

  /* Gold — live / on the clock / champion / warning (icon + text distinguish) */
  --nb-gold-ink:      #f0b429;   /* Step 5: gold text on dark; 9.5:1 on panel */
  --nb-gold-on-dark:  #f0b429;                   /* 8.30:1 on #1f2432 */

  /* Status ink + tint pairs */
  --nb-positive-ink:  #4fd69c;   /* Step 5: green text on dark; 9.7:1 on panel */
  --nb-positive-dim:  rgba(31, 169, 113, 0.16);   /* Step 5: dark value */
  --nb-negative-ink:  #ff7a6e;   /* Step 5: red text on dark; 7:1 on panel */
  --nb-negative-dim:  rgba(224, 72, 58, 0.16);   /* Step 5: dark value */
  --nb-warning-ink:   var(--nb-gold-ink);

  /* Info — aliases of the indigo family (no new hue) */
  --nb-info:          var(--nb-primary);
  --nb-info-ink:      var(--nb-primary-ink);
  --nb-info-dim:      var(--nb-primary-dim);

  /* Pools — new names; legacy --pool-* (and their inline fallbacks) untouched.
     Identity = dot/ring + tint + ink text + label; never the bright fill as text. */
  --nb-pool-green:       #34d17c;
  --nb-pool-green-ink:   #5bdc93;   /* Step 5: pool-green text on dark */
  --nb-pool-green-tint:  rgba(52, 209, 124, 0.14);   /* Step 5: pool-green fill on dark */
  --nb-pool-blue:        #4d9bf5;
  --nb-pool-blue-ink:    #7db4f8;   /* Step 5: pool-blue text on dark */
  --nb-pool-blue-tint:   rgba(77, 155, 245, 0.14);   /* Step 5: pool-blue fill on dark */
  --nb-pool-white:       #d7dae0;                /* slate; drawn as a hollow ring */
  --nb-pool-white-ink:   #c3c8d4;   /* Step 5: pool-white text on dark */
  --nb-pool-white-tint:  rgba(215, 218, 224, 0.12);   /* Step 5: pool-white fill on dark */

  /* Chrome, overlay, focus */
  --nb-chrome-band:          var(--nb-sidebar-bg);   /* dark band (Draft on-the-clock, heroes) */
  --nb-scrim:                rgba(4, 5, 8, 0.72);   /* Step 5: modal backdrop */
  --nb-focus-ring:           var(--nb-focus-ring-on-dark);   /* Step 5: focus ring on dark surfaces; 10.9:1 on panel */
  --nb-focus-ring-on-dark:   #c4c6ff;                /* 10.66:1 on #161a24 */

  /* Typography — Inter stays; sizes are rem so they follow the root clamp */
  --nb-font-ui:        var(--font-ui);
  --nb-font-display:   'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;   /* Premium display face (numbers + broadcast headings); self-hosted, @font-face at top of file */
  --nb-fs-display:     1.5rem;      /* page title */
  --nb-fs-h2:          1.125rem;    /* section heading */
  --nb-fs-h3:          1rem;        /* card heading */
  --nb-fs-body:        0.9375rem;   /* body (15px at 16px root) */
  --nb-fs-table:       0.875rem;
  --nb-fs-sm:          0.8125rem;   /* secondary body */
  --nb-fs-xs:          0.75rem;     /* label / metadata — the floor */
  --nb-fs-stat:        1.75rem;     /* stat numeral */
  --nb-fs-hero:        2rem;        /* pick number / on-the-clock name */

  --nb-fw-regular:     400;
  --nb-fw-medium:      500;
  --nb-fw-semibold:    600;
  --nb-fw-bold:        700;
  --nb-fw-heavy:       800;

  --nb-lh-tight:       1.05;
  --nb-lh-title:       1.2;
  --nb-lh-table:       1.35;
  --nb-lh-body:        1.5;

  --nb-tracking-title: -0.01em;
  --nb-tracking-caps:  0.06em;

  /* Spacing — extends --nb-space-1..6; semantic aliases are breakpoint-aware below */
  --nb-space-7:        40px;
  --nb-page-pad:       var(--nb-space-6);   /* 32 */
  --nb-section-gap:    var(--nb-space-5);   /* 24 */
  --nb-card-pad:       var(--nb-space-4);   /* 16 */
  --nb-cell-pad-y:     10px;
  --nb-cell-pad-x:     var(--nb-space-3);   /* 12 */
  --nb-modal-pad:      var(--nb-space-5);   /* 24 */

  /* Radius tiers: 6 (sm) / 10 (--nb-r) / 14 (--nb-r-lg) / pill */
  --nb-r-sm:           6px;
  --nb-r-pill:         999px;

  /* Elevation: level 1 is the existing --nb-surface-shadow */
  --nb-shadow-2:       0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.32);   /* Step 5: dark value */
  --nb-shadow-3:       0 24px 64px rgba(0, 0, 0, 0.6);   /* Step 5: modal shadow */

  /* Control & row sizes */
  --nb-control-sm:     32px;
  --nb-control-md:     40px;
  --nb-control-lg:     44px;                /* touch target */
  --nb-row-h:          44px;
  --nb-row-h-compact:  36px;
  --nb-content-max:    1440px;              /* documents the current .main-content cap */

  /* Z-index layers (drawer/scrim keep their current 199/200) */
  --nb-z-sticky:       20;
  --nb-z-dropdown:     60;
  --nb-z-topbar:       100;
  --nb-z-scrim:        199;
  --nb-z-drawer:       200;
  --nb-z-modal:        500;
  --nb-z-toast:        1000;
  --nb-z-boot:         9999;

  /* Motion */
  --nb-dur-fast:       120ms;
  --nb-dur-base:       180ms;
  --nb-dur-slow:       240ms;
  --nb-ease-standard:  cubic-bezier(0.2, 0, 0.2, 1);
}

/* Breakpoint-aware values for the token set above (medium <=900, compact <=640) */
@media (max-width: 900px) {
  :root {
    --nb-page-pad:    var(--nb-space-5);    /* 24 */
  }
}
@media (max-width: 640px) {
  :root {
    --nb-page-pad:    var(--nb-space-4);    /* 16 */
    --nb-section-gap: var(--nb-space-4);    /* 16 */
    --nb-card-pad:    var(--nb-space-3);    /* 12 */
    --nb-cell-pad-x:  10px;
    --nb-modal-pad:   var(--nb-space-4);    /* 16 */
    --nb-fs-display:  1.375rem;             /* page title steps down one notch */
  }
}

/* ─── Shell tokens — Phase 2, Step 3 (additive) ────────────────────────────────
   Dark cinematic direction: the content canvas is near-black and the sidebar /
   top bar sit one step lighter, so the shell reads as layers. The first four
   tokens are Step 3's (shell); the rest were appended in Step 5 (primitives).
   Step 5 also re-valued the existing light-theme tokens earlier in this file
   (see the note above --nb-surface). No token was renamed or removed, and the
   seven legacy-only token names from the Step 1 audit remain undeclared. */
:root {
  --nb-canvas:                #0d0f14;                          /* application canvas behind every view; darker than the sidebar */
  --nb-sidebar-bg-hover:      rgba(255, 255, 255, 0.05);        /* hover tint on dark chrome */
  --nb-sidebar-shadow-drawer: 12px 0 40px rgba(0, 0, 0, 0.55);  /* open mobile drawer edge */
  --nb-scrim-shell:           rgba(4, 5, 8, 0.72);              /* drawer scrim: heavier than --nb-scrim so it separates from a dark canvas */
  --nb-surface-raised:        #1c2230;                          /* Step 5: elevated panel (secondary buttons, table header, modal) */
  --nb-surface-lift:          #252c3d;                          /* Step 5: interactive lift (hover on raised surfaces) */
  --nb-on-primary:            #ffffff;                          /* Step 5: text on solid indigo (5.0:1 on --nb-primary) */
  --nb-violet-ink:            #c9a0f0;                          /* Step 5: team-assignment status */
  --nb-violet-dim:            rgba(155, 89, 182, 0.22);
  --nb-sky-ink:               #7fc4f5;                          /* Step 5: regular-season status */
  --nb-sky-dim:               rgba(52, 152, 219, 0.18);
  --nb-pink-ink:              #ff8fc4;                          /* Step 5: pick-color "pink" */
  --nb-pink-dim:              rgba(255, 105, 180, 0.18);
}

/* Reduced motion: duration tokens collapse to zero (nothing consumes them yet) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --nb-dur-fast: 0ms;
    --nb-dur-base: 0ms;
    --nb-dur-slow: 0ms;
  }
}

/* ─── Reduced motion — Phase 2, Step 2 ─────────────────────────────────────────
   Global, order-independent (!important inside the media query is the standard
   pattern so it also beats the per-component transition rules in the theme
   files). Under prefers-reduced-motion: transitions and animations collapse to
   an instant change, and the drawer/modal/tab movement therefore stops.
   The boot loading spinner is a functional "still working" indicator, so it is
   NOT removed — it is slowed instead. No JS listens for transitionend /
   animationend anywhere in the app (verified), so instant changes are safe. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .boot-loading-spinner {
    animation-duration: 2.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* ─── Reset & Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Responsive redesign pass: base type scale was pinned below the 16px
   browser default, which silently shrank every rem-based measurement
   site-wide (type, padding, gaps all use rem). Restoring 16px as the
   floor — with a small fluid increase on larger viewports — fixes that
   root cause once, instead of patching dozens of individual components. */
html { font-size: clamp(16px, 0.35vw + 15.3px, 17px); }

body {
  font-family: var(--font-ui);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* Phase 10: guard against accidental page-level horizontal overflow on mobile — components that legitimately need horizontal scroll (bracket, tables) get their own scoped scroll containers instead. */

  /* Global background image (index.html + admin.html both load this
     stylesheet, so this applies everywhere with a single implementation —
     see :root's --bg-card above for how content stays readable on top of
     it). --bg is kept as background-color: it's the fallback shown before
     the image loads and behind any transparent part of it, and it already
     closely matches the image's own near-black base tone.
     - A dark overlay is layered on top of the image itself (first
       background-image, painted above the actual bg.jpg beneath it) so
       the presentation is guaranteed low-contrast/subtle regardless of a
       given screen's brightness — the image file itself is untouched.
     - cover + center + no-repeat + fixed: fills the viewport, keeps the
       image's own aspect ratio (no stretching), never tiles, and stays in
       place while the page scrolls. */
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(9, 10, 13, 0.72), rgba(9, 10, 13, 0.72)),
    url('../assets/bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

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

/* ─── Layout ─────────────────────────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  position: sticky; top: 0; z-index: 100;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 56px;
}

.site-logo {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  flex-shrink: 0;
}

.site-logo span { color: var(--accent); }

.site-nav {
  display: flex;
  gap: 0.25rem;
  flex: 1;
}

.nav-link {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r);
  color: var(--text-muted);
  transition: color 0.15s, background 0.15s;
  cursor: pointer;
  text-transform: uppercase;
}
.nav-link:hover { color: var(--text); background: var(--bg-hover); }
.nav-link.active { color: var(--accent); background: var(--accent-dim); }

.header-right { margin-left: auto; }

.admin-link {
  font-size: 0.75rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text-muted);
}
.admin-link:hover { color: var(--text); border-color: var(--border-light); }

.main-content {
  /* THE actual root cause of the "shrunken desktop" bug: .nb-content-col
     (shell.css) is a column flex container, which makes <main> a flex
     item on its cross axis (horizontal). A flex item with auto side
     margins (`margin: 0 auto`, used here purely to center a max-width
     column) is explicitly exempted from cross-axis stretch by the
     flexbox spec — so without an explicit width, this was shrinking to
     fit its own content (roughly its narrowest child's width) instead
     of filling the sidebar's remaining space and THEN being capped by
     max-width. Every viewport, every page, at every one of the previous
     max-width values (1200 → 1440), was silently affected: the
     max-width number was never actually the thing limiting the layout.
     `width: 100%` restores fill-then-cap behavior; margin:auto still
     centers whatever space max-width leaves over. */
  width: 100%;
  /* Fluid cap instead of a flat number: grows on large/ultra-wide
     monitors (1920px+) rather than leaving a fixed-width column with a
     big dead margin on either side, but still stops short of full-bleed
     so line lengths and card widths stay readable. Horizontal padding
     is fluid too, so wide screens get more breathing room instead of
     the same 1.5rem gutter stretched thin. */
  max-width: min(1680px, 96%);
  margin: 0 auto;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.75rem) clamp(1.25rem, 0.5rem + 1.6vw, 2.5rem);
}

/* ─── Dashboard ──────────────────────────────────────────────────────────────── */
.season-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.season-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.season-name {
  /* Fluid page-title scale: reads as a real title on desktop without
     needing a separate hardcoded mobile override (the old 700px
     media-query below still trims it further for very small phones). */
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.stats-row {
  display: grid;
  /* Wider minmax floor so cards don't multiply into a dozen skinny
     slivers on ultra-wide monitors now that .main-content can grow
     past 1440px — each card stays a sensible width instead of just
     adding more columns. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(1rem, 0.75rem + 0.5vw, 1.5rem);
  margin-bottom: 2.5rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(1.2rem, 1rem + 0.5vw, 1.6rem) clamp(1.4rem, 1.2rem + 0.5vw, 1.8rem);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stat-num {
  /* Important stats get real visual weight on desktop instead of a flat
     size that reads the same at 1280px and 1920px. */
  font-size: clamp(1.9rem, 1.6rem + 1vw, 2.6rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* ─── Section ────────────────────────────────────────────────────────────────── */
.section { margin-bottom: 2.5rem; }

.section-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

/* ─── Team Grid ──────────────────────────────────────────────────────────────── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  transition: border-color 0.15s;
}
.team-card:hover { border-color: var(--border-light); }

.team-abbr {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--accent);
  min-width: 3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.team-owner {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
}
.team-nba {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─── Teams View ─────────────────────────────────────────────────────────────── */
.teams-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.5rem;
}

.teams-sidebar { border-right: 1px solid var(--border); padding-right: 1.5rem; }

.team-list { list-style: none; }

.team-list-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--r);
  cursor: pointer;
  transition: background 0.12s;
}
.team-list-item:hover { background: var(--bg-hover); }
.team-list-item.selected { background: var(--accent-dim); }
.team-list-item.selected .list-owner { color: var(--accent); }

.list-abbr { font-weight: 700; font-size: 0.85rem; width: 2.5rem; color: var(--accent); }
.list-owner { font-size: 0.9rem; }

.roster-panel { padding: 0.5rem 0; }

.roster-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.roster-team-id { display: flex; align-items: center; gap: 1rem; }
.roster-abbr { font-size: 2.5rem; font-weight: 900; color: var(--accent); }
.roster-owner { font-size: 1.2rem; font-weight: 700; }
.roster-teamname { font-size: 0.85rem; color: var(--text-muted); }

/* ─── Roster Table ───────────────────────────────────────────────────────────── */
.roster-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.roster-table th {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.roster-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.roster-table tbody tr:hover { background: var(--bg-hover); }
.ovr { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

/* ─── Phase 10.4: All Rosters (public) ────────────────────────────────────────── */
.all-rosters-header { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.all-rosters-title { font-size: 1.4rem; font-weight: 900; letter-spacing: -0.01em; }
.all-rosters-cap-note { font-size: 0.82rem; color: var(--text-muted); }

/* Old Season Roster Viewer: season picker + past-season indicator */
.all-rosters-season-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.all-rosters-season-picker {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
  border-radius: var(--nb-r, 10px);
  cursor: pointer;
}
.all-rosters-season-picker:disabled { cursor: default; opacity: 0.7; }
.all-rosters-old-season-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}

.roster-card-grid {
  display: grid;
  /* Explicit 3/2/1 breakpoints (desktop/tablet/mobile) rather than a fluid
     auto-fill track — auto-fill's column count depends on the exact
     viewport width and could silently drop to 2 columns on some desktop
     widths; this guarantees the reference layout at each tier. */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

@media (max-width: 1000px) {
  .roster-card-grid { grid-template-columns: repeat(2, 1fr); }
}

.roster-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.85rem;
}

.roster-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.roster-card-name { font-size: 1.05rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-card-count { font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; }

.roster-card-cap-labels { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.35rem; }
.roster-card-ovr-total { font-size: 1.3rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.roster-card-cap-value { font-size: 0.78rem; color: var(--text-muted); }
.roster-card-remaining { text-align: right; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.3rem; }

.roster-card-table { font-size: 0.78rem; }
.roster-card-table th, .roster-card-table td { padding: 0.4rem 0.5rem; }
.roster-card-source { color: var(--text-dim); font-size: 0.72rem; text-transform: capitalize; }

/* ─── Hall of Fame (public) — static historical champions archive ─────────────
   Presentation-only, same card/table language as .roster-card above.
   Structural rules live here (main.css); color/theme overrides for the
   public site live in public-theme.css, same split as everywhere else
   in this file. No JS in hall-of-fame.js depends on class names beyond
   what's used below. */
.hof-list { display: flex; flex-direction: column; gap: 1.1rem; }

.hof-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.65rem;
}

.hof-card-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--border);
}
.hof-season { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.hof-champion { font-size: 1.15rem; font-weight: 900; letter-spacing: -0.01em; }
.hof-champion-badge {
  margin-left: auto; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em;
  padding: 0.2rem 0.55rem; border-radius: 999px;
}

.hof-roster { display: flex; flex-direction: column; }
.hof-row {
  display: grid; grid-template-columns: 2rem 1fr 3rem 3rem;
  align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.hof-roster .hof-row:last-child { border-bottom: none; }
.hof-row-slot { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hof-row-player { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-row-pos { color: var(--text-muted); text-align: center; }
.hof-row-ovr { font-weight: 700; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }

.hof-roster-extra[hidden] { display: none; }

.hof-toggle-btn {
  align-self: flex-start; margin-top: 0.2rem;
  font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  background: none; border: 1px solid var(--border); border-radius: var(--r);
  padding: 0.35rem 0.7rem; cursor: pointer; color: var(--text-muted);
}
.hof-toggle-btn:hover { color: var(--text); border-color: var(--accent); }

@media (max-width: 700px) {
  .hof-row { grid-template-columns: 1.6rem 1fr 2.4rem 2.4rem; font-size: 0.8rem; gap: 0.35rem; }
  .hof-champion-badge { margin-left: 0; }
}

/* ─── Phase 10.4: Teams (public) — team-identity focus, no roster table ───────── */
.team-detail-panel { padding: 0.5rem 0; }
.team-detail-hero {
  display: flex; align-items: center; gap: 1.1rem;
  padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.team-detail-name { font-size: 1.4rem; font-weight: 800; }
.team-detail-owner { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.2rem; }

.team-detail-facts { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.team-detail-fact { display: flex; flex-direction: column; gap: 0.25rem; }
.team-detail-fact-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.team-detail-fact-value { font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; gap: 0.4rem; }
.team-color-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--border-light); }

.team-detail-roster-link { font-size: 0.85rem; color: var(--text-muted); }
.team-detail-roster-link a { font-weight: 600; }

/* ─── Status Chips ───────────────────────────────────────────────────────────── */
.status-chip {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.status-setup         { background: #1a2035; color: #7a9ff5; }
.status-draft         { background: #1a2a1a; color: #5ecf5e; }
.status-team_assignment { background: #2a1a2a; color: #cf7ef0; }
.status-regular_season { background: #2a2a1a; color: #f0d060; }
.status-playoffs      { background: #2a1a1a; color: #f07070; }
.status-complete      { background: #1a2a20; color: #40d090; }

/* ─── Seasons List ───────────────────────────────────────────────────────────── */
.seasons-list { display: flex; flex-direction: column; gap: 0.5rem; }
.season-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.season-row.active { border-color: var(--accent); }

/* ─── Empty State ────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  gap: 0.75rem;
}
.empty-icon { font-size: 3rem; }
.empty-state h2 { font-size: 1.3rem; font-weight: 700; }
.empty-state p { color: var(--text-muted); max-width: 400px; }
.coming-soon {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--border);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
}

/* ─── Utilities ──────────────────────────────────────────────────────────────── */
.muted { color: var(--text-muted); }

/* Global site credit — shared by index.html and admin.html (see each
   file's <footer class="site-footer">). Deliberately minimal: no new
   colors/sizing system, just the existing muted-text token and the app's
   small-print sizing scale. */
.site-footer {
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.hidden { display: none !important; }

/* ─── Toast ──────────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.7rem 1.4rem;
  border-radius: var(--r-lg);
  font-size: 0.875rem;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 1000;
  white-space: nowrap;
}
.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-success { border-color: var(--green); color: var(--green); }
.toast-error   { border-color: var(--red); color: var(--red); }
.toast-info    { border-color: var(--border-light); }

/* ══════════════════════════════════════════════════════════════════════════
   Phase 10 — Team Identity (badges), Pool Tabs, Player/Matchup Cards, Bracket
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Team Identity / Badge ───────────────────────────────────────────────
   Local placeholder marks (color + initials) — see shared-utils.js:teamBadge().
   No real logo image assets exist yet; swap the badge markup there later. */
.team-identity { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.team-identity-name { font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-identity-name-empty { color: var(--text-dim); font-weight: 500; }
.team-identity-abbr { font-weight: 700; font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.03em; }

.team-badge {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r); font-weight: 800; letter-spacing: 0.02em;
  flex-shrink: 0; line-height: 1;
}
.team-badge-sm { width: 22px; height: 22px; font-size: 0.55rem; border-radius: 5px; }
.team-badge-md { width: 34px; height: 34px; font-size: 0.68rem; border-radius: 7px; }
.team-badge-lg { width: 56px; height: 56px; font-size: 1rem; border-radius: 10px; }

/* Logo <img> mirrors the same box sizes as the colored-initial badge it
   can fall back to (see shared-utils.js:teamBadge), so swapping between
   the two on image-load-error never shifts layout. */
.team-logo-img { display: inline-block; object-fit: contain; flex-shrink: 0; vertical-align: middle; }
.team-logo-img-sm { width: 22px; height: 22px; }
.team-logo-img-md { width: 34px; height: 34px; }
.team-logo-img-lg { width: 56px; height: 56px; }
.team-badge-empty { background: var(--bg-hover); color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--border-light); }

/* ─── Pool Tabs (Green Pool / Blue Pool) ──────────────────────────────────
   Used on Draft, Admin Players, and Public Players. First tab is always
   Green, second is always Blue — no "Unassigned" tab is ever rendered. */
/* ─── Pool Tabs — segmented pill style (shared by Draft, Admin Draft/Players,
   and the Public/Admin Players database) ────────────────────────────────── */
.pool-tabs { display: flex; gap: 0.6rem; margin-bottom: 1.25rem; border-bottom: none; flex-wrap: wrap; }
.pool-tab {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 1.3rem; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted);
  cursor: pointer; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  font-family: var(--font-ui); transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.pool-tab:hover { color: var(--text); border-color: var(--border-light); }
.pool-tab .pool-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pool-tab-green .pool-dot { background: var(--pool-green); }
.pool-tab-blue .pool-dot { background: var(--pool-blue); }
.pool-tab.active.pool-tab-green { color: var(--pool-green); border-color: var(--pool-green); background: var(--pool-green-dim); }
.pool-tab.active.pool-tab-blue { color: var(--pool-blue); border-color: var(--pool-blue); background: var(--pool-blue-dim); }
.pool-tab-count { font-size: 0.7rem; color: inherit; opacity: 0.75; font-weight: 600; }

/* ─── NBA 2K27 Pool page redesign (Players-page-style column layout) ─────
   Shared by BOTH the redesigned admin NBA 2K27 Pool page
   (js/admin/nba2k-database.js Nba2k27PoolView) and the public NBA 2K27
   Player Pool page (js/views/nba2k27.js) — both call the SAME
   positionPoolGrid() below with mode:'view', so this lives here (the
   file both admin.html and index.html already load) rather than in
   either page's own theme file. Only the WHITE-pool color variant is
   added here — the two-pool 2K26 Draft Pool above only ever needed
   green/blue; 2K27 adds Classics -> white. */
.pos-table-white .pos-table-head {
  background: var(--pool-white-dim, rgba(215,218,224,0.14));
  color: var(--pool-white, #d7dae0);
  border-bottom: 1px solid rgba(215,218,224,0.25);
}
.pool-tab-white .pool-dot { background: var(--pool-white, #d7dae0); }
.pool-tab.active.pool-tab-white {
  color: var(--pool-white, #d7dae0);
  border-color: var(--pool-white, #d7dae0);
  background: var(--pool-white-dim, rgba(215,218,224,0.14));
}

/* The UNASSIGNED band sits BELOW the five position columns (never as a
   sixth column beside them) — a full-width single-column .pos-table
   using the exact same row styling, so a player who still needs manual
   sorting reads identically to one who already has a position, just in
   its own clearly-labeled section. Shared by both the admin and public
   2K27 Pool pages. */
.nba2k27pool-unassigned-band { margin-top: 1.1rem; }
.nba2k27pool-unassigned-label {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--nb-text-muted, var(--text-muted)); margin-bottom: 0.5rem;
}
.nba2k27pool-unassigned-grid { grid-template-columns: 1fr; }
.nba2k27pool-unassigned-grid .pos-table { max-width: 420px; }

/* Public page only: positionPoolGrid()'s mode:'view' rows have no click
   styling of their own (that's reserved for 'manage'/'draft' modes) —
   the public 2K27 Pool page wires an actual click handler onto each row
   to open the player-details modal (see js/views/nba2k27.js
   `_refreshList`), so give those rows a pointer cursor and a hover
   affordance, scoped to this page's own wrapper so the read-only admin
   view (which adds no click handler at all) is never affected. */
.pub2k27-clickable-columns .pos-table-row { cursor: pointer; }
.pub2k27-clickable-columns .pos-table-row:hover,
.pub2k27-clickable-columns .pos-table-row:focus-visible {
  background: var(--surface-hover, rgba(255,255,255,0.04));
  outline: none;
}

/* Manual Edit + Variant grouping (admin NBA 2K27 Pool page only) */
.nba2k27edit-card .input { margin-top: 0.25rem; margin-bottom: 0.5rem; width: 100%; }
.nba2k27edit-card hr { border: none; border-top: 1px solid var(--border-light, rgba(255,255,255,0.08)); margin: 1rem 0; }
.nba2k27edit-variant-list { margin: 0.3rem 0 0.6rem 1.1rem; font-size: 0.85rem; color: var(--text-muted); }

.pool-pane { display: none; }
.pool-pane.active { display: block; }

.pool-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem; border-radius: 999px;
}
.pool-badge-green { background: var(--pool-green-dim); color: var(--pool-green); }
.pool-badge-blue { background: var(--pool-blue-dim); color: var(--pool-blue); }
.pool-badge-white { background: var(--pool-white-dim, rgba(215,218,224,0.14)); color: var(--pool-white, #d7dae0); }

/* ─── Player Database header + pool-info cards (Players pages) ──────────── */
.player-db-header { margin-bottom: 1.5rem; }
.player-db-title { font-size: 1.6rem; font-weight: 900; letter-spacing: -0.01em; margin-bottom: 0.35rem; }
.player-db-subtitle { color: var(--text-muted); font-size: 0.88rem; max-width: 640px; line-height: 1.5; }

.pool-info-row { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 1.25rem 0; }
.pool-info-card {
  flex: 1; min-width: 240px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem;
  border-left: 3px solid var(--border-light);
}
.pool-info-card.pool-info-green { border-left-color: var(--pool-green); }
.pool-info-card.pool-info-blue { border-left-color: var(--pool-blue); }
.pool-info-card.pool-info-white { border-left-color: var(--pool-white, #d7dae0); }
.pool-info-card-title { display: flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.03em; }
.pool-info-card.pool-info-green .pool-info-card-title { color: var(--pool-green); }
.pool-info-card.pool-info-blue .pool-info-card-title { color: var(--pool-blue); }
.pool-info-card.pool-info-white .pool-info-card-title { color: var(--pool-white, #d7dae0); }
.pool-info-card-desc { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }

.pool-legend-footer {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: 0.78rem; color: var(--text-muted);
}
.pool-legend-footer .legend-item { display: flex; align-items: center; gap: 0.4rem; }
.pool-legend-footer .legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.pool-legend-footer .legend-dot.green { background: var(--pool-green); }
.pool-legend-footer .legend-dot.blue { background: var(--pool-blue); }
.pool-legend-footer .legend-dot.white { background: var(--pool-white, #d7dae0); }
.pool-legend-footer .legend-dot.live { background: var(--green); } /* Phase 2 Step 2: decorative pulse retired; the dot + "Updated in real time" label remain */

.drafted-note {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 0.75rem 1rem; margin-top: 1.5rem; font-size: 0.8rem; color: var(--text-muted);
}
.drafted-note .swatch { width: 16px; height: 16px; border-radius: 4px; background: var(--bg-hover); border: 1px solid var(--border-light); flex-shrink: 0; }

/* ─── Position Pool Table (2K-Ratings-style columns) ─────────────────────
   Shared by the public and admin Players pages. Each position column is
   its own mini-table: colored head bar, a labeled header row, then ranked
   rows (rank / name / OVR, + a delete "×" in admin mode). */
.pos-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.9rem;
  align-items: start;
}

.pos-table {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden;
}
.pos-table-head {
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-align: center;
  padding: 0.6rem 0.5rem; color: var(--text);
}
.pos-table-green .pos-table-head { background: var(--pool-green-dim); color: var(--pool-green); border-bottom: 1px solid rgba(52,209,124,0.25); }
.pos-table-blue .pos-table-head { background: var(--pool-blue-dim); color: var(--pool-blue); border-bottom: 1px solid rgba(77,155,245,0.25); }

.pos-table-columns-head {
  display: grid; grid-template-columns: 1.6rem 1fr 2.4rem;
  padding: 0.4rem 0.6rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border);
}
.pos-table-columns-head span:last-child { text-align: right; }

.pos-table-body { display: flex; flex-direction: column; }
.pos-table-empty { padding: 0.9rem 0.6rem; font-size: 0.75rem; color: var(--text-dim); text-align: center; }

.pos-table-row {
  display: grid; grid-template-columns: 1.6rem 1fr 2.4rem; align-items: center;
  padding: 0.4rem 0.6rem; font-size: 0.82rem; border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.pos-table-row:last-child { border-bottom: none; }
.pos-table-row:hover { background: var(--bg-hover); }

.pos-rank { color: var(--text-dim); font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pos-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.pos-ovr { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.pos-ovr-elite { color: var(--pool-green); }
.pos-ovr-good { color: var(--text); }
.pos-ovr-role { color: var(--text-muted); }

.pos-variant-tag {
  font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--pool-blue); background: var(--pool-blue-dim); padding: 0.05rem 0.35rem; border-radius: 4px; flex-shrink: 0;
}
.pos-drafted-tag {
  font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-dim); background: var(--bg-hover); padding: 0.05rem 0.35rem; border-radius: 4px; flex-shrink: 0;
}
.pos-locked-tag { color: var(--yellow); background: rgba(241,196,15,0.12); }

.pos-table-row.drafted { opacity: 0.5; }
.pos-table-row.drafted .pos-name,
.pos-table-row.drafted .pos-ovr { text-decoration: line-through; color: var(--text-dim); }
.pos-table-row.locked { opacity: 0.65; }

.pos-table-columns-head { grid-template-columns: 1.6rem 1fr 2.4rem; }
.pos-table-row { grid-template-columns: 1.6rem 1fr 2.4rem; }
.pos-table-admin .pos-table-columns-head,
.pos-table-admin .pos-table-row { grid-template-columns: 1.6rem 1fr 2.4rem 1.6rem 1.6rem; }

.pos-row-delete {
  background: none; border: none; color: var(--text-dim); font-size: 1rem; line-height: 1;
  cursor: pointer; padding: 0.1rem 0.3rem; border-radius: 4px; transition: color 0.12s, background 0.12s;
}
.pos-row-delete:hover { color: var(--red); background: rgba(231,76,60,0.1); }

.pos-row-edit {
  background: none; border: none; color: var(--text-dim); font-size: 0.85rem; line-height: 1;
  cursor: pointer; padding: 0.1rem 0.3rem; border-radius: 4px; transition: color 0.12s, background 0.12s;
}
.pos-row-edit:hover { color: var(--accent); background: var(--accent-dim); }


/* ─── Position Board (draft/players grouping by PG/SG/SF/PF/C) ───────────── */
.position-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
.position-column { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.position-column-header {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}

/* ─── Player Card ──────────────────────────────────────────────────────────
   Used in Draft pools, Admin Players, Public Players. */
.player-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 0.65rem 0.75rem; display: flex; flex-direction: column; gap: 0.3rem;
  transition: border-color 0.15s, background 0.15s;
}
.player-card-name { font-weight: 700; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; color: var(--text-muted); }
.player-card-ovr { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.player-card-variant { font-size: 0.65rem; color: var(--text-dim); }

.player-card.selectable { cursor: pointer; }
.player-card.selectable:hover { border-color: var(--accent); background: var(--bg-hover); }

.player-card.drafted {
  opacity: 0.42; cursor: not-allowed; filter: grayscale(65%);
  background: var(--bg); border-style: dashed;
}
.player-card.drafted .player-card-ovr { color: var(--text-dim); }
.player-card.locked { opacity: 0.55; cursor: not-allowed; border-style: dashed; }

.player-card-status {
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.1rem 0.4rem; border-radius: 4px; align-self: flex-start;
}
.player-card-status.drafted-tag { background: var(--bg-hover); color: var(--text-dim); }
.player-card-status.locked-tag { background: rgba(241,196,15,0.12); color: var(--yellow); }

.player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.6rem; }

/* ─── Matchup Card (Schedule/Game-center style) ───────────────────────────── */
.matchup-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.6rem;
  transition: border-color 0.15s;
  overflow: hidden; /* belt-and-suspenders: nothing inside this card can visually
                        bleed into a neighboring grid card, no matter how long a
                        streamer name or participant name turns out to be */
}
.matchup-card.is-completed { border-color: var(--border-light); }
.matchup-card.is-bye { opacity: 0.55; }
.matchup-card-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; min-width: 0; }
.matchup-card-status { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.15rem 0.5rem; border-radius: 999px; flex-shrink: 0; }
.matchup-card-streamer {
  font-size: 0.72rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

.matchup-card-body { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.matchup-side { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.matchup-side.reverse { flex-direction: row-reverse; text-align: right; }
.matchup-side .team-identity { flex-shrink: 0; } /* logo + abbreviation keep their size; only the name truncates */
.matchup-side-name { font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.matchup-side.winner .matchup-side-name { color: var(--accent); }
.matchup-side-score { font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: center; flex-shrink: 0; }
.matchup-side.winner .matchup-side-score { color: var(--text); }
.matchup-side:not(.winner) .matchup-side-score { color: var(--text-dim); }
.matchup-vs-divider { color: var(--text-dim); font-size: 0.7rem; font-weight: 700; padding: 0 0.25rem; flex-shrink: 0; }

.matchup-card.is-bye .matchup-card-body { justify-content: center; color: var(--text-dim); font-size: 0.85rem; }

.schedule-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.75rem; }

/* Below ~360px a single card is too narrow to fit [logo+abbr] + name + score
   for BOTH sides on one line without truncating names down to nothing —
   stack the two sides into their own rows instead of shrinking any text. */
@media (max-width: 400px) {
  .matchup-card-body { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .matchup-side, .matchup-side.reverse { flex-direction: row; text-align: left; }
  .matchup-vs-divider { align-self: center; }
}

/* ─── Playoff Bracket (connected) ─────────────────────────────────────────── */
.bracket-scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.bracket {
  display: grid;
  grid-template-columns: repeat(4, minmax(190px, 1fr));
  gap: 0;
  min-width: 880px;
}
.bracket-col { display: flex; flex-direction: column; }
.bracket-col-header {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); text-align: center; padding: 0 0.5rem 0.75rem;
}
.bracket-col-sub { display: block; font-size: 0.6rem; color: var(--text-dim); font-weight: 600; margin-top: 0.15rem; text-transform: none; letter-spacing: 0; }

.bracket-slot { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 0.35rem 0.6rem; position: relative; }

.bracket-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  font-size: 0.78rem; overflow: hidden;
}
.bracket-card.active { border-color: var(--accent); }
.bracket-card.decided { border-color: var(--border-light); }
.bracket-card-row {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--border);
}
.bracket-card-row:last-child { border-bottom: none; }
.bracket-card-row.won { background: var(--accent-dim); }
.bracket-seed { font-size: 0.65rem; color: var(--text-dim); font-weight: 700; width: 1.1rem; flex-shrink: 0; }
.bracket-team-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket-card-row.won .bracket-team-name { color: var(--accent); }
.bracket-team-score { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.75rem; }
.bracket-card-tbd { padding: 0.55rem; text-align: center; color: var(--text-dim); font-size: 0.7rem; font-style: italic; }
.bracket-format-tag {
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text-dim);
  text-align: center; padding: 0.15rem 0; border-top: 1px dashed var(--border);
}

/* connector lines between rounds (desktop only — see responsive section) */
.bracket-col:not(:last-child) .bracket-slot::after {
  content: ''; position: absolute; right: -0.5rem; top: 50%; width: 1rem; height: 1px;
  background: var(--border-light);
}
.bracket-col:not(:first-child) .bracket-slot::before {
  content: ''; position: absolute; left: -0.5rem; top: 50%; width: 1rem; height: 1px;
  background: var(--border-light);
}

.bracket-champion-banner {
  background: linear-gradient(90deg, #caa23a, #e8cf7a);
  color: #2a2200; font-weight: 800; font-size: 1.1rem; text-align: center;
  padding: 1rem; border-radius: var(--r-lg); margin-bottom: 1.5rem;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
}

/* ─── Standings — mobile card fallback (table stays default ≥701px) ──────── */
.standings-cards { display: none; flex-direction: column; gap: 0.5rem; }
.standings-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  padding: 0.7rem 0.85rem; display: flex; align-items: center; gap: 0.75rem;
}
.standings-card-rank { font-size: 1rem; font-weight: 800; color: var(--text-dim); width: 1.6rem; text-align: center; flex-shrink: 0; }
.standings-card-rank.top4 { color: var(--accent); }
.standings-card-main { flex: 1; min-width: 0; }
.standings-card-owner { font-weight: 700; font-size: 0.88rem; }
.standings-card-record { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.standings-card-pd { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.85rem; }

/* ─── Home Dashboard v2 ────────────────────────────────────────────────────── */
.league-hero {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg) 100%);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 2rem 2rem 1.75rem; margin-bottom: 2rem; position: relative; overflow: hidden;
}
.league-hero::before {
  content: ''; position: absolute; top: -40%; right: -10%; width: 340px; height: 340px;
  background: radial-gradient(circle, var(--accent-dim) 0%, transparent 70%); pointer-events: none;
}
.league-hero-eyebrow {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.5rem;
}
.league-hero-title { font-size: 2.2rem; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.league-hero-meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; color: var(--text-muted); font-size: 0.85rem; }

.dashboard-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; }
.dashboard-col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

.mini-standings { display: flex; flex-direction: column; gap: 0.35rem; }
.mini-standings-row {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.6rem;
  border-radius: var(--r); font-size: 0.82rem;
}
.mini-standings-row:nth-child(odd) { background: var(--bg-card); }
.mini-standings-rank { width: 1.3rem; font-weight: 800; color: var(--text-dim); font-size: 0.78rem; }
.mini-standings-rank.top4 { color: var(--accent); }
.mini-standings-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-standings-record { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.78rem; }

.mini-schedule { display: flex; flex-direction: column; gap: 0.4rem; }
.mini-schedule-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.55rem 0.7rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r);
  font-size: 0.8rem;
}
.mini-schedule-teams { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.mini-schedule-teams span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.section-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.section-header-row .section-title { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.section-link { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* ─── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .teams-layout { grid-template-columns: 1fr; }
  .teams-sidebar { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 1rem; }
  .season-name { font-size: 1.4rem; }
  .header-inner { gap: 1rem; }

  .roster-card-grid { grid-template-columns: 1fr; }
  .roster-card-table { font-size: 0.72rem; }
  .roster-card-table th, .roster-card-table td { padding: 0.3rem 0.35rem; }
  .team-detail-hero { flex-wrap: wrap; }
  .team-detail-facts { gap: 1.25rem; }

  .dashboard-grid { grid-template-columns: 1fr; }
  .league-hero-title { font-size: 1.5rem; }
  .position-board { grid-template-columns: 1fr; }
  .position-board .position-column { border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }

  /* Standings: switch from table to stacked cards below 700px */
  .standings-table-wrap { display: none; }
  .standings-cards { display: flex; }
  .group-stage-grid { grid-template-columns: 1fr; }

  /* Group Stage cards: tighten table padding/font and stack the team
     cell (logo+abbr above, name below) so # / Team / W / L / +/- all
     fit at once without a horizontal scroll cutting off W, L, or +/-.
     .is-collapsed hides a group's body — this rule only exists in this
     ≤700px block, so it can never apply on desktop (see the >700px
     block below, which doesn't touch display at all — it doesn't need
     to, since this rule simply isn't there to begin with). */
  .group-standings-table th,
  .group-standings-table td { padding: 0.4rem 0.4rem; font-size: 0.78rem; }
  .group-team-cell { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
  .group-team-name { max-width: 120px; }
  .group-card-summary { cursor: pointer; }
  .group-card.is-collapsed .group-card-body { display: none; }
}

@media (min-width: 701px) {
  /* Desktop keeps the pre-existing static 2-per-row look: every group's
     table is always visible here regardless of .is-collapsed (that
     class only means something inside the ≤700px block above — this
     block never hides .group-card-body at all, so there's nothing for
     .is-collapsed to override). The summary is also inert since there's
     nothing to toggle. */
  .group-card-summary { cursor: default; pointer-events: none; }
  .group-card-summary::after { display: none; }
}

@media (max-width: 900px) {
  .bracket-col:not(:last-child) .bracket-slot::after,
  .bracket-col:not(:first-child) .bracket-slot::before { display: none; }
}

/* ─── Phase 4A: Public Roster View ────────────────────────────────────────────── */

/* Sidebar mini cap bar */
.list-owner-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.sidebar-cap-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cap-bar-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  flex: 1;
}

.cap-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.cap-bar-fill--ok   { background: var(--green, #2ecc71); }
.cap-bar-fill--warn { background: #f0a500; }
.cap-bar-fill--over { background: var(--red, #e74c3c); }

.sidebar-rating {
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cap-over-text { color: var(--red, #e74c3c); font-weight: 700; }

/* Detail panel cap bar */
.roster-cap-section {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface, #fff);
}

.cap-bar-wrap {
  /* shared with admin — defined here for public page */
}

.cap-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
}

.cap-bar-current {
  font-weight: 700;
}

.cap-bar-cap {
  color: var(--text-muted);
}

.cap-bar-track--detail {
  height: 6px;
}

/* ─── Phase 7: Regular Season Schedule (shared public/admin) ─────────────── */
.schedule-view {
  /* Widened from 780px — same reasoning as .main-content above: this cap
     predates the sidebar and was compounding with it. */
  max-width: 1040px;
  margin: 0 auto;
}

.round-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1rem 0 1.25rem;
}
.round-tab {
  padding: 0.4rem 0.85rem;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.round-tab:hover { color: var(--text); border-color: var(--border-light); }
.round-tab.active { color: var(--accent); background: var(--accent-dim); border-color: var(--accent); }

.matchup-list { display: flex; flex-direction: column; gap: 0.5rem; }

.matchup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.matchup-row.bye { opacity: 0.6; }
.matchup-row.completed { border-color: var(--border-light); }

.matchup-teams { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 220px; }
.matchup-teams .winner { font-weight: 800; color: var(--text); }
.matchup-vs { color: var(--text-dim); font-size: 0.72rem; }

.matchup-result { display: flex; align-items: center; gap: 0.75rem; }
.matchup-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.matchup-streamer { font-size: 0.75rem; color: var(--text-muted); }

.status-scheduled { background: #1a2035; color: #7a9ff5; }
.status-bye { background: #22262f; color: var(--text-dim); }
.matchup-card-status.status-complete { background: #1a2a20; color: #40d090; }

/* ─── Phase 8: Standings ──────────────────────────────────────────────────── */
.standings-view {
  /* Widened from 900px — same reasoning as .main-content above. */
  max-width: 1140px;
  margin: 0 auto;
}

.table-scroll { overflow-x: auto; }

.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.standings-table th {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.standings-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.standings-table tbody tr:hover { background: var(--bg-hover); }
.standings-abbr { font-weight: 800; color: var(--accent); }
.pd-pos { color: var(--green); }
.pd-neg { color: var(--red); }

/* Group Stage standings (Phase 8 revision): two group tables per row on
   desktop, following the spreadsheet layout — falls back to one column
   on narrow screens via the existing 700px breakpoint below. Additive
   only; nothing above this is renamed or restyled. */
.group-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

/* Group Stage mobile revision: each group becomes a collapsible
   full-width card at ≤700px.
   NOTE: an earlier version of this used native <details>/<summary> and
   tried to force it open on desktop via `display: block !important` on
   its children. That doesn't work — a closed <details>'s content isn't
   simply `display:none`-able CSS, browsers suppress it at the rendering
   level tied to the actual `open` IDL attribute, so no author CSS can
   override it back to visible. This version uses a plain div + a class
   toggle instead, so "always expanded on desktop" is a real CSS
   guarantee (the collapse rule below only exists inside the ≤700px
   media query — it has zero effect above that width, structurally,
   not just by convention) rather than something that depends on
   fighting native element behavior. */
.group-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.group-card-summary {
  padding: 0.55rem 0.85rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.group-card-summary::after {
  content: '▾';
  font-size: 0.65rem;
  transition: transform 0.15s ease;
}
.group-card:not(.is-collapsed) .group-card-summary::after { transform: rotate(180deg); }

/* Team cell: logo/abbr + participant name. Row layout on desktop
   (matches the old inline rendering); stacks to two lines on mobile
   (see the 700px breakpoint below) so the Team column stays narrow
   enough that W / L / +/- never get pushed off-screen. */
.group-team-cell { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.group-team-name {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

.streamer-table td:last-child { font-weight: 700; }

/* ─── Phase 9: Playoffs (shared public/admin) ─────────────────────────────── */
.playoffs-view, .playoffs-admin {
  /* Widened from 820px — same reasoning as .main-content above. Note
     the public bracket itself (.bracket-scroll) already scrolls
     horizontally independent of this cap when it needs to — this only
     affects the champion banner, round-jump row, and item cards. */
  max-width: 1080px;
  margin: 0 auto;
}

.champion-banner {
  background: linear-gradient(90deg, #caa23a, #e8cf7a);
  color: #2a2200;
  font-weight: 800;
  font-size: 1.05rem;
  text-align: center;
  padding: 0.85rem 1rem;
  border-radius: var(--r-lg, var(--r));
  margin: 0.75rem 0 1.25rem;
}

.playoff-pool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 1rem;
  margin-bottom: 1rem;
}
.playoff-pool-card h4 { font-size: 0.85rem; margin-bottom: 0.5rem; }

.playoff-item-list { display: flex; flex-direction: column; gap: 0.5rem; }

.playoff-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
}
.playoff-item-card.completed { border-color: var(--border-light); }
.playoff-item-card h5 { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.4rem; text-transform: uppercase; letter-spacing: 0.06em; }

.playoff-game-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--border);
  margin-top: 0.4rem;
  font-size: 0.8rem;
}

.selection-choices { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }

/* Boot loading — shown while Firestore's first snapshot (and, on the
   admin page, Firebase Auth's initial session check) is in flight. */
.boot-loading {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.85rem;
  z-index: 9999;
}
.boot-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: boot-loading-spin 0.8s linear infinite;
}
@keyframes boot-loading-spin {
  to { transform: rotate(360deg); }
}