/* ============================================================
   LIVE SPORTS — v3 layout
   Replaces the poster-background match cards with a minimal,
   livsport-style design: sport icon row, team logos in a row,
   small badges + a clear "Watch" CTA. Adds sport-grouped home
   view, per-sport pages, and inline match-detail view.

   Loaded AFTER design.css so it wins specificity on shared
   selectors (.match-card, .live-section, .live-modal*).
   ============================================================ */

/* ----- sport color palette -------------------------------- */
/* Each sport gets a hue used to tint the top-left sport pill and
   accent details. We keep these subtle (18% opacity bg, 100% text)
   so the grid as a whole still feels cohesive. */
.match-card { --sport-color: #94a3b8; }
.match-card[data-sport="football"]          { --sport-color: #22c55e; }
.match-card[data-sport="basketball"]        { --sport-color: #f97316; }
.match-card[data-sport="american-football"] { --sport-color: #ef4444; }
.match-card[data-sport="tennis"]            { --sport-color: #a3e635; }
.match-card[data-sport="baseball"]          { --sport-color: #f59e0b; }
.match-card[data-sport="hockey"]            { --sport-color: #3b82f6; }
.match-card[data-sport="motorsports"]       { --sport-color: #f87171; }
.match-card[data-sport="fight"]             { --sport-color: #ec4899; }
.match-card[data-sport="rugby"]             { --sport-color: #d97706; }
.match-card[data-sport="cricket"]           { --sport-color: #10b981; }
.match-card[data-sport="volleyball"]        { --sport-color: #8b5cf6; }
.match-card[data-sport="badminton"]         { --sport-color: #eab308; }
.match-card[data-sport="golf"]              { --sport-color: #4ade80; }
.match-card[data-sport="afl"]               { --sport-color: #c2410c; }
.match-card[data-sport="darts"]             { --sport-color: #f43f5e; }
.match-card[data-sport="billiards"]         { --sport-color: #06b6d4; }

/* ----- v3 layout shell ------------------------------------- */

.live-shell {
  padding-bottom: 32px;
}

/* Sticky sport-tab bar — sits right under the topnav */
.live-stickybar {
  position: sticky;
  top: 60px;
  z-index: 30;
  background: var(--scrim);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  margin-top: -8px;
}
@media (min-width: 900px) {
  .live-stickybar { top: 68px; }
}
.live-stickybar #sport-tabs-mount .pills,
.live-stickybar #live-date-mount .pills {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: 0;
}

/* ----- v3 match card --------------------------------------- */

/* Override the v1/v2 background-image card */
.match-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible !important;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.match-card:hover {
  background: var(--surface-hi) !important;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border)) !important;
  transform: none !important;
  box-shadow: none !important;
}
.match-card--live {
  border-color: color-mix(in srgb, #e84040 35%, var(--border)) !important;
}
.match-card--live:hover {
  border-color: color-mix(in srgb, #e84040 60%, var(--border)) !important;
}

/* Big faded sport-icon watermark in the card corner. The icon comes from
   data-sport-icon (set by JS) so we don't bloat CSS per-sport. */
.match-card::before {
  content: attr(data-sport-icon);
  position: absolute;
  top: 30%;
  right: -10px;
  font-size: 110px;
  line-height: 1;
  opacity: 0.10;
  transform: rotate(-15deg);
  pointer-events: none;
  z-index: 0;
  filter: grayscale(0.2);
  transition: opacity 0.2s, transform 0.2s;
}
.match-card:hover::before {
  opacity: 0.16;
  transform: rotate(-12deg) translateX(-2px);
}
.match-card { position: relative; overflow: hidden !important; }
.match-card > * { position: relative; z-index: 1; }

/* Kill the legacy poster/empty-bg/composite affordances */
.match-card.match-card--has-poster,
.match-card.match-card--empty-bg,
.match-card.match-card--vs-composite,
.match-card.match-card--pending-bg {
  background: var(--surface) !important;
  background-image: none !important;
  border-color: var(--border) !important;
}
.match-card.match-card--empty-bg::before,
.match-card.match-card--vs-composite::after {
  display: none !important;
}

/* top row: sport tag + status/time + actions */
.match-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.match-card__sport {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 auto !important;
  min-width: 0;
  max-width: 100%;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sport-color) 16%, transparent);
  color: var(--sport-color) !important;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.match-card__sport-ico {
  font-size: 12px;
  line-height: 1;
}
.match-card__sport-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: none !important;
  color: inherit !important;
  font-weight: 800;
}
/* push status pill to the right */
.match-card__top { gap: 6px; }
.match-card__top > .match-card__sport { flex-shrink: 1; }
.match-card__top > :not(.match-card__sport):not(:last-child),
.match-card__top > .match-card__status { margin-left: auto; }

/* status pill (LIVE / HT / FT / time) — top right */
.match-card__status {
  background: rgba(255,255,255,0.06);
  color: var(--fg);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.match-card__status--livestatuslive {
  background: rgba(232,64,64,0.15);
  color: #ff5454;
}
.match-card__status--livestatusht {
  background: rgba(250,204,21,0.15);
  color: #facc15;
}
.match-card__status--livestatusft {
  background: rgba(255,255,255,0.08);
  color: var(--fg-muted);
}

/* tiny live-dot inside the LIVE pill */
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: live-pulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* favorite star floats inside top row */
.match-card__star {
  background: transparent;
  border: none;
  color: var(--fg-faint);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.match-card__star:hover { color: #facc15; transform: scale(1.15); }
.match-card__star--active { color: #facc15; }
.match-card__star svg { width: 14px; height: 14px; }

/* match title */
.match-card__title {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--fg) !important;
  line-height: 1.3;
  text-shadow: none !important;
  letter-spacing: -0.005em;
  /* clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

/* team rows — small badges, one team per row */
.match-card__teams {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.match-card__team {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--fg-muted);
  min-width: 0;
}
.match-card__team-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  text-shadow: none !important;
}
.match-card__team-badge {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  padding: 2px;
}
.match-card__team-badge-placeholder {
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--sport-color);
  opacity: 0.5;
}
/* score on the right side of each team row */
.match-card__team-score {
  font-weight: 700;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  min-width: 14px;
  text-align: right;
}

/* league row (small, just under teams) */
.match-card__league {
  font-size: 11px;
  color: var(--fg-faint);
  text-shadow: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* footer: source count + watch CTA + small action icons */
.match-card__bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  font-size: 11px;
  color: var(--fg-muted);
  flex-wrap: nowrap !important;
}
.match-card__src-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
}
.match-card__src-count strong {
  color: var(--fg);
  font-weight: 700;
}
.match-card__watch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.match-card__watch-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 50%;
  font-size: 8px;
  padding-left: 1px;
}
.match-card__hd {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(200,255,58,0.18);
  color: var(--accent);
}

/* tiny icon buttons (bell / share / cal) */
.match-card__act-btn {
  background: transparent;
  border: none;
  color: var(--fg-faint);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  line-height: 0;
  transition: color 0.15s, background 0.15s;
  min-width: 22px;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.match-card__act-btn:hover { color: var(--fg); background: rgba(255,255,255,0.06); }
.match-card__act-btn svg { width: 12px; height: 12px; }
.match-card__bell--active { color: var(--accent) !important; }
.match-card__actions { display: inline-flex; gap: 2px; }

/* live-style v3 reset of legacy overrides */
.match-card--has-poster .match-card__top,
.match-card--has-poster .match-card__title,
.match-card--has-poster .match-card__league,
.match-card--has-poster .match-card__time,
.match-card--has-poster .match-card__teamname,
.match-card--has-poster .match-card__sport-text {
  color: var(--fg-muted) !important;
  text-shadow: none !important;
}
.match-card--has-poster .match-card__title { color: var(--fg) !important; }

/* ----- sport sections (home view) -------------------------- */

.live-section {
  margin: 8px 0 6px;
}
.live-section .row__head {
  align-items: center;
  margin-bottom: 12px;
}
.live-section__title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}
.live-section__icon {
  font-size: 18px;
  line-height: 1;
}
.live-section__count {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--elevated);
  color: var(--fg-muted);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-body);
}
.live-section__viewall {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
  cursor: pointer;
}
.live-section__viewall:hover { color: var(--accent); }
.live-section__viewall::after {
  content: "→";
  font-size: 13px;
  transition: transform 0.15s;
}
.live-section__viewall:hover::after { transform: translateX(2px); }

.live-section--live .live-section__title {
  color: #ff5454;
}
.live-section--live .live-section__icon {
  width: 9px;
  height: 9px;
  background: #ff5454;
  border-radius: 50%;
  animation: live-pulse 1.4s ease-in-out infinite;
}

/* tighter grid: 1-2-3-4 cols depending on viewport */
.match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  padding: 0 var(--pad-x) 24px;
}

/* ----- page header simplification -------------------------- */

.pagehead {
  padding-top: 24px !important;
  padding-bottom: 4px !important;
}

/* search bar — tighten */
.live-search-wrap {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* ----- detail page (?match=ID) ----------------------------- */

.live-detail {
  padding: 18px var(--pad-x) 40px;
  max-width: 1100px;
  margin: 0 auto;
}
.live-detail__back {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  cursor: pointer;
  margin-bottom: 14px;
  background: none;
  border: none;
  padding: 6px 2px;
  transition: color 0.15s;
}
.live-detail__back:hover { color: var(--fg); }
.live-detail__back::before { content: "←"; font-size: 14px; }

.live-detail__sport {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 8px;
}
.live-detail__title {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 6px;
  line-height: 1.15;
}
.live-detail__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 18px;
}
.live-detail__meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.live-detail__meta-pill--live {
  background: rgba(232,64,64,0.15);
  color: #ff5454;
  border-color: rgba(232,64,64,0.3);
  font-weight: 700;
}

/* big team display */
.live-detail__teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 16px;
}
.live-detail__team {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.live-detail__team--away {
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.live-detail__team-badge {
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  padding: 4px;
  flex-shrink: 0;
}
.live-detail__team-badge-placeholder {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--fg-faint);
  flex-shrink: 0;
}
.live-detail__team-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--fg);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-detail__score {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  text-align: center;
  letter-spacing: -0.02em;
  min-width: 100px;
}
.live-detail__score--vs {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--fg-muted);
  text-transform: uppercase;
}

/* player */
.live-detail__player {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.live-detail__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.live-detail__player-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: var(--fg-muted);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

/* source picker */
.live-detail__srcbar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 0 16px;
}
.live-detail__src-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  padding-top: 8px;
}
.live-detail__sources {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* ----- collapsible source picker (replaces wrap-of-pills) ----- */
.live-src-picker {
  position: relative;
  width: 100%;
  max-width: 420px;
}
.live-src-picker__current {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  min-height: 44px;
}
.live-src-picker__current:hover,
.live-src-picker__current:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: var(--surface-hi);
  outline: none;
}
.live-src-picker__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.live-src-picker__chev {
  font-size: 14px;
  color: var(--fg-muted);
  transition: transform 0.18s;
  flex-shrink: 0;
}
.live-src-picker--open .live-src-picker__chev { transform: rotate(180deg); }
.live-src-picker--open .live-src-picker__current {
  border-color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.live-src-picker__list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--surface-hi);
  border: 1px solid var(--accent);
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  max-height: 320px;
  overflow-y: auto;
  display: none;
  box-shadow: 0 18px 36px -16px rgba(0,0,0,0.6);
  scrollbar-width: thin;
}
.live-src-picker__list::-webkit-scrollbar { width: 6px; }
.live-src-picker__list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.live-src-picker--open .live-src-picker__list { display: block; }

.live-src-row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--border);
  transition: background 0.12s;
}
.live-src-row:first-child { border-top: none; }
.live-src-row:hover { background: rgba(255,255,255,0.04); }
.live-src-row--active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.live-src-row--active::before {
  content: "";
  width: 3px;
  background: var(--accent);
  flex-shrink: 0;
}
.live-src-row__pick {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.live-src-row__pick:hover { color: var(--fg); }

/* shared chips */
.live-src-flag {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}
.live-src-hd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: rgba(200,255,58,0.18);
  color: var(--accent);
  flex-shrink: 0;
}
.live-src-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.live-src-score {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 1px 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.live-src-score--up { color: #22c55e; background: rgba(34,197,94,0.12); }
.live-src-score--down { color: #ef4444; background: rgba(239,68,68,0.12); }

/* vote buttons (in list rows) */
.live-src-row .live-src-vote {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  padding: 0 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--fg-muted);
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.live-src-row .live-src-vote:hover { background: rgba(255,255,255,0.06); }
.live-src-row .live-src-vote--up:hover { color: #22c55e; }
.live-src-row .live-src-vote--down:hover { color: #ef4444; }

@media (max-width: 720px) {
  .live-detail__srcbar {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .live-detail__src-label { padding-top: 0; }
  .live-src-picker { max-width: 100%; }
  .live-src-picker__list { max-height: 280px; }
  .live-src-row__pick { padding: 12px 14px; font-size: 14px; }
}

/* detail action row (share/calendar/remind) */
.live-detail__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.live-detail__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--fg);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.live-detail__action:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.live-detail__action--active {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.live-detail__action svg { width: 14px; height: 14px; }

/* related matches block */
.live-detail__related-title {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 28px 0 12px;
}

/* ----- per-sport page (?sport=X) header -------------------- */

.live-sport-header {
  padding: 24px var(--pad-x) 14px;
}
.live-sport-header__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.live-sport-header__title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  font-size: clamp(24px, 3.6vw, 38px);
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0 0 8px;
  line-height: 1.1;
}
.live-sport-header__title-icon { font-size: 32px; line-height: 1; }
.live-sport-header__sub {
  font-size: 14px;
  color: var(--fg-muted);
}

/* ----- responsive ------------------------------------------ */

@media (max-width: 899px) {
  .live-stickybar { top: 60px; }
  .match-grid {
    padding-left: 14px;
    padding-right: 14px;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
  }
  .match-card { padding: 12px !important; gap: 8px; }
  .match-card__title { font-size: 13px; }
  .match-card__team { font-size: 11px; }
  .match-card__team-badge,
  .match-card__team-badge-placeholder { width: 16px; height: 16px; }
  .live-section .row__head { padding-left: 14px; padding-right: 14px; }
  .live-detail { padding-left: 14px; padding-right: 14px; }
  .live-detail__teams { padding: 18px 14px; gap: 10px; }
  .live-detail__team-badge,
  .live-detail__team-badge-placeholder { width: 42px; height: 42px; }
  .live-detail__score { min-width: 70px; }
  .live-sport-header { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 480px) {
  .match-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .match-card { padding: 10px !important; }
  .match-card__top { font-size: 9px; gap: 5px; }
  .match-card__sport-ico { font-size: 11px; }
  .match-card__title { font-size: 12.5px; }
  .match-card__bot { gap: 4px; }
  .match-card__watch { font-size: 10px; letter-spacing: 0.02em; }
  .match-card__src-count { font-size: 10px; }
  .match-card__league { font-size: 10px; }

  /* on phone, only show one team per card to keep it dense */
  .match-card__teams { gap: 3px; }
  .match-card__team { font-size: 10.5px; gap: 5px; }

  .live-detail__teams {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  .live-detail__team,
  .live-detail__team--away {
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
  .live-detail__score { order: -1; }
}

/* ----- empty state ----------------------------------------- */

.live-empty {
  padding: 64px 14px 80px;
  text-align: center;
  color: var(--fg-muted);
}
.live-empty__icon {
  display: block;
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}
.live-empty__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 16px;
  color: var(--fg);
  margin-bottom: 6px;
}
.live-empty__sub {
  font-size: 13px;
}

/* ============================================================
   v3.2 — DAZN-tier polish: hero banner, LIVE NOW rail,
   league-color card strip + tint, league-color hero gradients.
   ============================================================ */

/* ----- league color variable -------------------------------- */
.match-card { --league-color: var(--sport-color); }
.match-card[data-league-color] { --league-color: attr(data-league-color); }

/* left-edge color strip + soft sport tint on every card */
.match-card {
  border-left: 3px solid color-mix(in srgb, var(--league-color) 70%, var(--border)) !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--league-color) 6%, var(--surface)) 0%,
    var(--surface) 65%
  ) !important;
}
.match-card:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--league-color) 12%, var(--surface-hi)) 0%,
    var(--surface-hi) 70%
  ) !important;
  border-left-color: var(--league-color) !important;
}
.match-card--live {
  border-left-color: #e84040 !important;
  background: linear-gradient(
    180deg,
    rgba(232,64,64,0.10) 0%,
    var(--surface) 65%
  ) !important;
}
.match-card--live:hover {
  background: linear-gradient(
    180deg,
    rgba(232,64,64,0.16) 0%,
    var(--surface-hi) 70%
  ) !important;
}

/* ----- HERO BANNER (home view, top) ------------------------- */

.live-hero {
  position: relative;
  margin: 6px var(--pad-x) 18px;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 220px;
  display: grid;
  grid-template-columns: 1fr;
  transition: transform 0.2s, box-shadow 0.2s;
}
.live-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 48px -20px rgba(0,0,0,0.6);
}

/* gradient backdrop driven by league color */
.live-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--league-color) 55%, transparent) 0%, transparent 60%),
    radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--league-color) 35%, transparent) 0%, transparent 55%),
    linear-gradient(135deg, color-mix(in srgb, var(--league-color) 18%, #0b0d12) 0%, #0b0d12 70%);
  z-index: 0;
}

/* faded sport glyph in corner */
.live-hero::after {
  content: attr(data-sport-glyph);
  position: absolute;
  bottom: -40px;
  right: -30px;
  font-size: 280px;
  line-height: 1;
  opacity: 0.10;
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 1;
  filter: blur(0.5px);
}

.live-hero__inner {
  position: relative;
  z-index: 2;
  padding: 24px 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
}

.live-hero__top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.live-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
}
.live-hero__chip--live {
  background: rgba(232,64,64,0.22);
  color: #ff8585;
}
.live-hero__chip--league {
  background: color-mix(in srgb, var(--league-color) 28%, transparent);
  color: #fff;
}

.live-hero__title {
  font-family: var(--font-head);
  font-weight: var(--head-weight);
  font-size: clamp(22px, 3.6vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  max-width: 720px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}

.live-hero__teams {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.live-hero__team {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-weight: 600;
  font-size: clamp(13px, 1.4vw, 16px);
}
.live-hero__team-badge {
  width: 38px;
  height: 38px;
  object-fit: contain;
  background: rgba(255,255,255,0.10);
  border-radius: 8px;
  padding: 4px;
}
.live-hero__team-badge--ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: color-mix(in srgb, var(--league-color) 40%, rgba(255,255,255,0.10));
}
.live-hero__vs {
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: 0.6;
  color: #fff;
  letter-spacing: 0.12em;
}
.live-hero__score {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 28px);
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.live-hero__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  flex-wrap: wrap;
}
.live-hero__meta strong { color: #fff; font-weight: 600; }

.live-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: flex-start;
  margin-top: 4px;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 50%, transparent);
}
.live-hero__cta:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.live-hero__cta-icon {
  display: inline-flex;
  width: 18px; height: 18px;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.18);
  border-radius: 50%;
  font-size: 9px;
  padding-left: 1px;
}

@media (max-width: 720px) {
  .live-hero { margin-left: 14px; margin-right: 14px; min-height: 0; }
  .live-hero__inner { padding: 18px 18px 18px; gap: 11px; min-height: 0; }
  .live-hero::after { font-size: 200px; bottom: -25px; right: -20px; }
}

/* ----- LIVE NOW rail (horizontal scroll, larger cards) ----- */

.live-rail {
  margin: 6px 0 16px;
}
.live-rail .row__head {
  align-items: center;
  margin-bottom: 10px;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.live-rail__scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px var(--pad-x) 12px;
  scrollbar-width: thin;
}
.live-rail__scroller::-webkit-scrollbar { height: 6px; }
.live-rail__scroller::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.live-rail__scroller > .match-card {
  scroll-snap-align: start;
  flex: 0 0 320px;
  max-width: 360px;
}
@media (max-width: 720px) {
  .live-rail__scroller { padding-left: 14px; padding-right: 14px; }
  .live-rail__scroller > .match-card { flex-basis: 270px; }
}

/* ----- marquee theme tweaks -------------------------------- */
html[data-theme="marquee"] .match-card { border-radius: 0 !important; }
html[data-theme="marquee"] .live-hero { border-radius: 0; }
html[data-theme="marquee"] .live-hero__title { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
html[data-theme="marquee"] .match-card__title,
html[data-theme="marquee"] .live-section__title,
html[data-theme="marquee"] .live-detail__title,
html[data-theme="marquee"] .live-sport-header__title {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
html[data-theme="marquee"] .live-detail__player,
html[data-theme="marquee"] .live-detail__teams { border-radius: 0; }