/* ==========================================================================
   Sports Streaming — arena layer
   --------------------------------------------------------------------------
   The pages in Views/arena use the ArenaPulse design (base.css + components.css).
   This file does three jobs:

   1. It maps ArenaPulse colour tokens onto the --sp-* names the existing addon
      partials (views/partials/events-card.blade.php and the player) expect, so those
      partials pick up the new palette without being rewritten.
   2. It skins the addon's own player (.spp*): the player markup ships with the
      addon, but its look lives in the site theme bundle. When the arena layout is
      used on its own, that bundle is not loaded, so the player needs a skin here.
   3. Small helpers the arena views use on top of the design (fact lists, empty
      boards, pane posters, the dynamic brand image).
   ========================================================================== */

/* ── 1. token bridge for the addon partials ─────────────────────────────── */
:root {
  --sp-accent: var(--accent);
  --sp-accent-hi: var(--accent-bright);
  --sp-border: var(--line);
  --sp-border-strong: var(--line-strong);
  --sp-muted: var(--muted);
  --sp-dim: var(--dim);
  --sp-fg: var(--text);
  --sp-bg: var(--surface);
}

/* ── 3. small helpers ───────────────────────────────────────────────────── */

/* The header/footer brand: site logo when the site has one, wordmark otherwise */
.brand .brand-logo {
  height: 30px;
  width: auto;
  max-width: 168px;
  object-fit: contain;
  display: block;
}

.brand-mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #0a1206));
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  flex: none;
}

/* Fact list (watch sidebar) */
.fact-list {
  display: grid;
  gap: 2px;
}

.fact-list .fact {
  border: 0;
  background: none;
  padding: 9px 0;
  border-top: 1px dashed var(--line);
}

.fact-list .fact:first-child {
  border-top: 0;
}

/* Empty board / grid */
.board-empty {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 44px 20px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.015);
}

.board-empty b {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 15px;
}

.board-empty small {
  font-size: 12.5px;
  max-width: 40ch;
}

/* Multi-stream pane poster: the pane frames a real poster instead of a fake scene */
.pane .pane-poster {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

.pane .pane-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 6, 9, 0.35), rgba(4, 6, 9, 0.85));
}

.pane .pane-body {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 0 12px 10px;
  display: grid;
  gap: 3px;
}

.pane .pane-body b {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pane .pane-body small {
  font-size: 11.5px;
  color: var(--muted);
}

.pane .pane-open {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
}

/* Watch page: player takes the design's shell, the addon player fills it */
.player-shell .spp {
  border-radius: 0;
}

/* ── Theater mode ─────────────────────────────────────────────────────────
   The player's "theater" button lifts the whole stage out of the page: a large
   floating panel over a dimmed, blurred copy of the page, with the match strip
   on top and the controls at the bottom. The page behind is locked while the
   stage is up, so the reader comes back to the same scroll position. The button
   reads as pressed (the .is-on state the other player buttons already use). */
.player-shell.is-theater,
.spp.is-theater {
  position: fixed;
  z-index: 200;
  inset: 12px;
  width: auto;
  height: auto;
  max-width: 1680px;
  max-height: calc(100dvh - 24px);
  margin: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: #04060a;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.95);
  animation: spp-theater-in 0.22s var(--ease);
}

@keyframes spp-theater-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.player-shell.is-theater {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* the notice line and the Telegram bar belong to the in-page player, not the stage */
.player-shell.is-theater > :not(.spp) {
  display: none !important;
}

.player-shell.is-theater .spp {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}

.spp.is-theater {
  aspect-ratio: auto;
}

body.is-theater {
  overflow: hidden;
}

/* the dimmed page behind the stage (added by the player's own script) */
.spp-shade {
  position: fixed;
  inset: 0;
  z-index: 199;
  background: rgba(4, 6, 10, 0.84);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Portrait phones: a wide 16:9 stage centred, rather than a letterboxed column. */
@media (max-width: 760px) and (orientation: portrait) {
  .player-shell.is-theater,
  .spp.is-theater {
    inset: auto 8px;
    top: 50%;
    width: auto;
    height: auto;
    max-height: calc(100dvh - 16px);
    transform: translateY(-50%);
    border-radius: var(--r-md);
  }

  .player-shell.is-theater .spp,
  .spp.is-theater {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
  }
}

/* ── Scoreboard strip on top of the player ────────────────────────────────
   The match the player is showing: a crest and a team name on each side of a
   "vs" chip, then the status and the feed count. It lives inside .player-shell
   so it shares the player's frame; the fixtures feed has no score line, so the
   strip carries the teams, LIVE / kick-off and the number of feeds. */
.match-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0));
  font-size: 12.5px;
  line-height: 1.2;
}

.match-bar .mb-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

.match-bar .mb-side b {
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-bar .mb-side.is-away {
  justify-content: flex-end;
  text-align: right;
}

.match-bar .crest {
  --crest: 26px;
  font-size: 9.5px;
  font-weight: 800;
  flex: 0 0 auto;
}

.match-bar .mb-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 14px;
  flex: 0 0 auto;
}

.match-bar .mb-vs {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* the score line ESPN supplies, in place of the "vs" chip once the match has started */
.match-bar .mb-score {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 2px 9px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.match-bar .mb-score b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.match-bar .mb-score i {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}

/* "HT", "67'", "FT" — the clock beside the LIVE badge */
.match-bar .mb-chip {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.match-bar .mb-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}

.match-bar .mb-meta .badge {
  font-size: 9.5px;
}

.match-bar .mb-feeds {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .match-bar {
    font-size: 11.5px;
    gap: 8px;
    padding: 8px 10px;
  }

  .match-bar .crest {
    --crest: 22px;
  }

  .match-bar .mb-feeds,
  .match-bar .mb-meta .badge {
    display: none;
  }
}

/* The server pills that used to sit under the player were removed on 2026-10-25. The player's own
   settings menu still lists every feed; the rules for it live in components/base, not here. */

/* The sub-tab panels on the watch page */
.panel-stack {
  display: grid;
  gap: 14px;
}

.panel-stack .tab-panel[hidden] {
  display: none;
}

/* ── Match centre overview (prototype .match-facts + .stats-box) ────────────
   The tab opens with four fact cards, then the box score: a crest and a name
   either side of the score, one bar pair per statistic. components.css carries
   the cards, the panel frame and the bars; only the crest line differs here,
   because the live page draws real team art inside .sb-head where the
   prototype drew its generated initials disk. */
.sb-head {
  gap: 10px;
}

.sb-head .sb-team {
  gap: 9px;
  min-width: 0;
}

.sb-head .sb-team.is-away {
  justify-content: flex-end;
  text-align: right;
}

.sb-head .crest {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset;
}

.sb-head .sb-score {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sb-head .sb-score i {
  font-style: normal;
  font-size: 13px;
  color: var(--muted);
}

@media (max-width: 520px) {
  .sb-head {
    gap: 8px;
  }

  .sb-head .sb-team {
    gap: 7px;
    font-size: 12px;
  }

  .sb-head .sb-score {
    font-size: 15px;
  }
}

/* ── Match centre (score, stats, timeline) ──────────────────────────────────
   The numbers the fixtures feed does not carry, read from ESPN and laid out
   like the pitch-side panels: a score header, one bar pair per statistic, then
   the key events newest first. */
.mc-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.mc-head > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-soft);
}

.mc-head > span.is-away {
  text-align: right;
}

.mc-head .mc-line {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mc-head .mc-line i {
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
}

.mc-head .mc-line em {
  font-style: normal;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 10px;
  font-weight: 800;
}

.mc-stats {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.mc-stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.mc-stat-top b {
  color: #fff;
  font-size: 12.5px;
}

.mc-stat-top span {
  flex: 1 1 auto;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mc-bars {
  display: flex;
  justify-content: space-between;
  gap: 3px;
  margin-top: 5px;
  height: 5px;
}

.mc-bars i {
  width: calc(var(--w) * 1%);
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.4s ease;
}

.mc-bars i.is-away {
  background: rgba(255, 255, 255, 0.32);
}

.mc-timeline {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.mc-timeline li {
  display: grid;
  grid-template-columns: 46px 12px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.45;
}

.mc-timeline .mc-clock {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.mc-timeline .mc-dot {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.mc-timeline li.is-goal .mc-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 132, 204, 22), 0.18);
}

.mc-timeline li.is-goal .mc-text {
  color: #fff;
  font-weight: 600;
}

.mc-timeline li.is-card .mc-dot {
  background: #fbbf24;
}

/* Compact related row used in the schedule sidebar and the watch sidebar */
.mini-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 6px;
  border-radius: var(--r-xs);
  color: inherit;
  transition: background 0.16s ease;
}

.mini-row:hover {
  background: rgba(255, 255, 255, 0.045);
}

.mini-row .mr-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-size: 15px;
}

/* The tile's own picture only — a crest drawn inside the tile keeps the crest rules. */
.mini-row .mr-thumb > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

/* A match is drawn as its two crests: the fixtures feed's poster is a dead proxy link, so the
   crests are what a visitor actually sees in the tile (see partials/mini-row). */
.mini-row .mr-thumb.is-crests {
  background:
    radial-gradient(120% 130% at 18% 0%, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.02) 62%),
    var(--surface-2);
}

.mini-row .mr-thumb .crests {
  display: flex;
  align-items: center;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}

.mini-row .mr-thumb .crests .crest {
  --crest: 22px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.mini-row .mr-thumb .crests .crest + .crest {
  margin-left: -7px;
}

.mini-row .mr-thumb .mr-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: 17px;
  line-height: 1;
  opacity: 0.95;
}

.mini-row .mr-txt {
  min-width: 0;
}

.mini-row .mr-txt b {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-row .mr-txt small {
  font-size: 11px;
  color: var(--muted);
}

.mini-row .mr-time {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-soft);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. the addon player (.spp) — markup: Views/partials/player.blade.php
   ══════════════════════════════════════════════════════════════════════════ */

.spp {
  --spp-accent: #cbf94a;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #04060a;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--font-body);
  border-radius: inherit;
  outline: none;
}

.spp:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--spp-accent) 70%, transparent);
}

.spp [hidden] {
  display: none !important;
}

.spp video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.spp__bright {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── watermark ── */
.spp__wm {
  position: absolute;
  z-index: 4;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  max-width: 60%;
  line-height: 1.3;
}

.spp__wm img {
  max-height: 34px;
  width: auto;
  display: block;
}

.spp__wm--top-left { top: 10px; left: 12px; }
.spp__wm--top-right { top: 10px; right: 12px; text-align: right; }
.spp__wm--bottom-left { bottom: 10px; left: 12px; }
.spp__wm--bottom-right { bottom: 10px; right: 12px; text-align: right; }
.spp__wm--center, .spp__wm--middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ── cover ── */
.spp__cover {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(20, 30, 20, 0.35), #05070b 70%);
}

.spp__cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
  filter: saturate(1.05);
}

/* Cover art for a match: the feed's poster is a dead proxy link for fixtures, so the cover would
   otherwise be a black panel with a play button. The two team crests are drawn either side of the
   button instead (partials/player renders them when the page passes $coverTeams). */
.spp__cover-crests {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(54px, 20vw, 180px);
  padding: 0 6%;
  pointer-events: none;
}

.spp__cover-crests .crest {
  --crest: clamp(42px, 11vw, 88px);
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.62));
}

.spp__cover-crests .crest-ini {
  font-size: clamp(13px, 3.4vw, 26px);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.spp__cover-center {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px;
  text-align: center;
  max-width: 44ch;
}

.spp__cover-center p {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.5;
}

.spp__bigplay {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--spp-accent) 55%, transparent);
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--spp-accent) 90%, #fff 10%), color-mix(in srgb, var(--spp-accent) 62%, #0b1406));
  color: var(--accent-ink);
  cursor: pointer;
  box-shadow:
    0 18px 45px color-mix(in srgb, var(--spp-accent) 32%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.spp__bigplay:hover {
  transform: scale(1.05);
}

.spp__cover-note {
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted) !important;
}

.spp .sp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid var(--line-strong);
}

.spp .sp-btn--primary {
  background: var(--spp-accent);
  border-color: transparent;
  color: var(--accent-ink);
}

/* ── brand intro ── */
.spp__intro {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  background: radial-gradient(90% 90% at 50% 40%, #0d1410, #030507 72%);
  opacity: 1;
  transition: opacity 0.8s ease;
}

.spp__intro.is-out {
  opacity: 0;
  pointer-events: none;
}

.spp__aurora span {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(70px);
  opacity: 0.42;
  background: color-mix(in srgb, var(--spp-accent) 55%, transparent);
  animation: spp-aurora 9s ease-in-out infinite alternate;
}

.spp__aurora .a1 { top: -20%; left: -10%; }
.spp__aurora .a2 { bottom: -25%; right: -12%; animation-delay: -3s; background: color-mix(in srgb, var(--violet) 50%, transparent); }
.spp__aurora .a3 { top: 30%; right: 25%; width: 34%; animation-delay: -6s; opacity: 0.28; }

@keyframes spp-aurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4%, -6%, 0) scale(1.12); }
}

.spp__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 80%);
  opacity: 0.5;
}

.spp__particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.spp__particles i {
  position: absolute;
  left: var(--x);
  bottom: -10px;
  width: var(--s);
  height: var(--s);
  border-radius: 999px;
  background: color-mix(in srgb, var(--spp-accent) 70%, #fff);
  opacity: 0;
  animation: spp-rise var(--d) linear var(--delay) infinite;
}

@keyframes spp-rise {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--drift), -105vh); }
}

.spp__intro-center {
  position: relative;
  display: grid;
  place-items: center;
}

.spp__flare {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  background: radial-gradient(circle, color-mix(in srgb, var(--spp-accent) 40%, transparent), transparent 68%);
  filter: blur(18px);
}

.spp__intro-logo {
  position: relative;
  width: 86px;
  height: 86px;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.6));
}

.spp__intro-logo .il-glass { fill: rgba(255, 255, 255, 0.06); }
.spp__intro-logo .il-frame { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1.4; stroke-dasharray: 100; stroke-dashoffset: 100; animation: spp-draw 1.4s ease forwards; }
.spp__intro-logo .il-play { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 100; animation: spp-draw 1.2s ease 0.25s forwards; }
.spp__intro-logo .il-play-fill { fill: color-mix(in srgb, var(--spp-accent) 85%, #fff); opacity: 0; animation: spp-pop 0.6s ease 0.9s forwards; }

@keyframes spp-draw { to { stroke-dashoffset: 0; } }
@keyframes spp-pop { to { opacity: 1; } }

.spp__intro-title {
  display: flex;
  gap: 2px;
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #fff;
}

.spp__intro-title .ch {
  opacity: 0;
  transform: translateY(8px);
  animation: spp-ch 0.5s ease forwards;
  animation-delay: calc(var(--i) * 0.05s + 0.6s);
}

.spp__intro-title .ch.is-dot { color: var(--spp-accent); }

@keyframes spp-ch { to { opacity: 1; transform: none; } }

.spp__intro-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.spp__intro-badge i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--spp-accent);
}

.spp__intro-bar {
  width: min(240px, 60vw);
  height: 3px;
  margin-top: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.spp__intro-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--spp-accent), transparent);
  animation: spp-bar 1.8s ease-in-out infinite;
}

@keyframes spp-bar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── spinner / unmute / toast ── */
.spp__spinner {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--spp-accent);
  animation: spp-spin 0.9s linear infinite;
}

@keyframes spp-spin { to { transform: rotate(360deg); } }

.spp__unmute {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 74px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(8, 12, 16, 0.82);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.spp__toast {
  position: absolute;
  z-index: 9;
  top: 62px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 12, 16, 0.9);
  border: 1px solid var(--line-strong);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* ── hud, seek flash, stats ── */
.spp__hud {
  position: absolute;
  z-index: 8;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(6, 9, 13, 0.82);
  border: 1px solid var(--line-strong);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

.spp__hud.is-on { opacity: 1; }

.spp__hud svg {
  width: 22px;
  height: 22px;
  color: #fff;
}

.spp__hud-bar {
  width: 120px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}

.spp__hud-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--spp-accent);
}

.spp__hud b {
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.spp__seekflash {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
}

.spp__seekflash.is-back::after,
.spp__seekflash.is-fwd::after {
  position: absolute;
  top: 50%;
  margin-top: -22px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(6, 9, 13, 0.7);
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.spp__seekflash.is-back::after { content: '« 10s'; left: 12%; }
.spp__seekflash.is-fwd::after { content: '10s »'; right: 12%; }

.spp__stats {
  position: absolute;
  z-index: 8;
  top: 56px;
  left: 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(4, 7, 10, 0.88);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.8;
  color: var(--text-soft);
  min-width: 180px;
}

.spp__stats dt { color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; }
.spp__stats dd { margin: 0 0 4px; font-variant-numeric: tabular-nums; color: #fff; }

/* ── top bar ── */
.spp__top {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 26px;
  background: linear-gradient(180deg, rgba(3, 5, 8, 0.85), transparent);
  opacity: 1;
  transition: opacity 0.25s ease;
}

.spp__live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 77, 94, 0.45);
  background: rgba(255, 77, 94, 0.16);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.spp__live i {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--live);
  animation: spp-pulse 1.4s ease-in-out infinite;
}

@keyframes spp-pulse { 50% { opacity: 0.25; } }

.spp__title {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Score line inside the player's top bar ───────────────────────────────
   The watch page used to draw a strip above the player; the score now sits on
   the picture, the way the prototype's .player-scoreboard does: a crest and the
   name on each side of the numbers, with the clock (or kick-off time) beside
   them. It fades out with the rest of the top bar when the controls idle. */
.spp__score {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.spp__score .spps-team {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 0;
}

.spp__score .spps-team b {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spp__score .spps-team.is-away {
  justify-content: flex-end;
  text-align: right;
}

.spp__score .spps-crest {
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 4px 12px -6px rgba(0, 0, 0, 0.9);
}

.spp__score .spps-mid {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(6, 9, 12, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(6px);
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.spp__score .spps-mid b {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.spp__score .spps-mid i {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
}

.spp__score .spps-vs {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.spp__score .spps-mid em {
  font-style: normal;
  margin-left: 2px;
  padding-left: 6px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 9.5px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
}

.spp__feeds {
  flex: 0 0 auto;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .spp__score .spps-team b { display: none; }
  .spp__feeds { display: none; }
}

.spp__topacts {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}

.spp__tbtn,
.spp__btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.spp__tbtn svg,
.spp__btn svg {
  width: 19px;
  height: 19px;
}

.spp__tbtn:hover,
.spp__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.spp__tbtn.is-on,
.spp__btn.is-on {
  background: color-mix(in srgb, var(--spp-accent) 22%, transparent);
  color: var(--spp-accent);
}

.spp__health i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.16);
}

.spp__health.is-weak i { background: #fbbf24; box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.16); }
.spp__health.is-bad i { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16); }

/* ── bottom bar ── */
.spp__bottom {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 12px 8px;
  background: linear-gradient(0deg, rgba(3, 5, 8, 0.92), transparent);
  opacity: 1;
  transition: opacity 0.25s ease;
}

.spp__timeline {
  padding: 8px 0;
  cursor: pointer;
  touch-action: none;
}

.spp__track {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
}

.spp__buf {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.32);
}

.spp__prog {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: var(--spp-accent);
}

.spp__prog i {
  position: absolute;
  right: -5px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--spp-accent) 32%, transparent);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.spp:hover .spp__prog i,
.spp__timeline:hover .spp__prog i { opacity: 1; }

.spp__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.spp__group {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.spp__btn--main {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--spp-accent) 92%, #fff 8%);
  color: var(--accent-ink);
}

.spp__btn--main:hover {
  background: var(--accent-bright);
  color: var(--accent-ink);
}

.spp__vol {
  width: 74px;
  height: 4px;
  margin: 0 6px;
  accent-color: var(--spp-accent);
  cursor: pointer;
}

.spp__time {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.spp__chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  cursor: pointer;
}

.spp__chip:hover { background: rgba(255, 255, 255, 0.16); }

/* idle: the controls get out of the way while the match plays */
.spp.is-idle { cursor: none; }
.spp.is-idle .spp__top,
.spp.is-idle .spp__bottom { opacity: 0; }

/* ── settings panel ── */
.spp__panel {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 62px;
  min-width: 232px;
  max-height: 62%;
  overflow: auto;
  padding: 6px;
  border-radius: 14px;
  background: rgba(8, 12, 17, 0.96);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
}

.spp__panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.spp__panel button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.spp__panel button:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.spp__panel button.is-active { color: var(--spp-accent); }
.spp__panel button i { font-style: normal; color: var(--dim); font-size: 11px; }
.spp__panel button.is-active i { color: inherit; }

.spp-notice {
  margin: 8px 2px 0;
  font-size: 11.5px;
  color: var(--dim);
}

.spp-notice a { color: var(--muted); }

/* ── small screens: keep the bar readable, drop the volume slider ── */
@media (max-width: 560px) {
  .spp__vol { display: none; }
  .spp__title { font-size: 11px; }
  .spp__time { font-size: 10.5px; }
  .spp__btn,
  .spp__tbtn { width: 30px; height: 30px; }
  .spp__btn--main { width: 36px; height: 36px; }
  .spp__intro-title { font-size: 16px; letter-spacing: 0.2em; }
  .spp__cover-note { font-size: 10.5px !important; }
  .spp__panel { left: 8px; right: 8px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spp__aurora span,
  .spp__particles i,
  .spp__intro-bar > span { animation: none; }
}

/* ── 4. glue between the design components and the live event data ──────── */

/* live rail card: the poster sits behind the copy */
.live-card { position: relative; overflow: hidden; }
.live-card > .lc-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
  z-index: 0;
  transition: opacity .25s ease, transform .4s ease;
}
.live-card:hover > .lc-art { opacity: .62; transform: scale(1.03); }
.live-card > .lc-top,
.live-card > .lc-teams,
.live-card > .lc-foot { position: relative; z-index: 1; }
.live-card.is-soon::before { background: linear-gradient(180deg, rgba(251,191,36,.10), transparent 55%); }
.live-card .lc-play { width: 15px; height: 15px; color: var(--accent); }
.live-card .lc-team .crest { flex: none; }

/* hero spotlight: the poster is a backdrop for the headline */
.spotlight .spot-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .26;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 78%);
}
.spotlight > *:not(.spot-poster) { position: relative; z-index: 1; }

/* board list */
.board-list { display: grid; gap: 8px; }
.board-empty-note {
  margin: 14px 0 0;
  padding: 14px;
  text-align: center;
  border-radius: var(--r-sm);
  border: 1px dashed var(--line-strong);
  color: var(--muted);
  font-size: 12.5px;
}

/* ── Watch page: "More on the board" fixtures ───────────────────────────────
   The closing section of the watch page lists the other fixtures on the board.
   Each is a strip: a clock rail at the left edge (the kick-off time and day, or
   the live minute in red), the sport and the feed count over the two sides, and
   the actions pinned to the right edge. Two strips per row while there is room,
   one below ~860px, so the names never drift into a wide empty middle. One
   stretched link makes the whole strip open the fixture; the follow stars and
   the actions sit above it and keep their own click targets. */
.keep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr));
  gap: 10px;
}

/* "3 live · 8 fixtures" under the section title */
.keep-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 9px;
  font-size: 12px;
  color: var(--dim);
}

.keep-sub > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.keep-sub .keep-live {
  color: var(--live);
  font-weight: 600;
}

.keep-sub .keep-live .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 9px rgba(255, 77, 94, 0.85);
  animation: keep-pulse 1.8s var(--ease) infinite;
}

@keyframes keep-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  55% { opacity: 0.35; transform: scale(0.82); }
}

.kstrip {
  position: relative;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  align-items: stretch;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background:
    radial-gradient(420px 130px at 0% 0%, rgba(255, 255, 255, 0.035), transparent 72%),
    linear-gradient(180deg, rgba(20, 27, 36, 0.74), rgba(11, 15, 20, 0.94));
  overflow: hidden;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
    box-shadow 0.2s var(--ease);
}

.kstrip:hover,
.kstrip:focus-within {
  transform: translateY(-1px);
  border-color: var(--accent-line);
  box-shadow: 0 22px 40px -34px rgba(0, 0, 0, 0.95);
}

/* the clock rail */
.kstrip-when {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 14px 8px;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.024);
  text-align: center;
}

.kstrip-clock {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.kstrip-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
}

.kstrip-tag .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* a live strip: red rail, red clock, a soft red wash over the rail only */
.kstrip.is-live {
  border-color: rgba(255, 77, 94, 0.22);
}

.kstrip.is-live:hover,
.kstrip.is-live:focus-within {
  border-color: rgba(255, 77, 94, 0.42);
}

.kstrip.is-live::after {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: var(--live);
  box-shadow: 0 0 10px rgba(255, 77, 94, 0.65);
}

.kstrip.is-live .kstrip-when {
  background: linear-gradient(180deg, rgba(255, 77, 94, 0.11), rgba(255, 77, 94, 0.015));
}

.kstrip.is-live .kstrip-clock,
.kstrip.is-live .kstrip-tag {
  color: var(--live);
}

.kstrip.is-live .kstrip-tag .dot {
  animation: keep-pulse 1.8s var(--ease) infinite;
}

.kstrip-hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.kstrip-hit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* The content sits above the stretched link, so it must not swallow its clicks: only the
   stars and the actions take pointer events. */
.kstrip-when,
.kstrip-body,
.kstrip-side {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.kstrip .fav-star,
.kstrip-side {
  pointer-events: auto;
}

.kstrip-body {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
  padding: 13px 15px;
}

.kstrip-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  font-size: 10.5px;
  letter-spacing: 0.015em;
  color: var(--muted);
  white-space: nowrap;
}

.kstrip-sport {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-soft);
  font-weight: 600;
}

.kstrip-feeds {
  flex: 0 0 auto;
}

.kstrip-247 {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-strong);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--dim);
}

.kstrip-teams {
  display: grid;
  gap: 6px;
}

.kstrip-team {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.kstrip-team b {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kstrip-team .ev-crest { flex: 0 0 auto; }

/* The star stays visible (and tappable) on touch screens where there is no hover; it goes solid
   on the row's own hover or once the team is followed. */
.kstrip-team .fav-star {
  position: relative;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--dim);
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
}

.kstrip-team .fav-star svg { width: 12px; height: 12px; }

.kstrip-team:hover .fav-star,
.kstrip-team .fav-star.is-fav { opacity: 1; }

.kstrip-team .fav-star.is-fav { color: var(--accent); }

.kstrip-side {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
}

.kstrip-side .icon-btn {
  width: 32px;
  height: 32px;
}

.kstrip-side .icon-btn svg {
  width: 13px;
  height: 13px;
}

/* Below ~600px the strip keeps the rail beside the sides and drops the actions to their own
   full-width row, which gives the button a comfortable tap target. */
@media (max-width: 600px) {
  .kstrip { grid-template-columns: 68px minmax(0, 1fr); }

  .kstrip-when { padding: 12px 6px; }

  .kstrip-clock { font-size: 18px; }

  .kstrip-body { padding: 12px; gap: 7px; }

  .kstrip-side {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.018);
  }

  .kstrip-side .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* small red LIVE word used in rows and side lists */
.live-text {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--live);
}

/* side facts on the watch page */
.watch-facts { display: grid; gap: 2px; }
.watch-facts .wf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
}
.watch-facts .wf:first-child { border-top: 0; }
.watch-facts .wf span { color: var(--muted); }
.watch-facts .wf b { color: var(--text); font-weight: 700; text-align: right; }

/* tabs used on the watch page panels */
.tab-panel { animation: arena-fade .2s ease; }
@keyframes arena-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* the schedule page's own day chips reuse the design's chip styling */
.day-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scrollbar-width: none; }
.day-chips::-webkit-scrollbar { display: none; }
.day-chips .chip { flex: none; }

@media (max-width: 700px) {
  .board-list .match-row { grid-template-columns: 1fr; }
}

/* flash messages on the contact page (success / error after a POST) */
.form-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-soft);
}
.form-flash svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.form-flash.is-ok {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--text);
}
.form-flash.is-ok svg { color: var(--accent); }
.form-flash.is-error {
  border-color: rgba(255, 107, 107, .42);
  background: rgba(255, 107, 107, .07);
  color: var(--text);
}
.form-flash.is-error svg { color: var(--live); }

/* Platform ad slot: the arena layout has no page frame of its own, so the banner gets the same
   container width as the sections around it and stays out of the way when the slot is empty. */
.arena-ad {
  margin: clamp(12px, 1.8vw, 20px) 0 0;
  text-align: center;
}
.arena-ad:empty { margin: 0; }
.arena-ad img { max-width: 100%; height: auto; }
/* ── Crests and channel logos ─────────────────────────────────────────────
   The fixtures feed names teams and the channels feed ships a logo, so the cards
   draw a real image when one exists and fall back to the initials/colour crest when
   it does not (the image removes itself on error, and .has-logo is only added once
   the file has actually loaded). */
.crest { position: relative; }

.crest .crest-ini,
.channel-logo .channel-logo-ini {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.crest.has-logo {
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset, 0 6px 16px -8px rgba(0, 0, 0, 0.8);
}

.crest.has-logo .crest-ini { visibility: hidden; }

.crest .crest-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 9%;
}

.channel-logo { position: relative; }

.channel-logo.has-img {
  width: 104px;
  height: 58px;
}

.channel-logo.has-img .channel-logo-ini { visibility: hidden; }

.channel-logo .channel-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

/* Match centre: the channel logo sits above the title, team crests sit in the vs line */
.wt-channel-logo {
  display: block;
  width: 128px;
  height: 62px;
  object-fit: contain;
  margin: 4px 0 10px;
}

.wt-sub .crest {
  vertical-align: -8px;
  margin-right: 2px;
}

.wt-sub .crest + b { margin: 0 4px; }

/* ── Player cover: stadium art behind the play button ──────────────────────
   A fixture's feed poster is a dead link, so the cover shows the two crests on a black panel. These
   three layers put a floodlit pitch behind them: a striped trapezoid in perspective, the halfway
   circle, and a soft glow under the centre spot. It is drawn entirely in CSS, so it costs no
   request and never shows a broken image. */
.spp__pitch {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.spp__pitch-field {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 72%;
  transform: translateX(-50%);
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.06) 0 5%,
      rgba(255, 255, 255, 0.018) 5% 10%);
  opacity: 0.9;
}

.spp__pitch-field::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
}

.spp__pitch-circle {
  position: absolute;
  left: 50%;
  bottom: 40%;
  width: 20%;
  aspect-ratio: 1 / 0.4;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
}

/* Darken the edges so the pitch reads as light falling on grass, not a flat shape */
.spp__pitch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(78% 70% at 50% 58%, transparent 38%, rgba(4, 6, 10, 0.88) 100%);
}

.spp__pitch-glow {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 48%;
  aspect-ratio: 1 / 0.62;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 40%,
    color-mix(in srgb, var(--spp-accent) 9%, transparent), transparent 72%);
}

/* The league's own ground over the CSS pitch: one 1600 × 900 SVG per competition (La Liga, the
   Premier League, the NHL rink …), picked by Services/GroundArt and handed to the player as
   $ground. It fades in once the file is decoded, so a slow or missing image leaves the CSS pitch
   showing rather than an empty box; the vignette above it keeps the crests and the caption legible
   on the brightest part of the turf. */
.spp__ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.spp__ground.is-on { opacity: 1; }

.spp__ground img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The leagues differ by palette, so a little extra colour keeps the stands and the LED board
     apart from one league to the next at player size */
  filter: saturate(1.15) contrast(1.03);
}

.spp__ground::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 74% at 50% 56%, transparent 40%, rgba(4, 6, 10, 0.6) 100%),
    linear-gradient(180deg, rgba(4, 6, 10, 0.26), transparent 34%, transparent 66%, rgba(4, 6, 10, 0.46));
}

/* The crests and the centre cluster must stay above the pitch art */
.spp__cover-crests,
.spp__cover-center { z-index: 2; }

/* ── Match centre chat ────────────────────────────────────────────────────
   The platform has no chat service behind the sports addon, so the panel keeps the messages in this
   browser tab (sessionStorage) and says as much under the field. */
.chat-box {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.chat-empty {
  margin: 0;
  padding: 18px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

.chat-empty[hidden] { display: none; }

.chat-log {
  display: grid;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 2px;
}

.chat-msg {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: 12.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.chat-msg b {
  color: var(--spp-accent, var(--accent));
  font-size: 11.5px;
  letter-spacing: 0.02em;
}

.chat-msg span { color: var(--text-soft); }

.chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.chat-form input {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, #000 26%, transparent);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.chat-form input:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.chat-form button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #0a0d10;
  cursor: pointer;
}

.chat-form button svg { width: 17px; height: 17px; }


/* -- Teams panel on the watch sidebar ------------------------------------
   Prototype's Teams card: the two crests with their names and a Follow pill.
   The pill only carries the data-fav-team hook — arena-ui.js toggles .is-fav,
   keeps aria-pressed in sync and shares the list with the board's stars. */
.team-list {
  display: grid;
  gap: 6px;
}

.team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 2px;
}

.team-row .crest {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
}

.team-row b {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-follow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.team-follow svg {
  width: 12px;
  height: 12px;
}

.team-follow:hover {
  color: #fff;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong));
}

.team-follow.is-fav {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
}

.team-follow .tf-off { display: none; }
.team-follow.is-fav .tf-on { display: none; }
.team-follow.is-fav .tf-off { display: inline; }

/* Title-row Follow star (the prototype's star). One button follows both sides of the fixture;
   the pressed state borrows the Teams card's tint so the two controls read as one. */
.wt-fav svg {
  width: 13px;
  height: 13px;
}

.wt-fav.is-fav {
  color: #fff;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
}

.wt-fav.is-fav svg {
  color: var(--accent);
}

/* Four buttons no longer fit one line on a phone: wrap them instead of clipping the last
   one against the edge of the row. */
@media (max-width: 560px) {
  .watch-title-row .wt-actions {
    flex-wrap: wrap;
  }
}

/* ── Ghost-code rail cards ─────────────────────────────────────────────────
   The "Live now" and "Starting soon" rails used to draw a list inside a card: two
   crest+name rows and a footer with the time and feed count. This turns a fixture into
   a 16:9 match poster — the crests sit either side, the initials bleed off the bottom
   edge as ghost codes, and the centre swaps the VS chip for a live countdown on hover.
   A phone has no hover, so there the countdown becomes a compact row under the crests.
   A 24/7 channel or a single-title event keeps the list card (no .is-poster). */
.live-card.is-poster {
  display: block;
  padding: 0;
  aspect-ratio: 16 / 9;
  background: #0a0d12;
  isolation: isolate;
  color: #fff;
  container-type: inline-size;
}

.live-card.is-poster::before {
  display: none;
}

.lc-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(72% 115% at 0% 48%, hsl(var(--lh, 80) 78% 50% / .5), transparent 62%),
    radial-gradient(72% 115% at 100% 48%, hsl(var(--rh, 280) 70% 48% / .46), transparent 62%),
    linear-gradient(112deg, hsl(var(--lh, 80) 58% 20%), #0a0d12 56%, hsl(var(--rh, 280) 46% 17%));
}

.lc-wash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 6, 10, .46), rgba(4, 6, 10, .04) 45%, rgba(4, 6, 10, .62));
}

/* The two ghost codes sit on the bottom edge of the poster. They used to be a fixed 46px with
   line-height .8 pushed 8px below the card, so the card's overflow clipped the bottom of every
   letter ("MA", "LH", "CV" read as half glyphs). Now the size follows the card (cqw, the card is
   a size container) and line-height is 1, which keeps the whole glyph above the edge: the only
   thing pushed past the bottom is the empty descender space of the line box. */
.lc-ghost {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: clamp(23px, 15.5cqw, 46px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.045em;
  color: #fff;
  opacity: .1;
}

.live-card.is-poster .lc-top {
  position: absolute;
  inset: 9px 9px auto;
  z-index: 4;
  margin: 0;
}

.live-card.is-poster .lc-top .lc-league {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  background: rgba(8, 11, 15, .5);
  border: 1px solid rgba(255, 255, 255, .13);
  padding: 3px 7px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.live-card.is-poster .lc-ts {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .84);
  background: rgba(8, 11, 15, .5);
  border: 1px solid rgba(255, 255, 255, .13);
  padding: 3px 7px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  font-variant-numeric: tabular-nums;
}

.lc-duo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.lc-side {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  transition: transform .28s var(--ease);
}

.lc-side.is-l { left: 22px; }
.lc-side.is-r { right: 22px; }

.lc-side .crest {
  transition: opacity .24s var(--ease), transform .28s var(--ease);
}

.lc-name {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  text-align: center;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .2s var(--ease);
}

.lc-mid {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.lc-vs {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .72);
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(8, 11, 15, .55);
  border: 1px solid rgba(255, 255, 255, .13);
  transition: opacity .2s var(--ease);
}

.lc-cd {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 46%;
  transform: translateY(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity .24s var(--ease);
}

.lc-k {
  display: block;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 5px;
}

.lc-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(5px, 2.2cqw, 8px);
}

.lc-u {
  display: grid;
  justify-items: center;
  gap: 1px;
}

.lc-u b {
  font-family: var(--font-display);
  font-size: clamp(15px, 6.1cqw, 19px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.lc-u i {
  font-style: normal;
  font-size: 5.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.lc-sep {
  width: 1px;
  height: 15px;
  background: rgba(255, 255, 255, .16);
  margin-bottom: 4px;
}

.lc-cd .lc-live {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #ff9098;
  font-variant-numeric: tabular-nums;
}

/* A "starting soon" card is inside six hours, so the days blade is always 00: drop it (and its
   divider) instead of spending a quarter of the row on a zero. arena-ui.js keeps the class in
   step as the clock ticks; the server renders it for the first paint. */
.lc-cd.is-nodays .lc-row > .lc-u:first-child,
.lc-cd.is-nodays .lc-row > .lc-u:first-child + .lc-sep {
  display: none;
}

.live-card.is-poster:hover .lc-vs,
.live-card.is-poster:focus-visible .lc-vs {
  opacity: 0;
}

.live-card.is-poster:hover .lc-cd,
.live-card.is-poster:focus-visible .lc-cd {
  opacity: 1;
}

.live-card.is-poster:hover .lc-side .crest,
.live-card.is-poster:focus-visible .lc-side .crest {
  opacity: .25;
}

.live-card.is-poster:hover .lc-side.is-l,
.live-card.is-poster:focus-visible .lc-side.is-l {
  transform: translateY(-50%) translateX(-6px);
}

.live-card.is-poster:hover .lc-side.is-r,
.live-card.is-poster:focus-visible .lc-side.is-r {
  transform: translateY(-50%) translateX(6px);
}

.live-card.is-poster:hover .lc-name,
.live-card.is-poster:focus-visible .lc-name {
  opacity: 0;
}

/* No hover on a phone: the countdown drops to the bottom of the poster as one compact pill —
   the four blades and their labels now share a line ("31 MINS · 09 SECS") instead of stacking
   two rows, which used to collide with the team names under the crests. */
@media (hover: none) {
  .live-card.is-poster .lc-k { display: none; }
  .live-card.is-poster .lc-cd {
    top: auto;
    bottom: 7px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 18px);
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(6, 9, 13, .66);
    border: 1px solid rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 1;
  }
  .live-card.is-poster .lc-cd .lc-row { align-items: baseline; gap: 7px; }
  .live-card.is-poster .lc-cd .lc-u {
    display: flex;
    align-items: baseline;
    gap: 2px;
  }
  .live-card.is-poster .lc-cd .lc-u b { font-size: 12.5px; }
  .live-card.is-poster .lc-cd .lc-u i { font-size: 5.5px; letter-spacing: .06em; }
  .live-card.is-poster .lc-cd .lc-sep {
    width: 3px;
    height: 3px;
    align-self: center;
    margin: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .3);
  }
  .live-card.is-poster .lc-cd .lc-live { font-size: 15px; }
  .live-card.is-poster .lc-name { width: 84px; font-size: 8.5px; }
  .live-card.is-poster .lc-ghost { opacity: .085; }
}