/* ============================================================
   VegasBet — Match Page CSS
   Redesign (Claude Design "Match Page") — external classes,
   no inline styles, no blue. Purple accents + animated header.
   Loaded ONLY on the match page; targets the existing markup and
   preserves every match.js hook (.collapsed / .mt-tab.active /
   .pm-dd-open / .pm-dropdown-item / .selected / .related-track).
   Orbs + logo rings are pseudo-elements (no template change).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

.related-matches,
.breadcrumb,
.match-page-body {
  font-family: 'Manrope', 'Inter', sans-serif;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes vbLivePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,60,60,.5); opacity: 1; } 50% { box-shadow: 0 0 0 6px rgba(255,60,60,0); opacity: .65; } }
@keyframes vbOrbA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(34px,22px) scale(1.1); } }
@keyframes vbOrbB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-38px,16px) scale(1.07); } }
@keyframes vbScoreGlow { 0%,100% { text-shadow: 0 0 20px rgba(168,85,247,.32), 0 0 4px rgba(255,255,255,.2); } 50% { text-shadow: 0 0 34px rgba(168,85,247,.55), 0 0 7px rgba(255,255,255,.32); } }
@keyframes vbRing { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes vbRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes vbDD { from { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.97); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }

/* ── Related Matches Carousel ───────────────────────────────── */
/* Compact on purpose (owner rule 2026-09-17). The strip used to be 209px
   tall — stacked cards under their own header row — and everything under
   it, the chat's composer included, sat under the floating bet-slip pill
   until the page was scrolled. One row of 62px cards (teams left, score
   over the status right) makes it 120px — 89px shorter. match-chat.css derives the
   chat's height from the resting position this strip sets, so a taller
   strip means revisiting the constant there. */
.related-matches {
  background: linear-gradient(180deg, #1a1a1f, #141417);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: 10px 14px;
  margin-bottom: 14px;
  overflow: hidden;
}
.related-hdr {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.related-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #c9b8e6;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.related-scroll-btns { display: flex; gap: 6px; flex-shrink: 0; }
.related-scroll-btn {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: rgba(124,58,237,.09); border: 1px solid var(--border);
  color: #c084fc; font-size: 15px; line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
}
.related-scroll-btn:hover { background: rgba(168,85,247,.2); color: #fff; border-color: rgba(168,85,247,.45); }
/* The track is a horizontal scroller, and `overflow-x: auto` makes the
   OTHER axis `auto` too (the spec never lets one axis stay `visible`
   while the other scrolls) — so a card that lifts 2px on hover lost its
   top edge and its glow at the track's box, the "invisible wall". The
   track now carries room for the lift and the glow on every side and
   pays it back with negative margins, so the strip's height and the
   cards' resting position are byte-for-byte what they were. The
   parent's padding (10px 14px) absorbs the negative margins. */
.related-track {
  display: flex; gap: 10px; overflow-x: auto;
  scroll-behavior: smooth; scrollbar-width: none;
  /* 8px clears the 2px lift plus the 7px the live hover glow reaches
     (blur 18 / spread -2); 12px below covers the drop shadow's ~10px. */
  padding: 8px 8px 12px; margin: -8px -8px -12px;
}
.related-track::-webkit-scrollbar { display: none; }
/* Two columns: the team pair on the left, the score alone on the right —
   no kickoff label and no LIVE pill (owner rule 2026-09-17); a live
   fixture is the one with the red edge. The card is pinned at the 62px
   the two-row version measured, so the strip stays 120px and the chat's
   height constant in match-chat.css (derived from this strip's resting
   position) still holds. */
.related-card {
  flex: 0 0 auto; width: 216px; height: 62px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 10px; align-items: center;
  padding: 8px 12px; border-radius: 11px;
  background: #1c1c1f; border: 1px solid rgba(124,58,237,.12);
  cursor: pointer; text-decoration: none;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.related-card:hover { transform: translateY(-2px); border-color: rgba(168,85,247,.36); box-shadow: 0 14px 28px -18px rgba(124,58,237,.6); }
.related-card.current { border-color: rgba(168,85,247,.55); background: rgba(124,58,237,.1); }
/* Live: the red edge IS the status now. Declared after .current so a live
   fixture keeps its red frame even when it is the page's own match (the
   .current background tint still marks it). The hover stays red too —
   switching a live card to purple on hover would read as "not live". */
.related-card.live { border-color: rgba(255,60,60,.5); box-shadow: 0 0 0 1px rgba(255,60,60,.12), 0 0 14px -4px rgba(255,60,60,.35); }
.related-card.live:hover { border-color: rgba(255,90,90,.85); box-shadow: 0 0 0 1px rgba(255,60,60,.2), 0 0 18px -2px rgba(255,60,60,.5), 0 14px 28px -18px rgba(255,60,60,.4); }
.rc-teams {
  min-width: 0;
  font-size: 12px; font-weight: 600; color: #dcd7e8; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Bigger than the two-row version's 16px, and vertically centred on the
   right by the grid's align-items — the status pill that used to sit
   under it is gone, so the score has the whole height to itself. */
.rc-score { justify-self: end; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 22px; line-height: 1; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: .02em; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; margin-bottom: 16px; color: var(--text-secondary);
}
.bc-link { color: var(--text-secondary); font-weight: 600; cursor: pointer; transition: color .16s; }
.bc-link:hover { color: #c084fc; }
.bc-sep { color: #5c5668; }
.bc-current { color: #e6e2f0; font-weight: 700; }

/* ── Two-column page body ───────────────────────────────────── */
.match-page-body {
  display: grid; grid-template-columns: minmax(0,1fr) 300px;
  gap: 20px; align-items: start;
}
.match-left-col { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.match-right-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.match-content { display: flex; flex-direction: column; gap: 18px; }
.match-markets-col { display: flex; flex-direction: column; gap: 18px; }

/* ════════════════════════════════════════════════════════════
   SCORE PLATE (match header card)
   ════════════════════════════════════════════════════════════ */
.match-header-card {
  position: relative; overflow: hidden;
  border: 1px solid rgba(168,85,247,.24);
  border-radius: 18px;
  background: linear-gradient(180deg, #201530, #140d1c 74%);
  box-shadow: 0 30px 74px -42px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.04);
  padding: 22px 26px 24px;
}
/* Ambient orbs (pseudo-elements — no markup needed) */
.match-header-card::before,
.match-header-card::after {
  content: ''; position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(8px); z-index: 0;
}
.match-header-card::before { top: -120px; left: 8%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(124,58,237,.32), transparent 70%); animation: vbOrbA 12s ease-in-out infinite; }
.match-header-card::after  { top: -100px; right: 6%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(153,0,153,.26), transparent 70%); animation: vbOrbB 14s ease-in-out infinite; }
.match-header-card > * { position: relative; z-index: 2; }

.mhc-top { display: flex; align-items: center; gap: 12px; padding: 0 0 4px; border-bottom: none; }
.mhc-tournament { font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #c4b3e0; text-transform: uppercase; }
.mhc-date { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.mhc-live-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px;
  border-radius: 100px; font-size: 10.5px; font-weight: 800; letter-spacing: .6px;
  color: #ff8f8f; text-transform: uppercase;
  background: rgba(255,60,60,.09); border: 1px solid rgba(255,60,60,.28);
}
.mhc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3c3c; animation: vbLivePulse 1.6s infinite; flex-shrink: 0; }

.mhc-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 16px 0 6px; }
.mhc-team { display: flex; flex-direction: column; align-items: center; gap: 13px; animation: vbRise .6s ease both; }
.mhc-team-right { animation-delay: .1s; }

.mhc-team-logo {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, rgba(168,85,247,.28), rgba(20,14,28,.92));
  border: 1px solid rgba(168,85,247,.26);
  box-shadow: 0 14px 32px -16px rgba(124,58,237,.7), inset 0 0 24px rgba(168,85,247,.14);
  overflow: visible;
}
.mhc-team-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; border-radius: 50%; }
/* Rotating conic ring */
.mhc-team-logo::before {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(192,132,252,.75) 78%, transparent 92%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: vbRing 8s linear infinite;
}
.mhc-team-left .mhc-team-logo::before { animation-direction: reverse; }
.mhc-team-initials { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 35px; font-weight: 700; color: #fff; text-shadow: 0 0 16px rgba(168,85,247,.45); line-height: 1; text-transform: uppercase; }
.mhc-team-name {
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 19px; font-weight: 700;
  letter-spacing: 1px; color: #fff; text-transform: uppercase; text-align: center;
  max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mhc-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-width: 200px; }
.mhc-live-pill {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 4px 14px; border-radius: 100px;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: #ff9a9a; background: rgba(255,60,60,.1); border: 1px solid rgba(255,60,60,.3);
}
.mhc-live-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff3c3c; animation: vbLivePulse 1.6s infinite; }
.mhc-score-main {
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 62px; font-weight: 700;
  line-height: 1; letter-spacing: 2px; color: #fff;
  animation: vbScoreGlow 3s ease-in-out infinite;
}
.mhc-score-unit { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--text-secondary); text-transform: uppercase; text-align: center; }
.mhc-period-info {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 12px; border-radius: 100px;
  font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: #ff9a9a; background: rgba(255,60,60,.1); border: 1px solid rgba(255,60,60,.3);
}
.mhc-match-time { font-size: 12px; color: #ff9a9a; font-weight: 800; }
.mhc-kickoff { font-size: 13px; color: #cfc9dd; font-weight: 700; }

.mhc-map-scores { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.map-score-item { text-align: center; padding: 5px 10px; background: rgba(124,58,237,.08); border: 1px solid var(--border); border-radius: 9px; }
.map-score-item.current { border-color: rgba(168,85,247,.5); background: rgba(124,58,237,.16); }
.ms-label { font-size: 9.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
.ms-val { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 14px; color: #fff; }
.ms-val.win { color: var(--green); }

.mhc-footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(124,58,237,.12); }
.mhc-stat { display: flex; align-items: center; gap: 10px; padding: 6px 16px; border-right: 1px solid rgba(124,58,237,.12); }
.mhc-stat:last-child { border-right: none; }
.mhc-stat-val { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 15px; color: #fff; min-width: 28px; text-align: center; }
.mhc-stat-label { font-size: 10.5px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   POPULAR MARKET CARDS
   ════════════════════════════════════════════════════════════ */
.popular-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Each card's rows are a nowrap label + a fixed 228px odds group, so the
   pair needs ~900px side by side; narrower than that (the left column is
   659px on a 1600px screen with the chat beside it) the row used to run
   out under the Live Stream / Match Info cards. The column is a size
   container, so the cards stack when the COLUMN is too narrow — which no
   viewport breakpoint can express, since the column's width depends on
   which of the sidebar, the info column and the chat are present. */
.match-markets-col { container-type: inline-size; }
@container (max-width: 900px) {
  .popular-cards-row { grid-template-columns: 1fr; }
}
.pop-card {
  background: linear-gradient(180deg, #1d1d22, #161619);
  border: 1px solid var(--border); border-radius: 15px;
  padding: 16px 16px 10px;
  box-shadow: 0 22px 46px -36px rgba(124,58,237,.45);
}
.pop-card-title {
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 15px;
  color: #fff; text-transform: none; letter-spacing: 0;
  padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(124,58,237,.12);
}
.pop-card-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 18px 0; }

.pop-market-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 2px; border-bottom: 1px solid rgba(124,58,237,.07);
}
.pop-market-row:last-child { border-bottom: none; }
.pop-market-row--mb { margin-bottom: 0; }
.pop-market-label { flex: 1; min-width: 0; }
.pop-mname { font-size: 13.5px; font-weight: 700; color: #eae7f2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pop-msub { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-top: 2px; display: block; }

/* Odds group + picker: fixed width so columns line up */
.pop-btn-group { display: flex; gap: 8px; flex-shrink: 0; width: 228px; align-items: stretch; }
.pm-picker { display: flex; align-items: stretch; gap: 8px; flex-shrink: 0; width: 228px; }

/* Shared odds-button base */
.pop-odds-btn, .pm-picker-btn, .market-odds-btn {
  position: relative; overflow: hidden;
  background: rgba(13,13,13,.5); border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer; font-family: inherit;
  transition: transform .14s, border-color .14s, background .14s, box-shadow .14s;
}
.pop-odds-btn:hover, .pm-picker-btn:hover, .market-odds-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(168,85,247,.18), rgba(124,58,237,.1));
  border-color: rgba(168,85,247,.45);
  box-shadow: 0 10px 20px -14px rgba(168,85,247,.7);
}
.pop-odds-btn {
  flex: 1; min-width: 0; min-height: 48px; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.pop-odds-lbl { font-size: 10px; font-weight: 700; color: var(--text-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; }
.pop-odds-val { font-size: 15px; font-weight: 800; color: #efeaf9; line-height: 1; }
.pop-odds-btn:hover .pop-odds-lbl { color: #d8c4f5; }
.pop-btn-group--no-lbl .pop-odds-lbl { display: none; }

/* Total / Handicap picker */
.pm-picker-btn { flex: 1; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; }
.pm-picker-btn.disabled { opacity: .35; pointer-events: none; cursor: default; }
.pm-picker-odds { font-size: 15px; font-weight: 800; color: #efeaf9; line-height: 1; }

.pm-line-wrapper { flex-shrink: 0; width: 64px; position: relative; }
.pm-line-selector {
  height: 100%; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 2px;
  padding: 0 8px; border-radius: 10px;
  background: rgba(124,58,237,.09); border: 1px solid var(--border);
  cursor: pointer; transition: background .16s, border-color .16s;
}
.pm-line-wrapper:hover .pm-line-selector { border-color: rgba(168,85,247,.5); background: rgba(124,58,237,.16); }
.pm-dir-left, .pm-dir-right { font-size: 12px; font-weight: 800; color: #c9a2ff; line-height: 1; flex-shrink: 0; white-space: nowrap; }
.pm-line-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.pm-arrow-icon {
  width: 13px; height: 13px; flex-shrink: 0; opacity: .85; pointer-events: none; display: block;
  filter: invert(58%) sepia(69%) saturate(600%) hue-rotate(245deg) brightness(100%) contrast(95%);
}
.pm-line-wrapper:hover .pm-arrow-icon { opacity: 1; }
.pm-line-val { font-size: 14px; font-weight: 800; color: #fff; line-height: 1; }

/* Hover dropdown (shown via .pm-dd-open or wrapper:hover — match.js) */
.pm-line-dropdown {
  position: absolute; top: calc(100% + 9px); left: 50%;
  transform: translateX(-50%);
  width: 80px; max-height: 188px; overflow-y: auto; padding: 6px 4px; z-index: 300;
  background: linear-gradient(180deg, #241c34, #160f20);
  border: 1px solid rgba(168,85,247,.42); border-radius: 13px;
  box-shadow: 0 26px 50px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(124,58,237,.12);
  display: none;
}
.pm-line-dropdown::before {
  content: ''; position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 11px; height: 11px; background: #241c34;
  border-left: 1px solid rgba(168,85,247,.42); border-top: 1px solid rgba(168,85,247,.42);
}
/* Invisible hover bridge over the gap */
.pm-line-wrapper:hover::after { content: ''; position: absolute; top: 100%; left: -8px; right: -8px; height: 14px; }
.pm-line-wrapper:hover .pm-line-dropdown,
.pm-line-dropdown.pm-dd-open { display: block; animation: vbDD .18s ease; }
.pm-line-dropdown::-webkit-scrollbar { width: 4px; }
.pm-line-dropdown::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c084fc, #7c3aed); border-radius: 4px; }
.pm-dropdown-item {
  display: block; width: 100%; padding: 9px 6px; border-radius: 9px; cursor: pointer;
  background: transparent; border: none; font-family: inherit;
  font-size: 14px; font-weight: 800; color: #c0bad2; text-align: center; transition: background .14s, color .14s;
}
.pm-dropdown-item:hover { background: rgba(168,85,247,.15); color: #fff; }
.pm-dropdown-item.active { background: linear-gradient(135deg, rgba(168,85,247,.32), rgba(124,58,237,.18)); color: #fff; box-shadow: inset 0 0 0 1px rgba(192,132,252,.5); }

/* ════════════════════════════════════════════════════════════
   MARKET TABS + ACCORDIONS
   ════════════════════════════════════════════════════════════ */
.market-tabs-bar {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 2px; padding: 5px;
  background: rgba(13,13,13,.5); border: 1px solid var(--border); border-radius: 12px;
}
.mt-tab {
  appearance: none; border: none; cursor: pointer; font-family: inherit;
  padding: 9px 18px; border-radius: 8px; background: transparent;
  color: var(--text-secondary); font-size: 13.5px; font-weight: 700;
  text-transform: none; letter-spacing: 0; margin-bottom: 0;
  transition: color .18s, background .18s, box-shadow .18s;
}
.mt-tab:hover { color: #cfc9dd; }
.mt-tab.active { color: #fff; background: linear-gradient(135deg, rgba(168,85,247,.26), rgba(124,58,237,.15)); box-shadow: inset 0 0 0 1px rgba(168,85,247,.34); }

.markets-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.markets-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mkt-category { display: flex; flex-direction: column; gap: 14px; }
.mkt-category-heading {
  font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: #8f7fb0; padding: 6px 2px 2px;
}

.market-group {
  background: linear-gradient(180deg, #1b1b20, #161619);
  border: 1px solid rgba(124,58,237,.12); border-radius: 13px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.market-group:hover { border-color: rgba(168,85,247,.26); box-shadow: 0 14px 30px -26px rgba(124,58,237,.5); }
.mg-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; cursor: pointer; }
.mg-name { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; color: #eae7f2; }
.mg-arrow { color: var(--text-secondary); font-size: 16px; display: inline-block; transform: rotate(90deg); transition: transform .22s, color .2s; }
.market-group.collapsed .mg-arrow { transform: rotate(0deg); }
.market-group:not(.collapsed) .mg-arrow { color: #c084fc; }

/* Accordion open/close — match.js toggles .collapsed */
.mg-body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 8px; border-top: none; }
.market-group.collapsed .mg-body { display: none; }
.mg-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mg-btn-row.three { grid-template-columns: 1fr 1fr 1fr; }

.market-odds-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; }
.mob-lbl { font-size: 12.5px; font-weight: 600; color: #c4bfd4; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-val { font-size: 14.5px; font-weight: 800; color: #efeaf9; flex-shrink: 0; }
.market-odds-btn:hover .mob-lbl { color: #e7dcfa; }

/* Selected (betslip) + disabled odds — shared */
.odds-btn.selected {
  background: linear-gradient(135deg, #9a4fe0, #7434d0) !important;
  border-color: #c084fc !important;
  box-shadow: 0 0 0 1px rgba(192,132,252,.5), 0 10px 24px -12px rgba(168,85,247,.8) !important;
  transform: none;
}
.odds-btn.selected * { color: #fff !important; }
.pm-picker-btn.selected { background: linear-gradient(135deg, #9a4fe0, #7434d0); border-color: #c084fc; }
.pm-picker-btn.selected .pm-picker-odds { color: #fff; }
.odds-btn[data-odds="—"],
.odds-btn[data-odds=""],
.odds-btn[data-odds="None"] { pointer-events: none; opacity: .3; }

/* ════════════════════════════════════════════════════════════
   RIGHT COLUMN — Stream + Match Info
   ════════════════════════════════════════════════════════════ */
.stream-widget, .match-info-box {
  background: linear-gradient(180deg, #1d1d22, #161619);
  border: 1px solid var(--border); border-radius: 15px; overflow: hidden;
  box-shadow: 0 22px 46px -36px rgba(124,58,237,.45); padding: 0;
}
.sw-header {
  padding: 14px 16px; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700;
  font-size: 13.5px; color: #fff; letter-spacing: .3px; text-transform: none;
  border-bottom: 1px solid rgba(124,58,237,.1); margin-bottom: 0;
}
/* Logged-out placeholder = the stream "screen" */
.sw-placeholder {
  position: relative; aspect-ratio: 16/10; height: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(circle at 50% 40%, rgba(124,58,237,.13), transparent 70%), #121016;
  border-radius: 0; overflow: hidden;
}
.sw-placeholder::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(124,58,237,.04) 22px 44px); }
.sw-icon {
  width: 46px; height: 46px; border-radius: 50%; opacity: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,58,237,.14); border: 1px solid rgba(168,85,247,.28);
  font-size: 20px; z-index: 1;
}
.sw-msg { font-size: 13px; color: #b7b1c4; text-align: center; z-index: 1; }
.sw-login-link {
  z-index: 1; font-weight: 700; font-size: 13px; padding: 8px 18px; border-radius: 9px;
  background: linear-gradient(135deg, #9a4fe0, #7434d0); color: #fff;
  text-decoration: none; transition: transform .18s, box-shadow .18s;
}
.sw-login-link:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(168,85,247,.8); }

.sw-active { display: none; padding: 20px 16px; flex-direction: column; align-items: center; gap: 12px; background: radial-gradient(circle at 50% 40%, rgba(124,58,237,.13), transparent 70%), #121016; }
body.logged-in .sw-placeholder { display: none; }
body.logged-in .sw-active { display: flex; }
.sw-play-icon { width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 24px solid #c084fc; opacity: .9; }
.sw-active .sw-msg { color: #b7b1c4; }
.sw-watch-btn {
  align-self: stretch; text-align: center; text-decoration: none; display: block;
  padding: 10px; border-radius: 9px; border: none;
  background: linear-gradient(135deg, #9a4fe0, #7434d0); color: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: transform .18s;
}
.sw-watch-btn:hover { transform: translateY(-1px); }
.sw-coming-soon { font-size: 11px; color: var(--text-secondary); text-align: center; }

.mib-header {
  padding: 14px 16px 12px; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700;
  font-size: 13.5px; color: #fff; letter-spacing: .3px; text-transform: none;
  border-bottom: 1px solid rgba(124,58,237,.1); margin-bottom: 0;
}
.mib-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid rgba(124,58,237,.07); font-size: 13.5px;
}
.mib-row:last-child { border-bottom: none; }
.mib-key { color: var(--text-secondary); font-weight: 600; flex-shrink: 0; }
.mib-val { color: #e6e2f0; font-weight: 700; text-align: right; max-width: 170px; word-break: break-word; }
.mib-live { color: #ff7676; display: inline-flex; align-items: center; gap: 5px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .match-page-body { grid-template-columns: 1fr; }
  .match-right-col { flex-direction: row; flex-wrap: wrap; }
  .match-right-col .stream-widget,
  .match-right-col .match-info-box { flex: 1; min-width: 240px; }
}
@media (max-width: 760px) {
  .popular-cards-row, .markets-two-col { grid-template-columns: 1fr; }
  /* Grid items default to min-width:auto, so a stacked .pop-card refused to
     shrink below its content min (nowrap label + fixed-width odds group) and
     overflowed the column. Let it shrink; the label truncates via its ellipsis. */
  .pop-card, .markets-col { min-width: 0; }
  /* The score plate is 1fr | auto | 1fr. On phones the `min-width:200px` centre
     plus grid items that can't shrink (default min-width:auto) forced the row
     wider than the card, and .match-header-card{overflow:hidden} then clipped the
     away team. Let all three columns shrink and truncate long names instead. */
  .mhc-body { gap: 12px; }
  .mhc-center { min-width: 0; }
  .mhc-team { min-width: 0; }
  .mhc-team-name { max-width: 100%; }
  .mhc-score-main { font-size: 50px; }
  .mhc-team-logo { width: 66px; height: 66px; }
  .mhc-team-initials { font-size: 28px; }
}
@media (max-width: 560px) {
  .pop-btn-group, .pm-picker { width: 200px; }
  .pm-line-wrapper { width: 58px; }
  .match-right-col { flex-direction: column; }
}
/* ── Compact phones: tighten the score plate so it always fits the frame ── */
@media (max-width: 480px) {
  .match-header-card { padding: 18px 15px 20px; }
  .mhc-top { flex-wrap: wrap; gap: 6px 10px; }
  .mhc-tournament { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mhc-body { gap: 8px; padding: 14px 0 4px; }
  .mhc-center { gap: 7px; }
  .mhc-team { gap: 9px; }
  .mhc-team-logo { width: 54px; height: 54px; }
  .mhc-team-initials { font-size: 22px; }
  .mhc-team-name { font-size: 13px; letter-spacing: .3px; }
  .mhc-score-main { font-size: 40px; letter-spacing: 1px; }
  .mhc-score-unit { font-size: 10px; }
  .mhc-map-scores { gap: 4px; }
  /* Narrower odds group so the market label keeps readable room. */
  .pop-btn-group, .pm-picker { width: 178px; }
  .pm-line-wrapper { width: 54px; }
}

/* ════════════════════════════════════════════════════════════
   "Match finished" curtain — shown by match-live.js when the
   tick reports a POSITIVE finish for the fixture this page is
   showing. Never on a bare 404: a fixture missing from the
   board may still be live.
   ════════════════════════════════════════════════════════════ */

.mfin-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(5px);
  animation: mfinBackdropIn .3s ease both;
}

/* JS toggles [hidden]; the display:flex above would otherwise win. */
.mfin-backdrop[hidden] { display: none; }

.mfin-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 36px 28px 24px;
  text-align: center;
  border-radius: 22px;
  background: linear-gradient(180deg, #1c1c22, #161619);
  border: 1px solid rgba(168, 85, 247, 0.34);
  box-shadow: 0 0 52px rgba(124, 58, 237, 0.20), 0 10px 36px rgba(0, 0, 0, 0.62);
  animation: mfinCardIn .5s cubic-bezier(.16, 1, .3, 1) both;
}

.mfin-close {
  position: absolute;
  top: 12px;
  right: 13px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color .18s, background .18s;
}

.mfin-close:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.mfin-close svg { width: 15px; height: 15px; }

.mfin-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(124, 58, 237, 0.28);
  animation: mfinIconPop .55s cubic-bezier(.34, 1.56, .64, 1) .1s both;
}

.mfin-icon svg { width: 27px; height: 27px; }

.mfin-title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}

.mfin-score {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--accent);
  margin: 0 0 10px;
}

.mfin-score[hidden] { display: none; }

.mfin-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 22px;
}

.mfin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px;
  border-radius: 13px;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}

.mfin-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(124, 58, 237, .45);
}

.mfin-count {
  font-variant-numeric: tabular-nums;
  opacity: .8;
}

.mfin-count:empty { display: none; }

.mfin-stay {
  margin-top: 12px;
  padding: 6px 10px;
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color .18s;
}

.mfin-stay:hover { color: var(--hover-text); }

@keyframes mfinBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mfinCardIn {
  0%   { opacity: 0; transform: translateY(24px) scale(.92); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mfinIconPop {
  0%   { opacity: 0; transform: scale(0) rotate(-26deg); }
  60%  { opacity: 1; transform: scale(1.16) rotate(7deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mfin-backdrop,
  .mfin-card,
  .mfin-icon { animation: none !important; }
}