/* World Cup 2026 Sweepstake — wc.wolfyk.com
   Design system generated by the ui-ux-pro-max skill (design-system/wc2026-sweepstake/
   MASTER.md): Dark Mode (OLED) style, Real-Time/Operations pattern, "Running & Cycling
   GPS" palette (energetic orange + pace green on midnight), Sports/Fitness type pairing
   (Barlow Condensed display / Barlow body). Border-beam and shine-border effects are
   ported from 21st.dev registry components (design-system/21st-dev/) and only animate
   where motion carries meaning: live matches, the current leader, the champion. */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlowcondensed-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlowcondensed-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-600.woff2') format('woff2');
}

:root {
  /* semantic tokens from design-system/wc2026-sweepstake/MASTER.md */
  --color-background: #0f172a;
  --color-card: #192134;
  --color-card-raise: #1f2a42;
  --color-foreground: #ffffff;
  --color-muted-fg: #94a3b8;
  --color-faint-fg: #8590a6; /* >=4.5:1 on background AND card (WCAG AA) */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-primary: #ea580c;
  --color-secondary: #f97316;
  --color-accent: #34d399; /* pace green, lifted for AA on dark */
  --color-accent-deep: #059669;
  --color-destructive: #f87171; /* lifted red for AA text on dark */
  --color-gold: #fbbf24;
  --color-ring: #f97316;

  /* per-player accents: distinct hues, all >=4.5:1 on the background */
  --c-alfie: #f97316;
  --c-isaac: #38bdf8;
  --c-harvey: #a78bfa;

  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, sans-serif;
  --pad: clamp(16px, 4vw, 28px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  touch-action: manipulation;
}

/* ---------- ambient backdrop ---------- */
/* Aurora waves ported from the 21st.dev "Animated Background" fetched via the
   Magic MCP (design-system/21st-dev/aurora-background.tsx): drifting radial
   ellipses on CSS keyframes, recoloured to the palette and slowed to ambient
   speed so the data stays the loudest thing on screen. Reduced motion freezes
   the drift via the global override; without JS this still renders (static). */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.bg-aurora {
  position: absolute;
  inset: -22%;
  will-change: transform;
}

.bg-aurora-a {
  background: radial-gradient(
    ellipse 820px 600px at 50% 16%,
    rgba(234, 88, 12, 0.17) 0%,
    transparent 55%
  );
  animation: aurora-a 26s ease-in-out infinite alternate;
}

.bg-aurora-b {
  background: radial-gradient(
    ellipse 640px 420px at 84% 30%,
    rgba(56, 189, 248, 0.09) 0%,
    transparent 55%
  );
  animation: aurora-b 34s ease-in-out infinite alternate-reverse;
}

.bg-aurora-c {
  background: radial-gradient(
    ellipse 760px 540px at 14% 66%,
    rgba(5, 150, 105, 0.11) 0%,
    transparent 55%
  );
  animation: aurora-c 40s ease-in-out infinite alternate;
}

@keyframes aurora-a {
  from {
    transform: translate(-70px, -34px) scale(1);
  }
  to {
    transform: translate(80px, 26px) scale(1.14);
  }
}

@keyframes aurora-b {
  from {
    transform: translate(60px, 30px) scale(0.92);
  }
  to {
    transform: translate(-70px, -24px) scale(1.1);
  }
}

@keyframes aurora-c {
  from {
    transform: translate(-40px, 36px) scale(1.06);
  }
  to {
    transform: translate(60px, -40px) scale(0.94);
  }
}

/* faint pitch grid, fading out down the page */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(148, 163, 184, 0.12) 1px, transparent 1.35px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 92% 64% at 50% 0%, #000 28%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 92% 64% at 50% 0%, #000 28%, transparent 80%);
}

/* ---------- a11y helpers ---------- */

.skip-link {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 100;
  padding: 12px 16px;
  background: var(--color-card);
  color: var(--color-foreground);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: top 0.15s ease-out;
}

.skip-link:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.section-label {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted-fg);
}

/* ---------- hero ---------- */

.hero {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(36px, 7vh, 72px) var(--pad) 8px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-faint-fg);
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 9.5vw, 6rem);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* gradient text adapted from 21st.dev animated-gradient-text, held static:
   infinite decorative animation is an anti-pattern in the design system */
.hero-grad {
  background: linear-gradient(
    95deg,
    var(--color-secondary) 10%,
    var(--color-gold) 55%,
    var(--color-secondary) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin: 14px auto 0;
  max-width: 52ch;
  color: var(--color-muted-fg);
  font-size: clamp(1.02rem, 2.4vw, 1.18rem);
}

.who {
  font-family: var(--font-display);
  font-size: 1.18em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.who-alfie {
  color: var(--c-alfie);
}

.who-isaac {
  color: var(--c-isaac);
}

.who-harvey {
  color: var(--c-harvey);
}

.status-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  margin: 20px 0 0;
  font-size: 0.92rem;
  color: var(--color-muted-fg);
}

.live-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  border-radius: 999px;
  background: rgba(5, 150, 105, 0.12);
  color: var(--color-accent);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* the one permitted continuous animation outside loading: a live-status pulse */
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  text-shadow: none;
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.8);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(52, 211, 153, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
  }
}

.status-item:empty {
  display: none;
}

/* hero entrance — the "hidden -> rise + unblur" variant from the 21st.dev
   scroll-animation component (design-system/21st-dev/scroll-animation.tsx),
   played once on load for the above-the-fold content. Pure CSS, so it still
   runs without JS; the global reduced-motion override disables it. */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .eyebrow,
  .hero-title,
  .hero-sub,
  .status-row {
    animation: rise-in 0.6s var(--ease-out) backwards;
  }

  .hero-title {
    animation-delay: 0.06s;
  }

  .hero-sub {
    animation-delay: 0.12s;
  }

  .status-row {
    animation-delay: 0.18s;
  }

  /* leader cards get .enter + --i from JS on first paint only,
     so the 60s poll re-render never replays the entrance */
  .leader-card.enter {
    animation: rise-in 0.55s var(--ease-out) backwards;
    animation-delay: calc(0.22s + var(--i, 0) * 0.08s);
  }
}

/* ---------- leader strip (key-metrics tiles) ---------- */

.leader-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 12px;
  margin: 32px auto 0;
  text-align: left;
}

.leader-card {
  position: relative;
  min-height: 118px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-card-raise), var(--color-card));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    translate 0.18s ease-out,
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

.leader-pot {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-faint-fg);
}

.leader-name {
  margin: 6px 0 2px;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.leader-meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-muted-fg);
  font-variant-numeric: tabular-nums;
}

/* border-beam — ported from 21st.dev (magicui), design-system/21st-dev/border-beam.tsx:
   a gradient runner orbits the card border along offset-path:rect(), revealed only in
   the border ring by the two-layer mask. Applied to the sole pot leader and to live
   match cards; colours come from --color-from/--color-to set inline. */
.border-beam {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* the ring: padding sets its thickness; XOR of the two opaque layers leaves
     only the padding band visible (legacy alias first so the standard wins) */
  padding: 2px;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.border-beam::after {
  content: '';
  position: absolute;
  aspect-ratio: 1;
  width: 120px;
  background: linear-gradient(
    to left,
    var(--color-from, #ffaa40),
    var(--color-to, #9c40ff),
    transparent
  );
  offset-path: rect(0 auto auto 0 round 120px);
  offset-anchor: 90% 50%;
  animation: border-beam 9s linear infinite;
}

@keyframes border-beam {
  to {
    offset-distance: 100%;
  }
}

/* ---------- layout ---------- */

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px var(--pad) 20px;
  display: grid;
  gap: 48px;
}

main > section {
  /* grid items default to min-width:auto, letting the ticker stretch the page */
  min-width: 0;
}

/* ---------- ticker ---------- */

.ticker {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
  mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 18px,
    #000 calc(100% - 18px),
    transparent
  );
}

.ticker::-webkit-scrollbar {
  height: 6px;
}

.ticker::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 99px;
}

.match-card {
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: 182px;
  min-height: 100px;
  padding: 12px 15px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  /* reveal (opacity/transform, staggered by --d) + hover (translate) coexist
     because `translate` is its own property, separate from `transform` */
  transition:
    opacity 0.5s var(--ease-out) var(--d, 0s),
    transform 0.5s var(--ease-out) var(--d, 0s),
    translate 0.18s ease-out,
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

.match-card.is-live {
  border-color: rgba(52, 211, 153, 0.45);
}

.match-when {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 9px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-faint-fg);
}

.match-state {
  color: var(--color-muted-fg);
  font-variant-numeric: tabular-nums;
}

.is-live .match-state {
  color: var(--color-accent);
  font-weight: 700;
}

.match-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.match-row .score {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 1.14rem;
}

.match-row.loser {
  color: var(--color-muted-fg);
}

/* win-chance figures on scheduled cards (the score slot is free there) */
.match-row .score.pct {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-muted-fg);
}

.match-draw {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-faint-fg);
}

.owner-dot {
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--owner, transparent);
}

/* ---------- latest highlights ---------- */
/* Click-to-play facade: the page only loads YouTube's thumbnail; the iframe
   (youtube-nocookie) is injected on demand when the play button is pressed. */

.hl-card {
  max-width: 720px;
  display: grid;
  gap: 10px;
  padding: 14px 14px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
}

.hl-match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 0;
}

.hl-when {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-faint-fg);
}

.hl-score {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.hl-nums {
  font-size: 1.3rem;
  color: var(--color-secondary);
  font-variant-numeric: tabular-nums;
}

.hl-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #000;
}

.hl-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.hl-play {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: #000;
  cursor: pointer;
}

.hl-play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s var(--ease-out);
}

.hl-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(234, 88, 12, 0.92);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  transition: background-color 0.18s ease-out;
}

.hl-btn::after {
  content: '';
  margin-left: 5px;
  border-left: 19px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.hl-pending {
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--color-muted-fg);
  font-size: 0.92rem;
  text-align: center;
}

.hl-pending p {
  margin: 0;
}

.hl-credit {
  margin: 0;
  font-size: 0.78rem;
  color: var(--color-faint-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  .hl-play:hover img {
    transform: scale(1.04);
  }

  .hl-play:hover .hl-btn {
    background: var(--color-secondary);
  }
}

/* ---------- pots ---------- */

.pot-head {
  margin-bottom: 18px;
}

.pot-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: linear-gradient(120deg, rgba(234, 88, 12, 0.2), rgba(249, 115, 22, 0.08));
  color: var(--color-secondary);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.pot-title {
  margin: 10px 0 6px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.pot-rule {
  margin: 0;
  max-width: 68ch;
  color: var(--color-muted-fg);
  font-size: 0.95rem;
}

/* leaderboard rows: horizontal-bar comparison, sorted descending,
   values always visible (skill chart guidance for ranking data) */

.board {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.board-row {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  overflow: hidden;
  transition:
    opacity 0.55s var(--ease-out) var(--d, 0s),
    transform 0.55s var(--ease-out) var(--d, 0s),
    translate 0.18s ease-out,
    border-color 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

.board-row.first {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--color-border));
  background: linear-gradient(180deg, var(--color-card-raise), var(--color-card));
}

.board-row .rank {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-faint-fg);
  text-transform: uppercase;
}

.board-row.first .rank {
  color: var(--color-gold);
}

.board-mid {
  min-width: 0;
}

.board-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.board-sub {
  margin-top: 1px;
  font-size: 0.86rem;
  color: var(--color-muted-fg);
  font-variant-numeric: tabular-nums;
}

.board-odds {
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 75%, var(--color-foreground));
}

.bar {
  margin-top: 9px;
  height: 8px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.14);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 40%, transparent)
  );
  transition:
    width 0.6s var(--ease-out),
    filter 0.18s ease-out;
}

.board-val {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.board-val small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-faint-fg);
}

/* rolling digits — ported from the 21st.dev "Animated Counter" fetched via the
   Magic MCP (design-system/21st-dev/animated-counter.tsx). Each digit column
   stacks 0-9; JS sets translateY per span, this transition does the rolling.
   Digits only move when a score changes, so the motion carries meaning. */
.roller {
  display: inline-flex;
  overflow: hidden;
}

.roller-digit {
  position: relative;
  width: 1ch;
  height: 1em;
}

.roller-digit > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.55s var(--ease-out);
}

.player-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

/* champion banner (pot 2, once decided) — shine-border ported from 21st.dev
   (magicui), design-system/21st-dev/shine-border.tsx: sweeping radial highlight
   masked to the border ring; motion-safe only, as in the original */
.champion-banner {
  position: relative;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--accent, var(--color-gold)) 50%, var(--color-border));
  background:
    radial-gradient(
      420px 150px at 50% 0%,
      color-mix(in srgb, var(--accent, var(--color-gold)) 18%, transparent),
      transparent 75%
    ),
    var(--color-card);
  text-align: center;
}

.champion-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background-image: radial-gradient(
    transparent,
    transparent,
    var(--accent, var(--color-gold)),
    transparent,
    transparent
  );
  background-size: 300% 300%;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  will-change: background-position;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .champion-banner::before {
    animation: shine 14s linear infinite;
  }
}

@keyframes shine {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.champion-banner .leader-pot {
  color: var(--color-muted-fg);
}

.champion-banner .big {
  margin: 6px 0 2px;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

/* squads — every roster permanently visible: glance-first, no accordions
   (owner rule). One slim row per team, three player columns per pot. */

.rosters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
  align-items: start;
}

.squad {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  padding-bottom: 4px;
  transition:
    opacity 0.55s var(--ease-out) var(--d, 0s),
    transform 0.55s var(--ease-out) var(--d, 0s);
}

.squad-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.squad-meta {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted-fg);
  font-variant-numeric: tabular-nums;
}

.squad-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: grid;
  gap: 1px;
}

.srow {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.92rem;
  transition:
    opacity 0.45s var(--ease-out) var(--d, 0s),
    transform 0.45s var(--ease-out) var(--d, 0s),
    background-color 0.15s ease-out,
    translate 0.15s ease-out;
}

/* zebra striping keeps 16 rows scannable at a glance */
.srow:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}

.flag-wrap {
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 21px;
  border-radius: 3px;
  background: rgba(148, 163, 184, 0.08);
  box-shadow: 0 0 0 1px var(--color-border-strong);
  overflow: hidden;
}

.flag-wrap img {
  width: 28px;
  height: 21px;
  object-fit: cover;
  display: block;
}

.s-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s-rank {
  font-size: 0.72rem;
  color: var(--color-faint-fg);
  font-variant-numeric: tabular-nums;
}

.s-stat {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.s-stat b {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  min-width: 1.2ch;
  text-align: right;
}

.s-muted {
  font-size: 0.8rem;
  color: var(--color-muted-fg);
}

.t-state {
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.t-state.ok {
  color: var(--color-accent);
  background: rgba(5, 150, 105, 0.12);
  border: 1px solid rgba(52, 211, 153, 0.3);
}

.t-state.live {
  color: var(--color-accent);
  background: rgba(5, 150, 105, 0.18);
  border: 1px solid rgba(52, 211, 153, 0.5);
}

.t-state.out {
  color: var(--color-destructive);
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.3);
}

.t-state.win {
  color: var(--color-gold);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.4);
}

.srow.is-out {
  opacity: 0.55;
}

.srow.is-out .flag-wrap img {
  filter: grayscale(1);
}

.srow.is-live {
  box-shadow: inset 2px 0 0 var(--color-accent);
}

/* pot 3 mini progress (7 stage ticks) */

.stage-meter {
  display: inline-flex;
  gap: 3px;
  width: 58px;
}

.stage-meter i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(148, 163, 184, 0.16);
}

.stage-meter i.on {
  background: var(--accent, var(--color-accent));
}

/* ---------- skeletons (loading shimmer is the permitted continuous motion) ---------- */

.skeleton {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
  min-height: 100px;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 70%
  );
  animation: shimmer 1.6s linear infinite;
  transform: translateX(-100%);
}

@keyframes shimmer {
  to {
    transform: translateX(100%);
  }
}

/* ---------- noscript + footer ---------- */

.noscript {
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-card);
}

.noscript table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.noscript th,
.noscript td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.site-foot {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px var(--pad) 46px;
  color: var(--color-faint-fg);
  font-size: 0.82rem;
}

.site-foot p {
  margin: 4px 0;
}

a {
  color: var(--color-secondary);
}

/* ---------- stale-data notice ---------- */

.stale {
  color: var(--color-gold);
}

/* ---------- scroll reveals ---------- */
/* Ported from the 21st.dev "Scroll Animation" + ContainerStagger pair fetched
   via the Magic MCP (design-system/21st-dev/scroll-animation.tsx): sections
   start blurred/offset and unveil when they enter the viewport (an
   IntersectionObserver in app.js adds .revealed once). Children stagger via
   their --d transition delays. Every hidden state is gated behind .js-anim,
   which app.js only sets when JS runs AND the visitor allows motion — no-JS
   and reduced-motion visitors always see the full page. */

.js-anim [data-reveal] {
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out),
    filter 0.6s var(--ease-out);
}

.js-anim [data-reveal]:not(.revealed) {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
}

.js-anim [data-reveal]:not(.revealed) .board-row,
.js-anim [data-reveal]:not(.revealed) .squad {
  opacity: 0;
  transform: translateY(18px);
}

.js-anim [data-reveal]:not(.revealed) .srow {
  opacity: 0;
  transform: translateX(-12px);
}

.js-anim [data-reveal]:not(.revealed) .match-card {
  opacity: 0;
  transform: translateX(26px);
}

/* ---------- hover interactions (pointer devices only) ---------- */

@media (hover: hover) {
  .leader-card:hover,
  .match-card:hover {
    translate: 0 -3px;
    border-color: var(--color-border-strong);
    box-shadow: 0 12px 28px -16px rgba(0, 0, 0, 0.85);
  }

  .board-row:hover {
    translate: 0 -2px;
    border-color: color-mix(in srgb, var(--accent) 35%, var(--color-border));
  }

  .board-row:hover .bar-fill {
    filter: brightness(1.3);
  }

  .srow:hover {
    background-color: rgba(255, 255, 255, 0.05);
    translate: 2px 0;
  }

  .flag-wrap img {
    transition: transform 0.18s ease-out;
  }

  .srow:hover .flag-wrap img {
    transform: scale(1.15);
  }
}

/* ---------- motion & responsive ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 560px) {
  .board-row {
    grid-template-columns: 34px 1fr auto;
    padding: 12px 14px;
    gap: 10px;
  }

  .team-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  }
}