@import url('https://fonts.googleapis.com/css2?family=Graduate&family=JetBrains+Mono:wght@500;700&display=swap');
@layer tokens {
/* 2026-05-31: Graduate = Brock's chosen sitewide headline face, loaded here so it applies on every route via tokens.css. Bungee + Bowlby One removed; --f-display/--font-display/--f-numeral are Graduate. */@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-400.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-500.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-600.woff2) format("woff2")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/inter-700.woff2) format("woff2")}:root{--red-primary: #FF1A1A;--red-bright: #FF3B30;--red-crimson: #8B0000;--red-glow: #FF2D2D;--orange-accent: #FF6A00;--brand-red: #FF2D2D;--brand-red-bright: #FF3434;--brand-red-deep: #C40000;--brand-blue: #00B7FF;--brand-blue-dim: #0A8FCC;--gold-accent: #F0BD30;--brand-gold: var(--gold-accent);--gold-bright: #FFC820;--black-pure: #000000;--black-bg: #050505;--black-card: #0A0A0A;--black-soft: #111111;--gray-border: #2A2A2A;--gray-light: #8A8A8A;--white-bright: #F5F5F5;--bg-page: var(--black-bg);--bg-surface: var(--black-card);--bg-surface-2: var(--black-soft);--bg-surface-3: #1A1A1A;--border-accent: var(--red-primary);--border-accent-2:var(--red-bright);--text-primary: var(--white-bright);--text-muted: var(--gray-light);--text-faint: #7A7E8C;--gray-mid: #8A8A8A;--hairline: rgba(255,255,255,.06);--hairline-2: rgba(255,255,255,.1);--text: var(--white-bright);--text-dim: var(--text-faint);--accent: var(--red-primary);--accent-bright: var(--red-bright);--gold-medal: #D4A847;--silver-medal: #CFD2D6;--bronze-medal: #C7884A;--sns-pos-qb-text: #FF3B30;--sns-pos-qb-bg: rgba(255, 26, 26, .18);--sns-pos-rb-text: #FF6A00;--sns-pos-rb-bg: rgba(255, 106, 0, .18);--sns-pos-wr-text: #6aa9d7;--sns-pos-wr-bg: rgba(90,170,220,.15);--sns-pos-te-text: #7fc89a;--sns-pos-te-bg: rgba(120,200,150,.14);--sns-pos-k-text: #b58cd6;--sns-pos-k-bg: rgba(180,140,220,.14);--sns-pill-cb-bg: rgba(255, 106, 0, .15);--sns-pill-cb-border: rgba(255, 106, 0, .45);--sns-pill-hq-bg: rgba(255, 26, 26, .18);--sns-pill-hq-border: rgba(255, 26, 26, .45);--sns-trend-up: #5ad07a;--sns-trend-down: var(--red-bright);--f-display: "Graduate", "Oswald", "Anton", sans-serif;--f-body: "Inter", system-ui, sans-serif;--f-numeral: "Graduate", "Oswald", sans-serif;--f-mono: "JetBrains Mono", ui-monospace, monospace;--font-display: "Graduate", "Oswald", "Anton", sans-serif;--font-numerals: "Graduate", "Oswald", sans-serif;--font-body: var(--f-body);--font-mono: var(--f-mono);--op-font-sans: var(--f-body);--op-font-mono: var(--f-mono);--op-font-serif: ui-serif, Georgia, "Times New Roman", serif;--sns-fs-10: 16px;--sns-fs-11: 16px;--sns-fs-12: 16px;--sns-fs-13: 16px;--sns-fs-14: 16px;--sns-fs-15: 16px;--sns-fs-17: 17px;--sns-fs-18: 18px;--sns-fs-20: 20px;--sns-fs-22: 22px;--sns-fs-24: 24px;--sns-fs-26: 26px;--sns-fs-28: 28px;--sns-fs-32: 32px;--sns-fs-36: 36px;--sns-fs-44: 44px;--sns-fs-72: 72px;--sns-fw-regular: 400;--sns-fw-medium: 500;--sns-fw-semi: 600;--sns-fw-bold: 700;--sns-lh-title: 1.05;--sns-lh-h2: 1.1;--sns-lh-h3: 1.25;--sns-lh-body: 1.5;--sns-lh-tight: 1.45;--sns-lh-flush: 1;--sns-ls-tight: .02em;--sns-ls-base: .04em;--sns-ls-display: .06em;--sns-ls-mono: .08em;--sns-ls-eyebrow: .12em;--sns-ls-button: .14em;--sns-ls-wide: .2em;--fs-fluid-small: clamp(1rem, .96rem + .2vw, 1.0625rem);--fs-fluid-body: clamp(1rem, .95rem + .25vw, 1.15rem);--fs-fluid-h3: clamp(1.125rem, .981rem + .6696vw, 1.5rem);--fs-fluid-h2: clamp(1.5rem, 1.2121rem + 1.3393vw, 2.25rem);--fs-fluid-h1: clamp(2rem, 1.4241rem + 2.6786vw, 3.5rem);--space-fluid-xs: clamp(.25rem, .202rem + .2232vw, .375rem);--space-fluid-sm: clamp(.5rem, .404rem + .4464vw, .75rem);--space-fluid-md: clamp(1rem, .808rem + .8929vw, 1.5rem);--space-fluid-lg: clamp(1.5rem, 1.1161rem + 1.7857vw, 2.5rem);--space-fluid-xl: clamp(2.5rem, 1.7321rem + 3.5714vw, 4.5rem);--container-fluid: min(100% - 2 * var(--space-fluid-md), 135rem);--content-max: clamp(100rem, 78vw, 150rem);--row-gap: 24px;--col-gap: 16px;--card-pad: 20px;--sns-space-1: 2px;--sns-space-2: 4px;--sns-space-3: 6px;--sns-space-4: 8px;--sns-space-5: 10px;--sns-space-6: 12px;--sns-space-7: 14px;--sns-space-8: 16px;--sns-space-9: 18px;--sns-space-10: 20px;--sns-space-11: 22px;--sns-space-12: 24px;--sns-space-14: 28px;--sns-space-16: 32px;--sns-space-18: 48px;--op-size-1: 4px;--op-size-2: 8px;--op-size-3: 12px;--op-size-4: 16px;--op-size-5: 20px;--op-size-6: 24px;--op-size-7: 28px;--op-size-8: 32px;--op-size-9: 48px;--op-size-10: 64px;--sns-radius-xs: 3px;--sns-radius-sm: 4px;--sns-radius-md: 6px;--sns-radius-lg: 8px;--sns-radius-xl: 10px;--sns-radius-2xl: 12px;--sns-radius-3xl: 14px;--sns-radius-round: 50%;--op-radius-1: 3px;--op-radius-2: 6px;--op-radius-3: 10px;--op-radius-4: 12px;--op-radius-round: 50%;--sns-shadow-card: 0 0 12px rgba(255, 0, 0, .25), inset 0 0 6px rgba(255, 0, 0, .08);--sns-shadow-card-hover: 0 0 18px rgba(255, 0, 0, .45), inset 0 0 8px rgba(255, 0, 0, .12);--sns-shadow-sidebar: 4px 0 16px rgba(255, 0, 0, .25);--sns-shadow-sidebar-full: 0 0 20px rgba(255, 0, 0, .28), inset 0 0 6px rgba(255, 0, 0, .06);--sns-shadow-hero: 0 0 14px rgba(255, 0, 0, .2);--sns-shadow-ticker: 0 0 8px rgba(255, 0, 0, .5);--sns-shadow-btn-primary: 0 4px 14px rgba(255, 26, 26, .45), inset 0 1px 0 rgba(255,255,255,.18);--sns-shadow-btn-primary-h: 0 6px 22px rgba(255, 0, 0, .65), inset 0 1px 0 rgba(255,255,255,.25);--sns-shadow-tile-hover: 0 0 14px rgba(255,0,0,.35);--sns-shadow-burger: 0 0 12px rgba(255,0,0,.3);--sns-shadow-modal: 0 0 32px rgba(255, 0, 0, .5), 0 16px 56px rgba(0,0,0,.75);--sns-shadow-toast: 0 6px 24px rgba(255, 0, 0, .35), 0 4px 14px rgba(0,0,0,.6);--sns-glow-helmet: drop-shadow(0 0 30px rgba(255, 26, 26, .55)) drop-shadow(0 0 60px rgba(255, 26, 26, .3)) drop-shadow(0 8px 22px rgba(0,0,0,.6));--sns-glow-brand-img: drop-shadow(0 0 12px rgba(255, 26, 26, .4));--sns-glow-hero-logo: drop-shadow(0 0 24px rgba(255, 26, 26, .4));--sns-dur-snap: .12s;--sns-dur-fast: .15s;--sns-dur-base: .2s;--sns-dur-slow: .25s;--sns-dur-sidebar: .28s;--sns-dur-track: .35s;--sns-dur-reveal: .4s;--sns-dur-shimmer: 3s;--sns-ease-out: ease;--sns-ease-emphasized: cubic-bezier(.32, .72, 0, 1);--sns-ease-soft: cubic-bezier(.2, .8, .4, 1);--sns-ease-snappy: cubic-bezier(.16, 1, .3, 1);--sns-ease-material: cubic-bezier(.4, 0, .2, 1);--op-ease-1: var(--sns-ease-out);--op-ease-3: var(--sns-ease-soft);--op-ease-5: var(--sns-ease-emphasized);--sns-bp-xs: 360px;--sns-bp-sm: 480px;--sns-bp-md: 600px;--sns-bp-lg: 880px;--sns-bp-xl: 1100px;--sns-bp-max: 1440px;--sns-z-base: 0;--sns-z-helmet-glow: 1;--sns-z-content: 2;--sns-z-hero-tint: 3;--sns-z-mobile-scrim: 55;--sns-z-mobile-burger: 60;--sns-z-bottombar: 90;--sns-z-mobile-drawer: 70;--sns-z-skip: 100;--sns-z-sheet-scrim: 95;--sns-z-sheet: 96;--sns-z-overlay: 998;--sns-z-modal: 999;--sns-z-toast: 1100;--sns-z-more-flyout: 1200;--sns-z-auth: 99999;--sidebar-w: 250px;--sidebar-w-mobile: 240px;--sns-app-max: 1440px;--sns-content-px-dt: 24px;--sns-content-px-mb: 12px;--sns-hero-h-dt: 240px;--sns-hero-h-mb: 200px;--sns-hero-h-xs: 180px;--sns-touch-target: 44px;--sns-grad-card: linear-gradient(180deg, #0D0D0D 0%, #050505 100%);--sns-grad-card-angled: linear-gradient(135deg, #0D0D0D 0%, #050505 50%, #0D0D0D 100%);--grad-card-pop: linear-gradient(160deg, #16161A 0%, #0A0A0C 60%, #060608 100%);--grad-card-pop-hover: linear-gradient(160deg, #1C1C22 0%, #0E0E12 60%, #08080A 100%);--grad-surface-raise: linear-gradient(180deg, #141418 0%, #0A0A0C 100%);--sns-grad-btn-primary: linear-gradient(180deg, #FF2A2A 0%, #C40000 100%);--sns-grad-avatar: linear-gradient(135deg, var(--bg-surface-3), var(--black-card));--sns-grad-page-header: linear-gradient(135deg,#0d0d0d 0%,#1a0000 50%,#0d0d0d 100%);--sns-grad-toast: linear-gradient(180deg, #181818 0%, #0a0a0a 100%);--sns-grad-medal-gold: linear-gradient(180deg, #f5d57e, var(--gold-medal));--sns-grad-medal-silver:linear-gradient(180deg, #e8eaee, var(--silver-medal));--sns-grad-medal-bronze:linear-gradient(180deg, #d49b6a, var(--bronze-medal));--sns-grad-team-logo-fb: linear-gradient(135deg, #2a0a0a 0%, #0a0a0a 100%);--sns-anim-float-helmet: float-helmet 4.5s ease-in-out infinite alternate;--sns-anim-scatter-enter: scatter-enter .4s cubic-bezier(.16, 1, .3, 1) both;--sns-anim-bracket-card-in: bracket-card-in .45s cubic-bezier(.16, 1, .3, 1) both;--sns-anim-confetti-burst: confetti-burst 1.6s ease-out forwards;--sns-anim-stat-ticker: stat-ticker .8s cubic-bezier(.16, 1, .3, 1) both}@media(prefers-reduced-motion:reduce){:root{--sns-anim-float-helmet: none;--sns-anim-scatter-enter: none;--sns-anim-bracket-card-in: none;--sns-anim-confetti-burst: none;--sns-anim-stat-ticker: none}}.card-title{color:var(--text-primary)!important}.stat-card .card-title{color:#FFFFFF!important}.glow-cta{position:relative;box-shadow:0 0 #ff2d2d00;transition:box-shadow var(--sns-dur-base, .2s) var(--sns-ease-soft, ease),transform var(--sns-dur-base, .2s) var(--sns-ease-soft, ease)}.glow-cta:hover,.glow-cta:focus-visible{box-shadow:0 0 18px 2px #ff34348c,0 0 36px 6px #ff2d2d47;transform:translateY(-1px)}.glow-cta:focus-visible{outline:2px solid var(--brand-red-bright);outline-offset:2px}.card-pop{background:var(--grad-card-pop);border:1px solid var(--hairline-2, rgba(255,255,255,.1));border-radius:var(--sns-radius-xl, 10px);box-shadow:0 1px 2px #00000080,0 8px 24px #00000059;transition:background var(--sns-dur-base, .2s) var(--sns-ease-soft, ease),box-shadow var(--sns-dur-base, .2s) var(--sns-ease-soft, ease),transform var(--sns-dur-base, .2s) var(--sns-ease-soft, ease),border-color var(--sns-dur-base, .2s) var(--sns-ease-soft, ease)}.card-pop:hover{background:var(--grad-card-pop-hover);border-color:#ff343466;box-shadow:0 2px 4px #0000008c,0 12px 32px #ff2d2d2e;transform:translateY(-2px)}.spotlight{position:relative;isolation:isolate}.spotlight:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 20% 0%,rgba(255,52,52,.18) 0%,rgba(0,183,255,.06) 40%,transparent 75%);opacity:0;animation:ds-spotlight-in .9s var(--sns-ease-soft, ease) .12s forwards}@keyframes ds-spotlight-in{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translate(0)}}.bg-gradient-animate{position:relative;background:radial-gradient(circle at 15% 20%,rgba(255,45,45,.22),transparent 45%),radial-gradient(circle at 85% 30%,rgba(0,183,255,.16),transparent 45%),radial-gradient(circle at 50% 90%,rgba(255,200,32,.1),transparent 50%),var(--bg-page, #050505);background-size:180% 180%,180% 180%,180% 180%,100% 100%;background-position:0% 0%,100% 0%,50% 100%,0 0;animation:ds-bg-gradient 18s ease-in-out infinite alternate}@keyframes ds-bg-gradient{0%{background-position:0% 0%,100% 0%,50% 100%,0 0}50%{background-position:50% 30%,60% 40%,30% 60%,0 0}to{background-position:100% 50%,0% 60%,70% 20%,0 0}}@media(prefers-reduced-motion:reduce){.bg-gradient-animate{animation:none}.spotlight:before{animation:none;opacity:1;transform:none}.glow-cta,.card-pop{transition:none}}.display-hero,.card-hero .card-title,.ml-text .card-title,.page-title{font-family:var(--font-display)}.numeral,.numeral-accent,.gc-score,.gm-big-score,.tm-score,.sb-team-score{font-family:var(--font-numerals)!important}

/* =========================================================================
   SNS CANONICAL BUTTON SYSTEM  —  Wave 0 (#833)
   One base `.btn` + modifiers: --primary / --secondary / --ghost / --icon /
   --danger, plus sizes --sm / --lg / --block.
   Lifted from HyperUI (clean base + variant taxonomy,
   https://www.hyperui.dev) with the hover halo adapted from Aceternity UI
   Background Gradient / Spotlight (https://ui.aceternity.com/components/
   background-gradient , https://ui.aceternity.com/components/spotlight) —
   ported to vanilla CSS using SNS design tokens. No hardcoded brand hex
   outside the AA-tuned button gradient tokens defined here.
   A11y: every variant ships a visible :focus-visible ring, AA-compliant
   contrast, and a prefers-reduced-motion fallback (no transform / no halo).
   Legacy aliases (.btn-primary / .btn-secondary / .btn-ghost / .btn-danger /
   .btn-icon) map onto the canonical variants so existing markup inherits the
   upgraded contrast + a11y for free.
   ========================================================================= */
:root{
  /* AA-tuned primary gradient: white #F5F5F5 on #E00000 = 4.62:1 (top),
     on #C40000 = 5.75:1 (bottom) — both pass WCAG AA for the bold label. */
  --sns-btn-primary-grad: linear-gradient(180deg, #E00000 0%, #C40000 100%);
  --sns-btn-primary-grad-h: linear-gradient(180deg, #FF1A1A 0%, #D40000 100%);
  --sns-btn-danger-bg: var(--red-crimson);      /* #8B0000 — white = 9.18:1 */
  --sns-btn-danger-bg-h: #A50000;
  --sns-btn-radius: var(--sns-radius-btn, 10px); /* LEAGUES-MVP §3d container grammar: buttons 10px */
  --sns-btn-pad-y: 11px;
  --sns-btn-pad-x: 18px;
  --sns-btn-focus-ring: var(--brand-red-bright, #FF3434);
}

/* =========================================================================
   CONTAINER GRAMMAR TOKENS — LEAGUES-MVP-SUPERPROMPT §3d (kit-core)
   Radius: cards 12 / buttons 10 / sheets+modals 16 / chips 999.
   Glow ladder:
     --sns-glow-1  subtle ambient        — resting cards
     --sns-glow-2  interactive          — hover / focus / eligible-slot
     --sns-glow-3  aura (RATIONED ≤3/screen) — master button, LIVE badges,
                   winner cards ONLY.
   ========================================================================= */
:root{
  --sns-radius-card: 12px;
  --sns-radius-btn: 10px;
  --sns-radius-sheet: 16px;
  --sns-radius-chip: 999px;
  --sns-glow-1: 0 0 10px rgba(255, 26, 26, .12), 0 1px 2px rgba(0, 0, 0, .5);
  --sns-glow-2: 0 0 16px rgba(255, 26, 26, .34), 0 4px 14px rgba(0, 0, 0, .45);
  --sns-glow-3: 0 0 24px rgba(255, 26, 26, .55), 0 0 56px rgba(255, 26, 26, .28);
  --sns-dur-press: .08s;
}

/* ---- Base ---------------------------------------------------------------- */
.btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sns-space-4, 8px);
  min-height: var(--sns-touch-target, 44px);
  padding: var(--sns-btn-pad-y) var(--sns-btn-pad-x);
  font-family: var(--f-body);
  font-size: var(--sns-fs-11, 12px);
  font-weight: var(--sns-fw-bold, 700);
  line-height: 1;
  letter-spacing: var(--sns-ls-button, .14em);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--sns-btn-radius);
  background: transparent;
  color: var(--text-primary, #F5F5F5);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  user-select: none;
  transition:
    transform var(--sns-dur-base, .2s) var(--sns-ease-soft, ease),
    box-shadow var(--sns-dur-base, .2s) var(--sns-ease-soft, ease),
    background var(--sns-dur-base, .2s) var(--sns-ease-soft, ease),
    border-color var(--sns-dur-base, .2s) var(--sns-ease-soft, ease),
    filter var(--sns-dur-base, .2s) var(--sns-ease-soft, ease);
}
.btn:focus{ outline: none; }
.btn:focus-visible{
  outline: 2px solid var(--sns-btn-focus-ring);
  outline-offset: 2px;
}
/* ---- Press state (LEAGUES-MVP §3b): every button acknowledges the press —
       scale .97 + glow tighten, 80ms. Variants below refine box-shadow. ---- */
.btn:active:not(:disabled):not([disabled]){
  transform: translateY(0) scale(.97);
  transition-duration: var(--sns-dur-press, .08s);
}
.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"]{
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ---- Aceternity halo (Background Gradient / Spotlight) ------------------- */
/* Radial sheen revealed on hover / focus behind the label — implemented as a
   pseudo-element so it works on <a> and <button> alike. */
.btn::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(120% 120% at 50% 0%,
              rgba(255, 52, 52, .35) 0%,
              rgba(255, 45, 45, .12) 45%,
              transparent 75%);
  transition: opacity var(--sns-dur-base, .2s) var(--sns-ease-soft, ease);
}
.btn:hover::after,
.btn:focus-visible::after{ opacity: 1; }
.btn > *{ position: relative; z-index: 1; }

/* ---- Variant: primary (solid brand red, AA white label) ------------------ */
.btn--primary,
.btn-primary{
  background: var(--sns-btn-primary-grad);
  border-color: #FF4D4D;
  color: #fff;
  box-shadow: var(--sns-shadow-btn-primary, 0 4px 14px rgba(255,26,26,.45), inset 0 1px 0 rgba(255,255,255,.18));
  overflow: hidden;
}
.btn--primary:hover,
.btn-primary:hover{
  background: var(--sns-btn-primary-grad-h);
  transform: translateY(-1px);
  box-shadow: var(--sns-shadow-btn-primary-h, 0 6px 22px rgba(255,0,0,.65), inset 0 1px 0 rgba(255,255,255,.25));
}
.btn--primary:active,
.btn-primary:active{ transform: translateY(0) scale(.97); transition-duration: var(--sns-dur-press, .08s); }
.btn--primary:active,
.btn-primary:active{ box-shadow: 0 2px 8px rgba(255,26,26,.4), inset 0 1px 0 rgba(255,255,255,.12); } /* glow tighten on press (§3b) */
/* ---- Master-button aura (LEAGUES-MVP §0.2 / V5) ---------------------------
   The Join-via-invite-code treatment IS .btn-primary: red background + a
   breathing aura glow (glow-3 language). drop-shadow (not box-shadow) so it
   never fights the hover box-shadow transition. Rationed by design: primary
   = the ONE primary action per view. */
@keyframes sns-btn-aura{
  0%, 100%{ filter: drop-shadow(0 0 6px rgba(255, 26, 26, .30)); }
  50%     { filter: drop-shadow(0 0 18px rgba(255, 26, 26, .60)); }
}
.btn--primary,
.btn-primary{ animation: sns-btn-aura 2.4s var(--sns-ease-soft, ease) infinite; }
/* Sheen sweep (Aceternity moving-light feel) */
.btn--primary::before,
.btn-primary::before{
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: sns-btn-sheen var(--sns-dur-shimmer, 3s) ease-in-out infinite;
  pointer-events: none;
}
@keyframes sns-btn-sheen{ 0%{ left:-100% } 60%,100%{ left:100% } }

/* ---- Variant: secondary (raised surface, gold-on-hover) ------------------ */
.btn--secondary,
.btn-secondary{
  background: var(--bg-surface-2, #111);
  border-color: var(--gray-border, #2A2A2A);
  color: var(--text-primary, #F5F5F5);     /* #F5F5F5 on #1A1A1A = 15.96:1 */
}
.btn--secondary:hover,
.btn-secondary:hover{
  border-color: var(--gold-accent, #F0BD30);
  color: var(--white-bright, #F5F5F5);      /* no-yellow-text rule: white only; gold stays on the border */
  transform: translateY(-1px);
}
.btn--secondary:active,
.btn-secondary:active{ transform: translateY(0) scale(.97); transition-duration: var(--sns-dur-press, .08s); }

/* ---- Variant: ghost (transparent, hairline border) ----------------------- */
.btn--ghost,
.btn-ghost{
  background: transparent;
  border-color: var(--hairline-2, rgba(255,255,255,.1));
  color: var(--white-bright, #F5F5F5);     /* on #050505 = 18.69:1 */
}
.btn--ghost:hover,
.btn-ghost:hover{
  border-color: var(--red-primary, #FF1A1A);
  color: var(--red-bright, #FF3B30);       /* #FF3B30 on #050505 = 5.75:1 */
  transform: translateY(-1px);
}
.btn--ghost:active,
.btn-ghost:active{ transform: translateY(0) scale(.97); transition-duration: var(--sns-dur-press, .08s); }

/* ---- Variant: danger (destructive, AA white label on crimson) ------------ */
.btn--danger,
.btn-danger{
  background: var(--sns-btn-danger-bg);     /* white on #8B0000 = 9.18:1 */
  border-color: var(--red-crimson, #8B0000);
  color: #fff;
}
.btn--danger:hover,
.btn-danger:hover{
  background: var(--sns-btn-danger-bg-h);
  transform: translateY(-1px);
}
.btn--danger:active,
.btn-danger:active{ transform: translateY(0) scale(.97); transition-duration: var(--sns-dur-press, .08s); }
/* danger halo skews red-orange to read "warning" */
.btn--danger::after,
.btn-danger::after{
  background: radial-gradient(120% 120% at 50% 0%,
              rgba(255, 60, 40, .4) 0%, rgba(180,0,0,.15) 45%, transparent 75%);
}

/* ---- Variant: icon-only (square, equal padding) -------------------------- */
.btn--icon,
.btn-icon{
  padding: 0;
  width: var(--sns-touch-target, 44px);
  min-width: var(--sns-touch-target, 44px);
  gap: 0;
  border-color: var(--hairline-2, rgba(255,255,255,.1));
  color: var(--text-muted, #8A8A8A);       /* #8A8A8A on #050505 = 5.9:1 */
  background: var(--bg-surface-2, #111);
}
.btn--icon:hover,
.btn-icon:hover{
  color: var(--white-bright, #F5F5F5);
  border-color: var(--red-primary, #FF1A1A);
  transform: translateY(-1px);
}
.btn--icon:active,
.btn-icon:active{ transform: translateY(0) scale(.97); transition-duration: var(--sns-dur-press, .08s); }

/* ---- Size modifiers ------------------------------------------------------ */
.btn--sm{
  min-height: 34px;
  padding: 8px 12px;
  font-size: var(--sns-fs-10, 12px);
  letter-spacing: var(--sns-ls-base, .04em);
}
.btn--lg{
  min-height: 52px;
  padding: 15px 28px;
  font-size: var(--sns-fs-13, 13px);
}
.btn--block{ display: flex; width: 100%; }

/* ---- Reduced motion: kill halo sweep + transforms cleanly ---------------- */
@media (prefers-reduced-motion: reduce){
  .btn{
    transition:
      background var(--sns-dur-fast, .15s) linear,
      color var(--sns-dur-fast, .15s) linear,
      border-color var(--sns-dur-fast, .15s) linear;
  }
  .btn:hover,
  .btn:active{ transform: none; }
  .btn::after{ transition: none; }
  .btn--primary::before,
  .btn-primary::before{ animation: none; display: none; }
  .btn--primary,
  .btn-primary{ animation: none; filter: drop-shadow(0 0 8px rgba(255, 26, 26, .35)); } /* static aura */
}

/* #802 SUPERSEDED 2026-05-31 (DESIGN_SYSTEM_RESET ruling #2): Bungee removed as the
   display face. The sitewide display face is now the single token --font-display
   (interim "Graduate", pending Brock's college-face pick at the font-research gate).
   These selectors keep raised specificity + !important so the display token applies to
   wordmark/hero/section titles regardless of chrome.js DOM order. Swapping the chosen
   face = change --f-display/--font-display in :root only; nothing here hardcodes a face. */
.hero-wordmark-text,
h1.page-title,h1.display-hero,h1.title,h1.h1,h1.lobby-title,h1.lp-title,
.hero h1,
h2.section-title,h3.section-title,h2.bk-section-title{font-family:var(--font-display,"Graduate","Oswald","Anton",sans-serif)!important}

/* =========================================================================
   LEAGUES MVP KIT — Container grammar tokens (§3d)
   Added: 2026-06-11. Kit-core phase only. Do not override per-route.
   Radius contract: cards 12px, buttons 10px, sheets/modals 16px, chips 999px.
   Glow contract: glow-1 resting, glow-2 hover/focus, glow-3 aura ONLY on
     master button + LIVE badges + winner cards (≤3 per screen).
   Press duration added for 80ms press acknowledgment (§3b).
   ========================================================================= */
:root {
  /* --- Container radius tokens --- */
  --sns-radius-card:   12px;   /* player cards, league cards */
  --sns-radius-btn:    10px;   /* buttons (overrides --sns-btn-radius on league surfaces) */
  --sns-radius-sheet:  16px;   /* sheets, modals */
  --sns-radius-chip:   999px;  /* chips, pills, badges */

  /* --- Glow box-shadow tokens (use box-shadow, not filter) --- */
  /* glow-1: subtle ambient — resting cards */
  --sns-glow-1: 0 0 8px rgba(255, 26, 26, .18), 0 0 2px rgba(255, 26, 26, .08);
  /* glow-2: interactive — hover / focus states */
  --sns-glow-2: 0 0 16px rgba(255, 26, 26, .40), 0 0 6px rgba(255, 26, 26, .18);
  /* glow-3: aura — master button, LIVE badges, winner cards ONLY (≤3 per screen) */
  --sns-glow-3: 0 0 28px rgba(255, 26, 26, .65), 0 0 10px rgba(255, 26, 26, .35), 0 0 44px rgba(255, 26, 26, .20);

  /* --- Press timing for 80ms acknowledgment --- */
  --sns-dur-press: .08s;
}
}

/* =========================================================================
   DISPLAY PREFERENCES — D1–D5 (Settings Overhaul)
   localStorage keys (mirrored by settings/script.js on save):
     cff_pref_reduceMotion   'system'|'on'|'off'
     cff_pref_theme          'dark'|'light'
     cff_pref_compactTables  '1'|'0'
     cff_pref_staggerEntrance '1'|'0'
     cff_pref_helmetAnimations '1'|'0'
     cff_pref_accent         hex string or school code or ''
   Applied early-boot by chrome.js before first paint to avoid FOUC.
   html data attributes set by applyDisplayPrefs():
     data-cff-reduce-motion="system|on|off"
     data-theme="dark|light"
     class "cff-compact"           — compact tables
     class "cff-no-stagger"        — disable stagger entrance
     class "cff-no-helmet-anim"    — disable floating helmet
   ========================================================================= */

/* --- D1: reduceMotion override (user pref beats OS query) --- */
/* 'on' = always reduce, regardless of OS */
html[data-cff-reduce-motion="on"] *,
html[data-cff-reduce-motion="on"] *::before,
html[data-cff-reduce-motion="on"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
html[data-cff-reduce-motion="on"] .ml-helmet,
html[data-cff-reduce-motion="on"] .scatter-dot,
html[data-cff-reduce-motion="on"] .bk-card,
html[data-cff-reduce-motion="on"] .champ-confetti,
html[data-cff-reduce-motion="on"] .stat-big {
  animation: none !important;
  transition: none !important;
  transform: none !important;
}
/* 'off' = always animate, force-ignores OS reduce preference */
@media (prefers-reduced-motion: reduce) {
  html[data-cff-reduce-motion="off"] *,
  html[data-cff-reduce-motion="off"] *::before,
  html[data-cff-reduce-motion="off"] *::after {
    animation-duration: revert !important;
    animation-iteration-count: revert !important;
    transition-duration: revert !important;
  }
  html[data-cff-reduce-motion="off"] .ml-helmet {
    animation: float-helmet 3s ease-in-out infinite !important;
    transform: none;
  }
  html[data-cff-reduce-motion="off"] .bk-card {
    animation: bracket-card-in 450ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }
  html[data-cff-reduce-motion="off"] .champ-confetti {
    animation: confetti-burst 1600ms ease-out forwards !important;
  }
  html[data-cff-reduce-motion="off"] .stat-big {
    animation: stat-ticker 800ms cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }
}

/* --- D2: helmetAnimations off --- */
html.cff-no-helmet-anim .ml-helmet {
  animation: none !important;
}

/* --- D2: staggerEntrance off — show reveal targets immediately --- */
html.cff-no-stagger .anim-reveal,
html.cff-no-stagger .app main .card,
html.cff-no-stagger main#main .card,
html.cff-no-stagger main.content .card {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --- D3: compactTables — shrink data table rows sitewide --- */
html.cff-compact table th,
html.cff-compact table td {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  font-size: 0.875rem !important;
}
html.cff-compact .standings-table th,
html.cff-compact .standings-table td,
html.cff-compact .stats-table th,
html.cff-compact .stats-table td,
html.cff-compact .roster-table th,
html.cff-compact .roster-table td,
html.cff-compact .sb-table th,
html.cff-compact .sb-table td {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  line-height: 1.25 !important;
}

/* --- D4: favoriteTeamAccent CSS var scoped sitewide --- */
/* Set by JS: html { --cff-accent: <hex>; }
   Consumers: a few accent uses below. Pages can reference --cff-accent
   for team-tinted UI. No forced override here — opt-in only. */

/* --- D5: LIGHT THEME ---
   Default color-scheme is dark. light = swap palette to warm off-white.
   Graduate + brand red + gold all read well on light backgrounds.
   Sidebar, bottom tab bar, and score ticker stay dark by design.
   Strategy: remap ALL the low-level --black-* vars that components.css
   consumes so the cascade handles surfaces without per-element overrides.
   ---------------------------------------------------------------- */
html[data-theme="light"] {
  color-scheme: light;
  /* ---- page / surface hierarchy ---- */
  --bg-page:       #F7F5F2;
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  #F0EDE8;
  --bg-surface-3:  #E8E4DE;
  /* ---- remap the --black-* primitives components.css uses directly ---- */
  /* components.css has background:var(--black-card) / var(--black-soft) etc.
     Remapping these here means every consumer flips for free. */
  --black-bg:      #F7F5F2;   /* was #050505 — page background */
  --black-card:    #FFFFFF;   /* was #0A0A0A — card surfaces */
  --black-soft:    #F0EDE8;   /* was #111111 — raised surfaces */
  --black-pure:    #E8E4DE;   /* was #000000 — avatar bg etc */
  /* ---- text ---- */
  --text-primary:  #111111;
  --text-muted:    #555555;
  --text-faint:    #777777;
  --text:          #111111;
  --text-dim:      #777777;
  --white-bright:  #111111; /* tokens that alias white-bright for text flip */
  /* ---- borders ---- */
  --hairline:      rgba(0,0,0,.08);
  --hairline-2:    rgba(0,0,0,.13);
  --gray-border:   #D0CCC5;
  --gray-mid:      #888888;
  /* ---- gradients (cards, page backgrounds) ---- */
  --sns-grad-card:             linear-gradient(180deg, #FFFFFF 0%, #F7F5F2 100%);
  --sns-grad-card-angled:      linear-gradient(135deg, #FFFFFF 0%, #F7F5F2 50%, #FFFFFF 100%);
  --grad-card-pop:             linear-gradient(160deg, #FFFFFF 0%, #F7F5F2 60%, #F0EDE8 100%);
  --grad-card-pop-hover:       linear-gradient(160deg, #FFFFFF 0%, #F7F5F2 60%, #ECEAE4 100%);
  --grad-surface-raise:        linear-gradient(180deg, #FFFFFF 0%, #F7F5F2 100%);
  --sns-grad-page-header:      linear-gradient(135deg, #F0EDE8 0%, #FAF5ED 50%, #F0EDE8 100%);
  /* ---- shadows: soften heavy red glows ---- */
  --sns-shadow-card:       0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.10);
  --sns-shadow-card-hover: 0 0 0 1px rgba(255,26,26,.25), 0 4px 14px rgba(0,0,0,.14);
  --sns-shadow-modal:      0 4px 32px rgba(0,0,0,.18), 0 1px 8px rgba(0,0,0,.12);
  /* ---- glow tokens (rationed by design — tone down on light) ---- */
  --sns-glow-1: 0 0 6px rgba(255, 26, 26, .10), 0 1px 2px rgba(0, 0, 0, .08);
  --sns-glow-2: 0 0 10px rgba(255, 26, 26, .22), 0 2px 8px rgba(0, 0, 0, .10);
  --sns-glow-3: 0 0 18px rgba(255, 26, 26, .40), 0 0 36px rgba(255, 26, 26, .18);
}

/* ---- Critical CSS override — beats the hardcoded :root,html,body{background:#050505}
   in every page's inline <style data-cff-critical> block.
   tokens.css loads AFTER the inline critical block, so !important wins.
   Dark-mode (default) is unaffected because the selector requires data-theme=light.
   ---------------------------------------------------------------- */
html[data-theme="light"],
html[data-theme="light"] body {
  background: var(--bg-page, #F7F5F2) !important;
  color: var(--text-primary, #111111) !important;
}

/* ---- App grid and main content area ---- */
html[data-theme="light"] .content,
html[data-theme="light"] main,
html[data-theme="light"] .app {
  background: var(--bg-page);
}

/* ---- Card and surface elements ----
   components.css uses var(--black-card) / var(--black-soft) which are now
   remapped above. These !important rules catch any inline-style / higher-
   specificity overrides that sneak through.                              */
html[data-theme="light"] .card,
html[data-theme="light"] .card-pop,
html[data-theme="light"] section.card,
html[data-theme="light"] .section-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .panel {
  background: var(--bg-surface) !important;
  border-color: var(--hairline-2) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--sns-shadow-card) !important;
}
html[data-theme="light"] .card:hover,
html[data-theme="light"] .card-pop:hover,
html[data-theme="light"] .section-card:hover {
  box-shadow: var(--sns-shadow-card-hover) !important;
}

/* ---- Headings ---- */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: var(--text-primary) !important;
}

/* ---- Hero area ---- */
html[data-theme="light"] .hero,
html[data-theme="light"] .page-hero {
  background: linear-gradient(180deg, #F0EDE8 0%, var(--bg-page) 100%);
  border-bottom: 1px solid var(--hairline-2);
}
html[data-theme="light"] .hero-wordmark-text,
html[data-theme="light"] .page-title {
  color: var(--text-primary) !important;
}

/* ---- Tables ---- */
html[data-theme="light"] table {
  color: var(--text-primary);
}
html[data-theme="light"] th {
  background: var(--bg-surface-2) !important;
  color: var(--text-muted) !important;
}
html[data-theme="light"] td {
  border-color: var(--hairline);
  color: var(--text-primary);
}
html[data-theme="light"] tr {
  background: var(--bg-surface);
}
html[data-theme="light"] tr:nth-child(even) {
  background: var(--bg-surface-2);
}

/* ---- Input / form controls ---- */
html[data-theme="light"] input:not([type="range"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .cf-input,
html[data-theme="light"] .cf-select,
html[data-theme="light"] .lcf-select {
  background: var(--bg-surface) !important;
  border-color: var(--gray-border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="light"] select option,
html[data-theme="light"] .lcf-select option {
  background: #FFFFFF;
  color: #111111;
}
html[data-theme="light"] .cf-dropdown {
  background: var(--bg-surface) !important;
  border-color: var(--gray-border) !important;
}
html[data-theme="light"] .cf-dropdown-item:hover {
  background: rgba(255, 26, 26, .06) !important;
}

/* ---- Modals and sheets ---- */
html[data-theme="light"] .modal-box,
html[data-theme="light"] .pl-modal-stat,
html[data-theme="light"] [class*="modal"] > div,
html[data-theme="light"] .sheet-inner {
  background: var(--bg-surface) !important;
  border-color: var(--hairline-2) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--sns-shadow-modal) !important;
}

/* ---- NIL / marketplace surfaces ---- */
html[data-theme="light"] .balance-chip,
html[data-theme="light"] .mkt-card,
html[data-theme="light"] .inv-card,
html[data-theme="light"] .wallet-stat,
html[data-theme="light"] .wallet-bal,
html[data-theme="light"] .port-stat,
html[data-theme="light"] .skeleton-card,
html[data-theme="light"] .tab-bar {
  background: var(--bg-surface-2) !important;
  border-color: var(--hairline-2) !important;
  color: var(--text-primary) !important;
}

/* ---- In-page sub-surfaces (rows, info panels) ---- */
html[data-theme="light"] .gm-lastplay,
html[data-theme="light"] .gm-to-row,
html[data-theme="light"] .gm-perf-row,
html[data-theme="light"] .gm-fact,
html[data-theme="light"] .streak-row,
html[data-theme="light"] .reward-card,
html[data-theme="light"] .nw-card,
html[data-theme="light"] .pl-modal-stat {
  background: var(--bg-surface-2) !important;
  border-color: var(--hairline) !important;
}

/* ---- Lineup / rules / action row surfaces ---- */
html[data-theme="light"] .rule-row,
html[data-theme="light"] .lu-slot,
html[data-theme="light"] .act-row,
html[data-theme="light"] .tp-btn,
html[data-theme="light"] .mu-row {
  background: var(--bg-surface-2) !important;
  border-color: var(--hairline-2) !important;
}
html[data-theme="light"] .rule-row:hover,
html[data-theme="light"] .lu-slot:hover,
html[data-theme="light"] .act-row:hover,
html[data-theme="light"] .tp-btn:hover {
  background: var(--bg-surface-3) !important;
}

/* ---- Player / news card positions (keep brand chip colors) ---- */
/* pos chip backgrounds are brand colors (red, blue, green, purple, gold) —
   they read fine on light; only ensure text colors are correct.           */

/* ---- Button variants on light ---- */
html[data-theme="light"] .btn--secondary,
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .btn--icon,
html[data-theme="light"] .btn-icon {
  background: var(--bg-surface-2) !important;
  border-color: var(--gray-border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="light"] .btn--ghost,
html[data-theme="light"] .btn-ghost {
  border-color: var(--gray-border) !important;
  color: var(--text-primary) !important;
}
html[data-theme="light"] .btn--icon:hover,
html[data-theme="light"] .btn-icon:hover {
  color: var(--text-primary) !important;
  border-color: var(--red-primary) !important;
}

/* ---- Keep chrome elements DARK (sidebar, bottombar, scoreticker) ---- */
html[data-theme="light"] .ticker,
html[data-theme="light"] #cff-scoreticker {
  background: #111 !important;
  color: #F5F5F5 !important;
}
html[data-theme="light"] #sns-bottombar {
  background: #111111 !important;
  border-top: 1px solid rgba(255,26,26,.3) !important;
}
html[data-theme="light"] .sidebar,
html[data-theme="light"] .sn--c_sidebar,
html[data-theme="light"] aside[role="navigation"] {
  background: #050505 !important;
  border-right-color: var(--red-primary) !important;
}
html[data-theme="light"] .sidebar *,
html[data-theme="light"] .sn--c_sidebar *,
html[data-theme="light"] aside[role="navigation"] * {
  color: #F5F5F5;
}
html[data-theme="light"] .sidebar a,
html[data-theme="light"] .sn--c_sidebar a {
  color: #F5F5F5 !important;
}

/* ---- Text utility classes ---- */
html[data-theme="light"] .text-muted,
html[data-theme="light"] .nu-hi { color: var(--text-muted) !important; }
html[data-theme="light"] p,
html[data-theme="light"] span:not([class*="badge"]):not([class*="chip"]):not([class*="tag"]):not([class*="pos-"]) {
  color: inherit;
}