/* ════════════════════════════════════════════════════════════════════════
   NATIONAL EXPOSURE BASKETBALL — Design System
   ────────────────────────────────────────────────────────────────────────
   Typography: Oswald (display / scoreboard) + Manrope (body).
   Palette: NEB black and hot pink from the wordmark, basketball orange
   accents, red kept for errors only. Engine tokens keep their --sts-* names
   (--sts-navy is near black, --sts-red and --tn-orange are the pink, --sts-gold is orange).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Raw tokens ─────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --sts-navy:      #0E0E12;
  --sts-navy-dark: #050507;
  --sts-red:       #ED1E79;
  --sts-red-dark:  #C5155F;
  --sts-gold:      #F0842C;
  --sts-white:     #FFFFFF;
  --sts-ink:       #141418;
  --sts-muted:     #5C5C66;
  --sts-paper:     #F7F7F9;
  --sts-line:      #E6E6EB;
  --sts-sub:       #F1F1F4;

  /* NEB brand */
  --tn-orange:      #ED1E79;   /* NEB hot pink, the CTA colour (token name kept for the engine) */
  --tn-orange-dark: #C5155F;
  --tn-orange-ink:  #B0125A;   /* pink family, readable on white */
  --danger:         #C8102E;

  /* Semantic */
  --bg:       var(--sts-paper);
  --surface:  var(--sts-white);
  --fg:       var(--sts-ink);
  --muted:    var(--sts-muted);
  --line:     var(--sts-line);
  --primary:  var(--sts-navy);
  --primary-dark: var(--sts-navy-dark);
  --accent:   var(--sts-red);
  --accent-dark: var(--sts-red-dark);
  --gold:     var(--sts-gold);

  /* Shape */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 18px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --shadow:    0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.12), 0 4px 8px rgba(15,23,42,.06);

  /* Type scale (1.25) */
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 3.75rem;

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;

  --container: 1240px;
  --container-narrow: 880px;

  --font-display: 'Oswald', 'Manrope', system-ui, sans-serif;
}

/* ── Reset / base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--text-base); line-height: 1.55;
  color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 var(--space-4); color: var(--sts-navy); }
h1 { font-size: var(--text-4xl); letter-spacing: -.02em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-4); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }
.eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-size: var(--text-xs); font-weight: 500; color: var(--accent); }
.muted { color: var(--muted); }
.center { text-align: center; }

/* ── Layout ────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.container.narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-8); }
.section-tight { padding-block: var(--space-6); }

/* ── Top nav (frosted) ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(14,14,18, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: var(--sts-white);
  border-bottom: 3px solid var(--tn-orange);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 64px; }
/* Nav spans full width so the brand hugs the left edge (not the centered gutter) */
.nav > .container.nav-inner { max-width: none; padding-left: var(--space-4); padding-right: var(--space-4); }
.nav-brand { display: flex; align-items: center; gap: var(--space-3); color: var(--sts-white); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: .02em; text-transform: uppercase; }
.nav-brand:hover { text-decoration: none; }
.nav-crest { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 2px 6px rgba(0,0,0,.25); }
/* the real logo is a transparent PNG — show just the ball, no white circle/ring */
img.nav-crest { width: auto; height: 46px; border-radius: 0; background: transparent; box-shadow: none; object-fit: contain; }
.nav-brand .name-block { display: flex; flex-direction: column; line-height: 1.05; }
.nav-brand .name-block .sub { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.nav-links { list-style: none; display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0; }
.nav-links a { color: rgba(255,255,255,.9); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-sm); font-weight: 500; padding: 8px 12px; border-radius: 6px; text-decoration: none; transition: background .12s ease, color .12s ease; }
.nav-links a:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.nav-links a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.18); }
.nav-cta { background: var(--tn-orange) !important; color: #fff !important; font-weight: 700 !important; }
.nav-cta:hover { background: var(--tn-orange-dark) !important; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; }
/* Mobile-menu furniture. Hidden on desktop — without this the close button renders as a
   stray ✕ in the nav bar next to Home, and the scrim can appear once the menu has been used. */
.nav-close, .nav-scrim { display: none; }
.nav-more { position: relative; }
.nav-dropdown { list-style: none; margin: 0; padding: 6px; position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--sts-navy); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 2px; }
.nav-more.open .nav-dropdown { display: flex; }
.nav-dropdown a { display: block; }
.caret { font-size: 10px; }
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }

  /* The slide-in panel lives inside .nav, and .nav's backdrop-filter creates a containing
     block for position:fixed descendants — which pinned the panel to the 64px header instead
     of the viewport (it rendered 96px tall). Drop the blur at menu widths; the bar is solid
     navy on mobile anyway, so nothing is lost visually. */
  .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--sts-navy); }

  /* ── Mobile menu: full-height slide-in panel ───────────────────────────────
     Replaces a drop-down that animated its max-height (janky), dumped all 16
     links in one list, and scrolled inside itself. Now: a real panel over a
     dimmed page, thumb-sized rows, and the secondary links collapsed. */
  .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0,10,26,.6); opacity: 0; pointer-events: none;
    transition: opacity .24s ease; z-index: 45; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .nav-scrim.open { opacity: 1; pointer-events: auto; }

  .nav-links {
    position: fixed; top: 0; right: 0; bottom: 0; left: auto;
    width: min(86vw, 360px); max-height: none;
    flex-direction: column; align-items: stretch; gap: 0;
    background: linear-gradient(180deg, #00306f 0%, #00142f 100%);
    padding: 68px 0 max(28px, env(safe-area-inset-bottom)); margin: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow: -20px 0 50px rgba(0,0,0,.4); z-index: 50;
  }
  .nav-links.open { transform: translateX(0); touch-action: pan-y; overscroll-behavior: contain; }

  /* close (X) — sits inside the panel so it's always reachable with a thumb */
  .nav-close { position: absolute; top: 14px; right: 12px; width: 44px; height: 44px; display: inline-flex;
    align-items: center; justify-content: center; background: rgba(255,255,255,.1); border: 0; border-radius: 50%;
    color: #fff; font-size: 20px; line-height: 1; cursor: pointer; z-index: 2; }
  .nav-close:active { background: rgba(255,255,255,.2); }

  .nav-links > li { display: block; }
  .nav-links a { display: block; font-size: 16px; font-weight: 600; letter-spacing: .04em;
    padding: 16px 24px; border-radius: 0; color: #fff; }
  .nav-links > li + li > a { border-top: 1px solid rgba(255,255,255,.09); }
  .nav-links a:hover, .nav-links a:active { background: rgba(255,255,255,.1); }
  .nav-links a[aria-current="page"] { background: rgba(255,255,255,.14); box-shadow: inset 4px 0 0 var(--gold); }

  /* Register stays the stand-out action */
  .nav-links a.nav-cta { margin: 16px 20px 6px; border-radius: 8px; text-align: center; padding: 15px 20px;
    box-shadow: 0 6px 18px rgba(31,79,216,.35); border-top: 0 !important; }

  /* "More" collapses instead of dumping 6 extra links into the list */
  .nav-more .caret { float: right; transition: transform .2s ease; }
  .nav-more.open .caret { transform: rotate(180deg); }
  .nav-dropdown { position: static; display: none; flex-direction: column; gap: 0;
    background: rgba(0,0,0,.22); border: 0; border-radius: 0; margin: 0; padding: 0; box-shadow: none; }
  .nav-more.open .nav-dropdown { display: flex; }
  .nav-dropdown a { font-size: 15px; font-weight: 500; padding: 14px 24px 14px 38px; color: rgba(255,255,255,.86); }
  .nav-dropdown li + li a { border-top: 1px solid rgba(255,255,255,.07); }

  /* Menu open → freeze the page behind it. overflow:hidden alone doesn't hold on iOS Safari,
     so touch-action/overscroll-behavior stop the touch-drag too. Kept INSIDE this media query
     so a stale .nav-locked class can never strand a desktop page unscrollable. */
  html.nav-locked, body.nav-locked { overflow: hidden; touch-action: none; overscroll-behavior: none; }
}
@media (max-width: 1180px) and (prefers-reduced-motion: reduce) {
  .nav-links { transition: none; }
  .nav-scrim { transition: none; }
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: var(--text-sm); padding: 13px 28px; border-radius: 6px; text-decoration: none; display: inline-block; border: none; cursor: pointer; transition: transform .14s ease, filter .14s ease, background .14s ease; }
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { filter: brightness(1.08); }
.btn-red { background: var(--sts-red); color: #fff; }
.btn-red:hover { background: var(--sts-red-dark); color: #fff; }
.btn-navy { background: var(--sts-navy); color: #fff; }
.btn-navy:hover { background: var(--sts-navy-dark); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.btn-ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-outline { background: #fff; color: var(--sts-navy); border: 1.5px solid var(--line); }
.btn-outline:hover { border-color: var(--sts-navy); }
.btn-sm { padding: 8px 16px; font-size: var(--text-xs); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 58vh; display: flex; flex-direction: column; justify-content: center; color: #fff; padding: var(--space-8) 0; text-align: center;
  background: linear-gradient(180deg, rgba(0,18,48,.86) 0%, rgba(0,24,60,.6) 45%, rgba(0,18,48,.9) 100%), var(--sts-navy); background-size: cover; background-position: center; }
.hero .eyebrow { color: var(--gold); display: inline-flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: var(--space-3); letter-spacing: .2em; }
.hero .eyebrow::before, .hero .eyebrow::after { content: ''; width: 32px; height: 2px; background: var(--gold); }
.hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.6rem); margin: 6px auto 12px; max-width: 20ch; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.hero p { color: rgba(255,255,255,.92); font-size: var(--text-lg); max-width: 56ch; margin: 0 auto var(--space-5); text-shadow: 0 1px 16px rgba(0,0,0,.5); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ── Pre-branded page banners (assets/headers/*.jpg, ~2.5:1, title baked in) ── */
.page-banner { width: 100%; background: var(--sts-navy-dark); border-bottom: 3px solid var(--tn-orange); }
/* The banners are 2.5:1, so at full width they'd be ~575px tall on a desktop — too tall.
   Cap the height and cover-crop (trims the busy top/bottom edges, keeping the title at the
   same size). Per-page object-position (inline on each <img>) keeps that banner's title
   centered in the cropped strip. */
.page-banner img { display: block; width: 100%; height: clamp(100px, 13vw, 215px); object-fit: cover; object-position: center 50%; }
/* New 1600x300 (≈5.3:1) banners are designed to be shown in FULL — no crop. Natural
   height = width ÷ 5.3, so ~270px on desktop, ~360px full-bleed. Scoped so the older
   2.5:1–3:1 banners stay capped (they'd be 500–700px tall if shown full). */
.page-banner-full img { height: auto; object-fit: fill; }
/* ── Branded page header: a real photo as an atmospheric backdrop, a navy fade so the
   white title always reads, the pink accent line at the base. The title is live text on
   top (not baked into the image), so nothing gets cropped off and every page matches. ── */
/* Page header: solid navy with a strong pink glow from the right, the real NEB wordmark, a bold
   Archivo Expanded title and a one-line subtitle. No photo, so it loads instantly, never looks
   fake and never crops a subject. Same on every page. */
.page-hero { position: relative; width: 100%; background: var(--sts-navy-dark); border-bottom: 5px solid var(--tn-orange); overflow: hidden; }
.page-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; background: radial-gradient(95% 160% at 100% 50%, rgba(237,30,121,.70) 0%, rgba(237,30,121,0) 56%); }
.page-hero .container { position: relative; z-index: 1; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: clamp(14px, 1.8vw, 22px); }
.page-hero h1 { color: #fff; margin: 0; font-family: 'Archivo', var(--font-display), system-ui, sans-serif; font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1; }
.page-hero .ph-sub { color: rgba(255,255,255,.76); margin: 6px 0 0; max-width: 60ch; font-size: clamp(0.875rem, 1.3vw, 1rem); }
.page-hero .ph-kick { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .18em; font-size: var(--text-xs); color: var(--tn-orange); font-weight: 600; margin: 0 0 8px; }
.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; }

/* ── Demo-mode banner (?demo=1) ── */
.demo-banner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; background: var(--gold); color: #fff; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-xs); padding: 7px 16px; text-align: center; }
.demo-banner a { color: var(--sts-navy); text-decoration: underline; }
.demo-invite { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; background: var(--sts-navy); color: #fff; font-family: var(--font-display); font-size: var(--text-sm); padding: 8px 16px; text-align: center; }
.demo-invite a { color: var(--gold); font-weight: 700; text-decoration: none; }
.demo-invite a:hover { text-decoration: underline; }
.spon-logo { max-height: 42px; max-width: 150px; display: block; object-fit: contain; }
.spon-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.spon-row .spon-name, .spon-row .spon-url { flex: 1; min-width: 0; }
.spon-pre { width: 48px; height: 36px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; flex-shrink: 0; }
.spon-up { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 36px; border: 1px dashed var(--line); border-radius: 6px; cursor: pointer; font-size: 10px; color: var(--muted); flex-shrink: 0; text-align: center; }
.spon-up:hover { border-color: var(--sts-navy); color: var(--sts-navy); }

/* ── Champion cards (champions page + admin uploader) + photo drop zone ── */
.champ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.champ-card { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 14px; padding: 16px 18px; font: inherit; color: inherit; }
button.champ-card { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
button.champ-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(1,28,91,.16); }
.champ-card .trophy { font-size: 40px; line-height: 1; flex-shrink: 0; }
.champ-card .info { flex: 1; min-width: 0; }
.champ-card .info .tourney { font-family: var(--font-display); font-weight: 700; color: var(--sts-navy); font-size: var(--text-base); line-height: 1.15; }
.champ-card .info .team { font-family: 'Saira Condensed','Oswald',sans-serif; font-weight: 700; font-size: var(--text-xl); color: var(--sts-ink); line-height: 1.1; margin-top: 2px; }
.champ-card .info .note { font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
.champ-card .info .cg-view { color: var(--sts-navy); font-weight: 600; }
.champ-card .sport { align-self: flex-start; flex-shrink: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.champ-card .sport.bb { background: rgba(1,28,91,.1); color: var(--sts-navy); }
.champ-card .sport.sb { background: rgba(31,79,216,.1); color: var(--sts-red); }
.ch-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 140px; border: 2px dashed var(--line); border-radius: 12px; cursor: pointer; color: var(--muted); margin-top: var(--space-3); padding: var(--space-4); text-align: center; transition: border-color .15s ease, background .15s ease; }
.ch-drop:hover, .ch-drop.drag { border-color: var(--sts-navy); background: rgba(1,28,91,.03); color: var(--sts-navy); }
.ch-drop img { max-width: 100%; max-height: 220px; border-radius: 8px; }
.an-empty { text-align: center; padding: var(--space-5); border: 1px dashed var(--line); border-radius: 12px; }

/* ── Admin: divisions chip picker (form editor) ── */
.dv-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.dv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--sts-navy); }
.dv-chip.on { border-color: var(--sts-navy); background: rgba(1,28,91,.06); }
.dv-chip .dv-ck { accent-color: var(--sts-navy); cursor: pointer; }

/* ── Admin: age-division pricing grid (form editor) ── */
.ap-bulk { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; flex-wrap: wrap; }
.ap-bulk #f_bulk { width: 90px; }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.ap-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.ap-row.on { border-color: var(--sts-navy); background: rgba(1,28,91,.04); }
.ap-row .ap-ck { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; accent-color: var(--sts-navy); }
.ap-row .ap-lbl { flex: 1; font-weight: 600; font-size: var(--text-sm); color: var(--sts-ink); white-space: nowrap; }
.ap-amt-wrap { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); font-size: var(--text-sm); }
.ap-row .ap-amt, .ap-amt.ap-amt { width: 76px; padding: 5px 7px; }
.ap-custwrap { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ap-row.ap-cust { cursor: default; }
.ap-cust .ap-clbl { flex: 1; padding: 5px 8px; min-width: 0; }
.ap-cust .ap-rm { flex-shrink: 0; }

/* Visible keyboard focus sitewide (was only on .input) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible,
.btn:focus-visible, .pill:focus-visible, .icon-btn:focus-visible, .nav-links a:focus-visible,
.admin-nav button:focus-visible, .team-card:focus-visible, .ql:focus-visible, .ft:focus-visible {
  outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px;
}
/* Feature-tile CTA: gold-on-red failed contrast → white */
.ft-sb .ft-go { color: #fff; }

/* ── Section heading ───────────────────────────────────────────────── */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.sec-head h2 { margin: 0; color: var(--sts-navy); }
.sec-head .seeall { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-size: var(--text-sm); color: var(--sts-navy); white-space: nowrap; }

/* ── Feature tiles ─────────────────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.ft { position: relative; overflow: hidden; border-radius: 14px; padding: var(--space-6); min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; color: #fff; box-shadow: var(--shadow-lg); transition: transform .15s ease; }
.ft:hover { transform: translateY(-4px); text-decoration: none; color: #fff; }
.ft-bb { background: linear-gradient(145deg, #0a47a0 0%, var(--sts-navy-dark) 100%); }
.ft-sb { background: linear-gradient(145deg, #d23420 0%, var(--sts-red-dark) 100%); }
.ft-reg { background: linear-gradient(145deg, #2f9e44 0%, #1b5e20 100%); }
.ft .ft-kick { font-family: var(--font-display); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.72); }
.ft h2 { color: #fff; margin: 4px 0 8px; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1; }
.ft p { color: rgba(255,255,255,.86); font-size: var(--text-sm); margin: 0 0 var(--space-3); max-width: 36ch; }
.ft .ft-go { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: var(--text-sm); color: var(--gold); }

/* ── Quick links ───────────────────────────────────────────────────── */
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.ql { display: flex; flex-direction: column; gap: 3px; padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; text-decoration: none; color: var(--fg); transition: transform .12s ease, box-shadow .12s ease, border-left-color .12s ease; }
.ql:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-left-color: var(--sts-red); text-decoration: none; }
.ql .qt { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--sts-navy); font-size: var(--text-base); }
.ql .qd { font-size: var(--text-xs); color: var(--muted); }
@media (max-width: 720px) { .quick { grid-template-columns: 1fr 1fr; } }

/* ── Generic cards ─────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }

/* tournament / event card */
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; }
.tcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(1,28,91,.16); }
.tcard .tc-top { padding: var(--space-4) var(--space-5); border-bottom: 3px solid var(--sts-navy); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tcard .tc-date { font-family: var(--font-display); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--sts-red); font-weight: 600; }
.tcard .tc-body { padding: var(--space-5); flex: 1; }
.tcard h3 { margin: 0 0 6px; color: var(--sts-navy); font-size: var(--text-lg); }
.tcard .tc-town { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--sts-navy); font-size: var(--text-lg); line-height: 1.15; }
.tcard .tc-venue { font-weight: 700; color: var(--sts-navy); font-size: var(--text-sm); margin: 1px 0 0; }
.tcard .tc-name { font-family: 'Manrope', system-ui, sans-serif; margin: 14px 0 6px; color: var(--sts-navy); font-size: var(--text-base); font-weight: 500; letter-spacing: 0; line-height: 1.2; }
.tcard .tc-loc { color: var(--muted); font-size: var(--text-sm); }
.tcard .tc-foot { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tcard .tc-ext { color: var(--sts-navy); font-weight: 600; font-size: var(--text-sm); text-decoration: underline; cursor: pointer; }
.tcard .tc-ext:hover { color: var(--sts-red); }
.tcard .tc-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.tcard .tc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

/* ── Badges ────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.badge-paid { background: #DCFCE7; color: #166534; }
.badge-free { background: #E0F2FE; color: #075985; }
.badge-unpaid { background: #FEF3C7; color: #92400E; }
.badge-pending { background: #DBEAFE; color: #1E40AF; }
.badge-failed { background: #FEE2E2; color: #991B1B; }
.badge-waitlist { background: #FFEDD5; color: #9A3412; }
.badge-house { background: #E2E8F0; color: #334155; }   /* the director's own team — no charge */
.badge-archived { background: #E5E7EB; color: #475569; }
.badge-navy { background: var(--sts-navy); color: #fff; }
.badge-red { background: var(--sts-red); color: #fff; }
.badge-gold { background: var(--gold); color: var(--sts-navy); }
.badge-sport { background: #EEF2FF; color: var(--sts-navy); }
.badge-age { background: var(--sts-navy); color: #fff; }   /* age divisions playing (7U/8U/…) */
.badge-softball { background: var(--gold); color: var(--sts-navy); }   /* softball = yellow/gold background */
.sport-badges { display: inline-flex; align-items: center; gap: 5px; }   /* keep baseball + softball together */
.ff-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #FFF7ED; color: #B45309; border: 1px solid #FED7AA; vertical-align: middle; white-space: nowrap; }
.ph-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; vertical-align: middle; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em; }
.ph-pool { background: #EEF2FF; color: #3730A3; border: 1px solid #C7D2FE; }
.ph-brkt { background: #FEF3C7; color: #92400E; border: 1px solid #FDE68A; }
.ph-champ { background: var(--gold); color: var(--sts-navy); border: 1px solid #000; }

/* ── Forms ─────────────────────────────────────────────────────────── */
.form-wrap { max-width: 640px; margin: 0 auto; }
.field { margin-bottom: var(--space-5); }
.field label { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-xs); font-weight: 600; color: var(--sts-navy); margin-bottom: 6px; }
.field label .req { color: var(--danger); }
.field .hint { font-size: var(--text-xs); color: var(--muted); margin-top: 4px; }
.input, select.input, textarea.input {
  width: 100%; font-family: 'Manrope', sans-serif; font-size: var(--text-base); color: var(--fg);
  padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; transition: border-color .12s ease, box-shadow .12s ease;
}
.input:focus, select.input:focus, textarea.input:focus { outline: none; border-color: var(--sts-navy); box-shadow: 0 0 0 3px rgba(1,28,91,.12); }
textarea.input { min-height: 90px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 600px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; align-items: flex-start; gap: 10px; }
.check input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--sts-navy); }
.waiver-box { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 8px; padding: var(--space-4); font-size: var(--text-sm); color: #78540a; margin-bottom: var(--space-4); }
.total-line { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; border-top: 2px solid var(--sts-navy); margin-top: var(--space-4); }
.total-line .tl-label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-size: var(--text-sm); }
.total-line .tl-amt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--sts-navy); }
.form-note { font-size: var(--text-xs); color: var(--muted); text-align: center; margin-top: var(--space-3); }

/* ── Tables (entries / standings) ──────────────────────────────────── */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
table.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); white-space: nowrap; }
table.tbl thead th { background: var(--sts-navy); color: #fff; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-xs); font-weight: 600; text-align: left; padding: 11px 14px; position: sticky; top: 0; }
table.tbl tbody td { padding: 10px 14px; border-top: 1px solid var(--line); }
table.tbl tbody tr:nth-child(even) { background: var(--sts-sub); }
table.tbl tbody tr:hover { background: #EEF4FF; }
table.tbl .num { font-family: var(--font-display); font-weight: 700; color: var(--sts-navy); }
table.tbl .actions { display: flex; gap: 6px; }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: 13px; color: var(--sts-navy); transition: background .12s ease; }
.icon-btn:hover { background: var(--sts-sub); }
.icon-btn.danger { color: var(--danger); }

/* ── Toolbar / filters ─────────────────────────────────────────────── */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.toolbar .grow { flex: 1; min-width: 160px; }
.pill-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: var(--text-xs); font-weight: 600; padding: 7px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--sts-navy); cursor: pointer; }
.pill.active { background: var(--sts-navy); color: #fff; border-color: var(--sts-navy); }

/* ── Stat band ─────────────────────────────────────────────────────── */
.stat-band { background: var(--sts-navy); color: #fff; padding: var(--space-7) 0; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-5); text-align: center; }
.hub-stat .n { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); color: var(--gold); line-height: 1; }
.hub-stat .l { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-xs); color: rgba(255,255,255,.8); margin-top: 6px; }

/* ── Team page ─────────────────────────────────────────────────────── */
.team-hero { background: linear-gradient(160deg, var(--sts-navy) 0%, var(--sts-navy-dark) 100%); color: #fff; padding: var(--space-8) 0 var(--space-7); }
.team-hero .th-inner { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.team-logo { width: 92px; height: 92px; border-radius: 50%; background: #fff; color: var(--sts-navy); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); flex: none; box-shadow: 0 4px 14px rgba(0,0,0,.3); overflow: hidden; }
.team-logo img { width: 100%; height: 100%; object-fit: cover; }
.team-hero h1 { color: #fff; margin: 0; }
.team-hero .th-meta { color: rgba(255,255,255,.82); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-sm); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }
.roster-table td.jersey { font-family: var(--font-display); font-weight: 700; color: var(--sts-red); width: 60px; }

/* ── Abbr logo circle (team logo fallback) ─────────────────────────── */
.sts-logo { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--sts-navy); color: #fff; font-family: var(--font-display); font-weight: 700; flex: none; overflow: hidden; }
/* a real logo (assets/logos/<slug>.png) overlays the initials; onerror removes it → initials show */
.sts-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Admin shell ───────────────────────────────────────────────────── */
.admin-body { background: #eef1f5; }
.admin-wrap { display: flex; min-height: 100vh; }
.admin-side { width: 230px; background: var(--sts-navy); color: #fff; flex: none; padding: var(--space-5) 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.admin-side .brand { padding: 0 var(--space-5) var(--space-5); display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.12); margin-bottom: var(--space-4); }
.admin-side .brand img { width: 54px; height: 54px; border-radius: 0; background: transparent; object-fit: contain; }
.admin-side .brand b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-size: var(--text-sm); }
.admin-nav { list-style: none; margin: 0; padding: 0; }
.admin-nav .nav-more-toggle .caret { margin-left: auto; transition: transform .15s ease; }
.admin-nav.more-open .nav-more-toggle .caret { transform: rotate(180deg); }
.admin-nav .nav-more-item { display: none; }
.admin-nav.more-open .nav-more-item { display: block; }
.admin-nav button { width: 100%; text-align: left; background: none; border: 0; color: rgba(255,255,255,.85); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-sm); padding: 11px var(--space-5); cursor: pointer; display: flex; align-items: center; gap: 10px; border-left: 3px solid transparent; }
.admin-nav button:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-nav button.active { background: rgba(255,255,255,.12); color: #fff; border-left-color: var(--gold); }
.admin-main { flex: 1; min-width: 0; padding: var(--space-6); }
.admin-main h1 { font-size: var(--text-2xl); }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.admin-topbar .who { font-size: var(--text-sm); color: var(--muted); }
.panel { display: none; }
.panel.active { display: block; }
@media (max-width: 820px) {
  .admin-wrap { flex-direction: column; }
  .admin-side { width: 100%; height: auto; position: static; }
  .admin-nav { display: flex; flex-wrap: wrap; }
  .admin-nav button { width: auto; border-left: 0; border-bottom: 3px solid transparent; }
  .admin-nav button.active { border-left: 0; border-bottom-color: var(--gold); }
}

/* login gate */
.login-gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sts-navy); padding: var(--space-5); }
.login-card { background: #fff; border-radius: var(--radius-lg); padding: var(--space-7); width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); text-align: center; }
.login-card img { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--space-4); }

/* ── Footer ────────────────────────────────────────────────────────── */
.footer { background: var(--sts-navy-dark); color: #fff; padding: var(--space-5) 0; margin-top: var(--space-8); }
.footer a { color: rgba(255,255,255,.72); font-size: var(--text-sm); overflow-wrap: anywhere; }
.footer a:hover { color: #fff; }
.foot-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); flex-wrap: wrap; }
.foot-brand { flex: 0 0 auto; display: inline-flex; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px var(--space-4); flex: 1 1 auto; justify-content: center; }
.foot-social { display: flex; flex-wrap: wrap; gap: 16px; flex: 0 0 auto; }
.foot-social a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-xs); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 4px var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.55); font-size: var(--text-xs); }
.footer-bottom a { color: rgba(255,255,255,.7); }
.footer-disclaimer { margin-top: 10px; color: rgba(255,255,255,.5); font-size: 11px; line-height: 1.55; }
@media (max-width: 760px) { .foot-top { justify-content: flex-start; } .foot-links { justify-content: flex-start; flex-basis: 100%; order: 3; } }

/* ── Cosmetic FX (paired with js/sts-fx.js) ────────────────────────── */
/* Movement-only reveal: content is NEVER hidden with opacity, so it stays visible in viewers
   that freeze IntersectionObserver and animation clocks (in-app browsers, background tabs). */
.fx-reveal { transform: translateY(14px); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.fx-reveal.fx-in { transform: none; }
@media (prefers-reduced-motion: reduce) { .fx-reveal { transform: none !important; transition: none; } }

/* ── Utility ───────────────────────────────────────────────────────── */
.empty { padding: var(--space-7); text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
.notice { padding: var(--space-4) var(--space-5); border-radius: 8px; font-size: var(--text-sm); margin-bottom: var(--space-4); }
.notice-info { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; }
.notice-warn { background: #FFFBEB; border: 1px solid #FDE68A; color: #92400E; }
.notice-ok { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
#payPanel .tl-amt { font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl); color: var(--sts-navy); }
.pay-note { margin-top: 12px; font-size: var(--text-xs); color: var(--muted); text-align: center; line-height: 1.5; }
/* ── "Who's Coming" modal (shared: register / homepage / tournament info) ── */
.who-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; z-index: 1000; overflow: auto; }
.who-overlay.hidden { display: none; }
.who-box { background: #fff; border-radius: 14px; max-width: 560px; width: 100%; padding: var(--space-5); box-shadow: 0 24px 64px rgba(0,0,0,.32); }
.who-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.who-head h3 { margin: 0; color: var(--sts-navy); }
.who-div { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: var(--sts-red); font-size: var(--text-base); margin: var(--space-4) 0 4px; }
.who-div .cnt { color: var(--muted); font-size: var(--text-sm); }
.who-team { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 0 -10px; border-bottom: 1px solid var(--line); font-size: var(--text-sm); }
.who-team .twn { font-weight: 600; color: var(--sts-navy); }
.who-team .tloc { color: var(--muted); }
a.who-team { text-decoration: none; border-radius: 8px; transition: background .12s ease; }
a.who-team:hover { background: var(--paper); }
a.who-team:hover .twn, a.who-team:hover .who-go { color: var(--sts-red); }
.who-team .who-go { margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.stack-3 > * + * { margin-top: var(--space-3); }
.mt-5 { margin-top: var(--space-5); }
.mt-7 { margin-top: var(--space-7); }
.hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   Bracket tree (js/sts-bracket-render.js) — ported from the D27 engine
   ════════════════════════════════════════════════════════════════════ */
.bk-legend { display:flex; gap:18px; flex-wrap:wrap; padding:6px 2px 0; font-size:12px; color:var(--muted); align-items:center; }
.bk-legend span { display:inline-flex; align-items:center; gap:6px; }
.bk-legend .chip { width:20px; height:4px; border-radius:2px; }
.bk-legend .w { background:var(--sts-navy); } .bk-legend .l { background:var(--sts-red); } .bk-legend .f { background:var(--gold); }
.bk-legend .bk-tools { margin-left:auto; display:flex; gap:8px; align-items:center; }
.bk-zoomctl { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; }
.bk-zoomctl button { background:none; border:none; width:30px; height:30px; font-size:18px; color:var(--sts-navy); cursor:pointer; }
.bk-zoomctl button:hover { background:var(--sts-sub); }
.bk-zoomctl span { min-width:46px; text-align:center; font-size:12px; font-weight:700; color:var(--sts-navy); border-left:1px solid var(--line); border-right:1px solid var(--line); height:30px; line-height:30px; }
.bk-tool-btn { background:#fff; border:1px solid var(--line); border-radius:6px; padding:0 13px; height:30px; font-size:12px; font-weight:700; color:var(--sts-navy); cursor:pointer; font-family:var(--font-display); letter-spacing:.03em; text-transform:uppercase; }
.bk-tool-btn:hover { background:var(--sts-navy); color:#fff; }
@media (max-width:700px){ .bk-zoomctl, .bk-tool-btn { display:none; } }

/* champion banner */
.bk-champion { background:linear-gradient(120deg,#D4F500,#E4FF4D 45%,#D4F500); color:var(--sts-navy); border-radius:14px; padding:14px 34px; margin:20px auto 14px; width:fit-content; max-width:100%; display:flex; align-items:center; justify-content:center; gap:22px; box-shadow:0 10px 34px rgba(196,230,0,.45); position:relative; overflow:hidden; animation:champShine 3s ease-in-out infinite; }
@keyframes champShine { 50% { box-shadow:0 10px 44px rgba(196,230,0,.7); } }
.bk-champion::after { content:''; position:absolute; right:-30px; top:-40px; width:220px; height:220px; background:radial-gradient(circle,rgba(255,255,255,.4),transparent 60%); pointer-events:none; }
.bk-champion .trophy { font-size:60px; line-height:1; position:relative; z-index:2; flex:none; }
.bk-champion .ct { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; font-family:'Saira Condensed','Oswald',sans-serif; }
.bk-champion .ct .tourn { letter-spacing:.14em; font-size:14px; font-weight:700; text-transform:uppercase; opacity:.92; }
.bk-champion .ct .lbl { letter-spacing:.2em; font-size:13px; font-weight:700; text-transform:uppercase; opacity:.85; }
.bk-champion .ct .team { font-weight:800; font-size:clamp(32px,6.6vw,62px); line-height:1; letter-spacing:.005em; }
@media (prefers-reduced-motion:reduce){ .bk-champion { animation:none; } }
/* Mobile: stack the trophy above the champion text so a long, wrapping name never squeezes it. */
@media (max-width:560px){
  .bk-champion { flex-direction:column; gap:10px; padding:16px 18px; }
  .bk-champion .trophy img { height:96px !important; width:96px !important; }
  .bk-champion .ct .team { font-size:clamp(26px,8.5vw,44px); }
}

.bk-empty { text-align:center; color:var(--muted); padding:50px; font-family:var(--font-display); letter-spacing:.06em; text-transform:uppercase; }

/* canvas + SVG connectors */
.bk-scroll { overflow-x:auto; overflow-y:hidden; padding:14px 0 26px; }
.bk-canvas { position:relative; }
.bk-canvas svg { position:absolute; inset:0; pointer-events:none; overflow:visible; }
.bk-region { position:absolute; font-family:var(--font-display); font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding-left:10px; border-left:4px solid var(--sts-navy); white-space:nowrap; }
.bk-region.w { color:var(--sts-navy); border-left-color:var(--sts-navy); }
.bk-region.l { color:var(--sts-red); border-left-color:var(--sts-red); }
.bk-region.f { color:#5A6B00; border-left-color:var(--gold); }

.bk-match { position:absolute; width:210px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.05); overflow:hidden; transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease; z-index:2; }
.bk-match:hover { box-shadow:0 0 0 3px rgba(0,120,255,.32), 0 10px 26px rgba(0,80,200,.3); border-color:#0070f3; transform:translateY(-3px); z-index:6; }
.bk-match.acc-w { border-left:3px solid var(--sts-navy); }
.bk-match.acc-l { border-left:3px solid var(--sts-red); }
.bk-match.acc-f { border:1.5px solid var(--gold); background:linear-gradient(180deg,#FAFFE0,#fff 60%); animation:champGlow 2.6s ease-in-out infinite; }
@keyframes champGlow { 0%,100% { box-shadow:0 0 0 2px rgba(196,230,0,.3),0 8px 22px rgba(196,230,0,.2); } 50% { box-shadow:0 0 0 2px rgba(196,230,0,.55),0 10px 30px rgba(196,230,0,.42); } }
.bk-match.acc-f:hover { animation:none; }
.bk-match.acc-f .bk-mtop { background:linear-gradient(90deg,var(--gold),#C2E000); }
.bk-match.acc-f .bk-mtop .g { color:var(--sts-navy); }
.bk-mtop { display:flex; align-items:center; justify-content:space-between; height:24px; padding:0 10px; background:rgba(1,28,91,.035); border-bottom:1px solid var(--line); }
.bk-mtop .g { font-family:var(--font-display); font-weight:700; font-size:11px; color:var(--sts-navy); letter-spacing:.04em; }
.bk-mtop .tag { font-size:8px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:3px; }
.bk-mtop .tag.w { background:rgba(1,28,91,.1); color:var(--sts-navy); }
.bk-mtop .tag.l { background:rgba(31,79,216,.1); color:var(--sts-red); }
.bk-mtop .tag.f { background:rgba(196,230,0,.22); color:#4F5E00; }
.bk-match .bk-side { display:flex; align-items:center; gap:8px; padding:0 10px; height:35px; }
.bk-match .bk-side + .bk-side { border-top:1px solid var(--line); }
.bk-match .bk-side .nm { flex:1; min-width:0; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--sts-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-match .bk-side .nm .via { font-size:10px; color:var(--muted); font-weight:500; margin-left:4px; }
.bk-match .bk-side.tbd .nm { color:var(--muted); font-weight:600; font-style:italic; }
.bk-match .bk-side .sc { font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--muted); min-width:18px; text-align:center; }
.bk-match .bk-side.win .nm, .bk-match .bk-side.win .sc { color:#047857; }
.bk-match .bk-side[data-team] { transition:background .12s ease; }
.bk-match .bk-side.path-hi { background:#FFE873; }
.bk-mfoot { height:54px; padding:3px 10px; font-size:10px; color:var(--muted); border-top:1px dashed var(--line); display:flex; flex-direction:column; justify-content:center; gap:2px; overflow:hidden; }
.bk-mfoot .fin { color:#047857; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.bk-when { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; flex:1; min-width:0; }
.bk-wrow { display:flex; align-items:center; justify-content:space-between; gap:6px; }
/* full field name on its own line, wrapping to 2 lines so long "Venue · Field" labels show in full */
.bk-field { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.2; word-break:break-word; }
.bk-cue { flex-shrink:0; font-family:var(--font-display); font-weight:700; font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:var(--sts-navy); opacity:.78; transition:opacity .15s ease; }
.bk-match { cursor:pointer; }
.bk-match:hover .bk-cue { opacity:1; }
/* Preview SHELL (shown before a real bracket exists): the cards only show the SHAPE,
   there's no real game behind them — so don't invite a click. No "Preview ›" cue, no
   pointer, no hover lift. (Real brackets are .bk-zoomable WITHOUT .bk-preview.) */
.bk-preview .bk-match { cursor:default; }
.bk-preview .bk-match:hover { box-shadow:0 2px 8px rgba(0,0,0,.05); transform:none; z-index:2; }
.bk-preview .bk-cue { display:none; }
.bk-tlink { color:inherit; text-decoration:none; cursor:pointer; }
.bk-tlink:hover { text-decoration:underline; }

/* ── Game preview / recap modal ── */
.gm-overlay { position:fixed; inset:0; z-index:1000; background:rgba(4,12,28,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .18s ease, visibility .18s ease; }
.gm-overlay.open { opacity:1; visibility:visible; }
.gm-card { background:var(--surface); border-radius:var(--radius-lg); width:min(560px,100%); max-height:90vh; overflow:auto; box-shadow:0 24px 70px rgba(0,0,0,.4); position:relative; transform:translateY(10px); transition:transform .2s ease; border-top:4px solid var(--sts-navy); }
.gm-overlay.open .gm-card { transform:translateY(0); }
.gm-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border:0; border-radius:50%; background:rgba(1,28,91,.07); color:var(--sts-navy); font-size:14px; cursor:pointer; line-height:34px; text-align:center; }
.gm-close:hover { background:rgba(1,28,91,.16); }
.gm-head { padding:20px 56px 0 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.gm-crumb { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.05em; font-size:var(--text-xs); color:var(--muted); line-height:1.4; }
.gm-badge { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px; flex-shrink:0; }
.gm-badge.preview { background:rgba(1,28,91,.1); color:var(--sts-navy); }
.gm-badge.final { background:#047857; color:#fff; }
.gm-body { padding:8px 22px 24px; }
.gm-matchup { display:flex; align-items:center; justify-content:center; gap:16px; padding:18px 0 6px; }
.gm-matchup .gm-team { flex:1; text-align:center; font-family:var(--font-display); font-weight:700; font-size:var(--text-lg); color:var(--sts-navy); word-break:break-word; }
.gm-matchup .gm-team.tbd { color:var(--muted); font-style:italic; font-weight:600; }
.gm-vs { font-family:var(--font-display); font-weight:700; color:var(--muted); font-size:var(--text-sm); text-transform:uppercase; flex-shrink:0; }
.gm-meta { text-align:center; color:var(--muted); font-size:var(--text-sm); }
.gm-score { display:flex; flex-direction:column; gap:7px; margin:14px 0 4px; }
.gm-srow { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.gm-srow.win { border-color:#047857; background:linear-gradient(90deg,rgba(4,120,87,.06),#fff); }
.gm-srow .t { font-family:var(--font-display); font-weight:700; font-size:var(--text-base); color:var(--sts-ink); }
.gm-srow.win .t, .gm-srow.win .s { color:#047857; }
.gm-srow .s { font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--muted); min-width:34px; text-align:right; }
.gm-byewrap { text-align:center; padding:18px 0 6px; }
.gm-byewrap .gm-team { font-family:var(--font-display); font-weight:700; font-size:var(--text-xl); color:var(--sts-navy); }
.gm-byewrap .gm-meta { margin-top:4px; }
a.gm-tlink { color:inherit; text-decoration:none; cursor:pointer; border-bottom:1px solid transparent; transition:border-color .12s ease; }
a.gm-tlink:hover, a.gm-tlink:focus-visible { border-bottom-color:currentColor; }
.gm-sec { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.gm-sec h4 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:var(--text-xs); color:var(--sts-navy); margin:0 0 6px; }
.gm-recap { margin:0; color:var(--fg); line-height:1.6; }
/* Preview and recap stories (js/sts-story.js) */
.gm-story-tabs { display:flex; gap:6px; margin:0 0 10px; }
.gm-story-tabs button { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.06em; font-size:var(--text-xs); font-weight:600; padding:6px 14px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; }
.gm-story-tabs button[aria-selected="true"] { background:var(--sts-navy); border-color:var(--sts-navy); color:#fff; }
.gm-story-h { font-family:var(--font-display); font-weight:600; font-size:var(--text-lg); color:var(--sts-navy); line-height:1.2; margin:0 0 6px; }
.gm-story-src { display:flex; align-items:center; gap:6px; margin-top:10px; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; color:var(--muted); }
.gm-story-src svg { color:var(--tn-orange); flex:none; }
.gm-story-note { margin-top:6px; font-size:var(--text-xs); color:var(--muted); }
.gm-foot { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.gm-cta { display:block; text-align:center; background:var(--sts-navy); color:#fff; text-decoration:none; font-family:var(--font-display); font-weight:600; letter-spacing:.03em; padding:11px; border-radius:8px; }
.gm-cta:hover { background:#000F36; }

/* ── Scoreboard game-card (MLB-style) ── */
.gm-badge2 { border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; color:#fff; flex-shrink:0; box-shadow:inset 0 0 0 2px rgba(255,255,255,.22); letter-spacing:.01em; }
.gm-badge2.ph { background:#475569; }
.gm-sb { background:linear-gradient(150deg,var(--sts-navy),#001530); border-radius:14px 14px 0 0; padding:16px 18px 14px; margin:6px 0 0; }
.gm-sb-row { display:flex; align-items:center; gap:13px; padding:6px 0; }
.gm-sb-row .gm-badge2 { width:44px; height:44px; font-size:16px; }
.gm-sb-row .gm-tn { font-family:var(--font-display); font-weight:600; font-size:20px; color:#fff; text-decoration:none; line-height:1.05; word-break:break-word; }
.gm-sb-row .gm-tn.gm-tlink:hover { text-decoration:underline; }
.gm-sb-vs { font-family:var(--font-display); font-weight:700; color:#DDFB2E; font-size:12px; letter-spacing:.16em; margin:1px 0 1px 57px; }
.gm-sb-final { display:inline-block; background:#DDFB2E; color:#011C5B; font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.1em; padding:3px 11px; border-radius:999px; text-transform:uppercase; margin-bottom:8px; }
.gm-sb-srow { display:flex; align-items:center; gap:13px; padding:6px 0; }
.gm-sb-srow .gm-badge2 { width:40px; height:40px; font-size:15px; }
.gm-sb-srow .gm-tn { font-family:var(--font-display); font-weight:600; font-size:18px; color:rgba(255,255,255,.66); text-decoration:none; word-break:break-word; }
.gm-sb-srow.win .gm-tn { color:#DDFB2E; }
.gm-sb-srow .gm-tn.gm-tlink:hover { text-decoration:underline; }
.gm-sb-sc { font-family:var(--font-display); font-weight:700; font-size:30px; color:rgba(255,255,255,.55); min-width:34px; text-align:right; margin-left:auto; }
.gm-sb-srow.win .gm-sb-sc { color:#DDFB2E; }
.gm-sb-meta { background:#0a1730; color:rgba(255,255,255,.82); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:12.5px; padding:9px 18px; border-radius:0 0 14px 14px; }
.gm-sb-meta .gm-fieldlink { color:#DDFB2E; text-decoration:none; }
.gm-sb-meta .gm-fieldlink:hover { text-decoration:underline; }


/* ── Public bracket: Print button (event.html Bracket tab) ─────────────
   The tree is a fixed-pixel canvas in a scroller, so printing it needs measuring
   and scaling. printBracket() lifts a copy into #bkPrintRoot and hides the rest. */
.bk-print-row { display:flex; justify-content:flex-end; margin:0 0 10px; }
.bk-print-row .btn { display:inline-flex; align-items:center; gap:7px; }
/* The print copy is parked OFF-SCREEN, not display:none — it has to stay laid out so its
   canvas can be measured and scaled. @media print moves it back into flow. */
#bkPrintRoot { position:absolute; left:-10000px; top:0; }

@media print {
  /* "Print bracket" prints the BRACKET ONLY: the copy lives at the top level in #bkPrintRoot,
     so hiding every other child of <body> leaves exactly the bracket on the paper. CSS alone
     can't do this — the tree is nested deep, so hiding any ancestor hides the bracket too. */
  body.bk-printing > *:not(#bkPrintRoot) { display: none !important; }
  body.bk-printing #bkPrintRoot { display: block !important; position: static !important; left: auto !important; }
  /* A wide tree is guillotined at the right and a deep one runs off the bottom; the button
     hands us a scale that fits a landscape sheet, plus the height that scale leaves behind
     (transform doesn't reflow the box). */
  body.bk-printing .bk-canvas { transform: scale(var(--bk-pscale, 1)); transform-origin: top left; }
  body.bk-printing .bk-scroll { height: var(--bk-pheight, auto); padding-bottom: 0; overflow: visible !important; }
  .bk-print-title { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 6px; }
}