/* ── SHARED NAV STYLES ─────────────────────────────────────────────── */
:root {
  --bg:#08080f;--surface:#10101a;--surface2:#181825;--surface3:#1e1e2e;
  --border:#252535;--text:#e2e2f0;--dim:#c3c3c3;--mute:#9a9ab0;
  --p1:#a855f7;--p2:#7c3aed;
  /* Design-system tokens, same values as /design (design/index.html).
     These lived ONLY in the pattern library, so pages that wrote var(--green)
     or var(--pp-light) in $extraCss were resolving to nothing and falling back
     to inherited colour: that is why the Start/Sit verdicts on /nfl/fantasy
     rendered grey. Declaring them here makes the library real sitewide.
     Purely additive: a page that declares its own :root later still wins. */
  --pp:#6200EA;--pp-hover:#7722ff;--pp-light:#B388FF;--pp-deep:#3700B3;--pp-pale:#D1C4E9;
  --green:#4ade80;--green-soft:#86efac;--red:#ef4444;--amber:#f59e0b;--blue:#60a5fa;
  --r-sm:6px;--r-md:9px;--r-lg:12px;--r-xl:14px;
  --shadow:0 10px 40px rgba(0,0,0,.45);
  --glow:0 0 24px rgba(98,0,234,.45);
}
*{margin:0;padding:0;box-sizing:border-box;}

/* Nav */
nav {
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:58px;
  background:rgba(8,8,15,.95);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(168,85,247,.15);
}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;line-height:0;cursor:pointer;}
.nav-logo svg{height:26px;width:auto;display:block;overflow:visible;}
.nav-logo svg path{fill:#fff;}

/* Neon Charge-Up hover — each letter ignites in sequence (B,e,t,L,o,g,i,c)
   with a purple drop-shadow pulse. Pure CSS, no JS. 8 paths required.
   Drop-in from neon-charge-snippet (2026-06-10), tuned to match brand
   purple #a855f7. Reduced-motion users skip the animation. */
.nav-logo:hover path{
  animation: blNeonCharge .55s cubic-bezier(.32,.94,.6,1) both;
}
.nav-logo:hover path:nth-child(1){animation-delay:0s;}
.nav-logo:hover path:nth-child(2){animation-delay:.05s;}
.nav-logo:hover path:nth-child(3){animation-delay:.10s;}
.nav-logo:hover path:nth-child(4){animation-delay:.15s;}
.nav-logo:hover path:nth-child(5){animation-delay:.20s;}
.nav-logo:hover path:nth-child(6){animation-delay:.25s;}
.nav-logo:hover path:nth-child(7){animation-delay:.30s;}
.nav-logo:hover path:nth-child(8){animation-delay:.35s;}
@keyframes blNeonCharge{
  0%   {opacity:.1;filter:drop-shadow(0 0 0    rgba(168,85,247,0));}
  55%  {opacity:1; filter:drop-shadow(0 0 22px rgba(168,85,247,.95));}
  72%  {opacity:.9;filter:drop-shadow(0 0 12px rgba(168,85,247,.55));}
  100% {opacity:1; filter:drop-shadow(0 0 18px rgba(168,85,247,.85));}
}
@media (prefers-reduced-motion:reduce){.nav-logo:hover path{animation:none;}}

/* Desktop links */
.nav-links{display:flex;gap:2px;align-items:center;}
.nav-link{
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;
  padding:6px 10px;border-radius:5px;color:var(--dim);white-space:nowrap;
  transition:color .15s,background .15s;
}
.nav-link:hover{color:var(--text);background:var(--surface2);}
.nav-link.active{color:#fff;background:rgba(168,85,247,.1);}

/* "All Tools" mega panel: desktop only. Opens on HOVER (plus click and
   keyboard focus, so touch laptops and tab users get the same panel).
   The panel is position:absolute against the fixed <nav>, never in flow, so
   opening it cannot reflow the bar: the sign-in / account cluster on the far
   right stays put. .nav-mega stretches the full bar height, which closes the
   VERTICAL gap between toggle and panel.

   The horizontal gap is closed in JS, not here: :hover below is only the
   no-JS fallback, and the .open class driven by the hover-intent timer is what
   keeps the panel up while the pointer crosses the bar diagonally. See the
   HOVER INTENT block in the nav script. */
.nav-mega{align-self:stretch;display:flex;align-items:center;}
.nav-mega-toggle{
  background:none;border:none;cursor:pointer;
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:1.5px;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:5px;
}
.nav-mega-chev{
  font-size:10px;line-height:1;opacity:.7;
  transition:transform .18s ease;display:inline-block;
}
.nav-mega-panel{
  position:absolute;top:100%;left:0;right:0;
  background:rgba(8,8,15,.985);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(168,85,247,.15);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  padding:20px 24px 24px;
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease;
  z-index:99;
}
.nav-mega:hover .nav-mega-panel,
.nav-mega:focus-within .nav-mega-panel,
.nav-mega.open .nav-mega-panel{opacity:1;pointer-events:auto;transform:translateY(0);}
.nav-mega:hover .nav-mega-chev,
.nav-mega.open .nav-mega-chev{transform:rotate(180deg);opacity:1;}
.nav-mega:hover .nav-mega-toggle,
.nav-mega.open .nav-mega-toggle{color:var(--text);background:var(--surface2);}
.nav-mega-inner{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;max-width:1180px;margin:0 auto;}
.nav-mega-col{display:flex;flex-direction:column;gap:2px;min-width:148px;}
.nav-mega-head{
  display:flex;align-items:center;gap:7px;text-decoration:none;
  font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:2.5px;
  text-transform:uppercase;color:#B388FF;padding:2px 8px 9px;
  /* Fixed height so a badge in the heading cannot push that column's rows
     out of line with the columns beside it. */
  height:15px;line-height:15px;
  transition:color .15s;
}
.nav-mega-head .nav-badge{line-height:1;position:relative;top:-1px;}
.nav-mega-head:hover{color:#fff;}
.nav-mega-head.spacer{visibility:hidden;}
.nav-mega-ico{width:13px;height:13px;flex:0 0 13px;position:relative;top:-1px;}
.nav-mega-item{
  font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;color:var(--dim);text-decoration:none;white-space:nowrap;
  padding:6px 8px;border-radius:6px;transition:color .15s,background .15s;
}
.nav-mega-item:hover{color:var(--text);background:var(--surface2);}
.nav-mega-item.active{color:#fff;background:rgba(168,85,247,.12);}
/* Option A trim: extra tools hidden until "More" expands the column (desktop only). */
.nav-mega-extra{display:none;}
.nav-mega-col.show-extra .nav-mega-extra{display:block;}
.nav-mega-more{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:'Oswald',sans-serif;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:#B388FF;padding:6px 8px;border-radius:6px;margin-top:2px;transition:color .15s,background .15s;}
.nav-mega-more::after{content:' \203A';}
.nav-mega-col.show-extra .nav-mega-more::after{content:' \2039';}
.nav-mega-more:hover{color:#fff;background:var(--surface2);}

/* Purple sport tag left of the desktop flagship links: tells you which sport
   the bar is scoped to, and links that sport's hub page. */
.nav-sport-tag{
  font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:2.5px;
  text-transform:uppercase;color:#B388FF;text-decoration:none;
  padding:6px 10px 6px 0;margin-right:2px;white-space:nowrap;transition:color .15s;
}
.nav-sport-tag:hover{color:#fff;}

/* "New" (and future) nav badges — small purple brand pill next to a nav label.
   Renders in both the desktop dropdown and the mobile drawer. */
.nav-badge{
  display:inline-block;margin-left:7px;padding:2px 6px;border-radius:5px;
  font-family:'Oswald',sans-serif;font-size:9px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:#fff;vertical-align:middle;line-height:1;
  background:linear-gradient(135deg,#6200EA,#B388FF);
}

/* Daily Email CTA — replaced the social-icon trio in the top-right nav slot
   2026-06-11. Purple gradient button matching the brand button style.
   Socials moved to includes/footer.php. */
/* Matches the homepage's .btn-primary (Today's Home Runs hero button) —
   same #6200EA → #3700B3 gradient + matching purple glow. */
.nav-cta{
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;
  padding:9px 18px;border-radius:7px;
  background:linear-gradient(135deg,#6200EA,#3700B3);color:#fff;
  border:1px solid transparent;flex-shrink:0;
  box-shadow:0 0 18px rgba(98,0,234,.3);
  transition:transform .15s,box-shadow .15s,filter .15s;
  display:inline-flex;align-items:center;white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 26px rgba(98,0,234,.5);filter:brightness(1.08);}

/* Hamburger */
.nav-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:36px;height:36px;cursor:pointer;padding:4px;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  transition:border-color .15s;
}
.nav-hamburger:hover{border-color:var(--p1);}
.nav-hamburger span{
  display:block;height:2px;background:var(--dim);border-radius:2px;
  transition:transform .25s,opacity .25s,background .15s;
}
.nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--p1);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--p1);}

/* Mobile drawer */
.nav-drawer{
  /* Full-viewport sheet under the fixed bar (2026-08-24, Jon): opaque, so the
     page can never show through, and bottom-anchored so Daily Email and the
     account row are always on screen. Scrolls internally on short viewports;
     overscroll-behavior stops the page behind from scrolling. */
  display:none;position:fixed;top:58px;left:0;right:0;bottom:0;z-index:-1;
  height:calc(100vh - 58px);height:calc(100dvh - 58px);
  background:#08080f;
  padding:10px 14px calc(16px + env(safe-area-inset-bottom));
  flex-direction:column;gap:4px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  transform:translateY(-8px);opacity:0;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-drawer.open{transform:translateY(0);opacity:1;z-index:100;}
.nav-drawer .nav-link{
  font-size:14px;padding:10px 14px;border-radius:7px;
  border:1px solid transparent;
}
.nav-drawer .nav-link:hover{border-color:var(--border);}
.nav-drawer .nav-link.active{border-color:rgba(168,85,247,.3);}
/* Mobile sport switcher: one pill row at the top of the drawer, then the tools
   for the active sport only. No accordions, no second tap to reach a tool, and
   the drawer does not get longer when a new sport ships. */
.nav-sports{
  display:flex;gap:6px;padding:2px 2px 10px;margin-bottom:8px;
  border-bottom:1px solid var(--border);overflow-x:auto;flex:0 0 auto;
}
.nav-sport-pill{
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:1.6px;
  text-transform:uppercase;padding:8px 15px;border-radius:999px;white-space:nowrap;
  cursor:pointer;background:var(--surface2);border:1px solid var(--border);color:var(--dim);
  display:inline-flex;align-items:center;gap:7px;
}
.nav-sport-pill.on{background:linear-gradient(135deg,#6200EA,#3700B3);color:#fff;border-color:transparent;}
/* Sport mark beside the pill label. Purple on a resting pill, white on the
   active one so it never fights the gradient underneath it. The symbols carry
   no fill of their own, so currentColor does all of the work. */
.nav-pill-ico{width:17px;height:17px;flex:0 0 17px;color:#B388FF;}
.nav-sport-pill.on .nav-pill-ico{color:#fff;}

/* Tools as a 2-up card grid. A single column of twelve text links was a wall
   of small type on a phone; two tinted cards per row halves the scroll and
   gives each label room to breathe. The cards are still the same
   <a class="nav-link"> elements, so the active state, the close-on-click
   handler, the tabindex script and every slug are untouched. (2026-08-05.) */
.nav-sport-list{display:none;}
.nav-sport-list.on{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
/* NFL reads DOWN the left column, then down the right: the four tools group
   together and the four prop sheets group together, instead of alternating
   tool/sheet across every row. Row and hub-row counts come from PHP so this
   does not care how many tools a sport has. Scoped to NFL on purpose; MLB is
   left on the original row-major fill until someone asks for it. (2026-08-14.) */
.nav-sport-list.on[data-nav-sport-list="nfl"]{
  grid-auto-flow:column;
  grid-template-rows:repeat(var(--nav-rows,4),auto);
}

.nav-drawer .nav-sport-list .nav-link{
  display:flex;flex-direction:column-reverse;justify-content:center;align-items:flex-start;
  gap:5px;min-height:46px;padding:10px 12px;border-radius:11px;
  font-family:'Oswald',sans-serif;font-size:14.5px;font-weight:600;line-height:1.15;
  letter-spacing:.3px;color:var(--text);
  /* the base .nav-link is uppercase + nowrap for the desktop bar; a card label
     needs to be sentence case and needs to wrap, so both are reset here. */
  text-transform:none;white-space:normal;
  background:linear-gradient(160deg,rgba(98,0,234,.20),rgba(98,0,234,.05));
  border:1px solid rgba(179,136,255,.20);
}
/* column-reverse floats a "New" chip above the label instead of trailing it,
   so a two-line label like "Strength of Schedule" wraps cleanly rather than
   leaving the badge dangling on a line of its own. */
.nav-drawer .nav-sport-list .nav-link .nav-badge{margin-left:0;}
.nav-drawer .nav-sport-list .nav-link:hover{border-color:rgba(179,136,255,.38);}
.nav-drawer .nav-sport-list .nav-link.active{
  border-color:rgba(179,136,255,.55);color:#fff;
  background:linear-gradient(160deg,rgba(98,0,234,.42),rgba(98,0,234,.14));
}
.nav-drawer-rule{height:1px;background:var(--border);margin:10px 2px 4px;}
/* Mobile drawer CTA — same Daily Email link, full-width inside the drawer
   so it's a clear primary action at the bottom of the menu. */
.nav-drawer-cta{
  margin-top:auto;padding:13px 14px;border-radius:8px;
  background:linear-gradient(135deg,#6200EA,#3700B3);color:#fff;
  font-family:'Oswald',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;
  text-align:center;display:block;
}

/* Body offset for fixed nav + site-wide defaults so new pages don't
   accidentally fall back to browser-default serif. Individual pages can
   still override font-family / background as needed. */
body{
  padding-top:58px;
  background:var(--bg);
  color:var(--text);
  font-family:'Barlow Condensed','Inter','Segoe UI',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── Custom scrollbars — subtle neutral, lightens on hover. Site-wide so the
   browser/OS default (notably Firefox's bright fallback) never shows on any
   scroller: the slate carousel, data tables, drawers, etc. The 2px transparent
   border + padding-box clip keeps the thumb slim with rounded ends. */
*{scrollbar-width:thin;scrollbar-color:#3a3a4c transparent;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#3a3a4c;border-radius:8px;
  border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:#565676;background-clip:padding-box;}
::-webkit-scrollbar-corner{background:transparent;}

@media(max-width:820px){
  .nav-links{display:none;}
  .nav-cta{display:none;}
  .nav-hamburger{display:flex;}
  .nav-drawer{display:flex;}
}

/* Shared header-date style — matches HR Sheet pattern. Lives here (not
   in per-page $extraCss) so every tool page renders the date identically.
   Pages that redefined .today-date locally still work; same values. */
.today-date{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:3px;
  text-transform:uppercase;color:var(--dim);margin-top:8px;}
/* "Updated HH:MM" freshness line — sits directly under the date in the shared
   header (bl_seo_h1). Per-page .last-updated rules (same values) still apply;
   this shared default covers any tool page that didn't define its own. */
.last-updated{font-size:11px;color:var(--mute);letter-spacing:.5px;white-space:nowrap;margin-top:4px;}

/* ── Shared loading state: a rotating baseball ──────────────────────────────
   Reuses the #bl-i-mlb sprite the nav pills already inline further down this
   file, so the mark is the same one in the drawer and costs no extra request.
   The symbol is fill:currentColor, so the ball takes the colour of whatever it
   sits in and needs no per-surface variant.

   Site-wide here rather than in one tool's $extraCss: every board renders a
   loading state and they should all look the same. Markup is:

     <span class="bl-load"><svg class="bl-load-ball" aria-hidden="true"
       focusable="false"><use href="#bl-i-{nfl|mlb}"></use></svg>Loading&hellip;</span>

   The ball is sized in em, so it scales with whatever text it sits beside;
   override .bl-load-ball width/height for a bigger standalone spinner. */
.bl-load{display:inline-flex;align-items:center;gap:10px;}
.bl-load-ball{width:1.25em;height:1.25em;flex:0 0 auto;transform-origin:50% 50%;
  animation:bl-spin 1.1s linear infinite;}
@keyframes bl-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
/* Vestibular safety: hold the ball still and let the text carry the state. */
@media(prefers-reduced-motion:reduce){
  .bl-load-ball{animation:none;}
}

/* ── Account / Google Sign-In (nav) ─────────────────────────────────────── */
.nav-auth{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:4px;}
/* Custom Sign-In pill. Renders instantly (no GIS iframe), so there's no
   skeleton flash. Click opens the Google OAuth2 popup via blGoogleSignIn(). */
/* System font (not Oswald) so there's no async web-font swap, which means the
   pill never reflows/resizes on load. */
.bl-gsignin{display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.2px;
  color:#e8e8f0;background:#1c1c2a;border:1px solid #34344a;border-radius:999px;
  padding:6px 14px 6px 7px;white-space:nowrap;
  transition:background .15s,border-color .15s,transform .1s;}
.bl-gsignin:hover{background:#232335;border-color:#6200EA;transform:translateY(-1px);}
.bl-gsignin:active{transform:translateY(0);}
.bl-gsignin .g-ic{width:20px;height:20px;background:#fff;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;}
.bl-gsignin .g-ic svg{width:12px;height:12px;display:block;}
.bl-gsignin.drawer{width:100%;justify-content:center;font-size:14px;padding:11px 16px;}
/* Signed-in chip: avatar + name + sign out, on-brand purple border. */
.nav-user{gap:8px;padding:4px 6px 4px 8px;border:1px solid rgba(168,85,247,.25);
  border-radius:999px;background:rgba(168,85,247,.06);}
.nav-user-pic{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.nav-user-name{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:.5px;color:var(--text);max-width:130px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.nav-user-out{font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;text-decoration:none;color:var(--dim);
  padding:4px 9px;border-radius:999px;background:var(--surface2);transition:color .15s,background .15s;}
.nav-user-out:hover{color:#fff;background:#3700B3;}
/* Hide the desktop auth cluster on mobile — the drawer carries account UI. */
@media(max-width:820px){.nav-auth{display:none;}}
/* Drawer account block */
.nav-drawer-auth{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;}
.nav-drawer-auth-hed{font-size:12px;color:var(--dim);margin:0 0 2px;line-height:1.4;}
.nav-drawer-user{display:flex;align-items:center;gap:8px;}
.nav-drawer-user .nav-user-pic{width:28px;height:28px;}
.nav-drawer-user-name{font-family:'Oswald',sans-serif;font-size:13px;font-weight:600;
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nav-drawer-out{font-family:'Oswald',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;text-align:center;
  color:var(--text);padding:11px 14px;border-radius:7px;border:1px solid var(--border);}

/* ── Email magic-link sign-in ───────────────────────────────────────────── */
/* Off-screen honeypot: bots fill it, humans never see it. */
.bl-hp{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;
  opacity:0;pointer-events:none;}
/* Desktop: a compact pill that toggles a small popover form under the nav. */
.bl-magic{position:relative;display:inline-flex;}
.bl-magic-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.2px;color:#e8e8f0;
  background:#1c1c2a;border:1px solid #34344a;border-radius:999px;
  padding:6px 14px 6px 7px;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s;}
.bl-magic-toggle:hover{background:#232335;border-color:#6200EA;transform:translateY(-1px);}
/* 20px icon box mirrors .bl-gsignin .g-ic so the two buttons match height. */
.bl-magic-toggle .m-ic{font-size:15px;line-height:1;width:20px;height:20px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;}
.bl-magic-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:60;
  width:268px;background:#10101a;border:1px solid #34344a;border-radius:12px;
  padding:14px;box-shadow:0 14px 38px rgba(0,0,0,.5);}
.bl-magic-pop[hidden]{display:none;}
.bl-magic-form{display:flex;flex-direction:column;gap:9px;}
.bl-magic-label{font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;color:var(--dim);}
.bl-magic-input{width:100%;font-size:14px;color:#fff;background:#08080f;
  border:1px solid #34344a;border-radius:8px;padding:10px 12px;outline:none;
  transition:border-color .15s;}
.bl-magic-input::placeholder{color:#6a6a88;}
.bl-magic-input:focus{border-color:#6200EA;}
.bl-magic-submit{width:100%;cursor:pointer;font-family:'Oswald',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;
  background:#6200EA;background-image:linear-gradient(135deg,#6200EA,#3700B3);
  border:1px solid #6200EA;border-radius:8px;padding:11px 14px;
  transition:filter .15s,transform .1s;}
.bl-magic-submit:hover{filter:brightness(1.08);transform:translateY(-1px);}
.bl-magic-submit:active{transform:translateY(0);}
/* Drawer (mobile): the form sits inline, always open, full width. */
.bl-magic-form.drawer{margin-top:4px;}
.bl-magic-form.drawer .bl-magic-input{font-size:16px;}


/* ── Desktop sport selector (2026-09-05) ───────────────────────────────────
   The sport tag was a plain link to the hub, so desktop had no way to see
   that another sport existed without opening All Tools. It is now a dropdown
   with the sport marks, and picking one swaps the flagship row in place.

   Every sport's flagship row is rendered server-side and toggled with .on,
   the same shape the mobile drawer already uses. That means MORE crawlable
   internal links in the bar, not fewer, and no slug or href changes.

   Deliberately no persistence, matching the drawer: the next page load
   derives the sport from the URL, which is always right, so there is no
   cookie, no localStorage and no cache interaction.

   Desktop only for free: the whole thing lives inside .nav-links, which is
   already display:none under 820px. */
.nav-sportsel{position:relative;display:flex;align-items:center;margin-right:6px;}
.nav-sportsel-toggle{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  font-family:'Oswald',sans-serif;font-size:10px;font-weight:600;letter-spacing:2.5px;
  text-transform:uppercase;color:#B388FF;
  background:var(--surface2);border:1px solid var(--border);border-radius:7px;
  padding:6px 10px;white-space:nowrap;transition:color .15s,border-color .15s;
}
.nav-sportsel-toggle:hover{color:#fff;border-color:rgba(168,85,247,.45);}
.nav-sportsel-ico{width:14px;height:14px;flex:0 0 14px;fill:currentColor;}
.nav-sportsel-chev{font-size:8px;opacity:.7;transition:transform .18s;}
.nav-sportsel.open .nav-sportsel-chev{transform:rotate(180deg);}
.nav-sportsel-menu{
  position:absolute;top:calc(100% + 8px);left:0;min-width:172px;z-index:20;
  background:var(--surface);border:1px solid rgba(168,85,247,.28);border-radius:10px;
  padding:5px;box-shadow:0 16px 38px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease;
}
.nav-sportsel.open .nav-sportsel-menu{opacity:1;pointer-events:auto;transform:translateY(0);}
.nav-sportsel-item{
  display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;
  background:none;border:0;border-radius:6px;padding:8px 10px;text-align:left;
  font-family:'Oswald',sans-serif;font-size:11px;font-weight:600;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--dim);transition:color .15s,background .15s;
}
.nav-sportsel-item:hover{color:var(--text);background:var(--surface2);}
.nav-sportsel-item.on{color:#fff;background:rgba(168,85,247,.14);}
.nav-sportsel-item svg{width:14px;height:14px;flex:0 0 14px;fill:currentColor;}
/* One flagship row per sport; only the selected one is in flow. */
.nav-primary{display:none;}
.nav-primary.on{display:flex;align-items:center;gap:2px;}