/* ==========================================================================
   WC26 Hub design system — "Broadcast x Editorial"
   Tokens + component classes. Every page uses THESE classes; no per-page
   ad-hoc design. Reference and copy-paste examples: docs/DESIGN.md.
   ========================================================================== */

:root {
  /* Sticky header height: h-14 inner row + 1px volt gradient + 1px border
     (base.html). Sticky elements under the header (calendar day rail) use
     top-[var(--header-h)] so the offset can never drift from the chrome. */
  --header-h: 58px;
  --ground: #0B100C;   /* page background (near-black green) */
  --surface: #131A14;  /* cards / raised chrome */
  --line: #243024;     /* 1px borders, dividers */
  --volt: #C9F73A;     /* primary accent: live, CTAs, active tab, key numerals */
  --gold: #E8C547;     /* leaderboard medals / highlights ONLY */
  --live: #FF4D4D;     /* live & danger */
  --ink: #F2F5F0;      /* primary text */
  --muted: #9DA89C;    /* secondary text */
}

/* --------------------------------------------------------------------------
   Ground: layered depth — radial glows + grain. The .noise div (base.html)
   sits over everything at ~3% opacity for the broadcast-film feel.
   -------------------------------------------------------------------------- */
body {
  background-color: var(--ground);
  background-image:
    radial-gradient(70rem 42rem at 85% -12%, rgba(201, 247, 58, 0.06), transparent 60%),
    radial-gradient(55rem 38rem at -12% 28%, rgba(38, 84, 48, 0.32), transparent 62%),
    radial-gradient(48rem 32rem at 50% 115%, rgba(20, 44, 26, 0.5), transparent 65%);
  background-attachment: fixed;
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Signature motif: thin 45° pitch-line stripes (header band, dividers). */
.pitch-lines {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(242, 245, 240, 0.03) 0 1px,
    transparent 1px 12px
  );
}

.section-divider {
  height: 0.625rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(242, 245, 240, 0.04) 0 1px,
    transparent 1px 10px
  );
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}

.card-hover {
  transition: border-color 150ms ease, transform 150ms ease;
}
.card-hover:hover {
  border-color: rgba(201, 247, 58, 0.35);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Badges — small uppercase chips. Base = muted; variants recolor.
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid var(--line);
  background-color: rgba(36, 48, 36, 0.45);
  color: var(--muted);
  font-family: Figtree, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-volt {
  background-color: var(--volt);
  border-color: var(--volt);
  color: var(--ground);
}
.badge-gold {
  background-color: rgba(232, 197, 71, 0.14);
  border-color: rgba(232, 197, 71, 0.55);
  color: var(--gold);
}
.badge-live {
  background-color: rgba(255, 77, 77, 0.12);
  border-color: rgba(255, 77, 77, 0.5);
  color: var(--live);
}

/* Angled group chip: skew the shell, un-skew the label. */
.chip-skew {
  transform: skewX(-12deg);
  border-radius: 0.25rem;
}
.chip-skew > * {
  display: inline-block;
  transform: skewX(12deg);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid var(--line);
  background-color: var(--surface);
  color: var(--ink);
  font-family: Figtree, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.btn:hover {
  border-color: rgba(201, 247, 58, 0.45);
  color: var(--volt);
}
.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.btn-volt {
  border-color: var(--volt);
  background-color: var(--volt);
  color: var(--ground);
  font-weight: 700;
}
.btn-volt:hover {
  border-color: var(--volt);
  background-color: #d9ff5c;
  color: var(--ground);
}

/* --------------------------------------------------------------------------
   Tab rail — horizontal scrollable tabs with a sliding volt underline.
   Also used for the sticky day rail on the calendar.
   -------------------------------------------------------------------------- */
.tab-rail {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.tab-rail::-webkit-scrollbar {
  display: none;
}
.tab-rail .tab {
  position: relative;
  flex: none;
  padding: 0.5rem 0.75rem;
  color: var(--muted);
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 150ms ease;
}
.tab-rail .tab::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  right: 0.25rem;
  bottom: -1px;
  height: 2px;
  background-color: var(--volt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.tab-rail .tab:hover {
  color: var(--ink);
}
.tab-rail .tab:hover::after {
  transform: scaleX(0.35);
}
.tab-rail .tab.active {
  color: var(--volt);
}
.tab-rail .tab.active::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Modal — hx-get a fragment into #modal-root:
   <div class="modal-backdrop"><div class="modal-shell">…</div></div>
   base.html closes it on ESC / backdrop / [data-modal-close] clicks.
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(4, 7, 4, 0.72);
  backdrop-filter: blur(4px);
}
/* Body scroll lock — base.html toggles .modal-open on <html> while any modal
   is open (it stays set across the nested player<->match swaps and clears
   only when #modal-root empties). Freezes the page behind the modal so
   wheel/touch scrolling does not bleed through to the document underneath and
   the (now tall, scrollable) .modal-shell owns the scroll. */
html.modal-open,
html.modal-open body {
  overflow: hidden;
}
.modal-shell {
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background-color: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.8);
  animation: modal-in 150ms ease-out;
}
/* Wide variant for content-heavy modals (match center). */
.modal-shell-lg {
  max-width: 42rem;
}
/* Full variant for the unified match modal: wide enough for the main/rail
   2-column body on desktop, tall + scrollable (the shell itself scrolls). */
.modal-shell-full {
  max-width: 64rem;
}
@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Skeleton shimmer — put .skel on placeholder blocks while HTMX loads.
   -------------------------------------------------------------------------- */
.skel {
  border-radius: 0.5rem;
  color: transparent !important;
  background: linear-gradient(100deg, #161e17 40%, #243024 50%, #161e17 60%);
  background-size: 200% 100%;
  animation: skel-slide 1.4s linear infinite;
  pointer-events: none;
  user-select: none;
}
@keyframes skel-slide {
  to {
    background-position: -200% 0;
  }
}

/* --------------------------------------------------------------------------
   Live indicators
   -------------------------------------------------------------------------- */
.live-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--live);
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.55);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255, 77, 77, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 77, 77, 0);
  }
}

/* Soft volt pulse for live cards / scores. */
.pulse-volt {
  animation: volt-pulse 2.4s ease-in-out infinite;
}
@keyframes volt-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 247, 58, 0);
  }
  50% {
    box-shadow: 0 0 20px -2px rgba(201, 247, 58, 0.3);
  }
}

/* --------------------------------------------------------------------------
   Staggered load-in — put .stagger on a list container; children rise+fade
   once per page load, 40ms apart. The ONLY page-load animation allowed.
   -------------------------------------------------------------------------- */
.stagger > * {
  opacity: 0;
  animation: rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.stagger > :nth-child(1) { animation-delay: 0ms; }
.stagger > :nth-child(2) { animation-delay: 40ms; }
.stagger > :nth-child(3) { animation-delay: 80ms; }
.stagger > :nth-child(4) { animation-delay: 120ms; }
.stagger > :nth-child(5) { animation-delay: 160ms; }
.stagger > :nth-child(6) { animation-delay: 200ms; }
.stagger > :nth-child(7) { animation-delay: 240ms; }
.stagger > :nth-child(8) { animation-delay: 280ms; }
.stagger > :nth-child(9) { animation-delay: 320ms; }
.stagger > :nth-child(10) { animation-delay: 360ms; }
.stagger > :nth-child(11) { animation-delay: 400ms; }
.stagger > :nth-child(12) { animation-delay: 440ms; }
.stagger > :nth-child(n + 13) { animation-delay: 480ms; }

/* --------------------------------------------------------------------------
   Header nav links (base chrome) — sliding volt underline.
   -------------------------------------------------------------------------- */
.nav-link {
  position: relative;
  padding-bottom: 0.125rem;
  transition: color 150ms ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.25rem;
  height: 2px;
  background-color: var(--volt);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.nav-link:hover {
  color: var(--ink);
}
.nav-link.active {
  color: var(--volt);
}
.nav-link.active::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Reduced motion: everything snaps into place, nothing pulses.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .stagger > *,
  .modal-shell,
  .live-dot,
  .pulse-volt,
  .skel {
    animation: none !important;
  }
  .stagger > * {
    opacity: 1;
  }
  .tab-rail .tab::after,
  .nav-link::after,
  .card-hover,
  .btn {
    transition: none;
  }
}