/* ============================================================
   VegasBet — Matches CSS  (v2 — Winline compact style)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700;800&display=swap');

/* ── Events Grid (2 columns) ────────────────────────────────── */
.events-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  max-width: calc(8 * 130px + 7 * 8px);
}
@media (max-width: 1200px) {
  .events-grid { max-width: calc(8 * 110px + 7 * 8px); }
}
.events-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* Column header */
.events-col-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; margin-bottom: 2px;
}
.events-col-title {
  font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: 0.95rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-primary);
}
.events-col-more { font-size: 0.75rem; color: var(--text-muted); transition: color var(--transition); }
.events-col-more:hover { color: var(--accent); }

/* ── Section header ─────────────────────────────────────────── */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; margin-bottom: 4px;
}
.section-title {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Inter', sans-serif;
  font-weight: 800; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-primary);
}
.section-link { font-size: 0.75rem; color: var(--text-muted); transition: color var(--transition); }
.section-link:hover { color: var(--accent); }

/* ── Featured Match (Match of the Day) ──────────────────────── */
.match-featured {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-lg); overflow: hidden;
  margin-bottom: 4px; animation: fade-in 0.25s ease forwards;
}
.mf-league {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border-subtle);
}
.mf-league-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.mf-badge {
  background: var(--purple-dim); color: var(--accent);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 2px 7px; font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}

.mf-body { padding: 10px 12px; }
.mf-teams-row {
  display: flex; align-items: stretch;
  justify-content: space-between; gap: 8px; margin-bottom: 10px;
}
.mf-team {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex: 1; min-width: 0;
}
.mf-team-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.mf-team-name {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.88rem;
  text-align: center; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px;
}
.mf-center { display: flex; flex-direction: column; align-items: center; gap: 4px; justify-content: center; }
.mf-score {
  display: flex; align-items: center; gap: 4px;
  font-family: 'Inter', sans-serif; font-weight: 900; font-size: 1.5rem;
  color: var(--text-primary);
}
.mf-score-sep { color: var(--text-muted); font-size: 1rem; }
.mf-time {
  font-size: 0.72rem; color: var(--red); font-weight: 700;
  display: flex; align-items: center; gap: 4px;
}
.mf-time-dot { width: 5px; height: 5px; background: var(--red); border-radius: 50%; animation: pulse-dot 1.2s infinite; }
.mf-period { font-size: 0.65rem; color: var(--text-muted); }

/* Featured odds row */
.mf-odds {
  display: flex; gap: 4px;
}
.mf-odds-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 1px; padding: 6px 4px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all var(--transition);
}
.mf-odds-btn:hover { background: var(--purple-dim); border-color: var(--purple); }
.mf-odds-btn.selected { background: var(--purple); border-color: var(--purple); box-shadow: 0 0 8px var(--purple-glow); }
.mf-odds-label { font-size: 0.6rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.mf-odds-btn.selected .mf-odds-label { color: rgba(255,255,255,.7); }
.mf-odds-value { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 16px; color: #fff; }
.mf-odds-btn.selected .mf-odds-value { color: #fff; }
.mf-odds-btn:hover .mf-odds-value { color: var(--purple-light); }

.mf-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px; border-top: 1px solid var(--border-subtle);
}
.mf-stats-btn, .mf-fav-btn {
  background: none; border: none; color: var(--text-muted);
  font-size: 0.78rem; cursor: pointer; padding: 2px 4px;
  transition: color var(--transition); border-radius: var(--radius-sm);
}
.mf-stats-btn:hover { color: var(--accent); }
.mf-fav-btn:hover { color: var(--gold); }

/* ── Compact Match Card (regular) ───────────────────────────── */
.match-compact {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 7px 10px;
  cursor: pointer; transition: background var(--transition), border-color var(--transition);
  animation: fade-in 0.2s ease forwards;
  margin-bottom: 8px;
}
.match-compact:last-child { margin-bottom: 0; }
.match-compact:hover { background: var(--bg-card-hover); border-color: var(--border); }

.mc-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 5px;
}
.mc-league {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.66rem; color: var(--text-muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.mc-status {
  display: flex; align-items: center; gap: 5px;
}
.mc-time { font-size: 0.68rem; color: var(--text-muted); }
.mc-live-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 0.62rem; font-weight: 700; color: var(--red); text-transform: uppercase;
}
.mc-live-badge::before { content: ''; width: 4px; height: 4px; background: var(--red); border-radius: 50%; animation: pulse-dot 1.2s infinite; display: inline-block; }

.mc-main { display: flex; align-items: center; gap: 8px; }
.mc-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mc-team-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mc-team-logo { width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mc-team-logo img { width: 22px; height: 22px; object-fit: contain; }
.mc-team-initials { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--text-secondary); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.mc-team-name { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.mc-team-score { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--text-primary); min-width: 14px; text-align: right; }
.mc-team-score.win { color: var(--green); }

.mc-odds { display: flex; gap: 8px; flex-shrink: 0; }
.mc-odds-btn {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  min-width: 46px; padding: 4px 6px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: all var(--transition);
}
.mc-odds-btn:hover { background: var(--purple-dim); border-color: var(--purple); }
.mc-odds-btn.selected { background: var(--purple); border-color: var(--purple); }
.mc-odds-lbl { font-size: 0.56rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.mc-odds-btn.selected .mc-odds-lbl { color: rgba(255,255,255,.7); }
.mc-odds-val { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; color: #fff; }
.mc-odds-btn.selected .mc-odds-val { color: #fff; }

/* Unpriced outcome: the bookmaker has not published this price yet (late
   pre-match) or has suspended the market. Inert — no data-* attributes, so
   the betslip binding never attaches. */
.mc-odds-btn--off { cursor: default; opacity: 0.45; }
.mc-odds-btn--off:hover { background: var(--bg-elevated); border-color: var(--border-subtle); }
.mc-odds-btn--off .mc-odds-val { color: var(--text-muted); }

.mc-bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--border-subtle);
}
.mc-variants { font-size: 0.68rem; color: var(--text-muted); transition: color var(--transition); }
.mc-variants:hover { color: var(--accent); }
.mc-actions { display: flex; gap: 6px; }
.mc-action-btn { background: none; border: none; font-size: 0.72rem; color: var(--text-muted); cursor: pointer; padding: 1px 3px; transition: color var(--transition); }
.mc-action-btn:hover { color: var(--accent); }

/* ── Live Filter Bar ────────────────────────────────────────── */
/* Hidden: replaced by plain "All Live" text header (league-group-hdr) */
.live-filter-bar {
  display: none;
}
.live-filter-bar::-webkit-scrollbar { display: none; }
.live-filter-btn {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; cursor: pointer; color: var(--text-secondary);
  transition: all var(--transition);
}
.live-filter-btn:hover, .live-filter-btn.active { background: var(--purple-dim); border-color: var(--purple); color: var(--accent); }

/* ── Live Match Row (right column) ──────────────────────────── */
.live-match-row {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 7px 10px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; transition: background var(--transition);
  animation: fade-in 0.2s ease forwards;
}
.live-match-row:hover { background: var(--bg-card-hover); }
.lmr-teams { flex: 1; min-width: 0; }
.lmr-team { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 1px 0; }
.lmr-name  { font-size: 14px; font-weight: 600; color: var(--text-primary); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lmr-score { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--text-primary); min-width: 14px; text-align: right; }
.lmr-score.win { color: var(--green); }

.lmr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.lmr-odds { display: flex; gap: 4px; }
.lmr-odds-btn {
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm); padding: 3px 7px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
  color: #fff; cursor: pointer; transition: all var(--transition);
  min-width: 44px; text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 5px;
}
.lmr-odds-lbl { font-size: 0.62rem; font-weight: 700; color: var(--text-muted); }
.lmr-odds-val { font-weight: 700; }
.lmr-odds-btn:hover { background: var(--purple-dim); border-color: var(--purple); }
.lmr-odds-btn.selected { background: var(--purple); border-color: var(--purple); color: #fff; }
.lmr-odds-btn--off { cursor: default; opacity: 0.45; }
.lmr-odds-btn--off:hover { background: var(--bg-elevated); border-color: var(--border-subtle); }
.lmr-meta { display: flex; align-items: center; gap: 5px; }
.lmr-variants { font-size: 0.65rem; color: var(--text-muted); transition: color var(--transition); }
.lmr-variants:hover { color: var(--accent); }
.lmr-time { font-size: 0.65rem; font-weight: 700; color: var(--red); }
.lmr-stats-btn { background: none; border: none; font-size: 0.68rem; color: var(--text-muted); cursor: pointer; transition: color var(--transition); }
.lmr-stats-btn:hover { color: var(--accent); }

/* ── League Group header ────────────────────────────────────── */
.league-group { margin-bottom: 12px; }
.league-group-hdr {
  display: flex; align-items: center; gap: 7px; padding: 6px 10px;
  background: var(--bg-secondary); border-radius: var(--radius-md);
  margin-bottom: 3px; cursor: pointer;
}
.lgr-flag  { font-size: 0.88rem; }
.lgr-name  { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); flex: 1; }
.lgr-count { font-size: 0.68rem; color: var(--text-muted); }
.lgr-chev  { font-size: 0.62rem; color: var(--text-muted); transition: transform var(--transition); }
.league-group-hdr.collapsed .lgr-chev { transform: rotate(-90deg); }

/* ── Hide carousel arrows ───────────────────────────────────── */
.carousel-btn,
.slick-arrow,
.slider-arrow,
.carousel-arrow,
.hero-prev,
.hero-next {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  .events-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mc-odds { display: none; }
}

/* ===== SPORT CARDS STRIP ===== */

.sport-cards-strip {
  width: fit-content;
  padding: 12px 0;
  position: relative;
  z-index: 2;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
}

.sport-cards-track {
  flex: 1;
  min-width: 0;
  overflow: hidden; /* hard clip — sport cards never escape into Live Streams */
  padding: 4px 0 8px 0;
}

/* Inner scroller handles horizontal scroll independently of the clip container */
.sport-cards-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  width: 100%;
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
  overscroll-behavior-x: contain;      /* don't bubble to page / back-swipe */
}
.sport-cards-scroll::-webkit-scrollbar { display: none; }

/* <picture> wrapper must fill the card so the img's 100%/object-fit resolves */
.sport-card-item picture { display: block; width: 100%; height: 100%; }

/* Live Streams card — flex sibling of sport-cards-track, never overlaps */
.sport-row-live {
  flex: 0 0 260px;
  width: 260px;
  margin-left: 32px;
  margin-right: 0;
  align-self: stretch;
}

.sport-card-item {
  flex: 0 0 auto;
  width: 130px;
  height: 174px;
  border-radius: 16px;
  overflow: hidden;
  display: block;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: transform 0.22s ease;
}

.sport-card-item:hover {
  transform: translateY(-3px) scale(1.02);
  z-index: 10;
}

.sport-card-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  /* The image must never intercept a horizontal swipe or start a native
     image-drag — otherwise touch drags fight the scroller and the strip
     feels "stuck". The anchor stays the tap/scroll surface. */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

@media (max-width: 1200px) {
  .sport-card-item {
    width: 110px;
    height: 147px;
  }
}

@media (max-width: 900px) {
  .sport-cards-track {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sport-cards-track::-webkit-scrollbar {
    display: none;
  }
  .sport-card-item {
    width: 95px;
    height: 127px;
  }
}

@media (max-width: 768px) {
  /* Make the strip fill full width */
  .sport-cards-strip {
    width: 100%;
  }

  /* Single scroller = .sport-cards-scroll. The track must NOT also scroll,
     or the two nested scroll areas fight and swipes stall mid-strip. */
  .sport-cards-track {
    overflow: visible;
  }

  /* Inner scroll container: horizontal swipe, no scrollbar.
     touch-action: pan-x commits the gesture to horizontal panning the
     instant a finger lands, so swipes engage immediately instead of the
     browser stalling to guess the direction (the "very hard to scroll"
     symptom). Momentum + snap make it glide and settle on a card. */
  .sport-cards-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    scroll-padding-left: 4px;
    -webkit-tap-highlight-color: transparent;
    scrollbar-width: none;
    padding-bottom: 8px;
    gap: 10px;
  }

  .sport-cards-scroll::-webkit-scrollbar {
    display: none;
  }

  /* Fixed card width so cards don't compress */
  .sport-card-item {
    flex-shrink: 0;
    width: 110px;
    height: 147px;
    scroll-snap-align: start;
  }
}

/* ── Sport-cards scroll arrows (MOBILE ONLY) ─────────────────
   The strip is a horizontal scroller inside a vertically scrolling
   page; on a phone a swipe that starts on a card is easily read as
   the wrong gesture, so ≤768px the strip also gets a pair of tap
   targets. They are ABSOLUTELY positioned over the strip's edges
   (the strip is already `position: relative`), so the desktop flex
   row is untouched — a flex item they never become — and
   `overflow: visible` on the strip keeps them from being clipped.
   Same visual language as .tabs-arrow on /sports and /live: round,
   purple hairline border, accent chevron, glow on press. */
.sport-cards-arrow { display: none; }

@media (max-width: 768px) {
  .sport-cards-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* Centred on the CARDS, not on the strip: the strip's padding is
       asymmetric (12+4 above the cards, 8+8+12 below), so a plain
       top:50% lands 6px low. top + bottom + a fixed height + auto
       block margins centre the button inside that band exactly. */
    top: 16px;
    bottom: 28px;
    margin-top: auto;
    margin-bottom: auto;
    z-index: 6;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.45);
    background: linear-gradient(160deg, rgba(38, 27, 58, 0.94), rgba(18, 18, 22, 0.94));
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--accent);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 14px rgba(168, 85, 247, 0.22);
    -webkit-tap-highlight-color: transparent;
    transition: opacity .28s ease,
                transform .28s cubic-bezier(.22, 1, .36, 1),
                background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  .sport-cards-arrow--prev { left: 2px; }
  .sport-cards-arrow--next { right: 2px; }

  .sport-cards-arrow svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .sport-cards-arrow:active {
    transform: scale(.88);
    background: linear-gradient(160deg, rgba(124, 58, 237, 0.60), rgba(24, 20, 34, 0.96));
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.50);
  }

  /* At either end the arrow FADES rather than being removed — a
     display swap would pop the card underneath in and out. */
  .sport-cards-arrow[disabled] {
    opacity: 0;
    transform: scale(.7);
    pointer-events: none;
  }

  /* Edge scrims: the cards dissolve into the page background under
     each arrow instead of colliding with it. Painted only on the
     side that can still be scrolled, and toggled by the same class
     the arrows' state comes from. */
  .sport-cards-strip::before,
  .sport-cards-strip::after {
    content: '';
    position: absolute;
    top: 16px;          /* the same card band as the arrows above */
    bottom: 28px;
    width: 48px;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity .28s ease;
  }
  .sport-cards-strip::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg-primary) 18%, rgba(13, 13, 13, 0));
  }
  .sport-cards-strip::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg-primary) 18%, rgba(13, 13, 13, 0));
  }
  .sport-cards-strip.has-prev::before { opacity: 1; }
  .sport-cards-strip.has-next::after  { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sport-cards-arrow,
  .sport-cards-strip::before,
  .sport-cards-strip::after { transition: none; }
}

/* ── Tabs Nav Wrapper + Arrow Buttons ───────────────────────── */
/* Wrapper fills stb-inner, holds left-arrow | scroll-list | right-arrow */
.tabs-nav-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.tabs-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(124, 58, 237, 0.4);
  color: #a855f7;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  padding: 0;
}

.tabs-arrow:hover {
  background: rgba(124, 58, 237, 0.15);
  border-color: #a855f7;
  box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
  color: #ffffff;
}

/* Hide scrollbar on the tab list — arrows handle navigation */
.sport-tabs-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sport-tabs-list::-webkit-scrollbar {
  display: none;
}

/* ── Empty-sport placeholder (off-season / no odds yet) ──────── */
.sport-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 40px 20px;
  background: var(--bg-card);
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md);
  margin-top: 8px;
}
/* `.sport-empty` sets display:flex, which has the same specificity as the UA
   [hidden]{display:none} rule and wins by cascade order — so the placeholder
   would show even when hidden. Re-assert hidden with higher specificity. */
.sport-empty[hidden] { display: none; }
.sport-empty-icon { font-size: 2rem; opacity: 0.7; }
.sport-empty-title {
  font-size: 0.98rem; font-weight: 700; color: var(--text-primary);
}
.sport-empty-name { color: var(--accent); }
.sport-empty-sub {
  font-size: 0.8rem; color: var(--text-muted); max-width: 340px; line-height: 1.5;
}


/* ============================================================
   VegasBet - Main-page Events Board redesign
   (Claude Design "Sidebar+Board" - board only).
   Appended to matches.css; every rule scoped to
   .events-grid so it restyles the board on
   the MAIN PAGE only. Sidebar + /sports + /match are untouched.
   ============================================================ */


/* ── Grid + columns ─────────────────────────────────────────── */
.events-grid {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 22px;
  font-family: 'Manrope', 'Inter', sans-serif;
}

.events-grid .events-col {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: linear-gradient(180deg, #1a1a1f, #141417);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 16px 8px;
  box-shadow: 0 24px 50px -32px rgba(124, 58, 237, .5);
}

/* Column header */
.events-grid .events-col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(124, 58, 237, .14);
}
.events-grid .events-col-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .3px;
  text-transform: none;
  color: #fff;
}
.events-grid .events-col-more {
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  padding: 6px 10px;
  border-radius: 9px;
  transition: background .18s, color .18s;
}
.events-grid .events-col-more:hover { background: rgba(168, 85, 247, .12); color: #c084fc; }

/* Live indicator dot in the title */
.events-grid .events-col-title .live-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.events-grid .events-col-title .live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff3c3c;
  box-shadow: 0 0 0 0 rgba(255, 60, 60, .55);
  animation: vbLivePulse 1.6s infinite;
}
@keyframes vbLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 60, 60, .55); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(255, 60, 60, 0); opacity: .6; }
}

/* Group header (All Sports · 32 matches) */
.events-grid .league-group { margin-bottom: 0; }
.events-grid .league-group-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: rgba(124, 58, 237, .08);
  border: 1px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: background .18s;
}
.events-grid .league-group-hdr:hover { background: rgba(124, 58, 237, .14); }
.events-grid .lgr-name {
  font-family: 'Manrope', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .2px;
  text-transform: none;
  color: #e6e2f0;
  flex: 1;
}
.events-grid .lgr-count {
  margin-left: auto;
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(124, 58, 237, .14);
}
.events-grid .lgr-chev { color: var(--text-secondary); font-size: 11px; transition: transform var(--transition); }
.events-grid .league-group-hdr.collapsed .lgr-chev { transform: rotate(-90deg); }

/* ── MAIN EVENTS · compact card ─────────────────────────────── */
.events-grid .match-compact {
  background: #1c1c1f;
  border: 1px solid rgba(124, 58, 237, .14);
  border-radius: 13px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.events-grid .match-compact:hover {
  background: #1c1c1f;
  border-color: rgba(168, 85, 247, .4);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(124, 58, 237, .6);
}
.events-grid .mc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.events-grid .mc-league {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Replace the inconsistent inline emoji with a clean accent dot */
.events-grid .mc-league > span:first-child {
  font-size: 0;
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #c084fc, #7c3aed);
  box-shadow: 0 0 8px rgba(168, 85, 247, .6);
}
.events-grid .mc-time { font-size: 12px; font-weight: 700; color: #9c96b3; white-space: nowrap; }
.events-grid .mc-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: #ff7676;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(255, 60, 60, .1);
  border: 1px solid rgba(255, 60, 60, .25);
}
.events-grid .mc-live-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: #ff3c3c; border-radius: 50%;
  animation: vbLivePulse 1.6s infinite;
}

.events-grid .mc-main { display: flex; align-items: center; gap: 12px; }
.events-grid .mc-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.events-grid .mc-team-row { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-width: 0; }
.events-grid .mc-team-logo {
  width: 24px; height: 24px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(124, 58, 237, .14);
  border: 1px solid rgba(124, 58, 237, .24);
  overflow: hidden;
}
.events-grid .mc-team-logo img { width: 100%; height: 100%; object-fit: contain; }
.events-grid .mc-team-initials {
  width: auto; height: auto; background: none; border-radius: 0;
  font-size: 11px; font-weight: 800; color: #c9a2ff;
}
.events-grid .mc-team-name {
  font-size: 14px; font-weight: 600; color: #eae7f2; flex: 0 1 auto;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Odds — fixed-width buttons keep every row aligned */
.events-grid .mc-odds { display: flex; gap: 7px; flex-shrink: 0; }
.events-grid .mc-odds-btn {
  width: 58px; height: 44px; min-width: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(13, 13, 13, .55);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .16s;
}
.events-grid .mc-odds-btn:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, .22), rgba(124, 58, 237, .12));
  border-color: rgba(168, 85, 247, .5);
  transform: translateY(-1px);
}
.events-grid .mc-odds-btn.selected {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border-color: #a855f7;
}
.events-grid .mc-odds-lbl { font-size: 10px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; }
.events-grid .mc-odds-val { font-family: 'Manrope', 'Inter', sans-serif; font-size: 14px; font-weight: 800; color: #fff; }
.events-grid .mc-odds-btn.selected .mc-odds-lbl { color: rgba(255, 255, 255, .8); }
.events-grid .mc-odds-btn.selected .mc-odds-val { color: #fff; }
.events-grid .mc-odds-btn--off { cursor: default; opacity: .4; }
.events-grid .mc-odds-btn--off:hover { background: rgba(13, 13, 13, .55); border-color: var(--border); transform: none; }
.events-grid .mc-odds-btn--off .mc-odds-val { color: var(--text-secondary); }

.events-grid .mc-bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(124, 58, 237, .1);
}
.events-grid .mc-variants { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.events-grid .mc-variants:hover { color: #c084fc; }
.events-grid .mc-actions { display: flex; gap: 6px; }
.events-grid .mc-action-btn {
  width: 28px; height: 28px; padding: 0; line-height: 1;
  border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary); font-size: 14px;
  transition: all .16s;
}
.events-grid .mc-action-btn:hover { background: rgba(168, 85, 247, .14); color: #c084fc; border-color: rgba(168, 85, 247, .4); }

/* ── LIVE NOW · row ─────────────────────────────────────────── */
.events-grid .live-match-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  background: #1c1c1f;
  border: 1px solid rgba(124, 58, 237, .14);
  border-left: 3px solid rgba(255, 60, 60, .55);
  border-radius: 13px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.events-grid .live-match-row:hover {
  background: #1c1c1f;
  border-color: rgba(168, 85, 247, .4);
  border-left-color: #ff3c3c;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgba(124, 58, 237, .6);
}
.events-grid .lmr-teams { min-width: 0; flex: none; display: flex; flex-direction: column; gap: 7px; }
.events-grid .lmr-team { display: grid; grid-template-columns: minmax(0, 1fr) 26px; align-items: center; gap: 8px; padding: 0; }
.events-grid .lmr-name {
  font-size: 14px; font-weight: 600; color: #eae7f2; flex: none;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.events-grid .lmr-score {
  justify-self: end;
  min-width: 24px; height: 24px; padding: 0 6px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(124, 58, 237, .16); border: 1px solid rgba(124, 58, 237, .28);
  color: #fff; font-family: 'Manrope', 'Inter', sans-serif; font-size: 13px; font-weight: 800;
}
.events-grid .lmr-score.win { color: var(--green); }

.events-grid .lmr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.events-grid .lmr-odds { display: flex; justify-content: flex-end; gap: 6px; }
.events-grid .lmr-odds-btn {
  width: 52px; height: 40px; min-width: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(13, 13, 13, .55);
  border: 1px solid var(--border);
  border-radius: 9px; cursor: pointer; transition: all .16s;
}
.events-grid .lmr-odds-btn:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, .22), rgba(124, 58, 237, .12));
  border-color: rgba(168, 85, 247, .5);
  transform: translateY(-1px);
}
.events-grid .lmr-odds-btn.selected {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  border-color: #a855f7;
}
.events-grid .lmr-odds-lbl { font-size: 9.5px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; }
.events-grid .lmr-odds-val { font-family: 'Manrope', 'Inter', sans-serif; font-size: 13.5px; font-weight: 800; color: #fff; }
.events-grid .lmr-odds-btn.selected .lmr-odds-lbl { color: rgba(255, 255, 255, .8); }
.events-grid .lmr-odds-btn.selected .lmr-odds-val { color: #fff; }
.events-grid .lmr-odds-btn--off { cursor: default; opacity: .4; }
.events-grid .lmr-odds-btn--off:hover { background: rgba(13, 13, 13, .55); border-color: var(--border); transform: none; }
.events-grid .lmr-odds-btn--off .lmr-odds-val { color: var(--text-secondary); }

.events-grid .lmr-meta { display: flex; align-items: center; gap: 10px; }
.events-grid .lmr-variants { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; }
.events-grid .lmr-variants:hover { color: #c084fc; }
.events-grid .lmr-time {
  font-size: 11px; font-weight: 700; color: #ff7676;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(255, 60, 60, .1); border: 1px solid rgba(255, 60, 60, .25);
  white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .events-grid { grid-template-columns: 1fr; }
}

/* ══ Pre-Match / Live segmented switch (mobile only) ══════════════
   On mobile the two-column board stacks, so Live sits far below all the
   pre-match cards. This segmented control swaps between the two columns
   so Live is one tap away. Desktop keeps both columns side-by-side. */
.events-switch { display: none; }

@media (max-width: 900px) {
  .events-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    margin: 0 0 14px;
    padding: 5px;
    background: linear-gradient(180deg, #1a1a1f, #141417);
    border: 1px solid var(--border);
    border-radius: 14px;
    position: sticky;
    top: calc(var(--header-height) + 4px);
    z-index: 20;
    box-shadow: 0 12px 26px -18px rgba(124, 58, 237, .7);
  }
  /* On /sports the second header row (sport tabs) is present — sit below it */
  .has-sport-tabs .events-switch { top: calc(var(--header-total) + 4px); }

  .events-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 8px;
    border-radius: 10px;
    font-family: 'Space Grotesk', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color .2s, background .2s, box-shadow .2s;
  }
  .events-switch-btn:hover { color: #fff; }
  .events-switch-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    box-shadow: 0 6px 16px -6px rgba(124, 58, 237, .8);
  }
  .es-live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff3c3c;
    box-shadow: 0 0 0 0 rgba(255, 60, 60, .55);
    animation: vbLivePulse 1.6s infinite;
  }

  /* Column visibility driven by the active segment */
  .events-grid.show-live > .events-col:first-child { display: none; }
  .events-grid:not(.show-live) > .events-col:last-child { display: none; }
}

/* ── Board paging sentinel ──────────────────────────────────────
   The end of the pre-match column while more rows exist. It is what
   board-paging.js watches, so it sits LAST in the column and keeps a little
   height even at rest — a zero-height element that scrolls past between two
   animation frames can be missed, and the page would then stop loading.
   The spinner shows only while a page is in the air; the resting state is a
   quiet strip, not a permanent "loading" that suggests something is stuck. */
.board-more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 0 14px;
}
.board-more[hidden] { display: none; }

.board-more-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--accent);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.board-more.is-loading .board-more-spinner {
  opacity: 1;
  animation: vbBoardMoreSpin 0.7s linear infinite;
}

@keyframes vbBoardMoreSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .board-more.is-loading .board-more-spinner { animation: none; }
}