/* ============================================================
   PACY — BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must actually hide.
   Browsers implement it as `display: none` in the user-agent sheet, which
   any class carrying its own `display` silently overrides -- a `.notice`
   set to `display: flex` stayed on screen with `hidden` set, and the page
   showed a warning it had explicitly decided not to show. Scripts here
   toggle `.hidden` as the single way to show and hide, so this has to be
   the rule that wins. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* The bottom nav is fixed on mobile; reserve its height so the
     last card is never trapped underneath it. */
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  line-height: var(--lh-snug);
  margin: 0;
  color: inherit;
}

p { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

img { max-width: 100%; display: block; }

button, input, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

/* Every number that can change in place is tabular, so a score
   going 9 → 10 does not shove the layout sideways. */
.tnum,
.score-value,
.clock,
.stat-value { font-variant-numeric: tabular-nums; }

/* The icon set ships viewBox only, with no intrinsic width, so an
   unsized SVG falls back to the replaced-element default of
   300×150. Everything gets a sane size by default and opts out
   explicitly, rather than each context remembering to set one. */
svg { flex: none; }
button svg,
label svg,
a svg,
.mod-item svg,
.stakes svg,
.conn-strip svg,
.mode-banner svg {
  width: 18px;
  height: 18px;
}
/* Contexts that genuinely want a different size. */
.brand-mark { width: auto; height: auto; }
.icon-btn svg { width: 20px; height: 20px; }
.bottom-nav svg { width: 22px; height: 22px; }
.facet-badge svg { width: 30px; height: 30px; }
.search-field svg { width: 22px; height: 22px; }
.fav-btn svg { width: 20px; height: 20px; }
.demo-fab svg { width: 22px; height: 22px; }
.reveal-flag svg { width: 11px; height: 11px; }
.share-foot .mark svg { width: 16px; height: 16px; }

/* --- focus ------------------------------------------------- */
/* Visible on keyboard only, but never suppressed entirely. */
:focus-visible {
  outline: 3px solid var(--electric);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.on-dark :focus-visible,
.shell :focus-visible { outline-color: var(--blue-300); }

/* --- screen-reader utilities -------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  background: var(--white);
  color: var(--ink);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  font-weight: 600;
  box-shadow: var(--sh-3);
  transition: top var(--d-fast) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); }

/* --- shared label style ------------------------------------- */
.label {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* --- layout primitives -------------------------------------- */
.page {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

.stack > * + * { margin-top: var(--s-4); }

.section { padding-block: var(--s-8); }

.section-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.section-head h2 { font-size: var(--t-h2); }
.section-head .section-note {
  font-size: var(--t-meta);
  color: var(--ink-soft);
  margin-inline-start: auto;
}

/* Content sits on a pale sheet against the dark shell. */
.sheet {
  --arena-grid-line: rgba(37, 99, 235, .075);
  --arena-blue: rgba(37, 99, 235, .15);
  --arena-cyan: rgba(55, 183, 255, .12);
  --arena-hot: rgba(255, 176, 32, .09);
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--surface-sunk);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  min-height: 60vh;
  padding-bottom: var(--s-10);
}
.sheet > :not(.arena-bg) { position: relative; z-index: 1; }

[data-theme="dark"] .sheet {
  --arena-grid-line: rgba(127, 196, 255, .065);
  --arena-blue: rgba(37, 99, 235, .24);
  --arena-cyan: rgba(55, 183, 255, .14);
  --arena-hot: rgba(255, 176, 32, .08);
}

/* A viewport-sized arena stays behind the scores as the page moves. Its
   layers animate only with transforms, keeping the very long board smooth. */
.arena-bg {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  margin-bottom: -100vh;
  overflow: hidden;
  pointer-events: none;
}
.arena-bg > * { position: absolute; display: block; }
.arena-grid {
  inset: -12%;
  opacity: .72;
  background-image:
    linear-gradient(115deg, transparent 49.6%, var(--arena-grid-line) 50%, transparent 50.4%),
    linear-gradient(25deg, transparent 49.6%, var(--arena-grid-line) 50%, transparent 50.4%);
  background-size: 92px 92px;
  mask-image: radial-gradient(ellipse at center, #000 5%, transparent 76%);
  animation: arenaGridDrift 26s linear infinite;
}
.arena-orb {
  width: clamp(300px, 43vw, 680px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(18px);
  opacity: .85;
  will-change: transform;
}
.arena-orb--one {
  inset-inline-start: -12%;
  inset-block-start: 8%;
  background: radial-gradient(circle, var(--arena-blue), transparent 67%);
  animation: arenaFloatOne 17s var(--ease-in-out) infinite alternate;
}
.arena-orb--two {
  inset-inline-end: -10%;
  inset-block-end: -8%;
  background: radial-gradient(circle, var(--arena-cyan), var(--arena-hot) 42%, transparent 70%);
  animation: arenaFloatTwo 21s var(--ease-in-out) infinite alternate;
}
.arena-bolt {
  width: clamp(180px, 22vw, 340px);
  height: 78vh;
  inset-inline-start: 48%;
  inset-block-start: 4%;
  opacity: .07;
  transform: skewX(-13deg);
  background: linear-gradient(180deg, transparent, var(--electric) 32%, var(--bolt-core) 53%, transparent 78%);
  clip-path: polygon(58% 0, 20% 48%, 45% 48%, 28% 100%, 82% 39%, 55% 39%);
  animation: arenaBoltBreathe 8s var(--ease-in-out) infinite alternate;
}
@keyframes arenaGridDrift {
  to { transform: translate3d(92px, 92px, 0); }
}
@keyframes arenaFloatOne {
  to { transform: translate3d(22vw, 11vh, 0) scale(1.15); }
}
@keyframes arenaFloatTwo {
  to { transform: translate3d(-18vw, -13vh, 0) scale(.88); }
}
@keyframes arenaBoltBreathe {
  35% { opacity: .07; transform: skewX(-13deg) translateY(0); }
  55% { opacity: .16; transform: skewX(-13deg) translateY(-2%); }
  100% { opacity: .05; transform: skewX(-13deg) translateY(3%); }
}

/* --- generic controls --------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: 0 var(--s-5);
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--t-body);
  border: 1px solid transparent;
  transition: background var(--d-fast) var(--ease-out),
              border-color var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
}
.btn-primary {
  background: var(--electric);
  color: var(--white);
}
.btn-primary:hover { background: var(--blue-600); text-decoration: none; }

.btn-quiet {
  background: transparent;
  color: var(--ink-mid);
  border-color: var(--surface-line-strong);
}
.btn-quiet:hover { background: var(--blue-050); color: var(--ink); text-decoration: none; }

.btn-ghost { color: var(--ink-mid); }
.btn-ghost:hover { color: var(--ink); background: var(--blue-050); text-decoration: none; }

/* Icon-only controls still meet the 44px target. */
.icon-btn {
  width: var(--tap);
  height: var(--tap);
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-md);
  color: var(--on-shell-mid);
  transition: background var(--d-fast) var(--ease-out),
              color var(--d-fast) var(--ease-out);
}
.icon-btn:hover { background: rgba(255, 255, 255, .09); color: var(--on-shell); }
.icon-btn[aria-pressed="true"] { color: var(--blue-300); background: rgba(37, 99, 235, .18); }

.icon-btn svg { width: 20px; height: 20px; }

/* --- badges -------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 3px var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
/* Status is never colour alone — each badge carries a word, and
   live additionally carries a pulsing dot. */
.badge-live      { background: var(--live-soft);     color: var(--live); }
.badge-upcoming  { background: var(--upcoming-soft); color: var(--upcoming); }
.badge-finished  { background: var(--finished-soft); color: var(--finished); }
.badge-warn      { background: var(--warn-soft);     color: var(--warn); }
.badge-good      { background: var(--good-soft);     color: var(--good); }

.badge-live .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  animation: livePulse 1.8s var(--ease-in-out) infinite;
}
@keyframes livePulse { 50% { opacity: .3; transform: scale(.82); } }

/* --- scrollbars --------------------------------------------- */
.scroll-x {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
}
.scroll-x::-webkit-scrollbar { height: 4px; }
.scroll-x::-webkit-scrollbar-thumb {
  background: var(--surface-line-strong);
  border-radius: var(--r-pill);
}
.scroll-x::-webkit-scrollbar-track { background: transparent; }