/* Site-wide UI layer shared by every page (loaded after tailwind.css and before each page's own <style>). */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
/* overflow-x:hidden on html+body turns body into a scroll container and silently breaks every position:sticky (nav, docks); clip keeps the no-sideways-scroll without that */
html, body { overflow-x: clip !important; }
/* anchors and scrollIntoView land below the sticky nav */
[id] { scroll-margin-top: 64px; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(249,115,22,.35); color: #fff; }

/* Keyboard focus: visible orange ring, never on mouse clicks */
:focus { outline: none; }
:focus-visible { outline: 2px solid #FF7A1A; outline-offset: 2px; border-radius: 4px; }
button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none !important; }

/* Sticky nav: frosted, a fade on the scrolling edge so it's clear there is more, bigger tap targets */
nav.sticky { background: rgba(10,10,10,.88) !important; backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); }
.nav-scroll { font-size: 11px !important; scroll-snap-type: x proximity; }
.nav-scroll > a { padding: 8px 2px; scroll-snap-align: start; transition: color .15s; }
.nav-scroll > a[target] { padding: 5px 9px; }
.nav-scroll > a.acc { position: relative; }
.nav-scroll > a.acc::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 1px; height: 2px; border-radius: 2px; background: #FF7A1A; }
@media (max-width: 767px) {
  .nav-scroll { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); padding: 0 24px 0 10px; }
  .nav-scroll.at-end { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px); mask-image: linear-gradient(90deg, transparent 0, #000 14px); }
  .nav-scroll.at-start { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
}

/* Mobile action bar: primary buttons stay reachable under long rosters */
@media (max-width: 767px) {
  .mobile-dock { position: sticky; bottom: 0; z-index: 30; margin-left: -16px; margin-right: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.92) 30%); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); gap: 8px !important; }
  .mobile-dock .btn-main { flex: 1 1 100%; padding: 12px; }
  .mobile-dock .btn-ghost { padding: 8px 10px; font-size: 10px; }
  .mobile-dock label { margin-left: 0; font-size: 11px; }
}

/* Thin dark scrollbars inside panels */
* { scrollbar-width: thin; scrollbar-color: #353c4a transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: #353c4a; border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; }

/* FAQ accordions */
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: '+'; float: right; color: #FF7A1A; font-weight: 700; transition: transform .2s; }
details[open] > summary::after { transform: rotate(45deg); }

/* Shared footer link grid */
.site-links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 24px; font-size: 12px; }
@media (min-width: 768px) { .site-links { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.site-links a { color: #9aa3b2; } .site-links a:hover { color: #FF7A1A; }
.site-links h4 { font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: #4b5363; margin-bottom: 4px; }

/* Toast for copy/share confirmations (SITE.toast) */
.site-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 60; background: #161a23; border: 1px solid #FF7A1A; color: #fff;
  font-size: 13px; padding: 10px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: all .25s; pointer-events: none; }
.site-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- Arena night (2026-10-03) ----
   Orbitron is kept for display: logo, h1/h2 headlines, scores, tier letters. Everything small (labels, buttons, nav,
   table heads) is Inter heavy caps, which stays legible at 10-12px. */
html { background: #0b0d12 !important; } body { background: transparent !important; }   /* body transparent so the header glow (z -1) shows */
.btn, .nav-scroll, .seg button, .tab,
.orb.text-\[9px\], .orb.text-\[10px\], .orb.text-\[11px\], .orb.text-xs, .orb.text-sm:not(h1):not(h2) {
  font-family: 'Inter', system-ui, sans-serif !important; font-weight: 800; letter-spacing: .1em;
}
.btn { letter-spacing: .06em; }
.orb, .tier, table, .t, .box { font-variant-numeric: tabular-nums; }
/* scoreboard figures: big Orbitron numbers get a slight glow of the accent's warmth */
.orb.text-2xl, .orb.text-3xl, .orb.text-4xl, .orb.text-5xl, .orb.text-6xl { letter-spacing: .02em; }
/* cards: a hairline top highlight + soft depth instead of flat slabs */
.panel, .card { background-image: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0) 40%); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -16px rgba(0,0,0,.8); }
/* primary button: warmer, readable dark-on-orange text */
.btn-main { color: #1a0d02 !important; }
/* page glow: faint arena light behind the header */
body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 420px; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255,122,26,.08), rgba(56,98,180,.05) 45%, transparent 75%); }
/* team badges: Inter heavy reads at 7-9px where Orbitron turns to mush (sizes come inline from each page) */
.badge { font-family: 'Inter', system-ui, sans-serif !important; font-weight: 900 !important; letter-spacing: -.01em !important; }

/* analytics consent banner (site.js) */
.consent { position:fixed; left:16px; right:16px; bottom:16px; z-index:90; max-width:560px; margin:0 auto; background:#f3f1ec; color:#111;
  border:2px solid #111; padding:14px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; font:14px/1.45 'IBM Plex Sans Condensed',sans-serif; }
.consent p { flex:1 1 260px; margin:0; } .consent a { color:#d7263d; text-decoration:underline; }
.consent div { display:flex; gap:8px; }
.consent button { border:1.5px solid #111; background:transparent; color:#111; padding:8px 14px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; font-size:12px; cursor:pointer; }
.consent button.on { background:#111; color:#f3f1ec; }