/* =====================================================================
   Tablero electrónico (TV, vista previa y "en vivo" del sitio público)
   ===================================================================== */
.board-wrap {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.board {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 2.5cqw;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 1.2cqw 3cqw;
  font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  overflow: hidden;
  user-select: none;
}
.board .brow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  text-align: center;
}
.board .brow > * { min-width: 0; }
.board .clock { font-size: 15cqw; color: #ffe600; text-align: center; font-variant-numeric: tabular-nums; }
.board .label {
  font-size: 2.4cqw;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.board .score { font-size: 12cqw; color: #ff2020; font-variant-numeric: tabular-nums; }
.board .period { font-size: 10cqw; color: #19ff19; }
.board .fouls { font-size: 8cqw; color: #19ff19; }
.board .fouls.bonus { color: #ff2020; }
.board .shot-cell { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; }
.board .arrow { font-size: 4.5cqw; color: #3a0b0b; }
.board .arrow.on { color: #ff2020; text-shadow: 0 0 1.5cqw rgba(255, 32, 32, 0.6); }
.board .shot { font-size: 8cqw; color: #ff9d00; min-width: 13cqw; font-variant-numeric: tabular-nums; }
.board .shot.low { color: #ff2020; }
.board .dots { display: flex; justify-content: center; gap: 1cqw; }
.board .dot { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; border: 0.3cqw solid #ffe600; }
.board .dot.on { background: #ffe600; }
.board .dots.blink .dot.on { animation: board-blink 0.8s infinite; }
.board .to-timer { font-size: 4cqw; color: #00e5ff; font-variant-numeric: tabular-nums; }
@keyframes board-blink { 50% { opacity: 0.15; } }

/* Modo TV (ventana a pantalla completa) */
body.tv {
  margin: 0;
  background: #000;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body.tv .board-wrap { width: min(100vw, 177.78vh); }
body.tv .board { border-radius: 1.2cqw; }
.tv-hint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.12);
  color: #ddd;
  padding: 8px 16px;
  border-radius: 8px;
  font: 14px system-ui, sans-serif;
  transition: opacity 0.6s;
}
.tv-hint.hidden { opacity: 0; }