/* ═══════════════════════════════════════════════════════════════
   IDSport Scoreboard — app.css v3
   Broadcast-grade design. Bebas Neue + Figtree.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --bg:           #07080f;
  --bg2:          #0d0f1a;
  --surface:      rgba(255,255,255,0.032);
  --surface-2:    rgba(255,255,255,0.055);

  --border:       rgba(255,255,255,0.07);
  --border-md:    rgba(255,255,255,0.13);
  --border-hi:    rgba(255,255,255,0.22);

  --white:        #ffffff;
  --muted:        rgba(255,255,255,0.4);
  --muted-hi:     rgba(255,255,255,0.65);

  /* Accents */
  --blue:         #3b82f6;
  --blue-dim:     rgba(59,130,246,0.18);
  --blue-glow:    rgba(59,130,246,0.35);

  --emerald:      #10b981;
  --emerald-dim:  rgba(16,185,129,0.14);
  --emerald-glow: rgba(16,185,129,0.4);

  --crimson:      #dc2626;
  --crimson-dim:  rgba(180,30,30,0.22);

  --amber:        #f59e0b;

  /* Skins */
  --skin-default: rgba(140,15,25,0.28);
  --skin-default-border: rgba(180,30,40,0.5);

  /* SGS slot states */
  --slot-up:      rgba(16,185,129,0.18);
  --slot-up-b:    rgba(16,185,129,0.6);
  --slot-down:    rgba(180,30,30,0.18);
  --slot-down-b:  rgba(180,30,30,0.5);
  --slot-eq:      rgba(59,130,246,0.18);
  --slot-eq-b:    rgba(59,130,246,0.5);

  /* Timer */
  --t-green:      #22c55e;
  --t-orange:     #f97316;
  --t-red:        #ef4444;

  /* Typography */
  --font-num: 'Bebas Neue', impact, sans-serif;
  --font-ui:  'Figtree', system-ui, sans-serif;

  --gap: 7px;
  --r:   10px;
}

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

html, body {
  width: 100vw; height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

/* ── TOP RIBBON — hidden ─────────────────────────────────────── */
.top-ribbon { display: none; }

/* ── UTILITY ─────────────────────────────────────────────────── */
.hidden { display: none !important; }

.board {
  position: absolute;
  inset: 0;
  width: 100vw;
  /* Boards start invisible; SSE showBoard() adds .board-visible */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

/* SSE handler toggles this class — no JS opacity manipulation needed */
.board.board-visible {
  opacity: 1;
  pointer-events: auto;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  opacity: 0;
}


/* ═══════════════════════════════════════════════════════════════
   CRICKET BOARD  —  TV Stadium Edition
   Optimised for 42-inch display, 5 m viewing distance.
   ═══════════════════════════════════════════════════════════════ */

#cricket-board {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* Deep space navy — subtle blue glow from upper-left for depth */
  background: #050a18;
  background-image: radial-gradient(ellipse 130% 55% at 38% 0%,
    rgba(29,78,216,0.12) 0%, transparent 65%);
}

/* ── SCORE LABEL: small caption inside the score panel ─────
   Sits directly above the big runs number. Keeps the layout
   self-contained inside the 38% score panel column.          */
.cb-score-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cb-inn-tag {
  font-family: var(--font-ui);
  font-size: clamp(0.5rem, 0.75vw, 0.7rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.cb-score-team {
  font-family: var(--font-ui);
  font-size: clamp(0.75rem, 1.3vw, 1.2rem);
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── MAIN AREA ─────────────────────────────────────────────── */
.cb-main {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── SCORE PANEL ───────────────────────────────────────────── */
.cb-score-panel {
  flex: 0 0 38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-right: 2px solid rgba(59,130,246,0.2);
  /* Stadium spotlight: subtle radial light from center, pure dark at edges */
  background: radial-gradient(ellipse 85% 65% at 50% 48%,
    rgba(18,42,85,0.6) 0%, rgba(3,6,14,0.97) 100%);
}

.cb-runs {
  font-family: var(--font-ui);
  font-weight: 800;
  /* 1–2 digits: fills the panel height. 3-digit override below keeps it inside. */
  font-size: min(28vw, 56vh);
  line-height: 0.87;
  color: #ffffff;
  letter-spacing: -0.04em;
  text-shadow:
    0 0 80px rgba(255,255,255,0.25),
    0 4px 6px rgba(0,0,0,1),
    0 10px 40px rgba(0,0,0,0.9),
    0 20px 60px rgba(0,0,0,0.6);
}

/* 3-digit scores: panel usable width ≈ 36.8vw.
   3 digits × 0.58em (with -0.04 tracking) × 20vw ≈ 34.8vw — safe fit. */
.cb-runs.cb-runs--3dig {
  font-size: min(20vw, 56vh);
}

/* ── SKINS PANEL ───────────────────────────────────────────── */
.cb-skins-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 10px 6px 8px;
  gap: 5px;
  min-width: 0;
  background: rgba(2,5,16,0.5);
}

/* Column labels: SKIN 1 – SKIN 4 */
.cb-skin-header {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  flex-shrink: 0;
}

.cb-skin-hlabel {
  text-align: center;
  font-family: var(--font-ui);
  font-size: clamp(0.5rem, 0.9vw, 0.82rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.2);
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.cb-skin-team-row {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  min-height: 0;
}

.cb-skin-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Unplayed / pending: same dark forest green as the TARGET block */
  background: #14532d;
  border: 1.5px solid rgba(255,255,255,0.18);
  box-shadow: none;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* ── Win: same dark forest green as TARGET block ─────── */
.cb-skin-cell.skin-win {
  background: #14532d;
  border-color: rgba(255,255,255,0.18) !important;
  box-shadow: none;
}

/* ── Lose: vivid crimson ─────────────────────────────── */
.cb-skin-cell.skin-lose {
  background: #991b1b;
  border-color: #f87171 !important;
  box-shadow: 0 0 30px rgba(248,113,113,0.4), inset 0 1px 0 rgba(255,255,255,0.07);
}

/* ── Draw: amber ─────────────────────────────────────── */
.cb-skin-cell.skin-draw {
  background: #92400e;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 30px rgba(251,191,36,0.38), inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Number — fills the card. */
.cb-skin-cell span {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: min(9vw, 22vh);
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.03em;
  text-shadow:
    0 3px 6px rgba(0,0,0,0.9),
    0 8px 24px rgba(0,0,0,0.7);
  position: relative;
  z-index: 1;
}

/* Dash placeholder — short on ALL cells regardless of win/lose/draw state */
.cb-skin-cell.is-dash span {
  color: #ffffff;
  font-size: min(3.5vw, 9vh);
}

/* ── STATS STRIP ───────────────────────────────────────────── */
.cb-stats-strip {
  display: flex;
  align-items: stretch;
  height: 40vh;
  min-height: 40vh;
  flex-shrink: 0;
  border-top: 2px solid rgba(255,255,255,0.08);
  background: rgba(2,5,14,0.9);
}

/* Left: OVERS + TARGET blocks side-by-side with visible labels */
.cb-strip-left {
  display: flex;
  flex-direction: row;
  flex: 0 0 38%;
  border-right: 2px solid rgba(255,255,255,0.08);
}

.cb-strip-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 10px 8px;
  gap: 10px;
  position: relative;
  border-right: 1px solid rgba(255,255,255,0.07);
}

.cb-strip-block:last-child { border-right: none; }

/* Solid colour backgrounds — convey meaning at a glance */
.cb-strip-overs  { background: #1e3a5f; }
.cb-strip-target { background: #14532d; }

/* Overs block: stretch children full-width so the timer can have its own bg */
.cb-strip-overs {
  align-items: stretch;
  padding: 0;
  gap: 0;
}

/* Overs number centred in the upper portion */
.cb-strip-overs .cb-strip-num {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: min(8vw, 22vh);
  line-height: 0.9;
  padding: 8px;
}

/* Timer gets its own distinct background — visually a separate card */
.cb-strip-overs .cb-timer-block {
  flex: 0 0 auto;
  width: 100%;
  background: #0a1628;
  border-top: 2px solid rgba(255,255,255,0.12);
  padding: 6px 8px;
  margin: 0;
}

.cb-strip-overs .cb-timer-seg {
  font-size: min(5vw, 13vh);
}

.cb-strip-overs .cb-timer-colon {
  font-size: min(4vw, 10vh);
}

/* Target number */
.cb-strip-target .cb-strip-num {
  font-size: min(8vw, 26vh);
  line-height: 0.88;
}

/* Target dash — short when no target set yet */
#cb-target-block.is-dash .cb-strip-num {
  font-size: min(3.5vw, 9vh);
}

/* Labels — now visible above each number */
.cb-strip-label {
  display: block;
  font-family: var(--font-ui);
  font-size: clamp(0.62rem, 1.05vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.24em;
  color: rgba(255,255,255,0.52);
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
}

.cb-strip-num {
  font-family: var(--font-ui);
  font-weight: 800;
  /* Each block ≈ 14vw wide; "16.0" (4 chars) × 0.62em × 5.5vw ≈ 13.6vw — fits. */
  font-size: min(5.5vw, 20vh);
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

/* Players block — middle section.
   flex-basis calc: 31% (half of the 62% post-left-block space) minus 4px
   to account for the skin grid's 8px left-pad + 6px gap offset, so the
   center/right divider lands exactly on the skin-2 / skin-3 boundary. */
.cb-strip-players {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6px 20px 4px 16px;
  gap: 0;
}

.cb-p-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 3px 2px;
  min-height: 0;
}

.cb-p-row:last-child { border-bottom: none; }

.cb-p-role { display: none; }

.cb-p-name {
  font-family: var(--font-ui);
  font-size: clamp(1.4rem, 3vw, 3.4rem);
  font-weight: 800;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.02em;
}

/* Bowler row in sky-blue */
.cb-p-bowl .cb-p-name  { color: #7dd3fc; }
.cb-p-bowl .cb-p-score { color: #7dd3fc; }

.cb-p-spacer { flex: 1; }

.cb-p-score {
  font-family: var(--font-num);
  font-size: clamp(1.4rem, 3vw, 3.4rem);
  color: var(--white);
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 10px;
}

.cb-p-score-sub {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--muted-hi);
  letter-spacing: 0.02em;
  margin-left: 0.15em;
  vertical-align: middle;
}

.cb-strip-divider { display: none; }

/* ── CENTER COLUMN: bat1, bat2, bowler stacked equally ────────── */
.cb-strip-players .cb-p-row,
.cb-strip-players .cb-bowl-panel {
  flex: 1;
  padding: 0 2px;
  border-bottom: none;
}

.cb-strip-players .cb-p-name {
  font-size: clamp(1.6rem, 3.4vw, 4rem);
}

.cb-strip-players .cb-p-score {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 4.2rem);
  letter-spacing: -0.02em;
}

/* Bowler row sits below bat2 with a faint separator */
.cb-strip-players .cb-bowl-panel {
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

/* ── RIGHT COLUMN: timer moved to overs block — hide this column ── */
.cb-strip-timer {
  display: none;
}

/* Ball dots — hidden for big-screen display */
#cb-ball-dots,
#cb-ball-dots-extra {
  display: none;
}

.cb-bowl-panel {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 16px;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}

.cb-bowl-panel .cb-p-name {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 4rem);
  letter-spacing: -0.02em;
}

.cb-bowl-panel .cb-p-score {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(1.7rem, 3.6vw, 4.2rem);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}

.cb-timer-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px 24px;
  flex: 1;
}

/* Thin divider between batsmen and bowler in the players block */
.cb-players-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 0 2px;
  flex-shrink: 0;
}

.cb-timer-seg {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: min(7vw, 17vh);
  color: var(--t-green);
  line-height: 0.88;
  min-width: 2ch;
  text-align: center;
  letter-spacing: 0.01em;
  transition: color 0.5s ease;
}

.cb-timer-colon {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: min(5.5vw, 13vh);
  color: var(--t-green);
  line-height: 0.88;
  opacity: 0.5;
  animation: colon-blink 1s step-end infinite;
  transition: color 0.5s ease;
  margin: 0 2px;
}

@keyframes colon-blink {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.12; }
}

.cb-timer-block.timer-orange .cb-timer-seg,
.cb-timer-block.timer-orange .cb-timer-colon { color: var(--t-orange); }
.cb-timer-block.timer-red    .cb-timer-seg,
.cb-timer-block.timer-red    .cb-timer-colon { color: var(--t-red); }


/* ── Ball-by-ball circles (under bowler name in cricket stats strip) ─── */
/* Both rows use a fixed 6-column grid so extras (row 2) land directly
   below their matching delivery in row 1. */
.cb-ball-dots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  justify-items: center;
  align-items: center;
  padding: 3px 8px 4px;
}

.cb-ball-dot {
  width:  clamp(2.8rem, 4.5vw, 6.2rem);
  height: clamp(2.8rem, 4.5vw, 6.2rem);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  font-size: clamp(1.4rem, 2.5vw, 3.4rem);
  line-height: 1;
  flex-shrink: 0;
  /* Emboss — top highlight + bottom shadow + outer drop */
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.45),
    0 4px 12px rgba(0,0,0,0.55),
    0 1px 3px rgba(0,0,0,0.35);
  /* Default = empty slot */
  border: 2px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: transparent;
}

/* Scored balls — embossed with gradient + glow per type */
.cb-ball-dot--run {
  border-color: rgba(16,185,129,0.75);
  background: linear-gradient(145deg, rgba(16,185,129,0.45) 0%, rgba(16,185,129,0.18) 100%);
  color: #6ee7b7;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.25), inset 0 -2px 4px rgba(0,0,0,0.4),
              0 4px 14px rgba(0,0,0,0.55), 0 0 14px rgba(16,185,129,0.35);
}
.cb-ball-dot--dot {
  border-color: rgba(148,163,184,0.3);
  background: linear-gradient(145deg, rgba(148,163,184,0.18) 0%, rgba(148,163,184,0.06) 100%);
  color: #94a3b8;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.12), inset 0 -2px 4px rgba(0,0,0,0.4),
              0 3px 10px rgba(0,0,0,0.5);
}
.cb-ball-dot--four {
  border-color: rgba(16,185,129,0.75);
  background: linear-gradient(145deg, rgba(16,185,129,0.45) 0%, rgba(16,185,129,0.18) 100%);
  color: #6ee7b7;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.25), inset 0 -2px 4px rgba(0,0,0,0.4),
              0 4px 14px rgba(0,0,0,0.55), 0 0 14px rgba(16,185,129,0.35);
}
.cb-ball-dot--six {
  border-color: rgba(245,158,11,0.8);
  background: linear-gradient(145deg, rgba(245,158,11,0.45) 0%, rgba(245,158,11,0.2) 100%);
  color: #fcd34d;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.25), inset 0 -2px 4px rgba(0,0,0,0.4),
              0 4px 14px rgba(0,0,0,0.55), 0 0 16px rgba(245,158,11,0.4);
}
.cb-ball-dot--wicket {
  border-color: rgba(220,38,38,0.85);
  background: linear-gradient(145deg, rgba(220,38,38,0.48) 0%, rgba(220,38,38,0.22) 100%);
  color: #fca5a5;
  font-size: clamp(1rem, 1.75vw, 2.3rem);   /* all wickets now max 2 chars */
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.45),
              0 4px 14px rgba(0,0,0,0.55), 0 0 16px rgba(220,38,38,0.4);
}
.cb-ball-dot--wide {
  border-color: rgba(59,130,246,0.8);
  background: linear-gradient(145deg, rgba(59,130,246,0.42) 0%, rgba(59,130,246,0.18) 100%);
  color: #93c5fd;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.22), inset 0 -2px 4px rgba(0,0,0,0.4),
              0 4px 14px rgba(0,0,0,0.55), 0 0 14px rgba(59,130,246,0.35);
}
.cb-ball-dot--noball {
  border-color: rgba(245,158,11,0.8);
  background: linear-gradient(145deg, rgba(245,158,11,0.42) 0%, rgba(245,158,11,0.18) 100%);
  color: #fcd34d;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.22), inset 0 -2px 4px rgba(0,0,0,0.4),
              0 4px 14px rgba(0,0,0,0.55), 0 0 14px rgba(245,158,11,0.35);
}


/* Push both ball rows down from the bowler name */
#cb-ball-dots {
  margin-top: 40px;
}

/* Both ball rows shrink equally when extras exist */
.cb-strip-timer.has-extras .cb-ball-dot {
  width:  clamp(2.2rem, 3.4vw, 4.6rem);
  height: clamp(2.2rem, 3.4vw, 4.6rem);
  font-size: clamp(1.1rem, 1.8vw, 2.4rem);
}

/* Extra-ball row — inherits the 6-column grid from .cb-ball-dots;
   only override is padding. Same circle sizes as the main row. */
.cb-ball-dots--extra {
  padding: 4px 8px 8px;
}

/* Divider between main and extra rows — only when extras are present */
.cb-strip-timer.has-extras .cb-ball-dots:not(.cb-ball-dots--extra) {
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding-bottom: 10px;
}

.cb-strip-timer.has-extras .cb-ball-dots--extra {
  padding-top: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   SGS / NETBALL BOARD
   ═══════════════════════════════════════════════════════════════ */

#sgs-board {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg);
}

.sgs-row {
  flex: 0 0 33.33%;
  display: flex;
  align-items: stretch;
  min-height: 0;
}

/* Accent lines separating rows */
.sgs-top-row {
  border-bottom: 1px solid var(--border-md);
}
.sgs-bot-row {
  border-top: 1px solid var(--border-md);
}

.sgs-team-block {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  /* Extra left room for the full-height edge colour block. */
  padding: 0 28px 0 48px;
  min-width: 0;
  overflow: hidden;            /* keep the soft wash inside the row */
}

/* Bold full-height colour block hugging the outer edge of the team row —
   readable from across the hall. JS sets its colour / visibility. */
.sgs-team-color {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: clamp(16px, 2vw, 30px);
  visibility: hidden;
  z-index: 1;
}

.sgs-team-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-ui);
  /* Fallback size; JS (fitSgsName) overrides with a measured px size so the
     name fills the available width and shrinks to fit when long. */
  font-size: clamp(6vh, 18vh, 22vh);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
}

.sgs-score-block {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px 0 40px;
  min-width: 25vw;
}

/* Thin vertical divider between the team name and the main total. */
.sgs-score-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 2px;
  background: var(--border-md);
  border-radius: 2px;
}

.sgs-score {
  font-family: var(--font-num);
  font-size: clamp(16vh, 24vh, 28vh);
  line-height: 1;
  /* Totals are always solid white with a heavy weight so they read clearly
     from across the hall — no lead/trail colour. The white stroke fattens
     the glyphs; the shadow lifts them off the dark background. */
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0.04em;
  /* White fill with the IDSport orange outline and a soft orange glow. */
  -webkit-text-stroke: 5px #f97316;
  text-stroke: 5px #f97316;
  paint-order: stroke fill;
  text-shadow: 0 0 16px rgba(249,115,22,0.40);
}

/* Keep totals white regardless of who's leading. */
.sgs-score.slot-up,
.sgs-score.slot-down,
.sgs-score.slot-equal {
  color: #ffffff;
}

/* Center row: clock + slots */
.sgs-center-row {
  flex: 0 0 33.34%;
  display: flex;
  align-items: center;
  background: var(--bg2);
  border-top: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  padding: 0 16px 0 28px;
  gap: 16px;
  box-shadow:
    inset 0 10px 30px rgba(59,130,246,0.04),
    inset 0 -10px 30px rgba(59,130,246,0.04);
}

.sgs-clock-wrap {
  flex: 1;                    /* fill the space between the left edge and the
                                period card, and centre the clock within it */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.sgs-clock {
  font-family: var(--font-num);
  font-size: clamp(14vh, 25vh, 30vh);
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: 0.02em;
  -webkit-text-stroke: 2px currentColor;   /* a touch heavier */
  text-stroke: 2px currentColor;
  paint-order: stroke fill;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* Period card + skin blocks, grouped and pushed to the right of the clock. */
.sgs-skins {
  margin-left: auto;          /* hug the right side, next to the clock's space */
  align-self: stretch;
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 8px 0;
}

/* Prominent period indicator: letter (H/Q) over number, sky blue so it pops. */
.sgs-period-card {
  flex: none;
  display: flex;
  flex-direction: column;
  width: clamp(70px, 7vw, 120px);
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #38bdf8;
  box-shadow: 0 0 20px rgba(56,189,248,0.45);
}
.sgs-period-card__letter,
.sgs-period-card__num {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  color: #ffffff;
  line-height: 1;
}
.sgs-period-card__letter,
.sgs-period-card__num {
  font-size: clamp(5vh, 11vh, 14vh);
  font-weight: 800;
}
.sgs-period-card__letter {
  background: #0284c7;        /* deeper sky for the H/Q band */
  letter-spacing: 0.02em;
}
.sgs-period-card__num {
  background: #0ea5e9;        /* sky blue */
}

/* Slot scores */
.sgs-slots-wrap {
  align-self: stretch;        /* fill the centre band's full height */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sgs-slots-row {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.sgs-slot {
  /* Fixed block width so a 2-half game shows two blocks the SAME size as a
     4-quarter game (the parent group sizes to its slots and is right-aligned,
     so unused cells hidden in JS just shrink the group). */
  flex: 0 0 clamp(120px, 14vw, 210px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-num);
  /* Big, heavy numbers that fill the block. The stroke (in the glyph's own
     colour) fattens the weight reliably regardless of the number font. */
  font-size: clamp(7vh, 15vh, 18vh);
  font-weight: 800;
  -webkit-text-stroke: 2.5px currentColor;
  text-stroke: 2.5px currentColor;
  paint-order: stroke fill;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  line-height: 1;
  transition: background 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
}

/* Vivid solid fills to match the Cricket scoreboard skin cells.
   Leading slot = win (green), trailing = lose (crimson), tied = draw (amber). */
.sgs-slot.slot-up {
  background: #14532d;
  border-color: rgba(255,255,255,0.18);
  color: #ffffff;
  box-shadow: none;
}
.sgs-slot.slot-down {
  background: #991b1b;
  border-color: #f87171;
  color: #ffffff;
  box-shadow: none;
}
.sgs-slot.slot-equal {
  background: #1877f2;        /* Facebook blue — drawn period */
  border-color: #4293ff;
  color: #ffffff;
  box-shadow: none;
}

/* Future periods not yet reached — ghostly placeholder, no vivid fill.
   Once play reaches the slot it loses .slot-ghost and shows green/red. */
.sgs-slot.slot-ghost {
  background: transparent;
  border-color: transparent;
  color: rgba(255,255,255,0.22);
  box-shadow: none;
  /* No outline stroke — a clean, light solid number rather than a hollow ghost. */
  -webkit-text-stroke: 0;
  text-stroke: 0;
}

/* The live / current period — subtle ring so it reads as "now". Sits on top
   of whatever win/lose/draw fill the slot already carries. */
.sgs-slot.slot-active {
  box-shadow: 0 0 0 2px var(--blue), 0 0 18px rgba(59,130,246,0.35);
}


/* ═══════════════════════════════════════════════════════════════
   POPUP OVERLAY
   ═══════════════════════════════════════════════════════════════ */

#popup {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(rgba(7,8,15,0.75), rgba(7,8,15,0.75)),
    url('assets/img/backdrop/sc_backdrop.jpg') center/cover;
  z-index: 2000;
}

#popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.popup-img {
  height: 80vh;
  padding: 40px;
  max-width: 100%;
  object-fit: contain;
}

.popup-badge {
  display: block;
  font-family: var(--font-num);
  font-size: clamp(20vh, 28vh, 32vh);
  font-weight: 400;
  line-height: 1.1;
  width: 100%;
  letter-spacing: 0.02em;
}

.popup-badge.bowler  {
  color: var(--white);
  text-shadow: 0 0 60px rgba(59,130,246,0.5);
}
.popup-badge.batsman {
  color: var(--amber);
  text-shadow: 0 0 60px rgba(245,158,11,0.5);
}

.popup-small {
  font-family: var(--font-num);
  font-size: clamp(12vh, 16vh, 20vh);
  color: var(--white);
  letter-spacing: 0.04em;
}


/* ═══════════════════════════════════════════════════════════════
   BALL-SCORED POPUP (near-fullscreen, modern)
   Replaces the small <img> popup that used to fire for pt='score'.
   Variants are switched via the parent's data-kind attribute, which
   sets the accent CSS vars used for the symbol, glow, and bar.
   ═══════════════════════════════════════════════════════════════ */

#ball-popup {
  z-index: 7500;
  display: flex !important;
  align-items: center;
  justify-content: center;
  /* When .hidden is present the .overlay rule keeps opacity:0; when
     it's removed we transition the overlay in. */
  transition: opacity .35s ease, visibility .35s ease;
  visibility: hidden;
  /* Per-kind tokens — defaults match the "runs" variant. Each
     data-kind block below overrides these three. */
  --bp-accent:     var(--blue);
  --bp-accent-rgb: 59,130,246;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(59,130,246,0.28) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

#ball-popup .bp-backdrop {
  position: absolute; inset: 0;
  background: var(--bp-bg-grad), rgba(7,8,15,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

#ball-popup .bp-card {
  position: relative;
  width: min(86vw, 1400px);
  height: min(82vh, 900px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vh, 60px);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015)),
    rgba(13,15,26,0.55);
  border: 1px solid rgba(var(--bp-accent-rgb), 0.35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 30px 120px rgba(0,0,0,0.7),
    0 0 140px rgba(var(--bp-accent-rgb), 0.35);
  overflow: hidden;
  animation: bp-card-in .55s cubic-bezier(0.22, 1.16, 0.36, 1) both;
}

#ball-popup .bp-glow {
  position: absolute;
  top: -25%; left: 50%;
  transform: translateX(-50%);
  width: 110%; height: 70%;
  background: radial-gradient(ellipse at center,
    rgba(var(--bp-accent-rgb), 0.55) 0%,
    rgba(var(--bp-accent-rgb), 0) 65%);
  filter: blur(20px);
  pointer-events: none;
  animation: bp-glow-pulse 2.4s ease-in-out infinite;
}

#ball-popup .bp-eyebrow {
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 1.6vw, 1.4rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--muted-hi);
  margin-bottom: clamp(8px, 1.6vh, 18px);
  position: relative; z-index: 2;
}

#ball-popup .bp-symbol {
  font-family: var(--font-num);
  font-size: clamp(220px, 54vh, 680px);
  font-weight: 900;
  line-height: 0.85;
  color: var(--bp-accent);
  text-shadow:
    0 0 60px rgba(var(--bp-accent-rgb), 0.55),
    0 0 140px rgba(var(--bp-accent-rgb), 0.32);
  letter-spacing: 0.005em;
  position: relative; z-index: 2;
  animation: bp-symbol-in .65s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}

#ball-popup .bp-label {
  font-family: var(--font-num);
  font-size: clamp(2.4rem, 7vw, 6rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin-top: clamp(8px, 2vh, 24px);
  text-align: center;
  line-height: 0.95;
  position: relative; z-index: 2;
}

#ball-popup .bp-sub {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.8vw, 1.6rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-hi);
  margin-top: clamp(10px, 1.6vh, 22px);
  text-align: center;
  position: relative; z-index: 2;
  min-height: 1.2em;   /* reserve space so layout doesn't jump when empty */
}

#ball-popup .bp-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: linear-gradient(90deg,
    rgba(var(--bp-accent-rgb), 0) 0%,
    rgba(var(--bp-accent-rgb), 1) 50%,
    rgba(var(--bp-accent-rgb), 0) 100%);
  transform-origin: 50% 50%;
  animation: bp-bar-sweep 2s ease-in-out infinite;
}

/* ── Balls remaining badge — bottom-left of popup card ────── */
#ball-popup .bp-balls-badge {
  position: absolute;
  bottom: clamp(16px, 3vh, 36px);
  left:   clamp(16px, 3vw, 40px);
  width:  min(24vw, 30vh);
  height: min(24vw, 30vh);
  border-radius: 50%;
  background: linear-gradient(145deg, #f97316 0%, #ea580c 100%);
  border: min(0.35vw, 0.5vh) solid rgba(255,255,255,0.9);
  box-shadow: 0 0 30px rgba(249,115,22,0.5), 0 4px 16px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
#ball-popup .bp-balls-badge:not(.hidden) {
  opacity: 0.88;
  transform: scale(1);
}
.bp-balls-badge__num {
  font-family: var(--font-num);
  font-size: min(13vw, 17vh);
  font-weight: 900;
  line-height: 0.88;
  color: #000000;
  letter-spacing: -0.02em;
}
.bp-balls-badge__word {
  font-family: var(--font-num);
  font-size: min(2vw, 2.6vh);
  font-weight: 900;
  color: #000000;
  letter-spacing: 0.04em;
  margin-top: 3px;
}

/* ── Symbol size override for word-label kinds ───────────── */
/* Wicket: "WICKET" big on top, type below */
#ball-popup[data-kind="wicket"] .bp-symbol {
  font-size: clamp(120px, 32vh, 460px);
  line-height: 0.9;
  text-align: center;
  letter-spacing: 0.025em;
}
#ball-popup[data-kind="wicket"] .bp-label {
  font-size: clamp(3rem, 11vw, 9rem);
}
/* Wide: single word — large, matching no-ball treatment */
#ball-popup[data-kind="wide"] .bp-symbol {
  font-size: clamp(120px, 32vh, 460px);
  line-height: 0.9;
  text-align: center;
  letter-spacing: 0.025em;
}
#ball-popup[data-kind="wide"] .bp-label {
  font-size: clamp(3rem, 11vw, 9rem);
}
/* No-ball: "NO BALL" fills the screen — bigger and bolder */
#ball-popup[data-kind="extra"] .bp-symbol {
  font-size: clamp(120px, 32vh, 460px);
  line-height: 0.9;
  text-align: center;
  letter-spacing: 0.025em;
}
/* Sub-label ("FRONT FOOT" etc) also scaled up for extra kind */
#ball-popup[data-kind="extra"] .bp-label {
  font-size: clamp(3rem, 11vw, 9rem);
}

/* ── Variants ────────────────────────────────────────────── */

#ball-popup[data-kind="runs"] {
  --bp-accent:     var(--emerald);
  --bp-accent-rgb: 16,185,129;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(16,185,129,0.32) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="dot"] {
  --bp-accent:     #94a3b8;
  --bp-accent-rgb: 148,163,184;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(148,163,184,0.18) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="wide"] {
  --bp-accent:     var(--blue);
  --bp-accent-rgb: 59,130,246;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(59,130,246,0.32) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="six"] {
  --bp-accent:     var(--amber);
  --bp-accent-rgb: 245,158,11;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(245,158,11,0.36) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="boundary"] {
  --bp-accent:     #06b6d4;
  --bp-accent-rgb: 6,182,212;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(6,182,212,0.34) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="wicket"] {
  --bp-accent:     var(--crimson);
  --bp-accent-rgb: 220,38,38;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(220,38,38,0.40) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="extra"] {
  --bp-accent:     var(--amber);
  --bp-accent-rgb: 245,158,11;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(245,158,11,0.30) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="penalty"] {
  --bp-accent:     #f43f5e;
  --bp-accent-rgb: 244,63,94;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(244,63,94,0.30) 0%,
                       rgba(7,8,15,0.96) 60%);
}

/* ═══════════════ POWERPLAY OVER treatment ═══════════════════
   When a ball is scored during a powerplay over, the ball_scored SSE event
   carries bat_pp / bowl_pp and main.js sets data-pp on #ball-popup. We layer
   an explosive animated frame + badge ON TOP of the normal per-kind colours,
   so the score symbol itself stays its usual readable colour.
   Batting PP = fiery orange (it doubles runs); Bowling PP = electric cyan. */
#ball-popup[data-pp]        { --pp-rgb: 249,115,22; }   /* fiery (default/bat) */
#ball-popup[data-pp="bowl"] { --pp-rgb: 34,211,238; }   /* electric (bowling)  */

/* Pulsing fiery ring + supercharged outer glow on the card */
#ball-popup[data-pp] .bp-card {
  border-color: rgba(var(--pp-rgb), 0.9);
  animation: bp-card-in .55s cubic-bezier(0.22, 1.16, 0.36, 1) both,
             pp-ring-pulse 1.05s ease-in-out infinite;
}

/* Energise the radial wash + halo behind the symbol */
#ball-popup[data-pp] .bp-backdrop {
  background:
    radial-gradient(ellipse at 50% 30%,
      rgba(var(--pp-rgb), 0.42) 0%, rgba(7,8,15,0.96) 60%),
    rgba(7,8,15,0.92);
}
#ball-popup[data-pp] .bp-glow {
  background: radial-gradient(ellipse at center,
    rgba(var(--pp-rgb), 0.78) 0%, rgba(var(--pp-rgb), 0) 65%);
  animation: bp-glow-pulse 1.05s ease-in-out infinite;
}

/* Recolour the bottom sweep bar to the PP accent */
#ball-popup[data-pp] .bp-bar {
  background: linear-gradient(90deg,
    transparent, rgba(var(--pp-rgb), 0.95), transparent);
}

/* "⚡ POWERPLAY ⚡" badge pinned across the top of the card */
#ball-popup[data-pp] .bp-card::before {
  content: "\26A1 POWERPLAY \26A1";
  position: absolute;
  top: clamp(16px, 3vh, 40px);
  left: 50%;
  z-index: 6;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(1rem, 2.2vw, 2rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.4em 1.15em;
  border-radius: 999px;
  white-space: nowrap;
  background: linear-gradient(90deg,
    rgba(var(--pp-rgb), 0.95), rgba(var(--pp-rgb), 0.6));
  box-shadow:
    0 0 32px rgba(var(--pp-rgb), 0.85),
    0 6px 24px rgba(0,0,0,0.5);
  transform: translateX(-50%);
  animation: pp-badge-in .5s cubic-bezier(0.22, 1.4, 0.36, 1) both,
             pp-badge-flicker 1.5s ease-in-out infinite .5s;
}
#ball-popup[data-pp="bat"]  .bp-card::before { content: "\26A1 BATTING POWERPLAY \26A1"; }
#ball-popup[data-pp="bowl"] .bp-card::before { content: "\26A1 BOWLING POWERPLAY \26A1"; }

@keyframes pp-ring-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(var(--pp-rgb), 0.85) inset,
      0 0 0 6px rgba(var(--pp-rgb), 0.22),
      0 30px 120px rgba(0,0,0,0.7),
      0 0 140px rgba(var(--pp-rgb), 0.55);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(var(--pp-rgb), 1) inset,
      0 0 0 11px rgba(var(--pp-rgb), 0.38),
      0 30px 120px rgba(0,0,0,0.7),
      0 0 210px rgba(var(--pp-rgb), 0.9);
  }
}
@keyframes pp-badge-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(0.8); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);   }
}
@keyframes pp-badge-flicker {
  0%, 100% { filter: brightness(1);    }
  50%      { filter: brightness(1.28); }
}

/* ── Animations ──────────────────────────────────────────── */

@keyframes bp-card-in {
  0%   { transform: scale(0.86) translateY(18px); opacity: 0; }
  60%  { transform: scale(1.02) translateY(0);    opacity: 1; }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}

@keyframes bp-symbol-in {
  0%   { transform: scale(0.45); opacity: 0; filter: blur(14px); }
  70%  { transform: scale(1.12); opacity: 1; filter: blur(0);    }
  100% { transform: scale(1);    opacity: 1; filter: blur(0);    }
}

/* Pop & shockwave: an accent-coloured ring that bursts out on every ball. */
.bp-ring {
  position: absolute; top: 50%; left: 50%;
  width: clamp(220px, 34vh, 520px); height: clamp(220px, 34vh, 520px);
  border-radius: 50%;
  border: 4px solid rgba(var(--bp-accent-rgb), 0.7);
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0; pointer-events: none;
}
.bp-ring.go { animation: bp-ring-pulse 0.9s ease-out; }
@keyframes bp-ring-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(2);   opacity: 0;    }
}

/* Confetti burst (5 & 7). Pieces are positioned + animated from JS. */
.bp-confetti { position: absolute; inset: 0; pointer-events: none; }
.bp-confetti span {
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; border-radius: 3px;
  opacity: 0; will-change: transform, opacity;
}

/* The celebration word stays the same green as the number (no gold). */
#ball-popup.bp-celebrate .bp-eyebrow {
  color: var(--bp-accent);
  text-shadow: 0 0 28px rgba(var(--bp-accent-rgb), 0.5);
}

@keyframes bp-glow-pulse {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1);    }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.08); }
}

@keyframes bp-bar-sweep {
  0%   { transform: scaleX(0.3); opacity: 0.3; }
  50%  { transform: scaleX(1);   opacity: 1;   }
  100% { transform: scaleX(0.3); opacity: 0.3; }
}


/* ═══════════════════════════════════════════════════════════════
   BANNERS
   ═══════════════════════════════════════════════════════════════ */

.overlay-banner {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  z-index: 1500;
}

.banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0;
  font-family: var(--font-ui);
  font-size: clamp(3vh, 6vh, 8vh);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.banner-inner i {
  font-size: 0.85em;
}

.strike-banner {
  height: 20vh;
  background:
    linear-gradient(rgba(185,15,15,0.92), rgba(185,15,15,0.92)),
    url('assets/img/backdrop/sc_backdrop.jpg') center/cover;
  border-top: 2px solid rgba(255,255,255,0.25);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.strike-banner .banner-inner {
  font-size: clamp(6vh, 10vh, 13vh);
  font-weight: 900;
  color: var(--white);
  text-align: center;
  line-height: 1.02;
  letter-spacing: -0.5px;
  white-space: nowrap;
}

/* Clean, text-only strike banner — drop the warning icon */
.strike-banner .banner-inner .fa { display: none; }

.edit-banner {
  height: 28vh;
  background: rgba(150,70,0,0.94);
  backdrop-filter: blur(8px);
  border-top: 2px solid rgba(255,255,255,0.2);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── BALLS REMAINING — bottom-left quarter-circle ───────────────
   Sits in the screen corner after the ball popup closes.
   flat edges at left + bottom, curved at top-right.
   Opacity managed by JS fadeIn / fadeOut.
   ─────────────────────────────────────────────────────────── */
#balls-remaining-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1500;
  pointer-events: none;
  opacity: 0;        /* JS fadeIn/fadeOut own opacity */
  transition: opacity 0.35s ease;
}

.balls-bubble {
  width:  min(44vw, 50vh);
  height: min(44vw, 50vh);
  /* Quarter-circle: flat bottom + left edges, curved top-right */
  border-radius: 0 100% 0 0;
  /* Semi-transparent so the board frosts through (paired with the blur). */
  background: rgba(255,122,0,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 4px solid #ffffff;
  border-right: 4px solid #ffffff;
  display: flex;
  flex-direction: column;
  /* push content into the solid bottom-left corner */
  align-items: flex-start;
  justify-content: flex-end;
  padding-bottom: min(2.8vw, 3.3vh);
  padding-left:   min(2.8vw, 3.3vh);
  gap: 0;
}

/* The big number */
.bb-num {
  font-family: var(--font-num);
  font-size: min(36vw, 42vh);
  font-weight: 900;
  line-height: 0.85;
  color: #ffffff;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 24px rgba(0,0,0,0.6);
}

/* Label + sub hidden — number only */
.bb-text { display: none; }
.bb-word { display: none; }
.bb-sub  { display: none; }


/* ═══════════════════════════════════════════════════════════════
   COURT SPLASH
   ═══════════════════════════════════════════════════════════════ */

#court-splash {
  background: rgba(7,8,15,0.96);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
}

.court-splash-inner {
  text-align: center;
}

.court-splash-label {
  font-family: var(--font-ui);
  font-size: clamp(0.8rem, 1.5vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--blue);
  margin-bottom: 12px;
}

.court-splash-name {
  font-family: var(--font-num);
  font-size: clamp(8vh, 18vh, 22vh);
  color: var(--white);
  letter-spacing: 0.04em;
  text-shadow: 0 0 60px rgba(59,130,246,0.3);
}

/* Court label — floating badge, top-left corner */
.court-label {
  position: fixed;
  top: 10px;
  left: 10px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 3px 8px;
  cursor: pointer;
  z-index: 900;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  /* Float above everything, never shifts layout */
  pointer-events: auto;
}
.court-label:hover {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
}
.court-label-sep { margin: 0 4px; opacity: 0.35; }


/* ═══════════════════════════════════════════════════════════════
   BREAK OVERLAY
   ═══════════════════════════════════════════════════════════════ */

#break-overlay {
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brk-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 7, 16, 0.88);
  backdrop-filter: blur(22px) saturate(0.5);
  -webkit-backdrop-filter: blur(22px) saturate(0.5);
}

.brk-card {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 680px;
  padding: 0 48px;
  text-align: center;
  user-select: none;
}

.brk-title {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--white);
  margin-bottom: clamp(12px, 2.5vh, 28px);
  line-height: 1.1;
}

.brk-clock {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 20px);
  line-height: 1;
  margin-bottom: clamp(12px, 2.5vh, 28px);
}

.brk-seg {
  font-family: var(--font-num);
  font-size: clamp(18vw, 28vh, 34vh);
  color: var(--white);
  letter-spacing: -0.03em;
  text-shadow:
    0 0 80px rgba(59,130,246,0.25),
    0 4px 24px rgba(0,0,0,0.8);
  min-width: 2ch;
  text-align: center;
  transition: color 0.3s, text-shadow 0.3s;
}

.brk-seg.urgent {
  color: var(--t-red);
  animation: brk-urgent 0.55s ease-in-out infinite alternate;
}
@keyframes brk-urgent {
  from { text-shadow: 0 0 20px rgba(239,68,68,0.2), 0 4px 20px rgba(0,0,0,0.8); }
  to   { text-shadow: 0 0 80px rgba(239,68,68,0.8), 0 4px 20px rgba(0,0,0,0.8); }
}

.brk-colon {
  font-family: var(--font-num);
  font-size: clamp(14vw, 22vh, 28vh);
  color: rgba(255,255,255,0.3);
  margin-bottom: clamp(4px, 1vh, 14px);
  animation: brk-colon 1s step-end infinite;
}
@keyframes brk-colon {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.08; }
}

.brk-next {
  font-family: var(--font-ui);
  font-size: clamp(0.7rem, 1.8vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5b8fff;
  margin-bottom: clamp(16px, 3.5vh, 40px);
  min-height: 1.4em;
}

.brk-track {
  width: 100%; height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}

.brk-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #1d4ed8, #60a5fa);
  border-radius: 2px;
  transition: width 1s linear;
}


/* ═══════════════════════════════════════════════════════════════
   CRICKET EVENT NOTIFICATION POPUP
   ═══════════════════════════════════════════════════════════════ */

#event-popup {
  z-index: 8000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 18, 0.72);
  backdrop-filter: blur(28px) saturate(0.55);
  -webkit-backdrop-filter: blur(28px) saturate(0.55);
}

#event-popup.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

#event-popup:not(.hidden) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.evp-card {
  background: rgba(10, 14, 32, 0.88);
  border: 1px solid rgba(96, 165, 250, 0.22);
  box-shadow:
    0 0 0 1px rgba(96,165,250,0.06),
    0 24px 80px rgba(0,0,0,0.8),
    0 0 120px rgba(59,130,246,0.08);
  border-radius: 24px;
  padding: clamp(32px, 6vh, 70px) clamp(48px, 9vw, 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 20px);
  text-align: center;
  animation: evp-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes evp-pop {
  from { transform: scale(0.82); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.evp-icon {
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 1;
  filter: drop-shadow(0 0 20px rgba(96,165,250,0.5));
}

.evp-label {
  font-family: var(--font-ui);
  font-size: clamp(0.65rem, 1.4vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #60a5fa;
}

.evp-name {
  font-family: var(--font-ui);
  font-size: clamp(1.4rem, 3.5vw, 2.8rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  line-height: 1.1;
}

/* ═══════════════════════════════════════════════════════════════
   SLEEP MODE
   ═══════════════════════════════════════════════════════════════ */

.sleep-overlay {
  z-index: 10000;
  overflow: hidden;
  background: #000;
}

#sleep-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.sleep-carousel {
  position: relative;
  width: 100%; height: 100vh;
  overflow: hidden;
}

.sleep-slides {
  display: flex;
  height: 100%;
  transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.sleep-slide {
  min-width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}

.sleep-slide--ad img {
  width: 100%; height: 100vh;
  object-fit: cover; object-position: center;
}

.sleep-table {
  width: 100%; height: 100vh;
  display: flex; flex-direction: column;
}

.sleep-header {
  flex: 0 0 25vh;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7,8,15,0.7);
  border-bottom: 2px solid var(--blue);
}

.sleep-date {
  font-family: var(--font-ui);
  font-size: clamp(2rem, 4vw, 5rem);
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.04em;
}

.sleep-body {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

.sleep-team {
  font-family: var(--font-ui);
  font-weight: 800;
  color: var(--white);
  text-shadow: 3px 3px rgba(0,0,0,0.8);
  line-height: 1.2;
  text-align: center;
}

.sleep-vs {
  font-family: var(--font-ui);
  font-size: clamp(1.2rem, 2.5vw, 3rem);
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.2em;
  padding: 14px 0;
}


/* ── Fullscreen fixture card (replaces sleep-table layout) ── */
.sleep-slide--fixture {
  background: var(--bg);
}

.slp-fx {
  width: 100vw; height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 8vw 14vh;   /* heavier bottom padding nudges the whole card up */
  gap: 0;
  position: relative;
  overflow: hidden;
}

/* subtle radial glow behind the card */
.slp-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    rgba(59,130,246,0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* wavy watermark — same sine-wave motif as the stream overlay bars */
@keyframes slpWave {
  from { background-position-x: 0px; }
  to   { background-position-x: 800px; }
}
.slp-fx::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Cpath d='M0 200 C100 100 300 100 400 200 C500 300 700 300 800 200' stroke='white' stroke-width='3' fill='none'/%3E%3Cpath d='M0 280 C100 180 300 180 400 280 C500 380 700 380 800 280' stroke='white' stroke-width='2' fill='none' opacity='0.5'/%3E%3Cpath d='M0 120 C100 20 300 20 400 120 C500 220 700 220 800 120' stroke='white' stroke-width='1.5' fill='none' opacity='0.3'/%3E%3Cpath d='M0 340 C100 240 300 240 400 340 C500 440 700 440 800 340' stroke='white' stroke-width='1' fill='none' opacity='0.2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 800px 400px;
  background-position-y: center;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  animation: slpWave 20s linear infinite;
}

/* lift all direct children above both pseudo-elements */
.slp-fx > * { position: relative; z-index: 1; }

.slp-fx-badge {
  font-family: var(--font-ui);
  font-size: clamp(0.7rem, 1.2vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--blue);
  border: 1px solid rgba(59,130,246,0.4);
  border-radius: 50px;
  padding: 5px 18px;
  margin-bottom: clamp(14px, 3vh, 28px);
  text-transform: uppercase;
}

.slp-fx-when {
  font-family: var(--font-ui);
  font-size: clamp(3.5rem, 9vw, 9rem);
  font-weight: 900;
  color: #fbbf24;                              /* amber header — distinct from white team names */
  letter-spacing: 0.04em;
  margin-bottom: clamp(28px, 6vh, 64px);
  text-align: center;
  text-shadow: 0 0 34px rgba(251,191,36,0.40); /* soft glow for legibility + header pop */
}

.slp-fx-teams {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.slp-fx-team {
  font-family: var(--font-ui);
  font-weight: 800;
  color: var(--white);
  text-align: center;
  line-height: 1.0;
  letter-spacing: -0.01em;
  max-width: 90vw;
  word-break: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.32em;
}

/* Team logo before the name on the fixture card — a fixed 100×100 circle,
   cropped to fill (same treatment as the Admin Portal / Mobile App). */
.slp-fx-logo {
  width: 0.75em;            /* ~cap-height of the team name (matches the annotated circle) */
  height: 0.75em;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}

.slp-fx-vs {
  font-family: var(--font-num);
  font-size: clamp(1.8rem, 4vw, 4.5rem);
  color: var(--blue);
  letter-spacing: 0.18em;
  padding: clamp(8px, 2vh, 20px) 0;
  opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════
   COURT DIALOG
   ═══════════════════════════════════════════════════════════════ */

dialog {
  border: none;
  border-radius: 14px;
  padding: 0;
  max-width: 480px;
  width: 90%;
  background: #12141f;
  color: var(--white);
  box-shadow: 0 24px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.07);
}

dialog::backdrop {
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}

.dialog-header h3 {
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.dialog-close {
  background: none; border: none;
  color: var(--muted); font-size: 1.2rem;
  cursor: pointer; padding: 4px 8px;
  border-radius: 4px; line-height: 1;
  transition: color 0.2s, background 0.2s;
}
.dialog-close:hover { color: var(--white); background: var(--surface-2); }

.dialog-body {
  padding: 0;
  min-height: 80px;
  background: #0e1019;
  font-size: 1.4rem;
}

.dialog-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.btn-reset {
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.35);
  color: #a5b4fc;
  padding: 9px 18px;
  border-radius: 7px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-reset:hover {
  background: rgba(99,102,241,0.22);
  border-color: rgba(99,102,241,0.6);
}

.btn-danger {
  background: rgba(220,38,38,0.12);
  border: 1px solid rgba(220,38,38,0.4);
  color: #fca5a5;
  padding: 9px 22px;
  border-radius: 7px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.btn-danger:hover {
  background: rgba(220,38,38,0.22);
  border-color: rgba(220,38,38,0.7);
}


/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE  —  class names mirror SGS app exactly
   ═══════════════════════════════════════════════════════════════ */

.login-shell {
  min-height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  padding: 24px;
  overflow: auto;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: #10121d;
  border: 1px solid var(--border-md);
  border-radius: 18px;
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.login-card__logo {
  max-width: 180px;
  height: auto;
  margin-bottom: 4px;
}

.login-card__title {
  font-family: var(--font-ui);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.08em;
  line-height: 1;
  margin: 0;
}

.login-card__sub {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
  margin: 0;
  letter-spacing: 0.02em;
}

.login-card input[type="text"] {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border-md);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  text-align: center;
  letter-spacing: 0.2em;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-top: 6px;
}
.login-card input[type="text"]::placeholder { color: var(--muted); letter-spacing: 0.1em; }
.login-card input[type="text"]:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* ── Button system (mirrors SGS .btn) ─────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, opacity 0.18s;
  letter-spacing: 0.04em;
  white-space: nowrap;
  user-select: none;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.btn--primary {
  background: var(--blue);
  color: var(--white);
}
.btn--primary:hover:not(:disabled) {
  background: #2563eb;
  box-shadow: 0 0 20px rgba(59,130,246,0.3);
}

.btn--block { width: 100%; }

.btn--lg { padding: 14px 20px; font-size: 1rem; }

/* ── Error message ────────────────────────────────────────────── */
.err {
  font-family: var(--font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  color: #fca5a5;
  min-height: 20px;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ── Toast notifications ──────────────────────────────────────── */
.toast-host {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  background: #1e2028;
  color: var(--white);
  border: 1px solid var(--border-md);
  border-radius: 8px;
  padding: 12px 20px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  pointer-events: all;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  animation: toast-in 0.18s ease;
}
.toast.is-leaving { animation: toast-out 0.2s ease forwards; }
.toast--warn  { border-color: rgba(249,115,22,0.5); color: #fed7aa; }
.toast--error { border-color: rgba(239,68,68,0.5);  color: #fca5a5; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } }

/* ── Court picker rows (rendered from JSON by app.js) ───────── */
.picker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s;
  gap: 12px;
}
.picker-row:hover { background: rgba(255,255,255,0.05); }
.picker-row:last-child { border-bottom: none; }

.picker-name {
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.01em;
}

.picker-active {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue);
  background: var(--blue-dim);
  border: 1px solid rgba(59,130,246,0.35);
  padding: 3px 9px;
  border-radius: 3px;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════
   GAME COMPLETE OVERLAY
   ═══════════════════════════════════════════════════════════════ */

#game-complete-overlay {
  z-index: 3500;         /* above break overlay */
  display: flex;
  align-items: center;
  justify-content: center;
}

.gc-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 48px;
  text-align: center;
  user-select: none;
  animation: gc-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes gc-enter {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* Checkmark icon */
.gc-check {
  color: var(--emerald);
  width: clamp(50px, 8vh, 90px);
  height: clamp(50px, 8vh, 90px);
  margin-bottom: clamp(12px, 2.5vh, 28px);
  animation: gc-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes gc-pop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1);   }
}

.gc-check svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 20px rgba(16,185,129,0.6));
}

/* "GAME" — smaller label above */
.gc-title {
  font-family: var(--font-ui);
  font-size: clamp(0.9rem, 2.2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.55);
  margin-bottom: clamp(4px, 1vh, 10px);
}

/* "COMPLETED" — the big word */
.gc-word {
  font-family: var(--font-num);
  font-size: clamp(14vw, 22vh, 28vh);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--white);
  text-shadow:
    0 0 80px rgba(16,185,129,0.25),
    0 4px 24px rgba(0,0,0,0.8);
  margin-bottom: clamp(20px, 4vh, 48px);
}

/* Thin emerald accent bar */
.gc-bar {
  width: min(360px, 70vw);
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--emerald), transparent);
  border-radius: 2px;
  box-shadow: 0 0 16px rgba(16,185,129,0.3);
  margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════
   APP VERSION BADGE (court-dialog footer)
   ═══════════════════════════════════════════════════════════════ */
.dialog-footer-spacer { flex: 1; }
.app-version {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}


/* ═══════════════════════════════════════════════════════════════
   BOWLER OVER INDICATOR — "(2)" suffix beside bowler name
   ═══════════════════════════════════════════════════════════════ */
.cb-bowl-over {
  font-size: 0.55em;        /* relative to parent .cb-p-name */
  font-weight: 600;
  color: var(--muted-hi);
  letter-spacing: 0.04em;
  margin-left: 0.4em;
  vertical-align: middle;
}


/* ═══════════════════════════════════════════════════════════════
   BALL-POPUP — EVENT VARIANTS (text-only, no big symbol)
   Used by BallPopup.showEvent() for over-up, innings-over, game-over,
   new bowler, new batter. Repurposes the same overlay as ball-scored
   so the visual language stays consistent.
   ═══════════════════════════════════════════════════════════════ */

#ball-popup[data-kind="event-bowler"] {
  --bp-accent:     var(--blue);
  --bp-accent-rgb: 59,130,246;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(59,130,246,0.32) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="event-batter"] {
  --bp-accent:     var(--emerald);
  --bp-accent-rgb: 16,185,129;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(16,185,129,0.32) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="over-up"] {
  --bp-accent:     #06b6d4;
  --bp-accent-rgb: 6,182,212;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(6,182,212,0.32) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="innings-over"] {
  --bp-accent:     var(--amber);
  --bp-accent-rgb: 245,158,11;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(245,158,11,0.34) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="game-over"] {
  --bp-accent:     #f59e0b;
  --bp-accent-rgb: 245,158,11;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(245,158,11,0.42) 0%,
                       rgba(7,8,15,0.96) 60%);
}

/* Hide the big symbol slot in event mode — these popups are text-only. */
#ball-popup[data-kind="event-bowler"] .bp-symbol,
#ball-popup[data-kind="event-batter"] .bp-symbol,
#ball-popup[data-kind="over-up"]      .bp-symbol,
#ball-popup[data-kind="innings-over"] .bp-symbol,
#ball-popup[data-kind="game-over"]    .bp-symbol {
  display: none;
}

/* Title (.bp-label) becomes the headline — bigger, more spacing. */
#ball-popup[data-kind="event-bowler"] .bp-label,
#ball-popup[data-kind="event-batter"] .bp-label,
#ball-popup[data-kind="over-up"]      .bp-label,
#ball-popup[data-kind="innings-over"] .bp-label,
#ball-popup[data-kind="game-over"]    .bp-label {
  font-size: clamp(2.8rem, 7vw, 7rem);
  letter-spacing: 0.12em;
  margin-top: 0;
  text-shadow: 0 0 50px rgba(var(--bp-accent-rgb), 0.45);
}

/* Player name (.bp-sub) — BIG, in numerals font, accent-tinted glow. */
#ball-popup[data-kind="event-bowler"] .bp-sub,
#ball-popup[data-kind="event-batter"] .bp-sub {
  font-family: var(--font-num);
  font-size: clamp(4rem, 11vw, 11rem);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--white);
  opacity: 1;
  margin-top: clamp(20px, 4vh, 50px);
  min-height: 0;
  text-shadow:
    0 0 60px rgba(var(--bp-accent-rgb), 0.55),
    0 4px 24px rgba(0,0,0,0.5);
}

/* Game Over gets a dedicated long display — bump duration via JS too. */
#ball-popup[data-kind="game-over"] .bp-label {
  font-size: clamp(3.4rem, 9vw, 9rem);
}


/* ═══════════════════════════════════════════════════════════════
   BALL-POPUP — bat-first + game-reset variants
   ═══════════════════════════════════════════════════════════════ */

#ball-popup[data-kind="bat-first"] {
  --bp-accent:     var(--emerald);
  --bp-accent-rgb: 16,185,129;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(16,185,129,0.36) 0%,
                       rgba(7,8,15,0.96) 60%);
}

#ball-popup[data-kind="game-reset"] {
  --bp-accent:     var(--crimson);
  --bp-accent-rgb: 220,38,38;
  --bp-bg-grad:    radial-gradient(ellipse at 50% 30%,
                       rgba(220,38,38,0.30) 0%,
                       rgba(7,8,15,0.96) 60%);
}

/* Hide bp-symbol for these too — they're text-only modals. */
#ball-popup[data-kind="bat-first"]  .bp-symbol,
#ball-popup[data-kind="game-reset"] .bp-symbol {
  display: none;
}

/* Title sizing matches the other event variants. */
#ball-popup[data-kind="bat-first"]  .bp-label,
#ball-popup[data-kind="game-reset"] .bp-label {
  font-size: clamp(2.8rem, 7vw, 7rem);
  letter-spacing: 0.12em;
  margin-top: 0;
  text-shadow: 0 0 50px rgba(var(--bp-accent-rgb), 0.45);
}

/* bat-first sub = team name in big numerals, accent-glowed. */
#ball-popup[data-kind="bat-first"] .bp-sub {
  font-family: var(--font-num);
  font-size: clamp(4rem, 11vw, 11rem);
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--white);
  opacity: 1;
  margin-top: clamp(20px, 4vh, 50px);
  min-height: 0;
  text-shadow:
    0 0 60px rgba(var(--bp-accent-rgb), 0.55),
    0 4px 24px rgba(0,0,0,0.5);
}