/* Home page court TV: the BALL OS Scoreboard (src/client/components/Scoreboard.css in the app),
   copied as-is apart from living inside a 16:9 frame instead of filling the window. */
.tvdemo { position: relative; padding: clamp(6px, 1vw, 12px); border-radius: clamp(10px, 1.4vw, 18px); background: linear-gradient(160deg, #2a2c31, #0b0c0f 30%, #08090b 70%, #24262b); box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 40px 90px -30px rgba(0,0,0,.85); }
.tvdemo__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #000; }
.tvdemo__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 75%, rgba(255,255,255,.03)); }
.tvdemo__stand { width: 22%; height: 10px; margin: 0 auto; background: linear-gradient(180deg, #1c1e22, #0b0c0f); border-radius: 0 0 8px 8px; }
.tvdemo__cap { margin-top: 8px; text-align: center; font: 500 10.5px "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: rgba(239,236,228,.45); }
.sb {
  --sb-amber: #ff9f1c;
  --sb-cyan:  #00e5ff;
  --sb-red:   #ff3b5c;
  --sb-text:  #ffffff;
  --sb-text-2: #8a9299;
  --sb-text-3: #5a6168;
  --sb-line:  rgba(255, 255, 255, 0.10);

  position: absolute;
  inset: 0;
  background: #000;
  color: var(--sb-text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  overflow: hidden;
  container-type: inline-size;
}

/* ─── Ambient background tint — shifts with warning state ─── */
.sb__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(0, 229, 255, 0.04) 0%,
    transparent 50%);
  transition: background 800ms ease;
  pointer-events: none;
}
.sb.warn-amber .sb__bg {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 159, 28, 0.06) 0%,
    transparent 50%);
}
.sb.warn-red .sb__bg {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 59, 92, 0.08) 0%,
    transparent 50%);
}

/* ─── Connection indicator (top-left) ─── */
.sb__top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 1.5% 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.3cqw;
  letter-spacing: 0.4cqw;
  color: var(--sb-text-3);
  font-weight: 700;
  z-index: 5;
}
.sb__top b {
  color: var(--sb-cyan);
  transition: color 600ms;
}
.sb.warn-amber .sb__top b { color: var(--sb-amber); }
.sb.warn-red   .sb__top b { color: var(--sb-red); }

/* ─── Main grid: two team panels + center gauge ─── */
.sb__main {
  position: absolute;
  inset: 7% 3% 12% 3%;       /* bottom raised to make room for shot clock */
  display: grid;
  grid-template-columns: 1.15fr 1fr 1.15fr;
  gap: 1.8%;
  align-items: stretch;
}

/* ═══════════════════════════════════════════════════════════════════
   Team panels — REORGANIZED
   Top: name banner   |   Middle: score hero   |   Bottom: F/TO/BONUS
   ═══════════════════════════════════════════════════════════════════ */

.sb__team {
  --tc: #888;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.01));
  border: 1px solid var(--sb-line);
  position: relative;
  overflow: hidden;
  transition: box-shadow 400ms, border-color 400ms;
}

/* Glowing top bar in team color */
.sb__team::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    var(--tc),
    transparent);
  box-shadow: 0 0 25px var(--tc);
  z-index: 2;
  transition: height 200ms, box-shadow 200ms;
}

/* Side-in sweep animation when team scores — directional based on home/away */
.sb__team.flash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
}
.sb__team--home.flash::after {
  background: linear-gradient(90deg,
    var(--tc) 0%,
    rgba(0,0,0,0) 60%);
  animation: sweep-from-left 1100ms ease-out forwards;
}
.sb__team--away.flash::after {
  background: linear-gradient(270deg,
    var(--tc) 0%,
    rgba(0,0,0,0) 60%);
  animation: sweep-from-right 1100ms ease-out forwards;
}
@keyframes sweep-from-left {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: translateX(100%); opacity: 0; }
}
@keyframes sweep-from-right {
  0%   { transform: translateX(100%); opacity: 0; }
  20%  { opacity: 0.85; }
  100% { transform: translateX(-100%); opacity: 0; }
}
.sb__team.flash {
  box-shadow: 0 0 60px 2px var(--tc), inset 0 0 40px rgba(255,255,255,0.05);
  border-color: var(--tc);
}
.sb__team.flash::before {
  height: 4px;
  box-shadow: 0 0 40px var(--tc), 0 0 80px var(--tc);
}

/* Team name banner — top of the box */
.sb__team-name-banner {
  text-align: center;
  padding: 1.2cqw 1cqw 1cqw;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.06),
    transparent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 3;
}
.sb__team-short {
  font-family: "Orbitron", "Archivo Black", sans-serif;
  font-weight: 900;
  font-size: 6.5cqw;
  letter-spacing: 0.4cqw;
  color: var(--tc);
  text-shadow: 0 0 35px var(--tc);
  line-height: 1;
}

/* Score hero — middle, takes up the most space */
.sb__team-score-wrap {
  flex: 1;
  min-height: 0;          /* let the score box shrink inside the flex column
                             instead of forcing the panel to clip it */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1cqw 0;
  position: relative;
  z-index: 3;
  /* Become the query container for the score, so its cqw/cqh resolve
     against THIS panel-sized box — not the full-width board (.sb). That
     was the bug: the score's cqw measured the whole scoreboard, so even
     a 2-digit score overflowed the ~1/3-width panel and clipped. */
  container-type: size;
}
.sb__team-score {
  font-family: "Orbitron", "Archivo Black", sans-serif;
  font-weight: 900;
  /* Sized against the score wrapper's own box (container-type: size on
     .sb__team-score-wrap), NOT the whole board. min(width, height) caps
     the digits by whichever panel dimension is tighter, so 1–4 digits —
     including 100+ — never crop on any aspect ratio. [data-digits] steps
     narrow wider scores so they keep their margin. */
  font-size: min(60cqw, 92cqh);
  line-height: 0.95;      /* tight line box without clipping glyph tops/bottoms */
  letter-spacing: -0.02em;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-shadow: 0 0 90px rgba(255, 255, 255, 0.3);
  transition: transform 200ms ease-out, font-size 200ms ease-out;
}
.sb__team-score[data-digits="1"] { font-size: min(72cqw, 92cqh); }
.sb__team-score[data-digits="3"] { font-size: min(42cqw, 92cqh); }
.sb__team-score[data-digits="4"] { font-size: min(32cqw, 92cqh); }
.sb__team.flash .sb__team-score {
  animation: score-bump 700ms ease-out 100ms;
}
@keyframes score-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.12);
         text-shadow: 0 0 90px var(--sb-amber), 0 0 180px var(--tc); }
  100% { transform: scale(1); }
}

/* F/TO/BONUS footer strip — bottom */
.sb__team-meta {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1cqw 1.5cqw;
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  gap: 1cqw;
  position: relative;
  z-index: 3;
}
.sb__meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3cqw;
}
.sb__meta-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 1cqw;
  letter-spacing: 0.25cqw;
  color: var(--sb-text-2);
  font-weight: 700;
  text-transform: uppercase;
}
.sb__meta-val {
  font-family: "Orbitron", "Archivo Black", sans-serif;
  font-size: 2.3cqw;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.sb__bonus-active .sb__meta-label,
.sb__bonus-active .sb__meta-val {
  color: var(--sb-amber);
  text-shadow: 0 0 12px var(--sb-amber);
}
.sb__bonus-active .sb__meta-val {
  animation: meta-blink 1.2s steps(2) infinite;
}
@keyframes meta-blink { 50% { opacity: 0.3; } }

/* ═══════════════════════════════════════════════════════════════════
   Center gauge — now contains ONLY quarter + clock
   (Shot clock has moved to its own bottom-center pill)
   ═══════════════════════════════════════════════════════════════════ */

.sb__center {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sb__gauge-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.sb__gauge-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The ring sits near the viewBox edge and its drop-shadow bloom extends
     past it. SVG viewports clip to their bounds by default, which sliced the
     glow off at the cardinal points — allow it to paint outside. */
  overflow: visible;
}

/* The drain arc — animates smoothly when React re-renders */
.sb__drain-arc {
  transition:
    stroke 600ms ease,
    stroke-dashoffset 900ms ease,
    filter 600ms ease;
}

/* Under-10-seconds subtle pulse */
.sb.final-10 .sb__drain-arc {
  animation: arc-pulse 0.8s ease-in-out infinite;
}
@keyframes arc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.75; }
}

.sb__gauge-content {
  text-align: center;
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4cqw;
}

.sb__q-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.4cqw;
  letter-spacing: 0.6cqw;
  color: var(--sb-cyan);
  font-weight: 700;
  line-height: 1;
  transition: color 600ms;
}
.sb.warn-amber .sb__q-label { color: var(--sb-amber); }
.sb.warn-red   .sb__q-label { color: var(--sb-red); }

/* ── QUARTER NUMBER — much bigger now (8cqw, was 3cqw) ── */
.sb__q-num {
  font-family: "Orbitron", "Archivo Black", sans-serif;
  font-weight: 900;
  font-size: 8cqw;
  color: #fff;
  line-height: 0.9;
  text-shadow: 0 0 50px rgba(0, 229, 255, 0.5);
  letter-spacing: -0.2cqw;
  transition: text-shadow 600ms, color 600ms;
}
.sb.warn-amber .sb__q-num { text-shadow: 0 0 50px rgba(255, 159, 28, 0.6); }
.sb.warn-red   .sb__q-num { text-shadow: 0 0 55px rgba(255, 59, 92, 0.8); }

/* ── CLOCK — bigger (9cqw, was 6cqw) ── */
.sb__clock {
  font-family: "Orbitron", "Archivo Black", sans-serif;
  font-weight: 700;
  font-size: 9cqw;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: #fff;
  letter-spacing: 0.02cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5cqw;
  text-shadow: 0 0 35px rgba(0, 229, 255, 0.55);
  transition: text-shadow 600ms, color 600ms;
  margin-top: 0.3cqw;
}
.sb.warn-amber .sb__clock {
  text-shadow: 0 0 35px rgba(255, 159, 28, 0.65);
}
.sb.warn-red .sb__clock {
  text-shadow: 0 0 40px rgba(255, 59, 92, 0.85);
}
.sb.final-10 .sb__clock {
  animation: clock-strobe 0.5s ease-in-out infinite;
}
@keyframes clock-strobe {
  0%, 100% { text-shadow: 0 0 35px rgba(255, 59, 92, 0.85); }
  50%      { text-shadow: 0 0 50px rgba(255, 59, 92, 1); }
}

/* The red running-clock dot */
.sb__clock-dot {
  width: 0.8cqw;
  height: 0.8cqw;
  border-radius: 50%;
  background: var(--sb-red);
  box-shadow: 0 0 20px var(--sb-red);
  animation: dot-blink 1s infinite;
  flex-shrink: 0;
}
.sb.final-10 .sb__clock-dot {
  animation: dot-blink 0.3s infinite;
}
@keyframes dot-blink { 50% { opacity: 0.25; } }

/* ═══════════════════════════════════════════════════════════════════
   Shot clock — RELOCATED to bottom-center as its own instrument
   Much larger than the old gauge-internal pill
   ═══════════════════════════════════════════════════════════════════ */

.sb__shotclock-bottom {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2cqw;
  padding: 0.8cqw 2.6cqw;
  background: rgba(0, 229, 255, 0.10);
  border: 2px solid rgba(0, 229, 255, 0.55);
  z-index: 4;
  transition: all 200ms ease;
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.2),
              inset 0 0 20px rgba(0, 229, 255, 0.05);
}
.sb__shotclock-bottom-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.6cqw;
  letter-spacing: 0.45cqw;
  color: var(--sb-cyan);
  font-weight: 700;
}
.sb__shotclock-bottom-val {
  font-family: "Orbitron", "Archivo Black", sans-serif;
  font-weight: 900;
  font-size: 5.5cqw;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fff;
  min-width: 6.5cqw;
  text-align: center;
  text-shadow: 0 0 35px rgba(0, 229, 255, 0.7);
  letter-spacing: -0.15cqw;
  transition: color 200ms, text-shadow 200ms;
}

/* Amber warning state (≤10s) */
.sb__shotclock-bottom.sc-amber {
  background: rgba(255, 159, 28, 0.14);
  border-color: rgba(255, 159, 28, 0.7);
  box-shadow: 0 0 35px rgba(255, 159, 28, 0.3),
              inset 0 0 20px rgba(255, 159, 28, 0.08);
}
.sb__shotclock-bottom.sc-amber .sb__shotclock-bottom-label { color: var(--sb-amber); }
.sb__shotclock-bottom.sc-amber .sb__shotclock-bottom-val {
  color: var(--sb-amber);
  text-shadow: 0 0 45px rgba(255, 159, 28, 0.85);
}

/* Red panic state (≤5s) — pulsing */
.sb__shotclock-bottom.sc-red {
  background: rgba(255, 59, 92, 0.18);
  border-color: var(--sb-red);
  box-shadow: 0 0 45px rgba(255, 59, 92, 0.4),
              inset 0 0 25px rgba(255, 59, 92, 0.1);
  animation: sb-sc-pulse-bottom 0.5s ease-in-out infinite;
}
.sb__shotclock-bottom.sc-red .sb__shotclock-bottom-label { color: var(--sb-red); }
.sb__shotclock-bottom.sc-red .sb__shotclock-bottom-val {
  color: var(--sb-red);
  text-shadow: 0 0 55px rgba(255, 59, 92, 1);
}
@keyframes sb-sc-pulse-bottom {
  0%, 100% { box-shadow: 0 0 45px rgba(255, 59, 92, 0.4),
                          inset 0 0 25px rgba(255, 59, 92, 0.1); }
  50%      { box-shadow: 0 0 70px rgba(255, 59, 92, 0.7),
                          inset 0 0 35px rgba(255, 59, 92, 0.18); }
}

/* ═══════════════════════════════════════════════════════════════════
   Bottom activity strip + status badges
   Slightly raised to coexist with shot clock
   ═══════════════════════════════════════════════════════════════════ */

.sb__activity {
  position: absolute;
  bottom: 1.2%;
  left: 3%;
  right: 3%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "JetBrains Mono", monospace;
  font-size: 1.1cqw;
  letter-spacing: 0.3cqw;
  color: var(--sb-text-3);
  font-weight: 700;
  text-transform: uppercase;
  z-index: 3;
  pointer-events: none;
}
.sb__activity > div {
  background: #000;
  padding: 0.3cqw 0.8cqw;
}
.sb__activity b {
  color: var(--sb-cyan);
  transition: color 600ms;
}
.sb.warn-amber .sb__activity b { color: var(--sb-amber); }
.sb.warn-red   .sb__activity b { color: var(--sb-red); }

.sb__badge {
  padding: 0.5cqw 1.4cqw;
  font-family: "Orbitron", "Archivo Black", sans-serif;
  font-size: 1.2cqw;
  letter-spacing: 0.4cqw;
  font-weight: 900;
  color: var(--sb-text-2);
  border: 1px solid var(--sb-line);
  background: rgba(255, 255, 255, 0.03);
}
.sb__badge--ht {
  color: var(--sb-amber);
  border-color: var(--sb-amber);
  background: rgba(255, 159, 28, 0.08);
  box-shadow: 0 0 30px rgba(255, 159, 28, 0.15);
}
.sb__badge--final {
  color: #fff;
  background: var(--sb-red);
  border-color: var(--sb-red);
  box-shadow: 0 0 30px rgba(255, 59, 92, 0.4);
}