/* ================================================================
   VideoGraph Sports Player  —  player.css
   Matches VideoGraph Dashboard design system exactly
   Inter-Regular / Inter-Medium / Inter-SemiBold  ·  Light only
   ================================================================ */

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

/* ── Inter weight aliases — matching VideoGraph dashboard exactly ─
   Inter-Regular   = font-weight: 400
   Inter-Medium    = font-weight: 500
   Inter-SemiBold  = font-weight: 600
   ──────────────────────────────────────────────────────────────── */
:root {
  --fw-regular:   400;   /* Inter-Regular  */
  --fw-medium:    500;   /* Inter-Medium   */
  --fw-semibold:  600;   /* Inter-SemiBold */
  --fw-bold:      700;
}

/* ── VideoGraph Design Tokens ──────────────────────────────────── */
:root {
  /* Backgrounds — VG dashboard */
  --bg:    #f8fafc;
  --s1:    #ffffff;
  --s2:    #f8fafc;
  --s3:    #f1f5f9;

  /* Borders — VG dashboard */
  --b1:    #e2e8f0;
  --b2:    #cbd5e1;
  --b3:    #94a3b8;

  /* Text — VG dashboard */
  --t1:    #1e293b;   /* primary   — Inter-SemiBold headings */
  --t2:    #475569;   /* secondary — Inter-Medium subtext   */
  --t3:    #94a3b8;   /* muted     — labels, placeholders   */
  --t4:    #cbd5e1;   /* disabled  */

  /* Brand — VG blue-purple gradient */
  --primary:   #2863eb;
  --primary-h: #1d4ed8;
  --grad:   linear-gradient(60deg, #2b68e8 0%, #7a64f2 100%);
  --grad-h: linear-gradient(60deg, #1d4ed8 0%, #6d51f5 100%);
  --accent-gl: rgba(40,99,235,.15);
  --accent2:   #7a64f2;

  /* Semantic */
  --success: #16a34a;
  --danger:  #dc2626;
  --warning: #f59e0b;

  /* Live red */
  --live:    #dc2626;
  --live-bg: rgba(220,38,38,.08);
  --live-gl: rgba(220,38,38,.3);

  /* Cricket markers */
  --c-six:       #f59e0b;
  --c-four:      #16a34a;
  --c-wicket:    #dc2626;
  --c-highlight: #7a64f2;

  /* Shop overlay — always dark (on video) */
  --ov:  rgba(6,8,16,.94);

  /* Shadows — VG dashboard */
  --sh-xs:    0 1px 2px rgba(0,0,0,.04);
  --sh-sm:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-md:    0 4px 12px rgba(0,0,0,.08);
  --sh-lg:    0 12px 32px rgba(0,0,0,.12);
  --sh-card:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sh-hover: 0 8px 24px rgba(0,0,0,.10);
  --sh-video: 0 8px 32px rgba(0,0,0,.18), 0 0 0 1px var(--b1);
  --focus:    0 0 0 3px rgba(40,99,235,.15);

  /* Radius — VG dashboard */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Motion */
  --ease:   0.15s ease;
  --ease-b: 0.2s ease;

  /* Control colours */
  --ctrl-c:   #475569;
  --ctrl-hbg: #f1f5f9;
  --ctrl-hc:  #1e293b;
}

/* ── Dark theme ─────────────────────────────────────────────────── */

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--t1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
svg { display: block; }

/* ── Viewport fit — no page scroll ──────────────────────────────── */
html, body { height: 100%; overflow: hidden; }

.vg-logo { display: block; object-fit: contain; }

/* ── Stream URL bar — minimal, VG style ──────────────────────────
   Only the HLS URL is shown. API credentials stay server-side.
──────────────────────────────────────────────────────────────── */
.stream-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--s1);
  border-bottom: 1px solid var(--b1);
}
.stream-bar-label {
  font-size: 11px; font-weight: var(--fw-medium); color: var(--t2);
  white-space: nowrap; flex-shrink: 0;
}
.stream-bar-input {
  flex: 1;
  height: 32px;
  background: var(--bg);
  border: 1px solid var(--b1);
  color: var(--t1);
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.stream-bar-input:focus { border-color: var(--primary); box-shadow: var(--focus); }
.stream-bar-input::placeholder { color: var(--t3); }
.stream-bar-btn {
  height: 32px; padding: 0 14px;
  border-radius: var(--r-sm); border: none;
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: var(--fw-semibold); font-family: inherit;
  cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all var(--ease);
}
.stream-bar-btn:hover { background: var(--primary-h); }

/* ── One-viewport layout ─────────────────────────────────────────
   Controls are overlaid ON the video (YouTube / VG dashboard style).
   No separate controls row in the grid — single row layout.
───────────────────────────────────────────────────────────────── */
.player-page {
  height: calc(100vh - 56px - 49px);
  display: grid;
  grid-template-columns: 1fr 288px;
  grid-template-rows: 1fr;
  gap: 0 12px;
  padding: 12px 16px 8px;
  overflow: hidden;
  box-sizing: border-box;
}
.player-page.no-stream-bar { height: calc(100vh - 56px); }

/* Left column */
.pp-video { display: flex; flex-direction: column; min-height: 0; }

/* Video wrap fills the column — controls overlay inside */
.pp-video .video-wrap {
  flex: 1; min-height: 0; position: relative;
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--sh-video); background: #000;
}
.pp-video .video-wrap video {
  width: 100%; height: 100%; display: block; object-fit: contain; cursor: pointer;
}

/* ── YouTube/VG-style controls overlay ──────────────────────────
   Source: VG dashboard customcontrols.module.css patterns
   Hidden by default — revealed on hover or mouse activity.
───────────────────────────────────────────────────────────────── */
.vco {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 30;   /* always above shop-ov (z-index 20) and scorecard (25) */
  background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.72) 100%);
  padding: 28px 14px 10px;
  opacity: 0;
  transition: opacity .25s ease;
}
.video-wrap:hover .vco,
.video-wrap.vco-on .vco { opacity: 1; }

/* DVR info row */
.vco-dvr {
  display: none; align-items: center; gap: 10px;
  font-size: 10px; font-weight: var(--fw-medium);
  color: rgba(255,255,255,.55); margin-bottom: 5px;
}
.vco-dvr.on { display: flex; }
.vco-dvr-range { flex: 1; font-variant-numeric: tabular-nums; }
.vco-behind-pill {
  display: none; background: rgba(220,38,38,.18); color: #fca5a5;
  padding: 1px 7px; border-radius: 3px; font-size: 9px; font-weight: 700;
  border: 1px solid rgba(220,38,38,.22); letter-spacing: .6px;
}
.vco-lag { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.45); }

/* Seekbar — VG customcontrols.module.css: dark track, white thumb on hover */
.vco-seek {
  position: relative; width: 100%; height: 4px;
  background: rgba(255,255,255,.25); border-radius: 4px;
  cursor: pointer; margin-bottom: 6px;
  transition: height .15s ease;
}
.vco-seek:hover { height: 6px; }

.vco-fill {
  height: 100%; background: var(--primary); border-radius: 4px;
  width: 0%; pointer-events: none; position: relative;
}
/* VG .thumb style — white circle, shows on seek bar hover */
.vco-fill::after {
  content: ''; position: absolute; right: -5px; top: 50%;
  transform: translateY(-50%) scale(0);
  width: 11px; height: 11px; background: #fff; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  transition: transform .15s ease; pointer-events: none;
}
.vco-seek:hover .vco-fill::after { transform: translateY(-50%) scale(1); }

/* Marker dots on overlay seekbar */
.vco-seek .cm-marker  { border-color: rgba(0,0,0,.5); }
.vco-seek .t-dot      { border-color: rgba(0,0,0,.5); }
.vco-seek .t-cluster  { border-color: rgba(0,0,0,.5); }
.vco-seek .live-line  { top: -5px; bottom: -5px; }

/* Live Now button — shows inside overlay when behind live edge */
.vco-live-btn {
  margin-left: 8px;
  padding: 4px 10px;
  border-radius: var(--r-xs);
  border: none;
  background: var(--live);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  box-shadow: 0 0 10px rgba(255,50,50,.5);
  animation: live-glow 2s ease-in-out infinite;
  transition: filter var(--ease);
}
.vco-live-btn:hover { filter: brightness(1.15); }

/* Control buttons */
.vco-btns { display: flex; align-items: center; gap: 2px; }

.vco-btn {
  width: 32px; height: 32px;
  background: transparent; border: none;
  color: rgba(255,255,255,.85);
  cursor: pointer; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all var(--ease);
}
.vco-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.vco-btn:active { transform: scale(.9); }

.vco-btn .ic-pause { display: none; }
.vco-btn.playing .ic-play  { display: none; }
.vco-btn.playing .ic-pause { display: block; }
.vco-btn .ic-vol  { display: none; }
.vco-btn:not(.muted) .ic-vol  { display: block; }
.vco-btn:not(.muted) .ic-mute { display: none; }
.vco-btn.muted .ic-mute { display: block; }
.vco-btn.muted .ic-vol  { display: none; }

.vco-time {
  font-size: 12px; font-weight: var(--fw-medium);
  color: rgba(255,255,255,.82); white-space: nowrap; padding: 0 8px;
  font-variant-numeric: tabular-nums;
}
.vco-vol-grp { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.vco-vol {
  -webkit-appearance: none; appearance: none;
  width: 68px; height: 3px; border-radius: 2px; cursor: pointer; outline: none;
  background: linear-gradient(to right, #fff 0%, #fff 80%, rgba(255,255,255,.3) 80%, rgba(255,255,255,.3) 100%);
}
.vco-vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.vco-vol::-moz-range-thumb {
  width: 11px; height: 11px; border-radius: 50%; background: #fff; border: none;
}

/* Thin status bar below video (outside overlay) */
.vco-status {
  padding: 5px 0 0; display: flex; align-items: center; flex-shrink: 0;
}
.vco-status-txt  { font-size: 11px; font-weight: var(--fw-regular); color: var(--t3); }
.vco-status-stat { font-size: 11px; color: var(--t3); margin-left: auto; }
.vco-status-stat b { color: var(--primary); font-weight: var(--fw-semibold); }

/* Right column */
.pp-side { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pp-side-card {
  flex: 1; min-height: 0; background: var(--s1);
  border: 1px solid var(--b1); border-radius: var(--r-md);
  box-shadow: var(--sh-card); display: flex; flex-direction: column; overflow: hidden;
}
.pp-side-hdr {
  padding: 10px 14px; border-bottom: 1px solid var(--b1);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.pp-side-title { font-size: 12px; font-weight: var(--fw-semibold); color: var(--t1); }
.pp-side-body  {
  flex: 1; overflow-y: auto; min-height: 0;
  scrollbar-width: thin; scrollbar-color: var(--b1) transparent;
}
.pp-side-body::-webkit-scrollbar { width: 4px; }
.pp-side-body::-webkit-scrollbar-thumb { background: var(--b1); border-radius: 2px; }

/* ── Header — VideoGraph style ──────────────────────────────────── */
.header {
  height: 56px;
  padding: 0 24px;
  background: var(--s1);
  border-bottom: 1px solid var(--b1);
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--sh-sm);
}

.header-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
}
.header-icon { font-size: 22px; line-height: 1; }
.header-text { flex: 1; min-width: 0; }
.header-title {
  font-size: 15px;
  font-weight: var(--fw-semibold);  /* Inter-SemiBold */
  letter-spacing: -.2px;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
}
.header-sub { font-size: 11px; color: var(--t3); margin-top: 1px; font-weight: var(--fw-regular); }

.header-nav {
  display: flex; align-items: center; gap: 4px;
  margin-left: 20px;
}
.nav-link {
  padding: 6px 12px;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 13px;
  font-weight: var(--fw-medium);   /* Inter-Medium */
  color: var(--t2);
  transition: all var(--ease);
}
.nav-link:hover { background: var(--s2); color: var(--t1); }
.nav-link.active {
  background: var(--primary);      /* VG blue — solid, not gradient */
  color: #fff;
  font-weight: var(--fw-semibold); /* Inter-SemiBold */
  box-shadow: 0 2px 8px rgba(40,99,235,.3);
}

.header-right {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
}


/* WS dot */
.ws-dot {
  width: 8px; height: 8px;
  border-radius: 50%; background: var(--t4);
  flex-shrink: 0; transition: background var(--ease);
}
.ws-dot.ok    { background: var(--success); animation: ws-pulse 2.5s infinite; }
.ws-dot.error { background: var(--danger); }
@keyframes ws-pulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
  50%    { box-shadow: 0 0 0 5px rgba(22,163,74,0); }
}

/* LIVE pill */
.live-pill {
  display: none; align-items: center; gap: 4px;
  background: var(--danger);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--r-xs);
  letter-spacing: 1px; cursor: pointer; user-select: none;
  animation: live-flash 2s ease-in-out infinite;
}
.live-pill:hover { filter: brightness(1.12); }
@keyframes live-flash {
  0%,100%{ opacity: 1; }
  55%    { opacity: .75; }
}

/* ── Banners ─────────────────────────────────────────────────────── */
.banner {
  font-size: 12px; font-weight: 500;
  padding: 8px 24px; display: none;
  border-bottom: 1px solid transparent;
}
.banner.on  { display: block; }
.banner.warn  { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.2); color: #b45309; }
.banner.error { background: rgba(220,38,38,.07);  border-color: rgba(220,38,38,.15); color: var(--danger); }

/* ── Config bar ──────────────────────────────────────────────────── */
.cfg-bar {
  background: var(--s1);
  border-bottom: 1px solid var(--b1);
  padding: 10px 24px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

.cfg-lbl {
  font-size: 11px; color: var(--t2); font-weight: var(--fw-medium);  /* Inter-Medium */
  white-space: nowrap;
}

/* VG dashboard input style */
.cfg-in {
  background: var(--s1);
  border: 1px solid var(--b1);
  color: var(--t1);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  height: 34px;
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.cfg-in:focus { border-color: var(--primary); box-shadow: var(--focus); }
.cfg-in::placeholder { color: var(--t3); }
.cfg-in.xl { width: 320px; }
.cfg-in.md { width: 185px; }
.cfg-in.sm { width: 120px; }
.cfg-in.xs { width: 76px; }

/* ── Buttons — VG dashboard style ───────────────────────────────── */
.btn {
  height: 34px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--ease);
}
.btn:active { transform: scale(.98); }

/* Primary — VideoGraph blue. Solid #2863eb, not gradient, matching VG dashboard */
.btn-red {
  background: var(--primary);
  color: #fff;
  font-weight: var(--fw-semibold);  /* Inter-SemiBold */
  box-shadow: 0 1px 3px rgba(40,99,235,.25);
}
.btn-red:hover {
  background: var(--primary-h);
  box-shadow: 0 4px 12px rgba(40,99,235,.3);
}

/* Ghost — VG white button with blue border on hover */
.btn-ghost {
  background: var(--s1);
  color: var(--t1);
  border: 1px solid var(--b1);
  font-weight: var(--fw-medium);  /* Inter-Medium */
}
.btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: #ebf0ff; }
.btn-sm { height: 28px; font-size: 12px; padding: 0 10px; font-weight: var(--fw-medium); }

/* ── Page layout ─────────────────────────────────────────────────── */
.main {
  max-width: 1200px;
  margin: 20px auto 60px;
  padding: 0 24px;
}

/* ── Video wrapper ───────────────────────────────────────────────── */
.video-wrap {
  position: relative;
  background: #000;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: var(--sh-video);
}
video {
  width: 100%; height: 100%; display: block;
  object-fit: contain; cursor: pointer;
}

/* Error overlay */
.video-error {
  display: none; position: absolute; inset: 0;
  background: rgba(0,0,0,.8); backdrop-filter: blur(6px);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 28px; z-index: 15; color: #fff;
}
.video-error.on      { display: flex; }
.video-error .err-icon  { font-size: 44px; }
.video-error .err-title { font-size: 17px; font-weight: 700; }
.video-error .err-msg   { font-size: 12px; color: #aaa; max-width: 360px; line-height: 1.6; }

/* ── Shop overlay — sits above the controls area ─────────────────── */
.shop-ov {
  position: absolute;
  bottom: 64px;   /* clear the seekbar + buttons row */
  left: 0; right: 0;
  z-index: 20;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0 14px 8px;
  transform: translateY(calc(100% + 64px));
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.shop-ov.on { transform: translateY(0); }

.shop-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; padding: 0 2px;
}
.shop-title {
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: 2px;
}
.shop-x {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.6); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--ease);
}
.shop-x:hover { background: rgba(255,255,255,.18); color: #fff; transform: rotate(90deg); }

.shop-cards {
  display: flex; gap: 10px; overflow-x: auto;
  scrollbar-width: none; scroll-snap-type: x mandatory;
}
.shop-cards::-webkit-scrollbar { display: none; }

/* Product card — carries its own dark glass so it's readable on any video */
.s-card {
  display: flex; align-items: center; gap: 12px;
  min-width: 255px; max-width: 320px; flex-shrink: 0;
  padding: 10px 13px;
  background: rgba(10,10,18,.72);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-md);
  scroll-snap-align: start;
  transition: all var(--ease);
}
.s-card:hover {
  background: rgba(10,10,18,.82);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.s-thumb {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  object-fit: cover; background: rgba(255,255,255,.08); flex-shrink: 0;
}
.s-ph {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  background: rgba(40,99,235,.15); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.s-body { flex: 1; min-width: 0; }
.s-brand {
  font-size: 9px; font-weight: 600; color: #93c5fd;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 3px;
}
.s-name {
  font-size: 13px; color: #fff; font-weight: 600; line-height: 1.3; margin-bottom: 4px;
  overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.s-price { font-size: 12px; color: #4ade80; font-weight: 600; }

/* BUY NOW — VideoGraph blue */
.buy-btn {
  flex-shrink: 0; padding: 7px 14px; border-radius: var(--r-sm);
  border: none; background: var(--primary);
  color: #fff; font-size: 11px;
  font-weight: var(--fw-semibold);  /* Inter-SemiBold */
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
  white-space: nowrap; transition: all var(--ease); font-family: inherit;
}
.buy-btn:hover { background: var(--primary-h); box-shadow: 0 4px 12px rgba(40,99,235,.35); transform: scale(1.03); }

/* ── Controls ─────────────────────────────────────────────────────── */
.controls { padding: 12px 0 0; }

/* DVR strip */
.dvr-strip {
  display: none; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 500; color: var(--t3); margin-bottom: 8px;
}
.dvr-strip.on { display: flex; }
.dvr-range    { flex: 1; font-variant-numeric: tabular-nums; }
.behind-pill {
  display: none; background: var(--live-bg); color: var(--danger);
  padding: 2px 8px; border-radius: var(--r-xs);
  font-size: 10px; font-weight: 700; letter-spacing: .6px;
  border: 1px solid rgba(220,38,38,.18);
}
.dvr-lag { font-variant-numeric: tabular-nums; }

/* Seek bar — VG blue */
.prog-wrap {
  position: relative; height: 4px;
  background: var(--b1); border-radius: 2px;
  cursor: pointer; margin-bottom: 10px;
  transition: height .14s ease, background .2s;
}
.prog-wrap:hover { height: 6px; margin-top: -1px; }

.prog-fill {
  height: 100%;
  background: var(--grad);
  border-radius: 2px; width: 0%;
  pointer-events: none; position: relative; z-index: 1;
}
.prog-fill::after {
  content: ''; position: absolute; right: -6px; top: 50%;
  transform: translateY(-50%) scale(0);
  width: 13px; height: 13px; background: var(--primary); border-radius: 50%;
  box-shadow: var(--focus), 0 1px 4px rgba(0,0,0,.25);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.prog-wrap:hover .prog-fill::after { transform: translateY(-50%) scale(1); }

/* Shopping detection dot */
.t-dot {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--bg);
  cursor: pointer; z-index: 5;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow var(--ease);
  box-shadow: 0 0 6px rgba(40,99,235,.4);
}
.t-dot:hover {
  transform: translate(-50%,-50%) scale(2.1);
  box-shadow: 0 0 0 4px rgba(40,99,235,.15), 0 0 10px rgba(40,99,235,.4);
}
.t-dot.hit { background: var(--accent2); box-shadow: 0 0 0 4px rgba(122,100,242,.2); }

/* Cluster badge */
.t-cluster {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  min-width: 19px; height: 19px; border-radius: 10px;
  background: var(--grad); border: 2px solid var(--bg);
  cursor: pointer; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; padding: 0 5px;
  box-shadow: 0 0 8px rgba(40,99,235,.35);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow var(--ease);
}
.t-cluster:hover {
  transform: translate(-50%,-50%) scale(1.25);
  box-shadow: 0 0 0 4px rgba(40,99,235,.15);
}
.t-cluster.hit { box-shadow: 0 0 0 4px rgba(40,99,235,.2); }

/* Tooltip — VG card style */
.t-tip {
  position: absolute; bottom: calc(100% + 12px);
  left: 50%; transform: translateX(-50%);
  background: var(--s1); border: 1px solid var(--b1);
  color: var(--t1); font-size: 11px; font-weight: 400;
  line-height: 1.6; padding: 8px 10px;
  border-radius: var(--r-sm); white-space: normal;
  max-width: 220px; text-align: left;
  pointer-events: none; z-index: 40; display: none;
  box-shadow: var(--sh-md);
}
.t-tip::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--b1);
}
.t-dot:hover .t-tip, .t-cluster:hover .t-tip { display: block; }

/* Live edge */
.live-line {
  position: absolute; top: -7px; bottom: -7px; width: 2px;
  background: var(--danger); border-radius: 1px; z-index: 6;
  transform: translateX(-50%); pointer-events: none;
  animation: live-edge 2s ease-in-out infinite;
}
@keyframes live-edge {
  0%,100%{ box-shadow: 0 0 6px var(--live-gl); }
  50%    { box-shadow: 0 0 16px var(--live-gl); }
}
.live-line::after {
  content: 'LIVE'; position: absolute; bottom: calc(100% + 5px);
  left: 50%; transform: translateX(-50%);
  background: var(--danger); color: #fff;
  font-size: 8px; font-weight: 700; padding: 2px 5px;
  border-radius: var(--r-xs); letter-spacing: 1px; white-space: nowrap;
}

/* Control row */
.ctrl-row { display: flex; align-items: center; gap: 2px; }
.ctrl-sep  { flex: 1; }

.ctrl-btn {
  width: 32px; height: 32px;
  background: transparent; border: none;
  color: var(--ctrl-c); font-size: 15px;
  cursor: pointer; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all var(--ease);
}
.ctrl-btn:hover { background: var(--ctrl-hbg); color: var(--ctrl-hc); }
.ctrl-btn:active { transform: scale(.9); }

/* Play/pause, mute icons */
.ctrl-btn .ic-pause { display: none; }
.ctrl-btn.playing .ic-play  { display: none; }
.ctrl-btn.playing .ic-pause { display: block; }
.ctrl-btn .ic-vol  { display: none; }
.ctrl-btn:not(.muted) .ic-vol  { display: block; }
.ctrl-btn:not(.muted) .ic-mute { display: none; }
.ctrl-btn.muted .ic-mute { display: block; }
.ctrl-btn.muted .ic-vol  { display: none; }

.time-txt {
  font-size: 12px; font-weight: 500; color: var(--t2);
  font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 8px;
}

.vol-grp { display: flex; align-items: center; gap: 6px; }

input[type=range].vol {
  -webkit-appearance: none; appearance: none;
  width: 76px; height: 4px; border-radius: 2px;
  cursor: pointer; outline: none;
  background: linear-gradient(to right, var(--primary) 0%, var(--primary) 80%, var(--b2) 80%, var(--b2) 100%);
}
input[type=range].vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px;
  border-radius: 50%; background: var(--primary); cursor: pointer;
  box-shadow: 0 0 0 2px rgba(40,99,235,.2), 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
input[type=range].vol::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type=range].vol::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--primary); border: none;
}

/* Status row */
.status-row { display: flex; align-items: center; gap: 8px; padding-top: 8px; }
.s-txt  { font-size: 12px; font-weight: 400; color: var(--t3); }
.s-stat { font-size: 12px; font-weight: 400; color: var(--t3); margin-left: auto; }
.s-stat b { color: var(--primary); font-weight: 600; }

/* ── Detection list — VG table style ─────────────────────────────── */
.det-panel {
  margin-top: 16px;
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r-md);
  padding: 0;
  box-shadow: var(--sh-card);
}
.det-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--b1);
}
.det-hdr-title {
  font-size: 13px; font-weight: var(--fw-semibold); color: var(--t1);
}

.det-list {
  display: flex; flex-direction: column;
  max-height: 280px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--b1) transparent;
}
.det-list::-webkit-scrollbar { width: 4px; }
.det-list::-webkit-scrollbar-thumb { background: var(--b1); border-radius: 2px; }

/* VG table row style */
.det-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--b1);
  cursor: pointer; transition: background var(--ease);
}
.det-item:last-child { border-bottom: none; }
.det-item:hover { background: var(--s2); }
.det-item.new  { background: rgba(220,38,38,.04); }
.det-item.hit  { background: #ebf0ff; }

.d-thumb-wrap {
  width: 28px; height: 28px; border-radius: var(--r-xs);
  overflow: hidden; flex-shrink: 0;
}
.d-thumb { width: 28px; height: 28px; object-fit: cover; display: block; }
.d-thumb-init {
  width: 28px; height: 28px; border-radius: var(--r-xs);
  background: var(--grad); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.d-shop-dot {
  width: 6px; height: 6px; border-radius: 50%;
  flex-shrink: 0; background: var(--t4);
}
.d-shop-dot.buyable { background: var(--success); }

.d-ts    { font-size: 12px; font-weight: 500; color: var(--t2); font-variant-numeric: tabular-nums; min-width: 42px; flex-shrink: 0; }
.d-brand { font-size: 13px; font-weight: var(--fw-semibold); color: var(--t1); min-width: 68px; flex-shrink: 0; }
.d-prod  { font-size: 12px; font-weight: var(--fw-regular);  color: var(--t2); flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d-dur   { font-size: 11px; font-weight: var(--fw-medium);   color: var(--t3); flex-shrink: 0; white-space: nowrap; }
.d-seek  {
  font-size: 11px; font-weight: 600; flex-shrink: 0; white-space: nowrap;
  color: var(--primary); opacity: 0; transition: opacity var(--ease);
}
.d-seek.shop-lbl { color: var(--success); }
.det-item:hover .d-seek { opacity: 1; }

.new-badge {
  flex-shrink: 0; font-size: 9px; font-weight: 700;
  padding: 2px 6px; background: var(--danger); color: #fff;
  border-radius: var(--r-xs); letter-spacing: .5px;
}

.empty-msg {
  padding: 40px 20px; text-align: center;
  color: var(--t3); font-size: 13px; font-weight: 400;
}

/* ── Confidence filter (shopping) ───────────────────────────────── */
.conf-filter {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-bottom: 1px solid var(--b1); flex-shrink: 0;
}
.conf-label { font-size: 11px; font-weight: 500; color: var(--t2); white-space: nowrap; }
.conf-slider {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 3px; border-radius: 2px; cursor: pointer; outline: none;
  background: linear-gradient(to right, var(--primary) 0%, var(--primary) 0%, var(--b2) 0%);
}
.conf-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: var(--primary); cursor: pointer;
  box-shadow: 0 0 0 2px rgba(40,99,235,.2);
}
.conf-val { font-size: 11px; font-weight: 600; color: var(--primary); min-width: 28px; text-align: right; }

/* Brand colour swatch */
.s-swatch { display: flex !important; align-items: center; justify-content: center; border-radius: var(--r-sm); }
.s-swatch span { font-size: 18px; font-weight: 700; color: #fff; line-height: 1; }

/* Clearbit brand logo — white bg so logo is visible on dark card */
.s-logo {
  background: #fff !important;
  padding: 6px;
  object-fit: contain !important;
  border-radius: var(--r-sm);
}

/* ── Key moments filter (cricket) ───────────────────────────────── */
.moment-filters {
  display: flex; gap: 4px; padding: 7px 14px;
  border-bottom: 1px solid var(--b1); flex-shrink: 0; flex-wrap: wrap;
}
.mf-btn {
  padding: 3px 10px; border-radius: 12px;
  border: 1px solid var(--b2); background: var(--bg);
  color: var(--t2); font-size: 11px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all var(--ease);
}
.mf-btn:hover { border-color: var(--primary); color: var(--primary); }
.mf-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Ball hover tooltip — fixed position, bypasses overflow clipping */
.ball-tip-fixed {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 230px;
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r-md);
  padding: 12px 14px;
  box-shadow: var(--sh-lg);
  pointer-events: none;
  font-family: 'Inter', sans-serif;
}

/* Tooltip internals */
.bti-top     { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bti-over    { font-size: 11px; font-weight: 700; color: var(--primary); }
.bti-event   { font-size: 9px; font-weight: 800; color: #fff; padding: 2px 7px; border-radius: 3px; letter-spacing: .5px; }
.bti-score   { font-size: 17px; font-weight: 700; color: var(--t1); margin-bottom: 4px; letter-spacing: -.3px; }
.bti-team    { font-size: 10px; font-weight: 500; color: var(--t3); margin-left: 4px; }
.bti-batsmen { margin-bottom: 4px; }
.bti-batsman { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--t2); font-weight: 500; line-height: 1.7; }
.bti-dot     { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.bti-bowler  { font-size: 11px; color: var(--t3); font-weight: 400; margin-bottom: 4px; }
.bti-desc    { font-size: 11px; color: var(--t2); font-weight: 400; line-height: 1.4; border-top: 1px solid var(--b1); padding-top: 6px; margin-top: 4px; }

/* Current playing ball */
.ball-item.current {
  background: #ebf0ff !important;
  border-left-color: var(--primary) !important;
}

/* ── Offline banner ─────────────────────────────────────────────── */
.offline-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 20px;
  background: rgba(220,38,38,.08); border-bottom: 1px solid rgba(220,38,38,.15);
  font-size: 12px; font-weight: 500; color: var(--live); flex-shrink: 0;
}
.offline-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--live);
  animation: live-glow 1.2s ease-in-out infinite; flex-shrink: 0;
}

/* ── Keyboard cheatsheet ────────────────────────────────────────── */
.cheatsheet-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.cheatsheet-card {
  background: var(--s1); border: 1px solid var(--b1);
  border-radius: var(--r-lg); padding: 20px 24px;
  min-width: 300px; box-shadow: var(--sh-lg);
}
.cheatsheet-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cheatsheet-title { font-size: 14px; font-weight: 700; color: var(--t1); }
.cheatsheet-grid {
  display: grid; grid-template-columns: auto 1fr;
  gap: 8px 16px; align-items: center;
}
kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; padding: 3px 7px;
  background: var(--s2); border: 1px solid var(--b2);
  border-radius: var(--r-xs); font-size: 11px; font-weight: 700;
  font-family: inherit; color: var(--t1); box-shadow: 0 1px 0 var(--b2);
}
.cheatsheet-grid span { font-size: 12px; color: var(--t2); font-weight: 400; }

/* ================================================================
   HOME PAGE — VideoGraph dashboard style
   ================================================================ */
.home-main { max-width: 1200px; margin: 24px auto 60px; padding: 0 24px; }

.section-title {
  font-size: 12px; font-weight: var(--fw-semibold); color: var(--t2);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px;
}

/* Hero — VG-style gradient banner */
.home-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #312e81 40%, #4c1d95 100%);
  border-radius: var(--r-lg); padding: 36px 32px;
  margin-bottom: 28px; position: relative; overflow: hidden;
  box-shadow: var(--sh-md);
}
.home-hero::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 45%;
  background: radial-gradient(circle at 80% 50%, rgba(122,100,242,.3) 0%, transparent 70%);
  pointer-events: none;
}
.home-hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: #93c5fd; margin-bottom: 8px;
}
.home-hero-title {
  font-size: 30px; font-weight: 700; color: #fff;
  line-height: 1.15; margin-bottom: 8px; letter-spacing: -.3px;
}
.home-hero-sub { font-size: 14px; color: rgba(255,255,255,.65); margin-bottom: 20px; font-weight: 400; }
.home-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.home-hero-actions .btn-red  { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.home-hero-actions .btn-ghost { background: #fff; color: #1e293b; border-color: transparent; }
.home-hero-actions .btn-ghost:hover { background: #f1f5f9; }

/* Live cards — VG white card */
.live-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }

.live-card {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r-md);
  padding: 16px 18px;
  min-width: 248px; max-width: 305px; flex: 1;
  cursor: pointer; transition: all var(--ease-b);
  text-decoration: none; color: inherit;
  box-shadow: var(--sh-card);
}
.live-card:hover { border-color: var(--primary); box-shadow: var(--sh-hover); transform: translateY(-2px); }

.live-card-top  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.live-pill-sm {
  background: var(--danger); color: #fff;
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: var(--r-xs); letter-spacing: 1px;
}
.live-sport { font-size: 10px; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }

.live-card-teams { font-size: 16px; font-weight: 700; color: var(--t1); margin-bottom: 4px; letter-spacing: -.2px; }
.live-card-score { font-size: 12px; color: var(--t2); font-weight: 400; margin-bottom: 14px; }
.live-card-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: var(--fw-semibold);  /* Inter-SemiBold */
  padding: 7px 16px; border-radius: var(--r-sm);
  text-decoration: none; transition: all var(--ease);
  box-shadow: 0 1px 3px rgba(40,99,235,.25);
}
.live-card-btn:hover { background: var(--primary-h); box-shadow: 0 4px 12px rgba(40,99,235,.3); }

/* Sport grid — VG style tiles */
.sport-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }

.sport-tile {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r-md);
  padding: 14px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; min-width: 88px;
  text-decoration: none; color: inherit;
  transition: all var(--ease-b);
  box-shadow: var(--sh-card);
}
.sport-tile:hover { border-color: var(--primary); box-shadow: var(--sh-hover); transform: translateY(-1px); }
.sport-tile.active {
  background: #ebf0ff;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(40,99,235,.12);
}
.sport-icon  { font-size: 26px; line-height: 1; }
.sport-label { font-size: 11px; font-weight: 600; color: var(--t2); }
.sport-tile.active .sport-label { color: var(--primary); }

/* Highlights carousel */
.highlights-row {
  display: flex; gap: 12px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 4px; scroll-snap-type: x mandatory;
}
.highlights-row::-webkit-scrollbar { display: none; }

.hl-card {
  flex-shrink: 0; scroll-snap-align: start;
  min-width: 170px; max-width: 190px;
  background: var(--s1); border: 1px solid var(--b1);
  border-radius: var(--r-md); overflow: hidden;
  cursor: pointer; transition: all var(--ease-b);
  text-decoration: none; color: inherit;
  box-shadow: var(--sh-card);
}
.hl-card:hover { border-color: var(--b2); box-shadow: var(--sh-hover); transform: translateY(-2px); }

.hl-thumb {
  height: 85px; background: var(--s3);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; position: relative;
}
.hl-badge {
  position: absolute; top: 7px; left: 7px;
  font-size: 9px; font-weight: 700; padding: 2px 7px;
  border-radius: var(--r-xs); color: #fff; letter-spacing: .5px; text-transform: uppercase;
}
.hl-badge.six       { background: var(--c-six); }
.hl-badge.four      { background: var(--c-four); }
.hl-badge.wicket    { background: var(--c-wicket); }
.hl-badge.shop      { background: var(--grad); }
.hl-badge.highlight { background: var(--c-highlight); }

.hl-body  { padding: 9px 11px; }
.hl-title { font-size: 11px; font-weight: 600; color: var(--t1); line-height: 1.35; margin-bottom: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hl-meta  { font-size: 10px; color: var(--t3); font-weight: 400; }

/* ================================================================
   CRICKET PLAYER
   ================================================================ */
/* Cricket seekbar markers */
.cm-marker {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  height: 18px; min-width: 18px; border-radius: 10px;
  cursor: pointer; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: #fff;
  padding: 0 5px; border: 2px solid var(--s1); line-height: 1;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow var(--ease);
}
.cm-marker:hover { transform: translate(-50%,-50%) scale(1.3); }
.cm-marker.six       { background: var(--c-six);    }
.cm-marker.four      { background: var(--c-four);   }
.cm-marker.wicket    { background: var(--c-wicket); }
.cm-marker.highlight { background: var(--c-highlight); }

/* Scorecard popup — compact, fades after 4s */
.scorecard-popup {
  position: absolute; top: 10px; left: 10px;
  background: rgba(8,10,20,.88);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--r-sm); padding: 10px 12px;
  min-width: 180px; max-width: 220px; z-index: 25; color: #fff;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
  transform: translateY(-4px); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.scorecard-popup.on     { transform: translateY(0); opacity: 1; pointer-events: auto; }
.scorecard-popup.fading { opacity: 0; transform: translateY(-3px); pointer-events: none; }

/* Rich marker tooltip */
.t-tip {
  min-width: 180px;
  font-size: 11px;
  font-weight: var(--fw-regular);
}
.t-tip-over   { font-weight: var(--fw-semibold); color: var(--primary); margin-bottom: 3px; }
.t-tip-score  { font-weight: var(--fw-semibold); font-size: 13px; color: var(--t1); margin-bottom: 2px; }
.t-tip-line   { color: var(--t2); line-height: 1.5; }
.t-tip-event  { display: inline-block; font-weight: var(--fw-semibold); padding: 1px 6px; border-radius: 3px; font-size: 10px; color: #fff; margin-top: 4px; }

.sc-close {
  position: absolute; top: 7px; right: 7px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: none;
  color: rgba(255,255,255,.5); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--ease); font-size: 9px;
}
.sc-close:hover { background: rgba(255,255,255,.18); color: #fff; }

.sc-team      { font-size: 8px; font-weight: 600; color: #93c5fd; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 2px; }
.sc-score     { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.3px; margin-bottom: 1px; }
.sc-overs     { font-size: 9px; color: rgba(255,255,255,.4); margin-bottom: 5px; }
.sc-divider   { height: 1px; background: rgba(255,255,255,.07); margin: 4px 0; }
.sc-batsmen   { display: flex; flex-direction: column; gap: 2px; margin-bottom: 3px; }
.sc-batsman   { display: flex; align-items: center; gap: 4px; font-size: 10px; }
.sc-batsman-name { flex: 1; color: #fff; font-weight: 500; }
.sc-striker-dot  { width: 4px; height: 4px; border-radius: 50%; background: #4ade80; flex-shrink: 0; }
.sc-bowler    { font-size: 9px; color: rgba(255,255,255,.45); }
.sc-bowler span { color: #fff; font-weight: 500; }
.sc-over-label { font-size: 8px; color: rgba(255,255,255,.3); margin-bottom: 2px; }
.sc-title     { font-size: 10px; font-weight: 500; color: #fff; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Ball-by-ball panel — VG card + table */
.ball-panel {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r-md);
  display: flex; flex-direction: column;
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.ball-panel-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--b1);
}
.ball-panel-title { font-size: 13px; font-weight: var(--fw-semibold); color: var(--t1); }

.ball-list {
  flex: 1; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--b1) transparent;
}
.ball-list::-webkit-scrollbar { width: 4px; }
.ball-list::-webkit-scrollbar-thumb { background: var(--b1); border-radius: 2px; }

/* VG table row style */
.ball-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--b1);
  cursor: pointer; transition: background var(--ease);
  font-size: 12px;
  border-left: 3px solid transparent;
}
.ball-item:last-child { border-bottom: none; }
.ball-item:hover { background: var(--s2); }
.ball-item.six       { border-left-color: var(--c-six);       background: rgba(245,158,11,.04); }
.ball-item.four      { border-left-color: var(--c-four);      background: rgba(22,163,74,.04); }
.ball-item.wicket    { border-left-color: var(--c-wicket);    background: rgba(220,38,38,.04); }
.ball-item.highlight { border-left-color: var(--c-highlight); background: rgba(122,100,242,.04); }

.ball-badge {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff;
}
.ball-badge.six       { background: var(--c-six); }
.ball-badge.four      { background: var(--c-four); }
.ball-badge.wicket    { background: var(--c-wicket); }
.ball-badge.highlight { background: var(--c-highlight); }
.ball-badge.dot       { background: var(--t4); color: var(--t3); }
.ball-badge.normal    { background: var(--s3); color: var(--t2); }

.ball-over  { font-weight: var(--fw-semibold); color: var(--t2); min-width: 34px; font-size: 11px; font-variant-numeric: tabular-nums; }
.ball-title { flex: 1; color: var(--t2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--fw-regular); }
.ball-ts    { font-size: 11px; color: var(--t3); white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--fw-regular); }

/* Cricket two-column */
.cricket-main {
  max-width: 1200px; margin: 16px auto 24px; padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 290px;
  grid-template-rows: auto 1fr;
  grid-template-areas: "video  balls" "ctrls  balls";
  column-gap: 16px; align-items: start;
}
.cricket-video-col { grid-area: video; }
.cricket-ctrls-col { grid-area: ctrls; }
.cricket-balls-col { grid-area: balls; }

@media (max-width: 900px) {
  .cricket-main { display: block; }
  .cricket-balls-col { margin-top: 16px; }
  .ball-list { max-height: 260px; }
}