@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&display=swap');* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #000; color: #fff; }



/* ═══════════════════════════════════════════════════════════════════════════
   STRIKE LAB — Tablet Wizard
   Aesthetic: Industrial Combat — UFC broadcast meets brutalist gym
   Fonts: Bebas Neue (display), JetBrains Mono (data), Barlow (body)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --wz-black: #050505;
  --wz-surface: #0e0e0e;
  --wz-card: #141414;
  --wz-card-hover: #1a1a1a;
  --wz-card-active: #1e1e1e;
  --wz-border: rgba(255,255,255,0.04);
  --wz-text: #f0f0f0;
  --wz-text-muted: #777;
  --wz-text-dim: #444;
  --wz-accent: #c8ff00;          /* electric chartreuse — combat energy */
  --wz-accent-dim: rgba(200,255,0,0.12);
  --wz-accent-glow: rgba(200,255,0,0.25);
  --wz-danger: #ff3b30;          /* hot coral — stop/abort */
  --wz-danger-dim: rgba(255,59,48,0.12);
  --wz-warning: #ffb800;         /* amber — warnings */
  --wz-font-display: 'Bebas Neue', 'Arial Black', sans-serif;
  --wz-font-mono: 'JetBrains Mono', 'SF Mono', monospace;
  --wz-font-body: 'Barlow', 'Inter', sans-serif;
  --wz-radius: 6px;
  --wz-radius-lg: 12px;
}
/* ── Reset / Base ─────────────────────────────────────────────────────────── */
.tablet-wizard {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--wz-black);
  color: var(--wz-text);
  font-family: var(--wz-font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tablet-wizard * {
  box-sizing: border-box;
}
.tablet-wizard button {
  font-family: var(--wz-font-body);
}
/* ── Brand bar ────────────────────────────────────────────────────────────── */
.wizard-brand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--wz-surface);
  border-bottom: 1px solid var(--wz-border);
}
.wizard-logo {
  font-family: var(--wz-font-display);
  font-size: 20px;
  letter-spacing: 6px;
  color: var(--wz-accent);
}
/* Estado à direita da barra: sync + ligação. A barra é `space-between`, logo estes
   têm de vir agrupados ou o ponto de ligação salta para o meio. */
.wizard-status {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* ── Sync com a matriz (#367) ─────────────────────────────────────────────── */
/* Discreto de propósito: é informação para o professor, não um alarme. Nada aqui
   bloqueia o passo seguinte — a aula nunca depende da matriz. */
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  /* `--wz-text-dim` (#444) sobre a superfície (#0e0e0e) dá ~2:1 — ilegível a 11px num
     tablet a que se dá uma vista de olhos. O token de texto secundário chega a ~4.4:1. */
  color: var(--wz-text-muted, #777);
}
.sync-badge .sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}
.sync-badge.waiting {
  color: var(--wz-warning);
}
/* ── Connection dot ───────────────────────────────────────────────────────── */
.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot.on {
  background: var(--wz-accent);
  box-shadow: 0 0 8px var(--wz-accent-glow);
}
.dot.off {
  background: var(--wz-danger);
  box-shadow: 0 0 6px var(--wz-danger-dim);
}
/* ═══════════════════════════════════════════════════════════════════════════
   STEP INDICATOR — fight card progression
   ═══════════════════════════════════════════════════════════════════════════ */
.step-indicator {
  display: flex;
  align-items: stretch;
  background: var(--wz-surface);
  border-bottom: 2px solid var(--wz-border);
  position: relative;
}
.step-indicator::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  background: var(--wz-accent);
  box-shadow: 0 0 12px var(--wz-accent-glow);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Progress bar position — set via inline style by component */
.step-indicator[data-progress="1"]::after { left: 0%; width: 25%; }
.step-indicator[data-progress="2"]::after { left: 25%; width: 25%; }
.step-indicator[data-progress="3"]::after { left: 50%; width: 25%; }
.step-indicator[data-progress="4"]::after { left: 75%; width: 25%; }
.step-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 8px;
  background: none;
  border: none;
  color: var(--wz-text-dim);
  cursor: default;
  transition: color 0.2s ease, background 0.2s ease;
  position: relative;
}
.step-item.current {
  color: var(--wz-accent);
  background: var(--wz-accent-dim);
}
.step-item.completed {
  color: var(--wz-text-muted);
  cursor: pointer;
}
.step-item.completed:hover {
  color: var(--wz-accent);
  background: var(--wz-accent-dim);
}
.step-item.future {
  opacity: 0.35;
}
.step-icon {
  font-family: var(--wz-font-display);
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 1;
}
.step-label {
  font-family: var(--wz-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.step-arrow {
  display: none; /* replaced by progress bar */
}
/* ═══════════════════════════════════════════════════════════════════════════
   WIZARD CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */
.wizard-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 20px;
  -webkit-overflow-scrolling: touch;
}
.wizard-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  gap: 12px;
  color: var(--wz-text-dim);
  font-family: var(--wz-font-mono);
  font-size: 13px;
}
.wizard-placeholder::before {
  content: '//';
  font-family: var(--wz-font-display);
  font-size: 48px;
  color: var(--wz-text-dim);
  opacity: 0.3;
}
/* ═══════════════════════════════════════════════════════════════════════════
   WIZARD FOOTER — action bar
   ═══════════════════════════════════════════════════════════════════════════ */
.wizard-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--wz-surface);
  border-top: 1px solid var(--wz-border);
}
.wizard-footer-spacer {
  flex: 1;
}
/* ── Shared button styles ─────────────────────────────────────────────────── */
.tablet-wizard .btn-primary {
  background: var(--wz-accent);
  color: #000;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  border: none;
  border-radius: var(--wz-radius);
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tablet-wizard .btn-primary:hover:not(:disabled) {
  filter: brightness(1.1);
  box-shadow: 0 0 20px var(--wz-accent-glow);
}
.tablet-wizard .btn-primary:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.tablet-wizard .btn-primary.big {
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tablet-wizard .btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--wz-text-muted);
  font-weight: 600;
  font-size: 13px;
  border: none;
  border-radius: var(--wz-radius);
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tablet-wizard .btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  color: var(--wz-text);
}
.tablet-wizard .btn-danger {
  background: var(--wz-danger);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: var(--wz-radius);
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tablet-wizard .btn-danger:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 20px var(--wz-danger-dim);
}
/* START CLASS — the hero button */
.start-class-btn {
  background: var(--wz-accent) !important;
  color: #000 !important;
  font-family: var(--wz-font-display) !important;
  font-size: 24px !important;
  letter-spacing: 4px !important;
  padding: 18px 48px !important;
  border-radius: var(--wz-radius) !important;
  position: relative;
  overflow: hidden;
}
.start-class-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.2) 45%,
    rgba(255,255,255,0.2) 50%,
    transparent 55%
  );
  animation: shimmer 3s infinite;
}
@keyframes shimmer {
  0% { transform: translateX(-200%); }
  100% { transform: translateX(200%); }
}
/* ═══════════════════════════════════════════════════════════════════════════
   STEP ① — BOD SELECTION
   ═══════════════════════════════════════════════════════════════════════════ */
.step-title {
  font-family: var(--wz-font-display);
  font-size: 36px;
  letter-spacing: 3px;
  margin: 0 0 2px 0;
  color: var(--wz-text);
  line-height: 1;
}
.step-subtitle {
  font-family: var(--wz-font-mono);
  font-size: 12px;
  color: var(--wz-text-dim);
  margin: 0 0 24px 0;
  letter-spacing: 0.5px;
}
.bod-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bod-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--wz-card);
  border: 2px solid transparent;
  border-radius: var(--wz-radius-lg);
  padding: 20px 24px;
  color: var(--wz-text);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.bod-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.2s ease;
}
.bod-card:hover {
  background: var(--wz-card-hover);
  border-color: rgba(255,255,255,0.06);
}
.bod-card.selected {
  border-color: var(--wz-accent);
  background: var(--wz-accent-dim);
}
.bod-card.selected::before {
  background: var(--wz-accent);
}
.bod-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bod-card-name {
  font-family: var(--wz-font-display);
  font-size: 24px;
  letter-spacing: 2px;
  line-height: 1.1;
}
.bod-card-check {
  color: var(--wz-accent);
  font-size: 22px;
  font-weight: 800;
  text-shadow: 0 0 12px var(--wz-accent-glow);
}
.bod-card.unrunnable {
  opacity: 0.4;
  cursor: not-allowed;
}
.bod-unrunnable-tag {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px !important;
  background: rgba(255, 90, 90, 0.15);
  color: #ff8a8a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bod-card-meta {
  display: flex;
  gap: 14px;
  font-family: var(--wz-font-mono);
  font-size: 12px;
  color: var(--wz-text-dim);
}
.bod-card-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.intensity-tag {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.intensity-tag.low { background: rgba(200,255,0,0.12); color: var(--wz-accent); }
.intensity-tag.moderate { background: rgba(100,200,255,0.12); color: #64c8ff; }
.intensity-tag.high { background: rgba(255,120,0,0.15); color: #ff7800; }
.intensity-tag.extreme { background: var(--wz-danger-dim); color: var(--wz-danger); }
.bod-card-preview {
  display: flex;
  gap: 6px;
  align-items: center;
  font-family: var(--wz-font-mono);
  font-size: 11px;
  color: var(--wz-text-dim);
  padding-top: 8px;
  border-top: 1px solid var(--wz-border);
}
.preview-label {
  font-weight: 700;
  color: var(--wz-text-muted);
}
.preview-station {
  padding: 2px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.preview-more {
  color: var(--wz-text-dim);
}
.bod-empty {
  color: var(--wz-text-dim);
  text-align: center;
  padding: 60px 0;
  font-family: var(--wz-font-mono);
  font-size: 13px;
}
/* ═══════════════════════════════════════════════════════════════════════════
   STEP ② — ATHLETE CHECK-IN
   ═══════════════════════════════════════════════════════════════════════════ */
.checkin-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.checkin-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px 10px;
  background: var(--wz-card);
  border: 2px solid transparent;
  border-radius: var(--wz-radius);
  color: var(--wz-text);
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}
.checkin-card:hover {
  background: var(--wz-card-hover);
}
.checkin-card.checked {
  border-color: var(--wz-accent);
  background: var(--wz-accent-dim);
}
.checkin-initials {
  font-family: var(--wz-font-display);
  font-size: 22px;
  letter-spacing: 2px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: var(--wz-text-muted);
  line-height: 1;
}
.checkin-card.checked .checkin-initials {
  background: var(--wz-accent);
  color: #000;
}
.checkin-name {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wz-text-muted);
}
.checkin-card.checked .checkin-name {
  color: var(--wz-text);
}
.checkin-status {
  font-size: 14px;
  line-height: 1;
}
.checkin-yogo-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 9px;
  opacity: 0.7;
}
.add-athlete-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.add-athlete-input {
  flex: 1;
  background: var(--wz-card);
  border: 1px solid var(--wz-border);
  border-radius: var(--wz-radius);
  color: var(--wz-text);
  padding: 12px 16px;
  font-size: 14px;
  font-family: var(--wz-font-body);
  transition: border-color 0.15s ease;
}
.add-athlete-input:focus {
  outline: none;
  border-color: var(--wz-accent);
  box-shadow: 0 0 0 2px var(--wz-accent-dim);
}
.add-athlete-input::placeholder {
  color: var(--wz-text-dim);
}
.add-athlete-btn {
  white-space: nowrap;
}
/* ═══════════════════════════════════════════════════════════════════════════
   STEP ④ — PREFLIGHT CHECKLIST
   ═══════════════════════════════════════════════════════════════════════════ */
.preflight-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preflight-section {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--wz-card);
  border-radius: var(--wz-radius-lg);
  border-left: 3px solid var(--wz-text-dim);
}
.preflight-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.preflight-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.preflight-detail strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--wz-text);
}
.preflight-detail span {
  font-size: 12px;
  color: var(--wz-text-dim);
  font-family: var(--wz-font-mono);
  line-height: 1.5;
}
.preflight-names {
  line-height: 1.6;
}
.preflight-warning {
  color: var(--wz-warning) !important;
  font-size: 12px !important;
}
/* ═══════════════════════════════════════════════════════════════════════════
   LIVE REMOTE — fight night control
   ═══════════════════════════════════════════════════════════════════════════ */
.live-mode {
  justify-content: center;
  align-items: center;
  padding: 32px 24px;
  position: relative;
}
.live-remote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
  max-width: 480px;
}
.remote-header {
  text-align: center;
}
.remote-round {
  display: block;
  font-family: var(--wz-font-display);
  font-size: 56px;
  letter-spacing: 4px;
  color: var(--wz-text);
  line-height: 1;
}
.remote-bod-name {
  font-family: var(--wz-font-mono);
  font-size: 12px;
  color: var(--wz-text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}
/* #528 — a captura de socos deste round não está garantida.
   Tira INLINE, não overlay: informa sem tapar o STOP nem interromper a aula. Fica entre
   o número do round e o timer para o professor a apanhar sem scroll (o KitLiveness, o
   outro painel de avarias, vive abaixo do botão grande e da dobra). Sem ✕ — um aviso que
   se fecha por hábito deixa de ser aviso, e uma tira inline não tapa nada. */
.remote-capture-health {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--wz-card);
  border-radius: var(--wz-radius);
  padding: 10px 14px;
  color: var(--wz-warning);
}
.remote-capture-health strong {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.remote-capture-health span {
  font-size: 13px;
  line-height: 1.4;
  color: var(--wz-text-muted);
}
.remote-capture-health code {
  font-family: var(--wz-font-mono);
  color: var(--wz-text);
}
.remote-timer {
  font-family: var(--wz-font-display);
  font-size: 96px;
  letter-spacing: 6px;
  color: var(--wz-accent);
  text-shadow: 0 0 40px var(--wz-accent-glow);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.remote-action {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.remote-start-btn {
  width: 100% !important;
  max-width: 360px;
  font-family: var(--wz-font-display) !important;
  font-size: 28px !important;
  letter-spacing: 4px !important;
  padding: 22px 32px !important;
  border-radius: var(--wz-radius-lg) !important;
  background: var(--wz-accent) !important;
  color: #000 !important;
}
.remote-stop-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.remote-stop-btn {
  width: 100% !important;
  max-width: 360px;
  font-family: var(--wz-font-display) !important;
  font-size: 28px !important;
  letter-spacing: 4px !important;
  padding: 22px 32px !important;
  border-radius: var(--wz-radius-lg) !important;
}
.remote-abort-hint {
  font-family: var(--wz-font-mono);
  font-size: 10px;
  color: var(--wz-text-dim);
  letter-spacing: 1px;
}
.remote-collecting {
  font-family: var(--wz-font-mono);
  font-size: 14px;
  color: var(--wz-text-dim);
  padding: 20px;
  letter-spacing: 1px;
  animation: blink 1.2s step-end infinite;
}
@keyframes blink {
  50% { opacity: 0.4; }
}
.remote-complete {
  font-family: var(--wz-font-display);
  font-size: 36px;
  letter-spacing: 3px;
  color: var(--wz-accent);
  text-shadow: 0 0 30px var(--wz-accent-glow);
}
.remote-lookahead {
  font-family: var(--wz-font-mono);
  font-size: 12px;
  color: var(--wz-text-dim);
  text-align: center;
  letter-spacing: 0.5px;
}
/* Abort confirm overlay */
.remote-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
}
.remote-confirm-box {
  background: var(--wz-surface);
  border: 1px solid var(--wz-danger);
  border-radius: var(--wz-radius-lg);
  padding: 28px;
  max-width: 380px;
  width: 90%;
  text-align: center;
}
.remote-confirm-box p {
  font-size: 15px;
  margin: 0 0 20px 0;
  line-height: 1.5;
  color: var(--wz-text);
}
.remote-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
/* ── Live connection indicator ────────────────────────────────────────────── */
.live-connection {
  position: fixed;
  top: 12px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.live-connection::after {
  content: 'LIVE';
  font-family: var(--wz-font-display);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--wz-text-dim);
}
/* ═══════════════════════════════════════════════════════════════════════════
   SHARED ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 8px var(--wz-accent-glow);
  }
  50% {
    box-shadow: 0 0 20px var(--wz-accent-glow), 0 0 40px rgba(200,255,0,0.08);
  }
}
/* Active step indicator gets a glow */
.step-item.current {
  animation: pulse-glow 2.5s ease-in-out infinite;
}
/* ═══════════════════════════════════════════════════════════════════════════
   TELEMÓVEL (iPhone) — 2026-08-06
   ═══════════════════════════════════════════════════════════════════════════
   Mesma história do tablet.css: zero media queries até aqui. Só ADITIVO, e só o
   que foi MEDIDO no DOM real a 390px.

   NÃO tocado, por medição: o `.wizard-footer` já cabe (88px + 238px + gaps = 390
   exactos) com botões de 52/60px de altura — uma tentativa de o empilhar com
   flex-wrap fez a barra crescer de 113px para 165px, pior do que o original. E o
   `.step-indicator` também cabe (4 itens de 98px, rótulo de 39px). Regra do
   projecto: não "melhorar" o que não está partido.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Medido a 390px: 4 colunas dão cards de 81,5px — avatar + nome não entram. */
  .checkin-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  /* 20px de padding lateral num ecrã de 390 são 40px que as grelhas não têm. */
  .wizard-content { padding: 12px; }

  .step-title { font-size: 1.1rem; }
  .step-subtitle { font-size: 0.8rem; }
  .bod-card { padding: 12px; }
  .bod-card-name { font-size: 1rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   STRIKE LAB — Professor Tablet
   Design: Spotify dark + Strike Lab neon purple/cyan brand
   Touch-first: min 48px touch targets, large text, generous spacing
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --sl-black: #0a0a0a;
  --sl-surface: #121212;
  --sl-card: #181818;
  --sl-card-hover: #1f1f1f;
  --sl-border: rgba(255,255,255,0.06);
  --sl-text: #ffffff;
  --sl-text-muted: #b3b3b3;
  --sl-text-dim: #666;
  --sl-green: #1ed760;
  --sl-neon-purple: #c026d3;
  --sl-neon-cyan: #22d3ee;
  --sl-neon-blue: #6366f1;
  --sl-gold: #fbbf24;
  --sl-red: #ef4444;
  --sl-orange: #f59e0b;
  --sl-radius: 8px;
  --sl-radius-lg: 16px;
  --sl-radius-pill: 9999px;
  --sl-shadow: rgba(0,0,0,0.5) 0px 8px 24px;
  --sl-shadow-sm: rgba(0,0,0,0.3) 0px 4px 12px;
  --sl-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.tablet {
  font-family: var(--sl-font);
  max-width: 1024px;
  margin: 0 auto;
  padding: 20px;
  background: var(--sl-black);
  color: var(--sl-text);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── Header ──────────────────────────────────────────────────────────── */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--sl-border);
}
header h1 {
  font-size: 1.6rem; margin: 0;
  letter-spacing: 2px; text-transform: uppercase;
}
.header-right { display: flex; align-items: center; gap: 14px; }

.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--sl-green); box-shadow: 0 0 8px var(--sl-green); }
.dot.off { background: var(--sl-red); box-shadow: 0 0 8px var(--sl-red); }

.timer {
  font-size: 2.2rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.state-badge {
  padding: 6px 14px; border-radius: var(--sl-radius-pill);
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.4px;
  background: var(--sl-card-hover); color: var(--sl-text-muted);
}
.state-badge.active { background: var(--sl-green); color: #000; }
.state-badge.collecting_buffers,
.state-badge.processing,
.state-badge.stop_requested { background: var(--sl-neon-purple); color: #fff; }
.state-badge.revealed { background: var(--sl-neon-blue); color: #fff; }

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn-primary {
  background: var(--sl-green); color: #000; border: none;
  border-radius: var(--sl-radius-pill);
  padding: 16px 32px; font-size: 1rem; font-weight: 700;
  cursor: pointer; min-height: 52px;
  text-transform: uppercase; letter-spacing: 1.4px;
  transition: opacity 0.15s, transform 0.1s;
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: 0.3; cursor: default; }
.btn-primary.big {
  width: 100%; font-size: 1.2rem; padding: 20px;
  margin-top: 20px; min-height: 60px;
}

.btn-danger {
  background: var(--sl-red); color: #fff; border: none;
  border-radius: var(--sl-radius-pill);
  padding: 16px 32px; font-size: 1rem; font-weight: 700;
  cursor: pointer; min-height: 52px;
  text-transform: uppercase; letter-spacing: 1.4px;
}
.btn-danger.big { width: 100%; font-size: 1.2rem; padding: 20px; min-height: 60px; }

.btn-secondary {
  background: var(--sl-card-hover); color: var(--sl-text); border: none;
  border-radius: var(--sl-radius-pill);
  padding: 16px 32px; font-size: 0.95rem; font-weight: 700;
  cursor: pointer; min-height: 52px;
  text-transform: uppercase; letter-spacing: 1.4px;
  transition: background 0.15s;
}
.btn-secondary:active { background: #2a2a2a; }

.btn-back {
  margin-top: 32px; background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--sl-text-dim); padding: 14px;
  border-radius: var(--sl-radius-pill);
  width: 100%; cursor: pointer;
  font-size: 0.9rem; min-height: 48px;
  text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600;
}

.actions { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
.actions .btn-secondary { flex: 1; }
.collecting {
  text-align: center; color: var(--sl-neon-purple);
  font-size: 1.2rem; font-weight: 700; width: 100%; padding: 20px;
  letter-spacing: 2px; text-transform: uppercase;
}

/* ── Athletes Section ────────────────────────────────────────────────── */

.athletes-section { margin: 24px 0; }
.athletes-section h2 {
  font-size: 1rem; margin-bottom: 14px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--sl-text-muted);
}

.add-row { display: flex; gap: 10px; margin-bottom: 16px; }
.add-row input {
  flex: 1; padding: 14px 18px;
  border-radius: var(--sl-radius-pill);
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--sl-card-hover); color: var(--sl-text);
  font-size: 1rem; font-family: var(--sl-font);
  outline: none;
}
.add-row input:focus {
  border-color: var(--sl-neon-cyan);
  box-shadow: 0 0 0 1px var(--sl-neon-cyan);
}
.add-row button {
  padding: 14px 22px; border-radius: var(--sl-radius-pill);
  background: var(--sl-card-hover); color: var(--sl-text);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 1.2rem; cursor: pointer; min-width: 52px;
}

.athlete-list { display: flex; flex-wrap: wrap; gap: 8px; }
.athlete-chip {
  padding: 10px 18px; border-radius: var(--sl-radius-pill);
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent; color: var(--sl-text-muted);
  cursor: pointer; font-size: 0.95rem;
  transition: all 0.15s; min-height: 44px;
  font-weight: 500;
}
.athlete-chip.checked {
  border-color: var(--sl-green); color: var(--sl-text);
  background: rgba(30, 215, 96, 0.1);
}

/* ── Yogo Roster Section ─────────────────────────────────────────────── */

.roster-section { margin: 24px 0 0; }
.roster-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.roster-header h2 {
  font-size: 1rem; margin: 0;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--sl-text-muted);
}
.roster-badge {
  font-size: 0.7rem; font-weight: 600;
  padding: 4px 10px; border-radius: var(--sl-radius-pill);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.roster-badge.live {
  background: rgba(30, 215, 96, 0.15); color: var(--sl-green);
}
.roster-badge.stale {
  background: rgba(245, 158, 11, 0.15); color: var(--sl-orange);
}
.roster-badge.loading {
  background: rgba(99, 102, 241, 0.15); color: var(--sl-neon-blue);
}
.roster-badge.error {
  background: rgba(239, 68, 68, 0.15); color: var(--sl-red);
}
.roster-empty {
  color: var(--sl-text-dim); font-size: 0.9rem; margin: 0;
}

.roster-bookings { display: flex; flex-direction: column; gap: 6px; }

.roster-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-radius: var(--sl-radius);
  background: var(--sl-card); border: 1px solid var(--sl-border);
  cursor: pointer; font-family: var(--sl-font);
  transition: background 0.15s, border-color 0.15s;
  min-height: 48px;
}
.roster-card.matched.checked {
  border-color: var(--sl-green);
  background: rgba(30, 215, 96, 0.06);
}
.roster-card.unmatched {
  cursor: default;
  border-style: dashed;
  border-color: rgba(255,255,255,0.1);
}

.roster-card-left {
  display: flex; align-items: center; gap: 10px;
}
.roster-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}
.roster-name {
  font-size: 0.95rem; font-weight: 500; color: var(--sl-text);
}
.roster-card.unmatched .roster-name {
  color: var(--sl-text-muted);
}

.roster-card-right {
  display: flex; align-items: center; gap: 10px;
}
.roster-time {
  font-size: 0.8rem; color: var(--sl-text-dim);
  font-variant-numeric: tabular-nums;
}
.roster-plan {
  font-size: 0.7rem; color: var(--sl-text-dim);
  padding: 2px 8px; border-radius: var(--sl-radius-pill);
  background: rgba(255,255,255,0.04);
}
.roster-check {
  color: var(--sl-green); font-size: 1rem; font-weight: 700;
}
.roster-link-btn {
  padding: 6px 14px; border-radius: var(--sl-radius-pill);
  background: var(--sl-neon-purple); color: #fff;
  border: none; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; font-family: var(--sl-font);
  transition: opacity 0.15s;
}
.roster-link-btn:hover { opacity: 0.85; }
.roster-link-btn:disabled { opacity: 0.4; cursor: wait; }

/* ── Station Grid ────────────────────────────────────────────────────── */

.assignments { margin: 20px 0; }
.assignments h2 {
  font-size: 0.9rem; margin-bottom: 12px;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--sl-text-muted);
}
.assignments-header { display: flex; justify-content: space-between; align-items: center; }
.station-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.station-card {
  background: var(--sl-card); border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius); padding: 14px;
  min-height: 60px;
}
.station-card.pair { border-left: 3px solid var(--sl-neon-blue); }
.station-card.individual { border-left: 3px solid var(--sl-neon-purple); }
.station-name {
  font-size: 0.7rem; color: var(--sl-text-dim); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600;
}
.station-athletes { display: flex; flex-wrap: wrap; gap: 6px; }
.name-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--sl-card-hover); padding: 8px 14px;
  border-radius: var(--sl-radius-pill); font-size: 0.9rem;
  font-weight: 500;
}
.empty { color: rgba(255,255,255,0.15); }

/* Level dots */
.level-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 0.6rem; font-weight: 700; color: #000; flex-shrink: 0;
}
.level-dot.level-recruta      { background: #9ca3af; }
.level-dot.level-beginner     { background: #3b82f6; }
.level-dot.level-intermediate { background: #22c55e; }
.level-dot.level-fighter      { background: #8b5cf6; }
.level-dot.level-champion     { background: #f59e0b; }
.level-dot.level-elite        { background: #ef4444; }

/* Editable assignments */
.btn-edit-assign {
  padding: 6px 16px; border-radius: var(--sl-radius-pill);
  background: var(--sl-card-hover); color: var(--sl-text-muted);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.75rem; cursor: pointer; min-height: 36px;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.station-card.editable { border-style: dashed; border-color: rgba(255,255,255,0.15); }
.name-tag.draggable { cursor: grab; border: 1px dashed rgba(255,255,255,0.2); }
.name-tag.draggable:active { cursor: grabbing; opacity: 0.6; }
.unassigned {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  padding: 12px; background: var(--sl-card);
  border-radius: var(--sl-radius); border: 1px dashed rgba(255,255,255,0.1);
  flex-wrap: wrap;
}
.unassigned-label { color: var(--sl-text-dim); font-size: 0.8rem; }

/* ── Devices Grid ────────────────────────────────────────────────────── */

.devices { margin: 20px 0; }
.devices h3 {
  font-size: 0.75rem; color: var(--sl-text-dim); margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 1.4px;
}
.device-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.device-card {
  background: var(--sl-card); border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius); padding: 10px;
  font-size: 0.8rem;
}
.device-card.disconnected { border-color: rgba(239,68,68,0.3); }
.device-card.missing { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.03); }
.device-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.device-id { font-weight: 700; font-size: 0.85rem; }
.device-mapping { display: flex; flex-direction: column; gap: 2px; }
.device-athlete { font-weight: 600; font-size: 0.85rem; }
.device-station { color: var(--sl-text-dim); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; }
.battery-bar {
  position: relative; height: 6px; background: var(--sl-card-hover);
  border-radius: 3px; margin-top: 8px;
}
.battery-fill { height: 100%; background: var(--sl-green); border-radius: 3px; }
.battery-text { position: absolute; right: 0; top: -14px; font-size: 0.65rem; color: var(--sl-text-dim); }
.missing-warn {
  margin-top: 6px; color: var(--sl-orange); font-weight: 700;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px;
}

/* ── BOD Selection (Setup) ───────────────────────────────────────────── */

.bod-section { margin: 24px 0; }
.bod-section h2 {
  font-size: 1rem; margin-bottom: 14px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--sl-text-muted);
}
.bod-empty { color: var(--sl-text-dim); font-size: 0.95rem; }
.bod-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bod-chip {
  padding: 12px 20px; border-radius: var(--sl-radius-pill);
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent; color: var(--sl-text-muted);
  cursor: pointer; font-size: 0.95rem;
  transition: all 0.15s; min-height: 48px;
  font-weight: 500;
}
.bod-chip.selected {
  border-color: var(--sl-neon-purple); color: var(--sl-text);
  background: rgba(192,38,211,0.1);
}
.bod-preview {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 12px;
  background: var(--sl-card); border-radius: var(--sl-radius);
  border: 1px solid var(--sl-border);
}
.bod-round-preview {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: var(--sl-card-hover); border-radius: var(--sl-radius);
  font-size: 0.85rem;
}
.bod-round-preview .round-num { font-weight: 700; color: var(--sl-neon-purple); }
.bod-round-preview .drill-name { color: var(--sl-neon-cyan); }

/* ── BOD Plan (Live Phase) ───────────────────────────────────────────── */

.bod-plan { margin: 16px 0; }
.bod-plan h2 {
  font-size: 0.85rem; color: var(--sl-text-dim); margin: 0 0 12px;
  text-transform: uppercase; letter-spacing: 1.4px;
}
.bod-plan-list { display: flex; flex-direction: column; gap: 6px; }
.bod-plan-card {
  background: var(--sl-card); border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius);
  padding: 12px 16px; transition: all 0.15s;
}
.bod-plan-card.current {
  border-color: var(--sl-green);
  background: rgba(30,215,96,0.06);
}
.bod-plan-card.next {
  border-color: var(--sl-neon-blue);
  background: rgba(99,102,241,0.04);
}
.bod-plan-card.done { opacity: 0.3; padding: 8px 16px; }
.plan-card-header {
  display: flex; align-items: center; gap: 12px; font-size: 0.95rem;
}
.plan-round-num { font-weight: 700; min-width: 28px; font-size: 1rem; }
.plan-duration { color: var(--sl-text-muted); font-variant-numeric: tabular-nums; }
.plan-current-badge {
  padding: 3px 10px; border-radius: var(--sl-radius-pill);
  background: var(--sl-green); color: #000;
  font-size: 0.65rem; font-weight: 700; margin-left: auto;
  text-transform: uppercase; letter-spacing: 1px;
}
.plan-next-badge {
  padding: 3px 10px; border-radius: var(--sl-radius-pill);
  background: var(--sl-neon-blue); color: #fff;
  font-size: 0.65rem; font-weight: 700; margin-left: auto;
  text-transform: uppercase; letter-spacing: 1px;
}
.plan-card-body { margin-top: 8px; padding-left: 40px; }
.plan-drill-name { font-weight: 600; color: var(--sl-neon-cyan); font-size: 0.95rem; }
.plan-strikes { display: block; color: var(--sl-text-dim); font-size: 0.8rem; margin-top: 4px; }
.plan-no-drill { color: rgba(255,255,255,0.15); font-size: 0.8rem; font-style: italic; }
.plan-interval { margin-top: 6px; color: var(--sl-text-dim); font-size: 0.8rem; }

/* ── Round Controls ──────────────────────────────────────────────────── */

.round-controls { width: 100%; }
.round-controls-secondary {
  display: flex; gap: 10px; margin-top: 12px;
}
.round-controls-secondary .btn-secondary { flex: 1; font-size: 0.85rem; padding: 12px; }

/* ── History Button ──────────────────────────────────────────────────── */

.btn-history {
  padding: 6px 14px; border-radius: var(--sl-radius-pill);
  background: var(--sl-card-hover); color: var(--sl-text-muted);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.75rem; cursor: pointer; min-height: 36px;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}

/* ── Results Panel ───────────────────────────────────────────────────── */

.results-panel {
  margin: 20px 0; background: var(--sl-card);
  border-radius: var(--sl-radius-lg); padding: 18px;
  border: 1px solid var(--sl-border);
  box-shadow: var(--sl-shadow-sm);
}
.results-panel h2 {
  font-size: 0.85rem; margin: 0 0 14px; color: var(--sl-text-dim);
  text-transform: uppercase; letter-spacing: 1.4px;
}
.result-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; min-height: 52px;
  border-radius: var(--sl-radius); margin-bottom: 4px;
  background: var(--sl-card-hover);
}
.result-row.rank-1 { border-left: 3px solid var(--sl-gold); background: rgba(251,191,36,0.06); }
.result-row.rank-2 { border-left: 3px solid #9ca3af; }
.result-row.rank-3 { border-left: 3px solid #b45309; }
.result-rank {
  width: 32px; height: 32px; border-radius: 50%; background: var(--sl-card);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
}
.rank-1 .result-rank { background: var(--sl-gold); color: #000; }
.rank-2 .result-rank { background: #9ca3af; color: #000; }
.rank-3 .result-rank { background: #b45309; color: #fff; }
.result-name { flex: 1; font-weight: 600; font-size: 1rem; }
.result-stats { display: flex; flex-direction: column; align-items: flex-end; }
.result-stats strong { font-size: 1rem; }
.result-stats span { color: var(--sl-text-dim); font-size: 0.75rem; }
.pr-badge {
  padding: 3px 10px; border-radius: var(--sl-radius-pill);
  background: var(--sl-gold); color: #000;
  font-size: 0.65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.partial-badge {
  padding: 3px 10px; border-radius: var(--sl-radius-pill);
  background: var(--sl-orange); color: #000;
  font-size: 0.65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.5px;
}

/* ── Session History ─────────────────────────────────────────────────── */

.history-panel {
  margin: 16px 0; background: var(--sl-card);
  border-radius: var(--sl-radius-lg); padding: 18px;
  border: 1px solid var(--sl-border);
}
.history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.history-header h2 {
  font-size: 0.85rem; margin: 0; color: var(--sl-text-dim);
  text-transform: uppercase; letter-spacing: 1.4px;
}
.btn-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--sl-card-hover); color: var(--sl-text-muted);
  border: none; cursor: pointer; font-weight: 700; font-size: 0.9rem;
}
.history-entry { margin-bottom: 4px; }
.history-summary {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px; background: var(--sl-card-hover);
  border: none; border-radius: var(--sl-radius); color: var(--sl-text);
  cursor: pointer; font-size: 0.95rem; text-align: left; min-height: 48px;
}
.history-top { color: var(--sl-text-dim); flex: 1; text-align: right; font-size: 0.8rem; }
.expand-icon { color: var(--sl-text-dim); width: 24px; text-align: center; font-size: 1rem; }
.history-detail { padding: 8px 14px; }
.history-row {
  display: flex; gap: 10px; padding: 5px 0; font-size: 0.85rem;
  color: var(--sl-text-muted);
}
.history-row span:nth-child(2) { flex: 1; }

/* ── Interval View ───────────────────────────────────────────────────── */

.interval-view {
  display: flex; flex-direction: column; align-items: center; padding: 24px;
  margin: 16px 0; background: var(--sl-card);
  border-radius: var(--sl-radius-lg); border: 1px solid var(--sl-border);
}
.interval-timer {
  font-size: 3.5rem; font-weight: 700; color: var(--sl-neon-purple);
  font-variant-numeric: tabular-nums;
}
.interval-activity {
  font-size: 1.2rem; color: var(--sl-neon-purple); font-weight: 700; margin-top: 6px;
  text-transform: uppercase; letter-spacing: 2px;
}

/* ── Next Round Preview ──────────────────────────────────────────────── */

.next-preview {
  margin: 16px 0; background: var(--sl-card);
  border-radius: var(--sl-radius); padding: 16px;
  border: 1px solid var(--sl-border);
}
.next-preview h3 {
  font-size: 0.75rem; color: var(--sl-text-dim); margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: 1.4px;
}
.next-info { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.95rem; }
.next-info .drill-name { color: var(--sl-neon-cyan); font-weight: 600; }
.next-info .strikes { color: var(--sl-text-dim); font-size: 0.8rem; }

/* ── Session Summary ─────────────────────────────────────────────────── */

.summary-panel {
  margin: 20px 0; background: var(--sl-card);
  border-radius: var(--sl-radius-lg); padding: 24px;
  border: 1px solid var(--sl-border);
  box-shadow: var(--sl-shadow-sm);
}
.summary-panel h2 { font-size: 1.4rem; margin: 0 0 6px; text-align: center; }
.summary-rounds { text-align: center; color: var(--sl-text-dim); margin: 0 0 24px; font-size: 0.9rem; }

.mvp-highlight {
  text-align: center; padding: 24px; margin-bottom: 24px;
  background: linear-gradient(135deg, rgba(251,191,36,0.08), rgba(251,191,36,0.02));
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: var(--sl-radius-lg);
}
.mvp-label {
  font-size: 0.75rem; color: var(--sl-gold); font-weight: 700;
  letter-spacing: 3px; margin-bottom: 10px; text-transform: uppercase;
}
.mvp-name { font-size: 1.6rem; font-weight: 700; }
.mvp-score { font-size: 1rem; color: var(--sl-gold); margin-top: 6px; }

.summary-table { margin-bottom: 24px; }
.summary-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; min-height: 48px;
  border-radius: var(--sl-radius); margin-bottom: 4px;
  background: var(--sl-card-hover);
}
.summary-row.mvp { border-left: 3px solid var(--sl-gold); }
.summary-rank { width: 24px; font-weight: 700; color: var(--sl-text-dim); font-size: 0.9rem; }
.summary-name { flex: 1; font-weight: 600; font-size: 0.95rem; }
.summary-pts { font-weight: 700; font-size: 0.95rem; }
.summary-punches { color: var(--sl-text-dim); font-size: 0.8rem; }

.weekly-preview {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--sl-border);
}
.weekly-preview h3 {
  font-size: 0.85rem; color: var(--sl-text-dim); margin: 0 0 12px;
  text-transform: uppercase; letter-spacing: 1.4px;
}
.weekly-row {
  display: flex; gap: 12px; padding: 6px 0; font-size: 0.9rem;
}
.weekly-row span:nth-child(2) { flex: 1; }
.weekly-row span:nth-child(4) { color: var(--sl-text-dim); }

/* ── Intensity Badges ────────────────────────────────────────────────── */

.intensity {
  padding: 3px 10px; border-radius: var(--sl-radius-pill);
  font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
}
.intensity.low { background: rgba(99,102,241,0.15); color: var(--sl-neon-blue); }
.intensity.medium { background: rgba(192,38,211,0.15); color: var(--sl-neon-purple); }
.intensity.high { background: rgba(239,68,68,0.15); color: var(--sl-red); }

/* ── Confirm Modal ──────────────────────────────────────────────────── */

.confirm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.confirm-dialog {
  background: var(--sl-card); border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--sl-radius-lg);
  padding: 28px; max-width: 400px; width: 100%;
  box-shadow: var(--sl-shadow);
}
.confirm-message {
  font-size: 1.1rem; line-height: 1.5; margin: 0 0 24px;
  color: var(--sl-text);
}
.confirm-buttons { display: flex; gap: 12px; }
.confirm-buttons .btn-secondary { flex: 1; }
.confirm-buttons .btn-danger { flex: 1; }

/* ═══ Pairing Screen ═══ */
.pairing-screen {
  padding: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.pairing-header h2 {
  font-size: 1.5rem;
  margin: 0 0 4px;
}
.pairing-subtitle {
  color: var(--sl-text-muted);
  font-size: 0.9rem;
  margin: 0 0 24px;
}
.pairing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.pairing-column h3 {
  font-size: 1rem;
  color: var(--sl-text-muted);
  margin: 0 0 12px;
}
.pairing-empty {
  padding: 24px;
  text-align: center;
  color: var(--sl-text-dim);
  background: var(--sl-card);
  border-radius: 12px;
}
.pairing-hint { font-size: 0.8rem; margin-top: 8px; }
.device-list { display: flex; flex-direction: column; gap: 8px; }
.device-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--sl-card);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--sl-text);
  transition: all 0.15s;
}
.device-chip:hover { background: var(--sl-card-hover); }
.device-chip.selected {
  border-color: var(--sl-neon-cyan);
  background: rgba(34, 211, 238, 0.1);
}
.device-id { font-weight: 600; }
.device-meta { color: var(--sl-text-muted); font-size: 0.85rem; }
.device-hint { color: var(--sl-neon-cyan); font-size: 0.8rem; margin-left: auto; }
.athlete-pair-list { display: flex; flex-direction: column; gap: 8px; }
.athlete-pair-chip {
  padding: 14px 18px;
  background: var(--sl-card);
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--sl-text);
  transition: all 0.15s;
}
.athlete-pair-chip:hover {
  border-color: var(--sl-green);
  background: rgba(30, 215, 96, 0.1);
}
.athlete-list-inactive {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.athlete-unpaired {
  padding: 10px 14px;
  color: var(--sl-text-muted);
  font-size: 0.95rem;
}
.all-paired { color: var(--sl-green); padding: 16px; text-align: center; }
.btn-cancel {
  margin-top: 8px;
  padding: 10px;
  background: none;
  border: 1px solid var(--sl-border);
  border-radius: 8px;
  color: var(--sl-text-muted);
  cursor: pointer;
}
.pairing-done {
  background: var(--sl-card);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
}
.pairing-done h3 {
  font-size: 0.9rem;
  color: var(--sl-text-muted);
  margin: 0 0 12px;
}
.pairing-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.95rem;
}
.pairing-device { color: var(--sl-neon-cyan); font-weight: 600; }
.pairing-arrow { color: var(--sl-text-dim); }
.pairing-athlete { color: var(--sl-text); }

/* ── Baseline HR capture (W7) ────────────────────────────────────────── */
.btn-capture-hr {
  margin-left: auto;
  padding: 4px 14px;
  border: 1px solid var(--sl-danger, #ef4444);
  border-radius: 20px;
  background: transparent;
  color: var(--sl-danger, #ef4444);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-capture-hr:hover { background: var(--sl-danger, #ef4444); color: #fff; }

.baseline-badge {
  margin-left: auto;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}
.baseline-badge.done {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.baseline-capturing {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 0.85rem;
}
.capture-bpm {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--sl-danger, #ef4444);
  min-width: 60px;
}
.capture-max {
  color: var(--sl-text-muted);
  font-size: 0.8rem;
}
.capture-timer {
  color: var(--sl-text-dim);
  font-size: 0.85rem;
  font-weight: 600;
}
.capture-bar {
  width: 60px;
  height: 4px;
  background: var(--sl-surface);
  border-radius: 2px;
  overflow: hidden;
}
.capture-bar-fill {
  height: 100%;
  background: var(--sl-danger, #ef4444);
  border-radius: 2px;
  transition: width 0.2s;
}
.btn-save-hr {
  padding: 3px 12px;
  border: none;
  border-radius: 20px;
  background: var(--sl-danger, #ef4444);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-save-hr:disabled { opacity: 0.4; }
.btn-cancel-hr {
  padding: 2px 8px;
  border: none;
  border-radius: 20px;
  background: transparent;
  color: var(--sl-text-dim);
  font-size: 0.85rem;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RosterScreen — Yogo booking cards
   ═══════════════════════════════════════════════════════════════════════════ */

.roster-screen {
  padding: 1.5rem;
  max-width: 600px;
  margin: 0 auto;
}
.roster-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.roster-header h2 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--sl-text);
}
.roster-source {
  font-size: 0.8rem;
  color: var(--sl-text-dim);
}
.roster-loading,
.roster-empty,
.roster-fallback {
  text-align: center;
  padding: 2rem;
  color: var(--sl-text-muted);
}
.roster-hint {
  font-size: 0.85rem;
  color: var(--sl-text-dim);
  margin-top: 0.5rem;
}
.roster-bookings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.roster-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--sl-card);
  border-radius: var(--sl-radius);
  padding: 0.75rem 1rem;
  border: 1px solid var(--sl-border);
  transition: border-color 0.15s;
}
.roster-card.attending {
  border-color: var(--sl-green);
}
.roster-card.unlinked {
  border-color: var(--sl-orange);
}
.roster-card-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}
.roster-toggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  min-width: 32px;
}
.roster-toggle:disabled {
  cursor: default;
  opacity: 0.5;
}
.roster-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.roster-name {
  font-size: 0.95rem;
  color: var(--sl-text);
  font-weight: 500;
}
.roster-status {
  font-size: 0.75rem;
  color: var(--sl-text-dim);
}
.btn-link-athlete {
  padding: 4px 12px;
  border: 1px solid var(--sl-orange);
  border-radius: var(--sl-radius-pill);
  background: transparent;
  color: var(--sl-orange);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-link-athlete:hover {
  background: var(--sl-orange);
  color: #000;
}
.btn-link-athlete:disabled {
  opacity: 0.4;
  cursor: default;
}

/* ── Pairing: QR scanner split layout ─────────────────────────────────── */

.pairing-screen {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pairing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.pairing-header h2 {
  font-size: 1.5rem;
  margin: 0;
}
.pairing-progress {
  font-size: 0.9rem;
  color: var(--sl-text-muted);
  font-weight: 600;
}
.pairing-progress-bar {
  height: 4px;
  background: var(--sl-card);
  border-radius: 2px;
  margin: 0 0 1.5rem;
  overflow: hidden;
}
.pairing-progress-fill {
  height: 100%;
  background: var(--sl-green);
  border-radius: 2px;
  transition: width 0.3s;
}

/* Split layout */
.pairing-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  flex: 1;
  min-height: 0;
}

/* Athlete list (left) */
.pairing-athlete-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 65vh;
}
.pairing-athlete-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--sl-radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--sl-text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.15s;
  text-align: left;
}
.pairing-athlete-row:hover {
  background: var(--sl-card);
}
.pairing-athlete-row.active {
  background: var(--sl-card);
  border-color: var(--sl-neon-cyan);
  color: var(--sl-text);
}
.pairing-athlete-row.done {
  color: var(--sl-green);
}
.pairing-athlete-row.partial {
  color: var(--sl-text);
}
.pairing-athlete-row .pairing-athlete-initials {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sl-neon-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.pairing-athlete-row.done .pairing-athlete-initials {
  background: var(--sl-green);
  color: #000;
}
.pairing-athlete-row .pairing-athlete-name {
  flex: 1;
  font-weight: 500;
  margin: 0;
}
.pairing-athlete-row .pairing-athlete-status {
  font-size: 1rem;
  flex-shrink: 0;
}

/* Scanner area (right) */
.pairing-scanner-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pairing-current-athlete {
  text-align: center;
}
.pairing-current-athlete h3 {
  font-size: 1.3rem;
  margin: 0;
}

/* Camera scanner */
.pairing-camera {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.pairing-scanner-view {
  width: 100%;
  max-width: 400px;
  min-height: 300px;
  border-radius: var(--sl-radius-lg);
  overflow: hidden;
  background: #000;
}
.pairing-scanner-view video {
  border-radius: var(--sl-radius-lg);
}
.pairing-hint {
  font-size: 0.85rem;
  color: var(--sl-text-muted);
}
.pairing-error {
  color: var(--sl-red);
  font-size: 0.85rem;
}

/* Status cards */
.pairing-status-cards {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 400px;
}
.pairing-status-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--sl-radius);
  background: var(--sl-card);
  border: 1px solid rgba(255,255,255,0.05);
  color: var(--sl-text-dim);
  font-size: 0.9rem;
  font-weight: 500;
}
.pairing-status-card.paired {
  border-color: var(--sl-green);
  color: var(--sl-green);
}

/* Flash overlay */
.pairing-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  animation: pairing-flash-anim 0.4s ease-out forwards;
}
.pairing-flash.flash-success {
  background: rgba(30, 215, 96, 0.15);
}
.pairing-flash.flash-error {
  background: rgba(239, 68, 68, 0.2);
}
@keyframes pairing-flash-anim {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Manual fallback */
.pairing-manual {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Reuse existing section styles */
.pairing-section {
  margin-bottom: 0;
}
.pairing-section h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--sl-text-muted);
  margin: 0 0 0.5rem;
}
.pairing-device-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--sl-card);
  border-radius: var(--sl-radius);
  border: 1px solid var(--sl-green);
  color: var(--sl-green);
}
.btn-unpair {
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--sl-radius-pill);
  background: transparent;
  color: var(--sl-text-dim);
  font-size: 0.8rem;
  cursor: pointer;
}
.btn-unpair:hover {
  border-color: var(--sl-red);
  color: var(--sl-red);
}
.glove-dropdown {
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--sl-radius);
  border: 1px solid rgba(255,255,255,0.1);
  background: var(--sl-card);
  color: var(--sl-text);
  font-size: 0.95rem;
  font-family: var(--sl-font);
  cursor: pointer;
  min-height: 48px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.glove-dropdown:focus {
  border-color: var(--sl-neon-cyan);
  outline: none;
}

/* Navigation */
.pairing-nav {
  display: flex;
  gap: 12px;
  margin-top: 1rem;
}
.pairing-nav .btn-secondary {
  min-width: 120px;
}
.pairing-nav .btn-primary.big {
  flex: 1;
  margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TELEMÓVEL (iPhone) — 2026-08-06
   ═══════════════════════════════════════════════════════════════════════════
   Até aqui este ficheiro tinha ZERO media queries: foi desenhado para a largura
   de um tablet, e o professor passou a usar o telemóvel na sala. Só ADITIVO — o
   layout de tablet acima fica intacto; isto entra abaixo dos 480px.

   Cada regra aqui foi MEDIDA no DOM real a 390px (iPhone 14/15), não estimada.
   O que já cabia — footer, indicador de passos, min-height dos botões — não foi
   tocado de propósito: mexer no que funciona era a forma mais rápida de partir o
   tablet sem ganhar nada no telemóvel.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  /* ── Grelhas: colapsar em vez de comprimir ─────────────────────────────── */
  /* Medido a 390px: 3 colunas dão cards de 111px — o nome do dispositivo parte. */
  .device-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }

  /* ⭐ O BUG que o founder viu. Medido: `280px 1fr` a 390px resolve para
     `280px 46px` — a coluna que contém TODA a UI de emparelhamento fica com 46
     pixels. Empilhado, passa a uma coluna de 350px. (O `pairing-grid` de 2×163px
     tinha o mesmo problema em menor grau.) */
  .pairing-grid,
  .pairing-split { grid-template-columns: 1fr; gap: 16px; }
  /* O min-height:0 do split serve o scroll interno das 2 colunas; empilhado,
     uma coluna a 0 colapsava a lista de atletas. */
  .pairing-split { min-height: auto; }

  /* ── Scanner: a câmara ocupa a largura, e quadrada como o QR ────────────── */
  .pairing-scanner-view {
    max-width: 100%;
    min-height: 0;
    aspect-ratio: 1 / 1;
  }

  /* iOS faz ZOOM na página ao focar um campo com font-size < 16px, e este está a
     0.95rem (15,2px) — o ecrã salta e o professor perde o sítio. (width:100% e
     min-height:48px já estavam certos; não se repetem aqui.) */
  .glove-dropdown { font-size: 16px; }

  /* Aqui viveu `.kit-rows { grid-template-columns: 1fr }`, e NUNCA teve efeito: a
     declaração base de `.kit-rows`, mais abaixo neste ficheiro, tem a mesma especificidade
     e vem depois, logo
     ganhava em qualquer largura. Medido no browser a 390px — o media query casava e a
     grelha vinha `99.36px 99.36px` (#574).

     Removida em vez de reposta, por decisão do founder ao ver o ecrã renderizado. A
     justificação original — «dois nomes lado a lado a 390px cortam» — é falsa e foi
     medida: o `shortName` do KitLiveness encurta para «Ana S.», que ocupa 37-62px numa
     coluna de 107, e ZERO nome trunca. Uma coluna custaria ~90px de altura (30px por fila,
     e o KitLiveness corta em 6) para resolver um truncamento que não existe. */

  /* ── Tipografia: descer um degrau ──────────────────────────────────────── */
  .pairing-header h2 { font-size: 1.15rem; }
  .pairing-current-athlete h3 { font-size: 1.1rem; }
}

/* ── Liveness do equipamento no ecrã do professor ──────────────────────────────
   Painel de AVARIAS, não leaderboard: sem números por atleta, sem ordenação por
   desempenho (ver KitLiveness.tsx e a recusa do PM à contagem de socos ao vivo).
   Desenhado para ser lido de RELANCE, com o telemóvel na mão e a turma à frente. */
.kit-liveness {
  margin-top: 16px;
  background: var(--sl-card);
  border-radius: var(--sl-radius);
  padding: 10px 12px;
}
.kit-head {
  display: flex;
  justify-content: space-between;
  /* ⚠️ O `gap` não é redundante com o `space-between`, e a diferença é o defeito do #542:
     o `.live-remote` é `align-items: center`, logo este painel é SHRINK-TO-FIT. Numa caixa
     max-content não há espaço livre para o `space-between` distribuir — e quando a lista de
     excepções está vazia (o estado saudável, que é o normal) nada alarga a caixa, as duas
     etiquetas encostam, e lê-se «Equipamentotudo a receber». Igual com «sem resposta da
     API» a 0 ou 1 linha. Com ≥2 linhas o intervalo já era confortável, e foi por isso que
     medir só o caso «11 sem sinal» não mostrava nada. */
  gap: 12px;
  align-items: baseline;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sl-text-muted);
  margin-bottom: 8px;
}
.kit-ok    { color: var(--sl-neon-green, #1ed760); letter-spacing: 0; text-transform: none; }
.kit-alarm { color: var(--sl-red); letter-spacing: 0; text-transform: none; font-weight: 600; }
.kit-stale { color: var(--sl-text-muted); letter-spacing: 0; text-transform: none; font-style: italic; }
/* Duas colunas em TODAS as larguras, telemóvel incluído — e é deliberado, não herdado:
   o `shortName` do KitLiveness encurta para «Ana S.», que ocupa 37-62px numa coluna de 107,
   logo nada trunca.
   ⚠️ A versão anterior desta frase acrescentava «e cabem as 11 excepções sem empurrar nada
   para fora do ecrã» — falso, e medido falso pelo commit seguinte: a 390×745 (o viewport
   REAL do Safari, não os 844 do ecrã do aparelho) 11 entradas — seis filas, porque a grelha
   tem duas colunas — punham o painel 19,8px abaixo da
   dobra. É por isso que o KitLiveness corta a lista em 6 (#537). */
.kit-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; }
.kit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 28px;
  /* O nome mais longo («Gonçalo R.») encostava aos pontos sem folga nenhuma. Não aparecia
     em `scrollWidth > clientWidth` — não há ellipsis, o texto CABE — só a olho. */
  gap: 8px;
}
/* #537 — o resto da lista cortada. Discreto de propósito: diz que há mais sem competir
   com as linhas que interessam nem alargar o painel. */
.kit-mais {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--sl-text-muted);
}
.kit-name {
  font-size: 0.85rem;
  color: var(--sl-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kit-dots { display: flex; gap: 5px; flex-shrink: 0; }
.kit-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
/* on = a receber · lost = calado · off = nunca deu sinal.
   «Calado» numa LUVA é desconexão, não descanso: ela manda heartbeat a ~1 Hz, logo uma
   atleta parada continua a alimentar o `lastSeenAt`. Numa CINTA pode ser benigno (o H10 só
   transmite com contacto). Ver o docstring do `Dot` em KitLiveness.tsx e a issue #578. */
.kit-on   { background: #1ed760; }
.kit-lost { background: #e0a800; }
.kit-off  { background: #d93025; }
/* Motivational moment — top-center strip tied to the round chrome, 5m legible.
 * Founder 2026-07-10: a moment must read as PART of the round (a top strip),
 * never an isolated opaque card floating in the center dead-space.
 * Group moments accent the brand green (#1ed760); individual moments use white copy.
 * Positioned top-center so it clears the top-left round pill + top-right ROUND badge.
 */
/* The moment's TVStage wrapper is a direct child of .tv-canvas. .tv-stage is
 * width/height:100% and in normal flow, so a static one consumes the full 1080px
 * canvas height and pushes the round screen (.tv-layout) a viewport down —
 * overflow:hidden then clips it off-screen (round looks empty). Take the moment
 * stage OUT of flow; inset:0 keeps it the same box as the canvas, so the absolute
 * .tv-moment-overlay inside still positions identically. Screen-specific via the
 * data-screen-kind TVStage stamps — the screen's own .tv-stage is untouched. */
.tv-stage[data-screen-kind="moment"] {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.tv-moment-overlay {
  position: absolute;
  left: 50%;
  top: 150px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  max-width: 66%;
  padding: 14px 40px;
  background: rgba(0, 0, 0, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-bottom: 3px solid #1ed760;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(30, 215, 96, 0.22);
  backdrop-filter: blur(6px);
  z-index: 60;
  pointer-events: none;
  white-space: nowrap;
  animation: tv-moment-in 260ms ease-out;
}

.tv-moment-icon {
  font-size: 48px;
  line-height: 1;
}

.tv-moment-copy {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #fff;
  text-transform: uppercase;
}

.tv-moment-sub {
  font-size: 22px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tv-moment-group .tv-moment-copy {
  color: #1ed760;
}

@keyframes tv-moment-in {
  from {
    opacity: 0;
    transform: translate(-50%, -14px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/* ═══ A AULA DE HOJE — pre-class briefing (see InstrucoesScreen.tsx) ═══════
   Rewritten 2026-07-31 to the founder's reference.

   Sized in design px for the fixed 1920×1080 .tv-canvas — no viewport units,
   the canvas transform does the scaling. Class prefix `instr-`.

   Safe area: the TVFrame overlay sits at inset 18px plus a 6px gap and strokes,
   and a real panel adds overscan. Padding clears it, or the header and footer
   land under the chrome (which is exactly what happened on the lobby).

   Moment colour: the accent is DERIVED, not mirrored. The screen sets --i-accent
   from `cue.payload.palette.color` — the same value the WLED reads — so the TV and
   the room cannot drift, and changing MOMENT_INSTRUCOES on the server is enough.
   The hex below is only the fallback for a timeline that arrives without a
   palette; it tracks MOMENT_INSTRUCOES in apps/api/src/common/screen-colours.ts. */
.instr-screen {
  --i-bg: #05070a;
  --i-panel: rgba(255, 255, 255, .022);
  --i-line: rgba(255, 255, 255, .10);
  --i-txt: #f4f7f9;
  --i-dim: #78838e;
  --i-accent: #d91f26;  /* fallback only — the cue palette overrides this inline */

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 62px 68px 54px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 34px;
  background:
    radial-gradient(ellipse 60% 50% at 20% 8%, rgba(217, 31, 38, .10), transparent 65%),
    var(--i-bg);
  color: var(--i-txt);
  font-family: var(--font-display), sans-serif;
}

/* ── corner wedge + knockout mark ── */
.instr-wedge {
  position: absolute; top: 0; left: 0; width: 132px; height: 132px;
  background: var(--i-accent); opacity: .9;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
}
/* Tinted by masking a solid fill — never a colour filter. Constraint from the
   design system: left + top + size <= 116 keeps the glyph inside the triangle. */
.instr-wedge-mark {
  position: absolute; top: 24px; left: 24px; width: 46px; height: 46px;
  background: var(--i-bg);
  -webkit-mask: url(/brand/strikex-mark.png) center/contain no-repeat;
  mask: url(/brand/strikex-mark.png) center/contain no-repeat;
  pointer-events: none;
}

/* ── watermark: only where the centre is low-density ── */
.instr-watermark {
  position: absolute; top: 50%; left: 34%;
  width: 720px; height: 720px; transform: translate(-50%, -50%);
  background: var(--i-accent); opacity: .055;
  -webkit-mask: url(/brand/strikex-mark.png) center/contain no-repeat;
  mask: url(/brand/strikex-mark.png) center/contain no-repeat;
  pointer-events: none;
}

/* ── header ── */
.instr-top {
  position: relative; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 40px;
  padding-left: 118px; /* clear the wedge */
}
.instr-eyebrow {
  font-family: var(--font-mono, monospace); font-weight: 500;
  font-size: 30px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--i-accent);
}
.instr-title {
  margin-top: 10px;
  font-weight: 700; font-size: 92px; line-height: .96;
  letter-spacing: .01em; text-transform: uppercase; color: var(--i-txt);
}
/* padding, not literal spaces — the display face renders them almost flush */
.instr-title .dot { color: var(--i-dim); padding: 0 .16em; }
.instr-top-r { text-align: right; flex: none; }
.instr-count {
  font-weight: 700; font-size: 96px; line-height: .9;
  color: var(--i-accent); font-variant-numeric: tabular-nums;
}
.instr-count-lbl {
  margin-top: 6px;
  font-family: var(--font-mono, monospace); font-size: 26px;
  letter-spacing: .30em; text-transform: uppercase; color: var(--i-dim);
}

/* ── body: combat panel + side list ── */
.instr-body {
  position: relative; z-index: 1; min-height: 0;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px;
}

.instr-panel,
.instr-combat {
  min-height: 0; overflow: hidden;
  border: 2px solid var(--i-line); border-radius: 16px;
  background: var(--i-panel);
  padding: 26px 32px;
  display: flex; flex-direction: column;
}
.instr-combat { border-color: rgba(217, 31, 38, .30); }

.instr-panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  margin-bottom: 20px;
}
.instr-panel-name {
  font-family: var(--font-mono, monospace); font-weight: 500;
  font-size: 28px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--i-accent);
}
.instr-panel-name .sep { color: var(--i-dim); }
.instr-panel.forca .instr-panel-name,
.instr-panel.aerobico .instr-panel-name,
.instr-panel.relaxamento .instr-panel-name { color: var(--i-dim); }
.instr-station {
  font-weight: 700; font-size: 26px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--i-txt);
}

/* ── the drills: the subject of the screen ── */
.instr-drills { display: flex; flex-direction: column; gap: 26px; min-height: 0; }
.instr-drill + .instr-drill { border-top: 2px solid var(--i-line); padding-top: 26px; }
.instr-drill-lbl {
  font-family: var(--font-mono, monospace); font-size: 26px;
  letter-spacing: .30em; text-transform: uppercase; color: var(--i-dim);
  margin-bottom: 10px;
}
/* Signage, not body copy: 62px ≈ 39mm cap height on a 75" panel, which is the
   legibility floor at 8m. Wraps rather than shrinking. */
.instr-strikes {
  font-weight: 700; font-size: 62px; line-height: 1.06;
  letter-spacing: .01em; text-transform: uppercase; color: var(--i-txt);
}

/* ── side column ── */
.instr-side { display: grid; grid-auto-rows: minmax(0, auto); gap: 24px; align-content: start; min-height: 0; }
.instr-side .instr-panel { padding: 22px 28px; }
.instr-list { display: flex; flex-direction: column; gap: 8px; }
.instr-list-item {
  font-weight: 700; font-size: 44px; line-height: 1.14;
  letter-spacing: .01em; text-transform: uppercase; color: var(--i-txt);
}

/* ── footer ── */
.instr-foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 34px;
}
.instr-foot-bar {
  flex: 1; min-width: 0;
  display: flex; align-items: baseline; gap: 18px;
  border: 2px solid rgba(217, 31, 38, .30); border-radius: 14px;
  padding: 20px 30px;
}
.instr-foot-lbl {
  font-family: var(--font-mono, monospace); font-size: 26px;
  letter-spacing: .28em; text-transform: uppercase; color: var(--i-accent);
}
.instr-foot-val {
  font-weight: 700; font-size: 40px; letter-spacing: .01em;
  text-transform: uppercase; color: var(--i-txt);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.instr-foot-val .sep { color: var(--i-dim); }
.instr-foot-spacer { flex: 1; }
.instr-foot-cadence {
  font-family: var(--font-mono, monospace); font-size: 26px;
  color: var(--i-dim); white-space: nowrap;
}

/* The lockup: never masked, never tinted, never below 150px wide. */
.instr-lockup { flex: none; text-align: right; }
.instr-lockup img { display: block; width: 210px; height: auto; margin-left: auto; }
.instr-lockup-sub {
  display: block; margin-top: 8px;
  font-family: var(--font-mono, monospace); font-size: 24px;
  letter-spacing: .30em; text-transform: uppercase; color: var(--i-dim);
}

@media (prefers-reduced-motion: reduce) {
  .instr-screen * { animation: none !important; transition: none !important; }
}
/* ════════════════════════════════════════════════════════════════════════════
   StrikeX TV — Round Active (handoff ECRA Strike X, 2026-08-07)

   The handoff's `tv-round-active.css` / `tv-frame.css` are a re-export of our own
   tv.css and carry none of this design — it existed only as inline styles on the
   reference HTML. This file is where it lands.

   Namespace `rax-`. Never redefine a @keyframes tv.css already owns (every
   `ras2-*`, `sx-*`, `ptb-*`, `lct-*` name is taken): a local redefinition wins
   silently and rewrites the whole TV. `ras2-bigEq` below is REFERENCED, not
   redefined.
   ════════════════════════════════════════════════════════════════════════════ */

.rax-screen { display: flex; flex-direction: column; }

/* The grid layout brings its own background and drops the previous screen's
   atmosphere (four beams, 36 particles, two pulsing overlays, a global sweep).
   Those were tuned for a screen of two big words; under a six-card grid they wash
   the cards out — measured on the wall, the station labels and the dimmed strike
   chips (which sit at 28% white by design) stopped reading at all. The colour of
   the class still arrives, through the frame, the header and the clock block. */
.rax-screen.has-grid {
  background: radial-gradient(130% 100% at 50% -10%, #07242a 0%, #04121a 45%, #01080c 100%);
}
.rax-screen.has-grid::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 340px rgba(0, 0, 0, .85);
}
/* The [X] watermark. Painted by masking a solid fill in the class colour rather
   than tinting the artwork, so it follows the palette; it sits behind everything
   (z-index 0 against the body's 3). The reference breathes 4%→9%, but it sits on
   a lighter backdrop and its accent is always vivid — ours is darker and the class
   colour goes muted late in the arc, where 4% is simply not there. */
.rax-screen.has-grid::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 900px; height: 900px;
  background: var(--energy-color, #22d3ee);
  -webkit-mask: url('/brand/strikex-mark.png') center / contain no-repeat;
  mask: url('/brand/strikex-mark.png') center / contain no-repeat;
  animation: rax-markBreathe 7s ease-in-out infinite;
}
@keyframes rax-markBreathe { 0%, 100% { opacity: .08; } 50% { opacity: .16; } }
/* .lct-app is height:100% for the headerless layout; as a flex child it takes
   what the header leaves instead. The atmosphere layers are absolute/fixed, so
   they stay out of this flow and still fill to the edges. */
.rax-screen > .lct-app { flex: 1 1 auto; min-height: 0; height: auto; }
/* Both of these paddings existed to clear the frame's "ROUND n / N" badge, which
   this screen no longer draws — the header carries the count instead. Reclaiming
   them pays back most of the height the header takes; without it the sidebar
   loses its last station off the bottom edge on non-combat rounds. */
.rax-screen > .lct-app { padding-top: 0; }
.rax-screen .lct-side { padding-top: 0; }

/* ── Header ────────────────────────────────────────────────────────────────
   Left padding clears the corner [X] the frame paints at x≈56–122. */
.rax-header {
  position: relative; z-index: 4; flex: none;
  display: flex; align-items: center; gap: 18px;
  padding: 34px 60px 0 150px;
  font-family: 'Barlow Condensed', sans-serif;
}

.rax-round {
  font: 700 56px/1 'Barlow Condensed', sans-serif;
  letter-spacing: .04em; color: #fff; white-space: nowrap;
  text-shadow: 0 0 26px color-mix(in srgb, var(--energy-color, #22d3ee) 40%, transparent);
}
.rax-round i { font-style: normal; color: rgba(255, 255, 255, .3); }

/* One segment per COMBAT round — the same count the round label carries. */
.rax-segbar { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; padding: 0 30px; }
.rax-seg { flex: 1; height: 12px; background: rgba(255, 255, 255, .12); }
.rax-seg.done { background: color-mix(in srgb, var(--energy-color, #22d3ee) 55%, transparent); }
.rax-seg.now { height: 22px; background: var(--energy-color, #22d3ee); }

.rax-room { margin-left: auto; display: flex; align-items: baseline; gap: 16px; }
.rax-room-bpm {
  font: 700 62px/1 'Barlow Condensed', sans-serif;
  color: var(--energy-color, #22d3ee); font-variant-numeric: tabular-nums;
}
.rax-eq { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.rax-eq i {
  width: 9px; height: 100%; transform-origin: bottom;
  background: color-mix(in srgb, var(--energy-color, #22d3ee) 85%, transparent);
  animation: ras2-bigEq .6s ease-in-out infinite;
}
.rax-eq i:nth-child(2) { animation-duration: .74s; animation-delay: .08s; }
.rax-eq i:nth-child(3) { animation-duration: .52s; animation-delay: .16s; }

/* ── Clock bar ─────────────────────────────────────────────────────────────
   A solid block in the class palette colour. `--rax-ink` is picked in TS by
   luminance, not hardcoded: the palette sweeps through mid-tones where a fixed
   dark ink drops below 4.5:1 on the largest number on the wall. */
.rax-clock {
  flex: none; margin-top: 14px;
  display: flex; align-items: center; gap: 28px;
  padding: 8px 30px;
  background: var(--energy-color, #22d3ee);
  color: var(--rax-ink, #05080b);
  font-family: 'Barlow Condensed', sans-serif;
}
.rax-clock-time {
  font: 700 130px/.86 'Barlow Condensed', sans-serif;
  display: flex; align-items: baseline; font-variant-numeric: tabular-nums;
}
.rax-clock-colon { padding: 0 4px; animation: rax-colonBlink 1s steps(2) infinite; }
.rax-clock-right { flex: 1; min-width: 0; }
.rax-clock-track { height: 14px; background: color-mix(in srgb, var(--rax-ink, #05080b) 20%, transparent); }
.rax-clock-fill { height: 100%; background: var(--rax-ink, #05080b); }
.rax-clock-meta { margin-top: 12px; display: flex; align-items: center; gap: 18px; }
.rax-clock-dur {
  font: 700 30px/1 'Barlow Condensed', sans-serif; letter-spacing: .08em;
  color: color-mix(in srgb, var(--rax-ink, #05080b) 70%, transparent); white-space: nowrap;
}
.rax-next-chip {
  margin-left: 14px; padding: 4px 14px; flex: none;
  background: var(--rax-ink, #05080b); color: var(--energy-color, #22d3ee);
  font: 700 26px/1 'Barlow Condensed', sans-serif; letter-spacing: .14em; white-space: nowrap;
}
.rax-next-val {
  font: 700 38px/1 'Barlow Condensed', sans-serif;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The lockup art is white; it only needs inverting when the ink is the dark one. */
.rax-lockup { width: 140px; display: block; margin-left: auto; flex: none; }
.rax-lockup.on-light { filter: invert(1); }

/* ── Station grid ──────────────────────────────────────────────────────────
   Six cards, fixed order, athletes inside their own station. A card is present
   whether or not anyone is on it: the grid must not reflow when someone joins
   or leaves mid-round. */

/* Fixed per-station colours (handoff §2.2, founder chose "Fixas" over the
   palette-sampling modes): a station keeps its colour class after class, so an
   athlete finds theirs at a glance. The class palette still drives the frame,
   the header and the clock — those change per round, these do not. */
.rax-body {
  --sx-st-muay_thai: #22d3ee;
  --sx-st-aqua_bag: #3de07a;
  --sx-st-forca: #b98cff;
  --sx-st-meta_quest: #ff9d2e;
  --sx-st-blaze_pods: #ffd23f;
  --sx-st-sparmaster: #ff5f5f;

  position: relative; z-index: 3;
  flex: 1 1 auto; min-height: 0;
  margin: 14px 60px 44px;
  display: flex; gap: 44px;
  font-family: 'Barlow Condensed', sans-serif;
}
.rax-left { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.rax-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.rax-right { width: 560px; flex: none; display: flex; flex-direction: column; min-height: 0; gap: 26px; }

/* ── Station card ──────────────────────────────────────────────────────────
   min-height:0 + overflow:hidden on the card, flex:1 on the drill area and
   flex:none on the athletes: a long sequence is clipped at the drill, never by
   pushing the athletes off the bottom. */
.rax-card {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  box-sizing: border-box;
  padding: 44px 30px 16px 4px;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--st), transparent) 1;
  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--st) 55%, transparent), transparent);
  background-size: 220px 4px; background-repeat: no-repeat; background-position: -220px 0;
  animation: rax-lineCharge 3.2s linear infinite;
}
/* The three single-athlete cards size to their content; Força takes the slack. */
.rax-card.solo { flex: none; padding: 34px 24px 14px 4px; }
.rax-card.grow { flex: 1; padding-right: 24px; }

/* ── Non-combat round ──────────────────────────────────────────────────────
   One card across the width the two combat cards share. Everyone is doing the
   same thing, so the exercise is said once — printing it in both columns is the
   duplication the founder killed on 2026-08-01. */
.rax-grid.solo { grid-template-columns: 1fr; }
.rax-card.wide { padding-right: 44px; }
/* The whole left half for one exercise: it can afford to be read from the door.
   Centred in its band rather than top-aligned — a single word left a hole where
   six strike chips used to sit. */
.rax-card.wide .rax-drill-name {
  font: 700 132px/.94 'Barlow Condensed', sans-serif;
  display: flex; align-items: center;
}
.rax-card.wide .rax-force { display: flex; flex-direction: column; justify-content: center; }
.rax-card.wide .rax-force-move { font-size: 108px; }
.rax-card.wide .rax-force-cd { font-size: 76px; }
.rax-card.wide .rax-force-pips { margin-top: 20px; }
/* Six athletes under one card read as two columns, not one long list. */
.rax-athletes.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 44px;
}

.rax-card-label {
  flex: none; display: flex; align-items: center; gap: 16px;
  text-transform: uppercase;
  font: 500 30px/1 'JetBrains Mono', monospace; letter-spacing: .22em; color: var(--st);
}
/* Station number (1–6, handoff v3 §4) — same colour as the card it heads, so the
   number and the station read as one thing. Derived from STATION_LAYOUT, never
   hand-written per card. */
.rax-st-num {
  flex: none; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--st); color: #05080b;
  font: 700 44px/1 'Barlow Condensed', sans-serif; letter-spacing: 0;
}

/* ── Strike sequence ───────────────────────────────────────────────────────
   Chips wrap only at the separators. `--rax-strike-fs` is stepped in TS by chip
   count: the authored drill can carry far more than the six the design sketches
   (a 3-segment × 4-strike drill is 14 chips), and clipping half the drill is
   worse than shrinking it. */
.rax-strikes {
  margin-top: 26px; flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px 12px;
}
.rax-strike {
  /* Uppercase, as the reference sets it. Not cosmetic: `jab` in lowercase Barlow
     Condensed is roughly two thirds the height of `JAB`, so the drill read small
     and left the card looking half empty. */
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  text-transform: uppercase;
  font-size: var(--rax-strike-fs, 84px); line-height: 1; padding: 2px 12px;
  color: rgba(255, 255, 255, .28);
  transition: color .12s linear, text-shadow .12s linear;
}
/* Lit by the playhead-derived index, not by a self-cycling keyframe: the drill's
   authored segment durations decide the cadence (founder, decision 1). */
.rax-strike.is-now {
  color: #fff;
  text-shadow: 0 0 40px var(--st), 0 0 14px var(--st);
}
.rax-strike.is-rest { color: rgba(255, 255, 255, .18); }
/* The separator rides the chip instead of being its own flex item, so a wrap can
   never leave an orphan `»` at the end of a line. */
.rax-strike:not(:last-child)::after {
  content: '»';
  margin-left: 12px; font-size: .74em; letter-spacing: -.08em;
  color: var(--st); opacity: .5; text-shadow: none;
}

/* Força circuit, laid out on one line so it fits the card's ~176px of drill
   room — the sidebar version stacked move over countdown and measured ~187px. */
.rax-force { margin-top: 26px; flex: 1; min-height: 0; overflow: hidden; }
.rax-force-row { display: flex; align-items: baseline; gap: 20px; }
.rax-force-move {
  font: 700 var(--rax-force-fs, 66px)/1 'Barlow Condensed', sans-serif; color: #fff;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 0 34px color-mix(in srgb, var(--st) 50%, transparent);
}
.rax-force-move.rest { color: var(--st); }
.rax-force-cd {
  margin-left: auto; flex: none;
  font: 700 48px/1 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; color: #fff;
}
.rax-force-cd.rest { color: #f59e0b; }
.rax-force-pips { display: flex; gap: 6px; margin-top: 14px; }
.rax-force-pip { width: 44px; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.rax-force-pip.work { background: rgba(255, 255, 255, .3); }
.rax-force-pip.active { background: var(--st); }
/* Stations with no drill (Meta Quest, Lights, SparMaster) show the name and the
   athletes — no "sem drill" line, no dead band. */
.rax-drill-name {
  margin-top: 26px; flex: 1; min-height: 0; overflow: hidden;
  font: 700 var(--rax-force-fs, 66px)/.92 'Barlow Condensed', sans-serif; color: #fff;
  text-shadow: 0 0 34px color-mix(in srgb, var(--st) 50%, transparent);
}

/* ── Athlete rows ──────────────────────────────────────────────────────────*/
.rax-athletes {
  flex: none; margin-top: 16px; padding-top: 18px;
  border-top: 3px solid color-mix(in srgb, var(--st) 85%, transparent);
  display: flex; flex-direction: column; gap: 14px;
}
.rax-card.solo .rax-athletes { margin-top: 16px; padding-top: 0; border-top: 0; }
/* Reserves the row height even with nobody on the station, so the grid holds
   still when an athlete rotates in or out. */
.rax-athletes:empty { min-height: 44px; }

.rax-athlete { display: flex; align-items: center; gap: 14px; }
/* Same station number as the card header (handoff v3 §4), before the avatar —
   only rendered when the row belongs to a fixed station (StationCard passes it;
   SoloCard's athletes don't, since aeróbico/relaxamento is not one of the six). */
.rax-a-num {
  flex: none; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--st); color: #05080b;
  font: 700 28px/1 'Barlow Condensed', sans-serif;
}
/* Initials are a first-class state, not a fallback: roughly four athletes in
   eleven have no photo. Avatar renders them as bare text, so the size and the
   disc both come from here — unstyled they landed at the browser's 16px. */
.rax-a-avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1);
  font: 700 24px/1 'Barlow Condensed', sans-serif; color: rgba(255, 255, 255, .8);
}
.rax-card.solo .rax-a-avatar { width: 46px; height: 46px; }
.rax-a-name {
  flex: 1; min-width: 0; font: 700 34px/1 'Barlow Condensed', sans-serif; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rax-card.solo .rax-a-name { font-size: 38px; }
/* Says what it measures. `#1` on a screen that by design carries no live score
   would be read as the class ranking. */
.rax-a-lead {
  flex: none; padding: 2px 10px; background: var(--st); color: #05080b;
  font: 700 24px/1.15 'Barlow Condensed', sans-serif; letter-spacing: .04em;
  animation: rax-leadPulse 1.6s ease-in-out infinite;
}
.rax-a-effort { width: 62px; height: 8px; flex: none; background: rgba(255, 255, 255, .12); }
.rax-a-effort i { display: block; height: 100%; background: rgba(255, 255, 255, .55); }
.rax-athlete.lead .rax-a-effort i { background: var(--st); }
.rax-a-dot {
  width: 11px; height: 11px; flex: none; border-radius: 50%;
  background: rgba(255, 255, 255, .75); box-shadow: 0 0 8px rgba(255, 255, 255, .75);
  animation: ras2-bpmPulse var(--pulse-speed, .46s) ease-in-out infinite;
}
.rax-athlete.lead .rax-a-dot { background: var(--st); box-shadow: 0 0 8px var(--st); }
.rax-a-bpm {
  width: 66px; flex: none; text-align: right;
  font: 700 40px/1 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums; color: #fff;
}
.rax-athlete.lead .rax-a-bpm { color: var(--st); }

@keyframes rax-colonBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .18; } }
@keyframes rax-lineCharge { 0% { background-position: -220px 0; } 100% { background-position: 220px 0; } }
@keyframes rax-leadPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) {
  .rax-eq i,
  .rax-clock-colon,
  .rax-card,
  .rax-a-lead,
  .rax-a-dot { animation: none; }
  .rax-screen.has-grid::before { animation: none; opacity: .12; }
}
/* ============================================================================
   RevealSuspenseScreen.css
   Epic theatrical reveal animation for reveal_suspense TV state
   ============================================================================ */
/* Moment colour contract: this screen's green matches MOMENT_GREEN in
   apps/api/src/common/screen-colours.ts (#1ed760). The LED reads the same
   colour from cue.payload.palette.color. Keep the two in sync. */

/* ============================================================================
   BASE CONTAINER STYLES
   ============================================================================ */

.reveal-suspense-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow: hidden;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

/* ============================================================================
   BACKGROUND GRADIENT LAYER
   ============================================================================ */

.suspense-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(30, 215, 96, 0.1) 40%,
    rgba(0, 0, 0, 0.9) 100%
  );
  z-index: 1;
}

/* ============================================================================
   SCANLINES OVERLAY
   ============================================================================ */

.suspense-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 2px,
    rgba(30, 215, 96, 0.05) 2px,
    rgba(30, 215, 96, 0.05) 4px
  );
  z-index: 3;
  pointer-events: none;
}

/* ============================================================================
   CONTENT CONTAINER
   ============================================================================ */

.suspense-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(24px * var(--tv-scale));
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============================================================================
   LABEL STYLING
   ============================================================================ */

.suspense-label {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 500;
  letter-spacing: calc(2px * var(--tv-scale));
  color: #1ed760;
  opacity: 0.6;
  text-transform: uppercase;
}

/* ============================================================================
   ENERGY WRAPPER WITH GLOW HALO
   ============================================================================ */

.suspense-energy-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(12px * var(--tv-scale));
}

.suspense-glow-halo {
  position: absolute;
  width: calc(300px * var(--tv-scale));
  height: calc(300px * var(--tv-scale));
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(30, 215, 96, 0.4) 0%,
    rgba(30, 215, 96, 0.15) 40%,
    rgba(30, 215, 96, 0) 100%
  );
  animation: radialPulse 2s ease-in-out infinite;
  z-index: 0;
}

/* ============================================================================
   ENERGY LABEL AND VALUE
   ============================================================================ */

.suspense-energy-label {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 500;
  letter-spacing: calc(1px * var(--tv-scale));
  color: #1ed760;
  opacity: 0.5;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
}

.suspense-energy-value {
  font-size: calc(64px * var(--tv-scale));
  font-weight: 700;
  letter-spacing: calc(4px * var(--tv-scale));
  color: #1ed760;
  line-height: 1;
  position: relative;
  z-index: 2;
  text-shadow: 0 0 20px rgba(30, 215, 96, 0.5);
  animation: textShimmer 2s ease-in-out infinite;
}

/* ============================================================================
   TOP 3 ATHLETES LAYER
   ============================================================================ */

.suspense-athletes {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(20px * var(--tv-scale));
  z-index: 2;
  pointer-events: none;
}

.suspense-athlete-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12px * var(--tv-scale));
  opacity: 0.3;
  filter: blur(15px);
  position: relative;
}

.suspense-athlete-item-avatar {
  width: calc(60px * var(--tv-scale));
  height: calc(60px * var(--tv-scale));
  border-radius: 50%;
  background: linear-gradient(135deg, #1ed760, #1aa852);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: 700;
  font-size: calc(30px * var(--tv-scale));
  overflow: hidden;
}

.suspense-athlete-item-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.suspense-athlete-item-name {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  max-width: calc(80px * var(--tv-scale));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suspense-athlete-item-score {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  color: #1ed760;
  text-align: center;
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

/**
 * energyGrow: Grows the value from 0.8x to 1.2x
 * Duration is controlled via inline style (--duration variable)
 * Linear easing for predictable growth
 */
@keyframes energyGrow {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1.2);
  }
}

/**
 * radialPulse: Breathing pulse effect on the glow halo
 * 2 seconds, ease-in-out, infinite
 * Pulsates opacity and scale simultaneously
 */
@keyframes radialPulse {
  0%, 100% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 0.3;
  }
}

/**
 * textShimmer: Shimmering text glow effect on energy value
 * 2 seconds, ease-in-out, infinite
 * Pulsates text-shadow glow intensity
 */
@keyframes textShimmer {
  0% {
    text-shadow: 0 0 20px rgba(30, 215, 96, 0.5);
  }
  50% {
    text-shadow: 0 0 40px rgba(30, 215, 96, 0.8), 0 0 60px rgba(30, 215, 96, 0.4);
  }
  100% {
    text-shadow: 0 0 20px rgba(30, 215, 96, 0.5);
  }
}

/**
 * suspenseExit: Fade and slide up exit animation
 * 400ms, ease-out
 * Used on .reveal-suspense-screen.exiting
 */
@keyframes suspenseExit {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-50px);
  }
}

/**
 * Exit state: Applied when screen is being dismissed
 * Triggers suspenseExit animation
 */
.reveal-suspense-screen.exiting {
  animation: suspenseExit 400ms ease-out forwards;
}
/* Moment colour contract: this screen's green matches MOMENT_GREEN in
   apps/api/src/common/screen-colours.ts (#1ed760). The LED reads the same
   colour from cue.payload.palette.color. Keep the two in sync. */
.interval-screen {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
  gap: calc(24px * var(--tv-scale, 1));
  text-align: center;
  animation: interval-bg-pulse 2.4s ease-in-out infinite;
}

/* Whole-screen background tint pulse — base #000 brightens to a deep green
   wash every 2.4s so the entire TV (not just center) reads as "breathing". */
@keyframes interval-bg-pulse {
  0%, 100% { background: #000; }
  50%      { background: #04160a; }
}

/* Full-screen green glow overlay — radial wash from center that fades to
   transparent at corners, pulsing in sync with the bg tint. Combined with
   interval-bg-pulse this makes the whole viewport breathe green light. */
.interval-pulse {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(30, 215, 96, 0.18) 0%,
    rgba(30, 215, 96, 0.08) 40%,
    rgba(30, 215, 96, 0.03) 70%,
    transparent 100%
  );
  animation: interval-pulse-glow 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes interval-pulse-glow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1;    }
}

/* Watermark — the [X] at 760px behind the countdown. This is the emptiest screen
   of the class, so the brand costs no information here. Green matches the moment
   colour contract at the top of this file, so the TV and the LED agree.
   The animation is `sx-watermark-breathe` (defined in tv.css) — deliberately NOT
   `sx-breathe`, which is already the TVFrame ring pulse. */
.interval-watermark {
  position: absolute; top: 50%; left: 50%;
  width: calc(760px * var(--tv-scale, 1)); height: calc(760px * var(--tv-scale, 1));
  transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none;
  background: var(--interval-accent, #1ed760);  /* cue palette; hex is the fallback */
  -webkit-mask: url(/brand/strikex-mark.png) center/contain no-repeat;
  mask: url(/brand/strikex-mark.png) center/contain no-repeat;
  animation: sx-watermark-breathe 7s ease-in-out infinite;
}

/* Defined here, next to its only consumer. Deliberately NOT `sx-breathe` — that
   name is the TVFrame ring pulse in tv.css; redefining it breaks the frame. */
@keyframes sx-watermark-breathe {
  0%, 100% { opacity: 0.045; }
  50%      { opacity: 0.085; }
}

.interval-screen > *:not(.interval-pulse):not(.interval-watermark) { position: relative; z-index: 1; }

.interval-label {
  font-family: 'Barlow', sans-serif;
  font-size: calc(30px * var(--tv-scale, 1));
  letter-spacing: 0.35em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  font-weight: 300;
}

.interval-timer {
  font-family: 'Bebas Neue', sans-serif;
  font-size: calc(260px * var(--tv-scale, 1));
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 calc(40px * var(--tv-scale, 1)) rgba(30, 215, 96, 0.35),
    0 0 calc(80px * var(--tv-scale, 1)) rgba(30, 215, 96, 0.18);
  animation: interval-timer-pulse 1s ease-in-out infinite;
}

@keyframes interval-timer-pulse {
  0%, 100% { transform: scale(1);     opacity: 1;    }
  50%      { transform: scale(1.025); opacity: 0.95; }
}

.interval-instruction {
  font-family: 'Bebas Neue', sans-serif;
  font-size: calc(44px * var(--tv-scale, 1));
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
}

.interval-next {
  margin-top: calc(36px * var(--tv-scale, 1));
  font-family: 'Barlow', sans-serif;
  font-size: calc(30px * var(--tv-scale, 1));
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: baseline;
  gap: calc(10px * var(--tv-scale, 1));
}

.interval-next-label {
  color: rgba(255, 255, 255, 0.28);
  text-transform: uppercase;
  font-size: calc(30px * var(--tv-scale, 1));
  letter-spacing: 0.18em;
}

.interval-next-drill {
  color: #1ed760;
  font-weight: 600;
  font-size: calc(30px * var(--tv-scale, 1));
}
/* TV Lobby — pre-class loadout check. Scoped under .lobby-screen so it never
   bleeds into other TV screens. Palette matches the TV design system
   (#000 / Spotify green #1ed760). */
.lobby-screen {
  --lob-green: #1ed760;
  --lob-green-rgb: 30, 215, 96;
  --lob-amber: #f5a623;
  --lob-amber-rgb: 245, 166, 35;
  --lob-waiting-ink: #5d6b62;
  --lob-lost: #ff3b3b;
  --lob-lost-rgb: 255, 59, 59;
  --lob-edge: #15201a;
  --lob-ink-dim: rgba(255, 255, 255, 0.46);
  --lob-ink-faint: rgba(255, 255, 255, 0.2);
  --lob-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: #fff;
  display: flex;
  flex-direction: column;
}

/* ── Ambient ── */
.lob-atmos { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.lob-glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5; }
.lob-glow.a { width: 60%; height: 60%; top: -25%; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(var(--lob-green-rgb), 0.16), transparent 70%); animation: lobDrift 16s ease-in-out infinite; }
.lob-glow.b { width: 40%; height: 40%; bottom: -15%; right: -10%;
  background: radial-gradient(circle, rgba(var(--lob-green-rgb), 0.09), transparent 70%); animation: lobDrift2 22s ease-in-out infinite; }
.lob-scan { position: absolute; inset: 0; opacity: 0.5;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.012) 3px 4px); }

/* Safe area — the TVFrame overlay (inset 18px + 6px gap + strokes) and the real
   panel's overscan both eat the edges. At 32px padding the eyebrow, the room label
   and the footer message all landed UNDER the frame on the 75" TV. Clear it. */
.lob-shell { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 18px);
  padding: clamp(28px, 4.4vh, 60px) clamp(30px, 3.2vw, 64px); height: 100%; box-sizing: border-box; }

/* ── Top ── */
.lob-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.lob-eyebrow { display: flex; align-items: center; gap: 10px; color: var(--lob-green);
  font-weight: 700; letter-spacing: 3.5px; font-size: clamp(15px, 1.6vw, 30px); }
.lob-eyebrow i { width: 9px; height: 9px; border-radius: 50%; background: var(--lob-green);
  box-shadow: 0 0 10px 2px rgba(var(--lob-green-rgb), 0.8); animation: lobBeat 1.6s ease-in-out infinite; }
.lob-cls { text-align: right; }
.lob-lockup { display: block; margin-left: auto; height: clamp(26px, 2.6vw, 52px); width: auto; }
.lob-cls .c2 { font-size: clamp(13px, 1.2vw, 24px); letter-spacing: 2.5px; color: var(--lob-ink-dim); margin-top: 8px; }

/* ── Hero readiness ── */
.lob-hero { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: clamp(24px, 3vw, 56px); }
.lob-frac { display: flex; align-items: baseline; gap: clamp(8px, 1vw, 16px); line-height: 0.82; }
.lob-frac .n { font-family: var(--lob-mono); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 8vh, 96px); letter-spacing: -3px; text-shadow: 0 0 50px rgba(var(--lob-green-rgb), 0.35); }
.lob-frac.all .n { color: var(--lob-green); }
.lob-frac .sep { font-family: var(--lob-mono); font-size: clamp(26px, 5vh, 56px); color: var(--lob-ink-faint); font-weight: 300; }
.lob-frac .tot { font-family: var(--lob-mono); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 5vh, 56px); color: var(--lob-ink-dim); }
.lob-frac .word { margin-left: clamp(8px, 1.2vw, 20px); align-self: center; }
.lob-frac .word .w1 { font-weight: 800; letter-spacing: 4px; font-size: clamp(22px, 2.4vw, 46px); color: var(--lob-green); }
.lob-frac .word .w2 { font-size: clamp(13px, 1.2vw, 24px); letter-spacing: 3px; color: var(--lob-ink-dim); margin-top: 4px; }
.lob-meter-wrap { align-self: end; min-width: 0; }
.lob-meter-head { display: flex; justify-content: space-between; font-size: clamp(14px, 1.3vw, 26px);
  letter-spacing: 2.5px; color: var(--lob-ink-dim); margin-bottom: 9px; font-weight: 600; }
.lob-meter { height: clamp(10px, 0.9vw, 16px); border-radius: 99px; background: #10140f;
  box-shadow: inset 0 0 0 1px var(--lob-edge); overflow: hidden; }
.lob-meter .fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #0f9c44, var(--lob-green));
  box-shadow: 0 0 18px rgba(var(--lob-green-rgb), 0.55); transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* ── Roster ── height-filling grid so cards shrink to fit (TV = no scroll).
   --lob-cols set inline by the component from athlete count. grid-auto-rows:1fr
   splits the roster's height across rows = ceil(count/cols) → never overflows. */
.lob-roster { flex: 1; min-height: 0; display: grid;
  grid-template-columns: repeat(var(--lob-cols, 4), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr); gap: clamp(8px, 1vh, 16px); align-content: stretch; }
/* container-type:size → card internals size in cqh/cqw, scaling to whatever
   height the grid gives the card. min-height:0 lets it shrink below content. */
.lob-card { position: relative; border-radius: 18px; min-height: 0; overflow: hidden;
  container-type: size;
  padding: clamp(8px, 4.5cqh, 14px); background: linear-gradient(180deg, #0b0f0c, #070908);
  box-shadow: inset 0 0 0 1px var(--lob-edge);
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto minmax(0, auto);
  column-gap: clamp(10px, 2cqw, 16px); row-gap: clamp(4px, 2.5cqh, 8px); align-items: center;
  transition: box-shadow 0.5s, background 0.5s; }
.lob-avatar { grid-row: 1; position: relative; width: clamp(44px, 34cqh, 92px); aspect-ratio: 1; border-radius: 14px;
  overflow: hidden; display: grid; place-items: center; font-weight: 800; font-size: clamp(16px, 14cqh, 34px);
  color: var(--lob-ink-dim); background: #0e1410; box-shadow: inset 0 0 0 1px var(--lob-edge); }
.lob-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lob-who { grid-row: 1; min-width: 0; }
.lob-name { font-weight: 800; font-size: clamp(20px, 17cqh, 40px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Wraps to at most two lines instead of truncating: "LIGAÇÃO PERDIDA · RECONECTAR"
   is the most urgent string on the screen and must never be cut to "RECONEC…". */
.lob-state { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.15;
  font-size: clamp(12px, 9cqh, 22px); letter-spacing: 1.4px; font-weight: 700; margin-top: clamp(2px, 2cqh, 4px); color: var(--lob-waiting-ink); }
.lob-score { grid-row: 1; text-align: right; font-family: var(--lob-mono); font-variant-numeric: tabular-nums; }
.lob-score .rk { font-size: clamp(10px, 7cqh, 18px); color: var(--lob-ink-faint); }
.lob-score .pts { font-size: clamp(13px, 10cqh, 24px); font-weight: 700; color: var(--lob-ink-dim); }

.lob-rig { grid-row: 2; grid-column: 1 / -1; display: flex; gap: clamp(6px, 2cqw, 12px); align-self: stretch; align-items: center; }
.lob-gear { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(5px, 2cqw, 8px); height: clamp(28px, 24cqh, 52px);
  border-radius: 12px; background: #0a0e0b; box-shadow: inset 0 0 0 1px var(--lob-edge); color: var(--lob-waiting-ink);
  transition: color 0.4s, background 0.4s, box-shadow 0.4s; position: relative; }
.lob-gear svg { width: clamp(15px, 13cqh, 26px); height: clamp(15px, 13cqh, 26px); flex: none; }
.lob-gear .lab { font-size: clamp(12px, 9cqh, 22px); font-weight: 800; letter-spacing: 1.5px; }
.lob-gear.on { color: var(--lob-green); background: rgba(var(--lob-green-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--lob-green-rgb), 0.55), 0 0 16px rgba(var(--lob-green-rgb), 0.2); }
.lob-gear.on svg { animation: lobPop 0.45s cubic-bezier(0.2, 1.4, 0.3, 1); }
.lob-gear.lost { color: var(--lob-lost); background: rgba(var(--lob-lost-rgb), 0.16);
  box-shadow: inset 0 0 0 1.5px rgba(var(--lob-lost-rgb), 0.8); animation: lobLostGear 0.7s ease-in-out infinite; }
.lob-warn { position: absolute; top: 4px; right: 5px; color: var(--lob-amber); display: flex; }
.lob-warn svg { width: 13px; height: 13px; }
.lob-gear.on .lob-warn { animation: lobBlink 1.4s ease-in-out infinite; }

.lob-card.arming { background: linear-gradient(180deg, #100c05, #080705); box-shadow: inset 0 0 0 1px rgba(var(--lob-amber-rgb), 0.22); }
.lob-card.arming .lob-state { color: var(--lob-amber); }
.lob-card.lost { background: linear-gradient(180deg, rgba(var(--lob-lost-rgb), 0.12), #0a0606);
  box-shadow: inset 0 0 0 1.5px rgba(var(--lob-lost-rgb), 0.55), 0 0 30px rgba(var(--lob-lost-rgb), 0.22);
  animation: lobLostCard 1s ease-in-out infinite; }
.lob-card.lost .lob-state { color: var(--lob-lost); }
.lob-card.ready { background: linear-gradient(180deg, rgba(var(--lob-green-rgb), 0.1), #06120a);
  box-shadow: inset 0 0 0 1px rgba(var(--lob-green-rgb), 0.6), 0 0 32px rgba(var(--lob-green-rgb), 0.14); }
.lob-card.ready .lob-avatar { color: var(--lob-green); background: rgba(var(--lob-green-rgb), 0.14); box-shadow: inset 0 0 0 1px rgba(var(--lob-green-rgb), 0.5); }
.lob-card.ready .lob-state { color: var(--lob-green); }
.lob-card.ready .lob-score .pts { color: #fff; }
.lob-card.ready .lob-rig { display: none; }
.lob-card.ready .lob-locked { display: flex; }
.lob-locked { display: none; grid-row: 2; grid-column: 1 / -1; align-self: stretch; align-items: center; gap: 10px;
  height: clamp(26px, 34cqh, 50px);
  border-radius: 12px; justify-content: center; background: rgba(var(--lob-green-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--lob-green-rgb), 0.45); color: var(--lob-green); font-weight: 800;
  letter-spacing: 3px; font-size: clamp(14px, 11cqh, 28px); }
.lob-locked svg { width: clamp(13px, 16cqh, 20px); height: clamp(13px, 16cqh, 20px); }

/* ── Footer ── */
.lob-foot { display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border-top: 1px solid var(--lob-edge); padding-top: clamp(10px, 1.2vw, 18px); }
.lob-msg { font-weight: 800; letter-spacing: 3px; font-size: clamp(16px, 1.7vw, 32px); color: var(--lob-ink-dim); transition: color 0.5s; }
.lob-foot.go .lob-msg { color: var(--lob-green); text-shadow: 0 0 24px rgba(var(--lob-green-rgb), 0.4); animation: lobBeat 1.8s ease-in-out infinite; }
.lob-legend { display: flex; gap: clamp(12px, 1.4vw, 24px); font-size: clamp(13px, 1.2vw, 24px); letter-spacing: 1.5px; color: var(--lob-ink-dim); }
.lob-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.lob-lg-ready i { background: var(--lob-green); }
.lob-lg-arm i { background: var(--lob-amber); }
.lob-lg-wait i { background: var(--lob-waiting-ink); }
.lob-lg-lost i { background: var(--lob-lost); }

.lob-empty { flex: 1; display: grid; place-items: center; color: var(--lob-ink-faint); letter-spacing: 3px; font-weight: 700; }

@keyframes lobBeat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.55; } }
@keyframes lobPop { 0% { transform: scale(0.5); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes lobBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes lobLostGear { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes lobLostCard { 0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(var(--lob-lost-rgb), 0.55), 0 0 30px rgba(var(--lob-lost-rgb), 0.22); }
  50% { box-shadow: inset 0 0 0 1.5px rgba(var(--lob-lost-rgb), 0.85), 0 0 44px rgba(var(--lob-lost-rgb), 0.4); } }
@keyframes lobDrift { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(28px); } }
@keyframes lobDrift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-28px, -18px); } }

/* ── Per-athlete guard calibration (inside each lobby card, row 3) ── */
.lob-cal { grid-column: 1 / -1; align-self: start; min-height: 0; overflow: hidden;
  border-radius: 12px; padding: clamp(5px, 3cqh, 9px) clamp(8px, 3cqw, 14px);
  background: rgba(var(--lob-amber-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--lob-amber-rgb), 0.4); }
.lob-cal.done { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  gap: 8px; height: clamp(24px, 30cqh, 44px); letter-spacing: 3px; font-weight: 800;
  font-size: clamp(14px, 11cqh, 28px); color: var(--lob-green);
  background: rgba(var(--lob-green-rgb), 0.1); box-shadow: inset 0 0 0 1px rgba(var(--lob-green-rgb), 0.45); }
.lob-cal.done svg { width: clamp(13px, 16cqh, 20px); height: clamp(13px, 16cqh, 20px); }
.lob-cal.fallback { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center;
  gap: 8px; height: clamp(24px, 30cqh, 44px); letter-spacing: 2px; font-weight: 800;
  font-size: clamp(13px, 10cqh, 26px); color: var(--lob-amber);
  background: rgba(var(--lob-amber-rgb), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--lob-amber-rgb), 0.55); }
.lob-cal.fallback svg { width: clamp(13px, 16cqh, 20px); height: clamp(13px, 16cqh, 20px); }

@media (prefers-reduced-motion: reduce) {
  .lobby-screen * { animation: none !important; transition: none !important; }
}
/* ╔══════════════════════════════════════════════════════════════════════════
   ║  STRIKEX — TV STYLES
   ║
   ║  ⚠ READ THIS BEFORE MEASURING ANYTHING AGAINST THIS FILE.
   ║  It holds several generations of design. Plenty of rules here are DEAD —
   ║  they parse, they look authoritative, and nothing renders them. A 2026-07
   ║  design handoff sized its whole proposal against `.timer-display` (260px)
   ║  and came out 3.7× off, because the live timer is 60px on another selector.
   ║  Always confirm a selector has a .tsx caller before treating it as truth.
   ║
   ║  SCALE — there is no 100-inch calibration and no `--tv-scale: 2`.
   ║  `--tv-scale` is pinned to 1 on `.tv-canvas`, so every `calc(Npx * var(--tv-scale))`
   ║  is literally design px on a fixed 1920×1080 canvas. Fitting is done in
   ║  TV.tsx by `--fit-scale-x/y` (= innerWidth/1920, innerHeight/1080) applied as
   ║  a transform, so the canvas fills any panel. Physical screen size changes
   ║  mm-per-px and therefore LEGIBILITY, but changes nothing in this file.
   ║  At 1920 wide on a 75" panel: 1px ≈ 0.865mm; readable at 8m needs ≈64px.
   ║
   ║  LIVE vs DEAD — verified 2026-07-31 by counting .tsx callers
   ║  ─────────────────────────────────────────────────────────────────────
   ║  Round active  LIVE  `.ras2-screen` + `lct-*` (RoundActiveScreen.tsx)
   ║                      timer = `.lct-rt-time`, 60px, --font-mono
   ║                DEAD  `.timer-display` (260px), `.round-screen`, `.round-footer`
   ║  Wave bars     DEAD  `.wave-bar`, `.energy-wave`, `.round-active-wave-bar`
   ║  Ambient ring  DEAD  `.pulse-ring`
   ║
   ║  FONTS — two generations coexist, by scope, on purpose or by accident:
   ║    :root          --font-display Bebas Neue · --font-body Barlow
   ║    .ras2-screen   --font-display Oswald · --font-body Archivo/Inter
   ║                   --font-mono JetBrains Mono
   ║  So the combat screen is NOT Bebas. "Barlow Condensed" is requested by
   ║  exactly one rule (`.sx-tv__badge`) and is loaded in index.html.
   ║
   ║  COLOR
   ║  ─────────────────────────────────────────────────────────────────────
   ║  Base      #0A0A0F (--bg) · #12121A (--bg-card)
   ║  Text      #FFFFFF (--text) · .75 (--text-dim) · .50 (--text-label)
   ║  Accents   #FF3B30 (--accent) · #FFD700 (--gold)
   ║  Intensity #3B82F6 (--light) · #F97316 (--medium) · #EF4444 (--heavy)
   ║  Neon      scoped to .ras2-screen: --neon #d946ef, --neon-2 #a855f7, …
   ║
   ║  NOTE the round's colour does NOT come from any of these. It is sampled
   ║  server-side per class (wall-clock palette arc, common/palettes.ts) and
   ║  arrives on `cue.payload.palette`; the LED reads the same value. See
   ║  common/screen-colours.ts. Do not bind round colour to an intensity token.
   ║
   ║  CONTRAST RULE: never #333 or darker on #0A0A0F.
   ║  Minimum safe: rgba(255,255,255,0.45).
   ║
   ║  ANIMATIONS — defined here: timerPulse, timerFlash, timerShake, pulseRing,
   ║  cardReveal, sx-breathe (TVFrame ring), waveMove.
   ║  ⚠ `waveAnim` is referenced by `.wave-bar` and is NOT defined anywhere;
   ║    `podiumEnter` was announced by this header and never existed (the podium
   ║    really uses pod-slotIn / pod-fadeIn / podiumReveal). Both are attached to
   ║    dead rules, so nothing is visibly broken — but do not trust this list
   ║    without grepping.
   ╚══════════════════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0A0A0F;
  --bg-card: #12121A;
  --accent: #FF3B30;
  --gold: #FFD700;
  --text: #FFFFFF;
  --text-dim: rgba(255, 255, 255, 0.75);
  --text-label: rgba(255, 255, 255, 0.50);
  --border: #1a1a1a;
  --light: #3B82F6;
  --medium: #F97316;
  --heavy: #EF4444;
  --recruta: #6B7280;
  --beginner: #3B82F6;
  --intermediate: #22C55E;
  --fighter: #9333EA;
  --champion: #F97316;
  --elite: #EF4444;
  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Barlow', sans-serif;

  /* Dynamic colors — set per round by getEnergyColors() */
  --primary: #22cc44;          /* Interpolated spectrum color */
  --glow: rgba(34, 204, 68, 0.4);  /* RGBA version for box-shadow/text-shadow */
  --glow-rgb: 34, 204, 68;     /* RGB values only for rgba() construction */

  /* New design system — neon retro-futurism.
     Moment colour contract: --neon-magenta matches MOMENT_MAGENTA in
     apps/api/src/common/screen-colours.ts (#d946ef), used by the collecting
     screen. The LED reads the same colour from cue.payload.palette.color. */
  --neon-magenta: #d946ef;
  --neon-cyan: #22d3ee;
  --neon-pink: #f43f5e;
  --neon-amber: #f59e0b;
  --neon-green: #1db954;

  /* PR Moment Trophy Victory colors */
  --pr-bg: #000000;
  --pr-accent: #1ed760;
  --pr-text: #ffffff;
  --pr-text-secondary: #999999;
  --pr-spotlight: rgba(30, 215, 96, 0.15);
  --pr-glow: rgba(30, 215, 96, 0.3);
  --pr-glow-strong: rgba(30, 215, 96, 0.4);

  /* Fit-canvas: TV.tsx sets --fit-scale = min(vw/1920, vh/1080); .tv-canvas applies it
     as transform: scale(). --tv-scale is pinned to 1 (design px) on the canvas. */

  /* STRIKEX TV border (see TVFrame.tsx) — read from documentElement by the component */
  --sx-border: #f2f5f7;
  --sx-border-2: rgba(242, 245, 247, .32);
  --sx-accent: #37e07a;          /* state colour; flips with running/ending */
  --sx-accent-end: #e23535;
  --sx-inset: 18px;
  --sx-gap: 6px;
  --sx-radius: 8px;
  --sx-chamfer: 46px;
  --sx-dot-len: 54px;
  --sx-dot-thick: 4px;
  --sx-speed: 9s;                /* chase / running dots lap time */
  --sx-glow: 18px;
  --sx-sweep-speed: 6s;
}

.tv {
  /* Letterbox container: fills the viewport, centers the fixed canvas, and paints the
     black bars when the panel aspect ratio ≠ 16:9. No scaling lives here. */
  font-family: var(--font-body);
  background: #000;
  color: var(--text);
  width: 100vw; height: 100vh;
  overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center;
  -webkit-font-smoothing: antialiased;
}

/* Fixed 1920×1080 design frame. ONE transform (driven by --fit-scale, set in TV.tsx)
   scales the whole composition uniformly on both axes — this is what kills the clipping
   bug class. Because the canvas is transformed, it is the containing block for any
   position:fixed children, so corner banners anchor to the frame, not the viewport.
   --tv-scale is pinned to 1: every calc(Npx * var(--tv-scale)) is now design px. */
.tv-canvas {
  --tv-scale: 1;
  position: relative;
  flex: none;
  width: 1920px; height: 1080px;
  background: var(--bg);
  overflow: hidden;
  transform: scale(var(--fit-scale-x, 1), var(--fit-scale-y, 1));
  contain: layout style paint;
}

/* ═══ STRIKEX TV BORDER — reusable overlay (see TVFrame.tsx) ════════════════
   Each effect toggles with an fx-* class on .sx-tv__frame; colour state is
   .is-running (green) / .is-ending (red). pointer-events:none — never blocks
   the screen content underneath. Respects prefers-reduced-motion. */
.sx-tv__frame { position: absolute; inset: 0; z-index: 9999; pointer-events: none; }

.sx-tv__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx-tv__svg .ring { fill: none; stroke: var(--sx-border); stroke-width: calc(2px * var(--sx-scale, 1));
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35)); }
.sx-tv__svg .ring2 { fill: none; stroke: var(--sx-border-2); stroke-width: calc(1px * var(--sx-scale, 1)); }

/* density drawings — subtle, hidden unless their fx-* class is present */
.sx-tv__svg .g-ticks { display: none; }
.fx-ticks .sx-tv__svg .g-ticks { display: block; }
.sx-tv__svg .g-ticks line { stroke: var(--sx-border); stroke-width: calc(1px * var(--sx-scale, 1)); opacity: .14; }
.sx-tv__svg .g-ticks line.major { opacity: .26; }
.sx-tv__svg .g-circuit { display: none; }
.fx-circuit .sx-tv__svg .g-circuit { display: block; }
.sx-tv__svg .g-circuit path { fill: none; stroke: var(--sx-accent); stroke-width: calc(1.4px * var(--sx-scale, 1)); opacity: .32; transition: stroke .6s ease; }
.sx-tv__svg .g-circuit circle { fill: var(--sx-accent); opacity: .55; transition: fill .6s ease;
  filter: drop-shadow(0 0 3px var(--sx-accent)); }
.sx-tv__svg .g-hash { display: none; }
.fx-hash .sx-tv__svg .g-hash { display: block; }
.sx-tv__svg .g-hash line { stroke: var(--sx-border); stroke-width: calc(1px * var(--sx-scale, 1)); opacity: .08; }
.sx-tv__svg .g-crops { display: none; }
.fx-crops .sx-tv__svg .g-crops { display: block; }
.sx-tv__svg .g-crops path { fill: none; stroke: var(--sx-border); stroke-width: calc(1.6px * var(--sx-scale, 1)); opacity: .5; }
.sx-tv__svg .chase { fill: none; stroke: var(--sx-accent); stroke-width: calc(3px * var(--sx-scale, 1)); stroke-linecap: round;
  opacity: 0; transition: stroke .6s ease;
  filter: drop-shadow(0 0 6px var(--sx-accent)) drop-shadow(0 0 14px var(--sx-accent)); }
.fx-chase .sx-tv__svg .chase { opacity: 1; animation: sx-chase var(--sx-speed) linear infinite; }
@keyframes sx-chase { to { stroke-dashoffset: var(--sx-chase-shift, -1000); } }

/* running dots — traverse the perimeter clockwise, 25% out of phase */
.sx-tv__dot { position: absolute;
  width: calc(var(--sx-dot-len) * var(--sx-scale, 1)); height: calc(var(--sx-dot-thick) * var(--sx-scale, 1)); border-radius: 3px;
  background: var(--sx-accent); transition: background .6s ease;
  box-shadow: 0 0 10px var(--sx-accent), 0 0 var(--sx-glow) color-mix(in srgb, var(--sx-accent) 60%, transparent);
  offset-rotate: auto; animation: sx-run var(--sx-speed) linear infinite; }
.sx-tv__dot:nth-child(1) { animation-delay: calc(var(--sx-speed) * -0.00); }
.sx-tv__dot:nth-child(2) { animation-delay: calc(var(--sx-speed) * -0.25); }
.sx-tv__dot:nth-child(3) { animation-delay: calc(var(--sx-speed) * -0.50); }
.sx-tv__dot:nth-child(4) { animation-delay: calc(var(--sx-speed) * -0.75); }
@keyframes sx-run { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* sweep / scanline */
.sx-tv__sweep { position: absolute;
  top: calc(var(--sx-inset) * var(--sx-scale, 1)); bottom: calc(var(--sx-inset) * var(--sx-scale, 1));
  left: calc(var(--sx-inset) * var(--sx-scale, 1)); right: calc(var(--sx-inset) * var(--sx-scale, 1));
  overflow: hidden; opacity: 0; border-radius: var(--sx-radius); }
.fx-sweep .sx-tv__sweep { opacity: 1; }
.sx-tv__sweep::before { content: ""; position: absolute; top: 0; bottom: 0; width: 32%; left: -32%;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--sx-accent) 16%, transparent) 45%,
    color-mix(in srgb, var(--sx-accent) 26%, transparent) 50%,
    transparent);
  animation: sx-sweep var(--sx-sweep-speed) cubic-bezier(.6,0,.4,1) infinite; }
@keyframes sx-sweep { 0% { left: -32%; } 55% { left: 100%; } 100% { left: 100%; } }

/* corner badges */
.sx-tv__badge { position: absolute; display: none; align-items: center; gap: calc(8px * var(--sx-scale, 1));
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em; color: var(--sx-border);
  background: rgba(0,0,0,.6); border: 1px solid var(--sx-border-2);
  padding: calc(5px * var(--sx-scale, 1)) calc(12px * var(--sx-scale, 1)); border-radius: 6px; backdrop-filter: blur(4px);
  box-shadow: 0 0 12px rgba(0,0,0,.5); font-size: calc(30px * var(--sx-scale, 1)); white-space: nowrap; }
.fx-badges .sx-tv__badge { display: inline-flex; }
.sx-tv__badge .pip { width: calc(8px * var(--sx-scale, 1)); height: calc(8px * var(--sx-scale, 1)); border-radius: 50%; background: var(--sx-accent);
  box-shadow: 0 0 8px var(--sx-accent); transition: background .6s ease; }
.sx-tv__badge .num { color: var(--sx-accent); transition: color .6s ease; }
.sx-tv__badge--tr { top: calc((var(--sx-inset) + 14px) * var(--sx-scale, 1)); right: calc((var(--sx-inset) + 14px) * var(--sx-scale, 1)); }
.sx-tv__badge--bl { bottom: calc((var(--sx-inset) + 14px) * var(--sx-scale, 1)); left: calc((var(--sx-inset) + 14px) * var(--sx-scale, 1)); }
/* `.sx-tv__badge--tl` removed with its markup — the rotated diamond holding a bare
   round number, duplicating "ROUND n / N" two corners away. */

/* ── corner [X] (brand rule 1) ──
   The asset carries its own bracket frame, so it needs no backing shape — the
   triangular wedge it first sat on clipped the glyph along the diagonal.
   Geometry rides --sx-scale like the rest of the frame. */
.sx-tv__mark { position: absolute; pointer-events: none; display: none; }
.fx-mark .sx-tv__mark {
  display: block;
  /* INSIDE the frame, which at this corner is bounded by a DIAGONAL, not a right
     angle: the top-left is chamfered (--sx-chamfer 46), so the inner rule runs
     along x + y = 2*(inset + gap) + chamfer = 94. Any symmetric placement below
     47 leaves the mark sitting on the line — which is what every "move it left"
     attempt kept doing. 56 puts its corner at 112, comfortably clear. */
  top: calc(56px * var(--sx-scale, 1));
  left: calc(56px * var(--sx-scale, 1));
  width: calc(66px * var(--sx-scale, 1)); height: calc(66px * var(--sx-scale, 1));
  /* Animated by its FILL, not its shape: a highlight travels through the mask, so
     the glyph's geometry never moves and the corner clearance computed above
     still holds. Both ends of the gradient are the flat palette colour, so the
     loop restart is invisible — no snap. Founder, 2026-08-01. */
  background: linear-gradient(115deg,
    var(--sx-wedge, var(--sx-accent)) 0 42%,
    #ffffff 50%,
    var(--sx-wedge, var(--sx-accent)) 58% 100%);
  background-size: 300% 100%;
  animation: sx-mark-sweep 5s ease-in-out infinite;
  -webkit-mask: url(/brand/strikex-mark.png) center/contain no-repeat;
  mask: url(/brand/strikex-mark.png) center/contain no-repeat;
}
/* Holds still for ~3.5s, sweeps for ~1.5s. A mark that pulses continuously reads
   as a loading spinner from 8m; one that flashes occasionally reads as a brand. */
@keyframes sx-mark-sweep {
  0%, 65%   { background-position: 100% 0; }
  95%, 100% { background-position: 0% 0; }
}

.lct-next-sub {
  margin-top: calc(4px * var(--tv-scale));
  font-family: var(--font-display); font-size: calc(26px * var(--tv-scale));
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-label);
}

.lct-next-line { display: flex; align-items: baseline; gap: calc(20px * var(--tv-scale)); min-width: 0; }
.lct-next-lbl {
  font-family: var(--font-mono, monospace); font-size: calc(28px * var(--tv-scale));
  letter-spacing: .28em; text-transform: uppercase; color: var(--energy-color, var(--neon));
  white-space: nowrap;
}
.lct-next-val {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(40px * var(--tv-scale)); text-transform: uppercase; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lct-next-val .sep { color: var(--ink-dim); }
/* The lockup is never masked, never tinted. */
.lct-foot-lockup { height: calc(46px * var(--tv-scale)); width: auto; flex: none; display: block; }

/* state pulse */
.fx-pulse.is-ending .sx-tv__svg .chase,
.fx-pulse.is-ending .sx-tv__dot { animation-duration: calc(var(--sx-speed) * .55); }
.fx-pulse .sx-tv__svg .ring { animation: sx-breathe 2.4s ease-in-out infinite; }
.fx-pulse.is-ending .sx-tv__svg .ring { animation-duration: .7s; }
@keyframes sx-breathe { 0%,100% { filter: drop-shadow(0 0 5px rgba(255,255,255,.25)); }
  50% { filter: drop-shadow(0 0 12px var(--sx-accent)); } }

.is-running { --sx-accent: #37e07a; }
.is-ending { --sx-accent: var(--sx-accent-end); }

@media (prefers-reduced-motion: reduce) {
  .sx-tv__dot, .sx-tv__svg .chase, .sx-tv__sweep::before, .sx-tv__svg .ring { animation: none !important; }
  .sx-tv__dot:nth-child(1) { offset-distance: 12%; }
  .sx-tv__dot:nth-child(2) { offset-distance: 37%; }
  .sx-tv__dot:nth-child(3) { offset-distance: 62%; }
  .sx-tv__dot:nth-child(4) { offset-distance: 87%; }
  .fx-sweep .sx-tv__sweep { opacity: 0; }
}

/* Connection indicator */
.connection-dot {
  position: fixed; top: calc(12px * var(--tv-scale)); right: calc(12px * var(--tv-scale));
  width: calc(8px * var(--tv-scale)); height: calc(8px * var(--tv-scale)); border-radius: 50%;
  background: var(--heavy); z-index: 100;
}
.connection-dot.on { background: #22C55E; box-shadow: 0 0 6px #22C55E; }

/* H-14: Disconnected banner — visible at 10ft on 100" display */
.disconnected-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; gap: calc(12px * var(--tv-scale));
  padding: calc(12px * var(--tv-scale)) 0;
  background: rgba(220, 38, 38, 0.92);
  color: #fff; font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  animation: disconnected-pulse 2s ease-in-out infinite;
}
.disconnected-icon { font-size: calc(30px * var(--tv-scale)); }
@keyframes disconnected-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* CRT Scanline overlay — retro-futurism texture */
.tv-scanlines {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(255,255,255,0.035) 2px, rgba(255,255,255,0.035) 3px);
  opacity: 0.8;
}

.board {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: calc(40px * var(--tv-scale));
  position: relative;
}
.board h1 {
  font-family: var(--font-display);
  font-size: calc(32px * var(--tv-scale)); letter-spacing: 0.4em;
  color: var(--text-label); margin-bottom: calc(32px * var(--tv-scale));
}

/* ═══ IDLE ═══════════════════════════════════════════════════════════════ */

/* ═══ IDLE SCREEN — standby billboard ══════════════════════════════════════
   Redesigned 2026-07-31 to the founder's reference. Palette is black + white +
   brand red + green; the fuchsia/purple atmosphere (orbs, particles, purple
   ranks) was removed. Purple survives only in RoundActive v2 tokens and in the
   wall-clock palette arc — this screen is not part of either. */

.idle-screen {
  position: relative; width: 100%; height: 100%;
  background: #0a0a0c; overflow: hidden;
}

/* Two glows, no motion: red top-left behind the lockup, green bottom-right
   behind the leaderboard. Static on purpose — nothing moves on standby. */
.idle-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 55% 45% at 18% 12%, rgba(217, 31, 38, 0.20), transparent 62%),
    radial-gradient(ellipse 60% 55% at 88% 92%, rgba(30, 215, 96, 0.13), transparent 65%);
}

.idle-shell {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  padding: calc(76px * var(--tv-scale)) calc(84px * var(--tv-scale)) calc(56px * var(--tv-scale));
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: 1fr auto;
  gap: calc(40px * var(--tv-scale)) calc(90px * var(--tv-scale));
  box-sizing: border-box;
}

/* ── hero (left) ── */
.idle-hero {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  min-width: 0;
}
/* The lockup is never masked, never recoloured, never below 150px wide. */
.idle-lockup {
  width: calc(720px * var(--tv-scale)); max-width: 100%;
  height: auto; display: block;
}
.idle-hero-bottom { display: flex; flex-direction: column; gap: calc(18px * var(--tv-scale)); }

.idle-locale {
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(34px * var(--tv-scale)); letter-spacing: 0.42em;
  color: #d91f26; text-transform: uppercase;
}

.idle-clock { display: flex; align-items: flex-end; gap: calc(20px * var(--tv-scale)); }
.idle-clock-main {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(190px * var(--tv-scale)); line-height: 0.86;
  color: #fff; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.idle-clock-main .colon {
  color: rgba(255,255,255,0.55); margin: 0 calc(6px * var(--tv-scale));
  animation: idle-blink 2s steps(1, end) infinite;
}
@keyframes idle-blink { 50% { opacity: 0.25; } }
.idle-clock-meta {
  padding-bottom: calc(22px * var(--tv-scale));
  display: flex; flex-direction: column; gap: calc(6px * var(--tv-scale));
}
.idle-day {
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(38px * var(--tv-scale)); letter-spacing: 0.24em;
  color: #fff; text-transform: uppercase;
}
.idle-date {
  font-family: var(--font-mono, monospace);
  font-size: calc(26px * var(--tv-scale)); letter-spacing: 0.20em;
  color: rgba(255,255,255,0.45); text-transform: uppercase;
}

.idle-hero-message {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(42px * var(--tv-scale)); line-height: 1.28;
  color: #fff; text-transform: uppercase; letter-spacing: 0.01em;
}
.idle-hero-message span { display: block; color: #1ed760; }

/* ── leaderboard (right) ── */
.idle-side {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; gap: calc(26px * var(--tv-scale));
  min-width: 0;
}
.idle-panel-title {
  font-family: var(--font-mono, monospace); font-weight: 500;
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.34em;
  color: rgba(255,255,255,0.62); text-transform: uppercase;
}
.idle-lb { display: flex; flex-direction: column; gap: calc(16px * var(--tv-scale)); }
.idle-lb-row {
  display: grid;
  grid-template-columns: calc(56px * var(--tv-scale)) calc(64px * var(--tv-scale)) 1fr auto;
  align-items: center; gap: calc(24px * var(--tv-scale));
  padding: calc(20px * var(--tv-scale)) calc(30px * var(--tv-scale));
  border-radius: calc(14px * var(--tv-scale));
  background: rgba(255,255,255,0.035);
  border: calc(2px * var(--tv-scale)) solid transparent;
}
/* Rank 1 is the only tinted row — red, matching the hero glow. */
.idle-lb-row.top1 {
  background: linear-gradient(90deg, rgba(217,31,38,0.26), rgba(217,31,38,0.05));
  border-color: rgba(217,31,38,0.55);
}
.idle-lb-rank {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(40px * var(--tv-scale)); color: rgba(255,255,255,0.5);
  text-align: center;
}
.idle-lb-row.top1 .idle-lb-rank { color: #d91f26; }
.idle-lb-avatar {
  width: calc(64px * var(--tv-scale)); height: calc(64px * var(--tv-scale));
  border-radius: 50%; object-fit: cover;
  background: rgba(255,255,255,0.12);
}
/* Names are the one mixed-case string on this screen — the display face is
   caps-only, so they use the body face to read as names, not as headings. */
.idle-lb-name-text {
  font-family: 'Barlow', sans-serif; font-weight: 600;
  font-size: calc(36px * var(--tv-scale)); color: #fff;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.idle-lb-score {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(40px * var(--tv-scale)); color: #fff;
  font-variant-numeric: tabular-nums;
}
.idle-lb-empty {
  font-family: var(--font-display); font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.16em; color: rgba(255,255,255,0.35);
  padding: calc(40px * var(--tv-scale)) 0; text-align: center;
}

/* ── footer (bottom right) ── */
.idle-foot {
  grid-column: 2; grid-row: 2;
  display: flex; align-items: center; justify-content: flex-end;
  gap: calc(16px * var(--tv-scale));
}
/* The mark (not the lockup) may be tinted — by mask, never by a colour filter. */
.idle-foot-mark {
  width: calc(38px * var(--tv-scale)); height: calc(38px * var(--tv-scale));
  background: rgba(255,255,255,0.42);
  -webkit-mask: url(/brand/strikex-mark.png) center/contain no-repeat;
  mask: url(/brand/strikex-mark.png) center/contain no-repeat;
}
.idle-foot-brand {
  font-family: var(--font-mono, monospace);
  font-size: calc(28px * var(--tv-scale)); letter-spacing: 0.34em;
  color: rgba(255,255,255,0.42); text-transform: uppercase;
}

/* Removed 2026-07-31: `.brand-logo` / `.brand-mark` / `.brand-logo-sm` — the old
   Strikelab identity (3×3 grid of #7c878a squares). The comment claimed "used in
   round-active header"; it had zero callers in any .tsx. The StrikeX mark now
   lives in `.idle-brand-mark` / `.instr-brand-mark` / `.idle-watermark`. */

/* Legacy idle styles (kept for backward compatibility) */
.lb-row {
  display: flex; align-items: center; gap: calc(16px * var(--tv-scale));
  padding: calc(10px * var(--tv-scale)) 0; border-bottom: calc(1px * var(--tv-scale)) solid var(--border);
  width: calc(500px * var(--tv-scale)); max-width: 1728px;
  animation: slideIn 0.4s ease-out both;
}
.lb-rank {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); color: rgba(255,255,255,0.3); width: calc(32px * var(--tv-scale)); text-align: center;
}
.lb-rank.gold { color: var(--gold); }
.lb-rank.silver { color: #999; }
.lb-rank.bronze { color: #cd7f32; }
.lb-name { flex: 1; font-size: calc(30px * var(--tv-scale)); font-weight: 600; letter-spacing: 0.05em; }
.lb-pts {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); color: var(--accent); letter-spacing: 0.05em;
}
.lb-rounds { font-size: calc(30px * var(--tv-scale)); color: var(--text-label); }
.level-dot { width: calc(8px * var(--tv-scale)); height: calc(8px * var(--tv-scale)); border-radius: 50%; flex-shrink: 0; }

.brand {
  position: fixed; bottom: calc(16px * var(--tv-scale)); left: 50%; transform: translateX(-50%);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.3em; color: rgba(255,255,255,0.25);
  font-family: var(--font-body); font-weight: 600;
}
.empty-msg { text-align: center; color: rgba(255,255,255,0.45); font-size: calc(30px * var(--tv-scale)); padding: 60px; letter-spacing: 0.2em; }

/* ═══ ROUND ACTIVE ══════════════════════════════════════════════════════ */

.round-screen {
  display: grid !important;
  grid-template-columns: 1fr calc(360px * var(--tv-scale));
  grid-template-rows: auto 1fr auto;
  width: 100%; height: 100%; padding: 0 !important;
  background: var(--bg);
  transition: background 2.5s ease;
}

.round-header {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(20px * var(--tv-scale)) calc(32px * var(--tv-scale)); border-bottom: calc(1px * var(--tv-scale)) solid var(--border);
}
.round-badge-text {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.2em; color: var(--energy-color, var(--accent));
  background: rgba(255,59,48,0.1); border: 1px solid rgba(255,59,48,0.3);
  padding: calc(6px * var(--tv-scale)) calc(20px * var(--tv-scale)); border-radius: calc(3px * var(--tv-scale));
  display: flex; flex-direction: column; align-items: flex-start;
}
.round-name-sub {
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.25em; opacity: 0.7; margin-top: calc(4px * var(--tv-scale)); font-weight: 500;
}
.intensity-bar { display: flex; align-items: center; gap: calc(12px * var(--tv-scale)); }
.intensity-label { font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.3em; color: var(--text-dim); font-weight: 600; }
.intensity-blocks { display: flex; gap: calc(4px * var(--tv-scale)); }
.iblock { width: calc(28px * var(--tv-scale)); height: calc(20px * var(--tv-scale)); border-radius: calc(3px * var(--tv-scale)); background: rgba(255,255,255,0.06); transition: all 0.3s; }
.iblock.on {
  background: var(--energy-color, var(--accent));
  box-shadow: 0 0 8px rgba(var(--energy-glow, '255,59,48'), 0.5);
}

.round-main {
  padding: calc(32px * var(--tv-scale)) calc(40px * var(--tv-scale)); display: flex; flex-direction: column; justify-content: center;
}
.timer-display {
  font-family: var(--font-display);
  font-size: calc(260px * var(--tv-scale)); line-height: 0.9; color: var(--text);
  letter-spacing: calc(-8px * var(--tv-scale)); transition: color 0.3s, text-shadow 0.3s;
  animation: timerPulse 1s ease-in-out infinite;
  will-change: opacity;
}
.timer-display.warning { color: var(--medium); animation: timerPulse 0.8s ease-in-out infinite; }
.timer-display.critical { color: var(--accent); animation: timerFlash 0.4s ease-in-out infinite; }

.transition-warning-badge {
  margin-top: calc(14px * var(--tv-scale));
  padding: calc(8px * var(--tv-scale)) calc(28px * var(--tv-scale));
  background: rgba(255, 59, 48, 0.12);
  border: 1px solid rgba(255, 59, 48, 0.4);
  border-radius: calc(100px * var(--tv-scale));
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.3em; font-weight: 700;
  color: #FF3B30;
  animation: timerPulse 1s ease-in-out infinite;
}

/* Phase indicator — shown during round_active when BOD has phases */
.phase-indicator {
  margin-top: calc(18px * var(--tv-scale));
  display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--tv-scale));
}
.phase-progress {
  display: flex; gap: calc(10px * var(--tv-scale)); align-items: center;
}
.phase-dot {
  width: calc(14px * var(--tv-scale)); height: calc(14px * var(--tv-scale)); border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: background 0.4s, box-shadow 0.4s;
  border: calc(1.5px * var(--tv-scale)) solid rgba(255,255,255,0.25);
}
.phase-dot.done {
  background: rgba(255,255,255,0.4);
  border-color: rgba(255,255,255,0.4);
}
.phase-dot.active {
  background: var(--accent);
  box-shadow: 0 0 calc(12px * var(--tv-scale)) var(--accent);
  width: calc(18px * var(--tv-scale)); height: calc(18px * var(--tv-scale));
  border-color: rgba(255,255,255,0.8);
}
.phase-current {
  display: flex; align-items: center; gap: calc(20px * var(--tv-scale));
  font-family: var(--font-display); letter-spacing: 0.08em;
}
.phase-label {
  font-size: calc(30px * var(--tv-scale)); color: var(--text-dim); letter-spacing: 0.15em; font-weight: 700;
}
.phase-drill-name {
  font-size: calc(36px * var(--tv-scale)); color: #fff;
  font-weight: 600;
}
.phase-time {
  font-size: calc(30px * var(--tv-scale)); color: var(--accent); font-weight: 700;
  min-width: calc(60px * var(--tv-scale));
  text-align: center;
}
.phase-next {
  font-size: calc(30px * var(--tv-scale)); color: rgba(255,255,255,0.65); letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 600;
}

.drill-display { display: flex; gap: calc(16px * var(--tv-scale)); margin-top: calc(20px * var(--tv-scale)); flex-wrap: wrap; }
.drill-card {
  background: rgba(255,255,255,0.06); border: 2px solid #333;
  border-radius: calc(8px * var(--tv-scale)); padding: calc(18px * var(--tv-scale)) calc(32px * var(--tv-scale));
  display: flex; flex-direction: column; align-items: center; gap: calc(8px * var(--tv-scale));
  transition: box-shadow 0.3s, border-color 0.3s;
}
.drill-number { font-size: calc(30px * var(--tv-scale)); color: var(--energy-color, var(--accent)); letter-spacing: 0.3em; font-weight: 700; }
.drill-name-card {
  font-family: var(--font-display);
  font-size: calc(56px * var(--tv-scale)); letter-spacing: 0.1em; color: var(--text);
}

.punch-counter { margin-top: calc(20px * var(--tv-scale)); display: flex; align-items: center; gap: calc(12px * var(--tv-scale)); }
.punch-label { font-size: calc(30px * var(--tv-scale)); color: var(--text-label); letter-spacing: 0.2em; font-weight: 600; }
.punch-count {
  font-family: var(--font-display);
  font-size: calc(42px * var(--tv-scale)); color: var(--accent);
}
.punch-record { font-size: calc(30px * var(--tv-scale)); color: rgba(255,255,255,0.35); }
.progress-bar-wrap {
  margin-top: calc(8px * var(--tv-scale)); height: calc(3px * var(--tv-scale)); background: var(--border);
  border-radius: calc(2px * var(--tv-scale)); width: calc(300px * var(--tv-scale)); overflow: hidden;
}
.progress-bar-fill {
  height: 100%; background: var(--accent); border-radius: calc(2px * var(--tv-scale));
  transition: width 0.5s ease-out;
}

.round-sidebar {
  border-left: calc(1px * var(--tv-scale)) solid var(--border);
  padding: calc(24px * var(--tv-scale)) calc(20px * var(--tv-scale)); display: flex; flex-direction: column; gap: calc(6px * var(--tv-scale));
  overflow-y: auto;
}
.sidebar-title { font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.3em; color: rgba(255,255,255,0.45); margin-bottom: calc(10px * var(--tv-scale)); font-weight: 700; }
.station-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(6px * var(--tv-scale)) calc(8px * var(--tv-scale)); border-radius: calc(4px * var(--tv-scale));
  background: rgba(255,255,255,0.02); border: 1px solid var(--border);
}
.station-info { display: flex; flex-direction: column; gap: calc(2px * var(--tv-scale)); }
.station-name { font-size: calc(30px * var(--tv-scale)); color: var(--text-dim); letter-spacing: 0.15em; font-weight: 700; }
.station-athletes { font-size: calc(30px * var(--tv-scale)); font-weight: 600; color: #ddd; }
.station-score {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); color: var(--accent);
}

.round-footer {
  grid-column: 1 / -1;
  position: relative; height: calc(100px * var(--tv-scale)); overflow: hidden;
  border-top: calc(1px * var(--tv-scale)) solid rgba(255,255,255,0.06);
}
.energy-wave {
  position: absolute; inset: 0;
  display: flex; gap: calc(2px * var(--tv-scale)); align-items: flex-end;
}
.wave-bar {
  flex: 1; min-width: 0; border-radius: calc(2px * var(--tv-scale)) calc(2px * var(--tv-scale)) 0 0;
  animation: waveAnim var(--wave-speed, 1s) ease-in-out infinite alternate;
  transform-origin: bottom;
  background: var(--accent); opacity: 0.8;
  will-change: height;
}

/* Energy curve wave — color driven by JS --energy-color custom property */
.round-screen .wave-bar {
  background: var(--energy-color, var(--accent)); opacity: 0.85;
  box-shadow: 0 0 6px rgba(var(--energy-glow, '255,59,48'), 0.35);
}
.round-screen.intensity-heavy .wave-bar { opacity: 1; }

@keyframes waveMove {
  0%, 100% { height: calc(20px * var(--tv-scale, 1)); }
  50% { height: calc(52px * var(--tv-scale, 1)); }
}
.footer-label { font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.2em; color: rgba(255,255,255,0.5); font-weight: 600; }
.footer-accent {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.2em; color: var(--accent);
}

/* ─── Intensity-reactive elements ───────────────────────────────────── */

.round-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  animation: ambientPulse 3s ease-in-out infinite;
}
/* Ambient glow — driven by energy curve, high-visibility */
.round-screen .round-ambient {
  background: radial-gradient(ellipse at 35% 45%, rgba(var(--energy-glow, '255,59,48'), 0.35) 0%, transparent 65%);
}
.round-screen.intensity-medium .round-ambient {
  background: radial-gradient(ellipse at 35% 45%, rgba(var(--energy-glow, '255,59,48'), 0.45) 0%, transparent 60%);
}
.round-screen.intensity-heavy .round-ambient {
  background: radial-gradient(ellipse at 35% 45%, rgba(var(--energy-glow, '255,59,48'), 0.55) 0%, transparent 55%);
}

/* Background driven by JS inline style (energy curve); fallback for no-BOD sessions */
.round-screen { background: #08081A; transition: background 2.5s ease; }

/* Timer color driven by energy curve */
.round-screen .timer-display {
  color: var(--energy-color, var(--text));
  text-shadow: 0 0 80px rgba(var(--energy-glow, '255,59,48'), 0.55), 0 0 160px rgba(var(--energy-glow, '255,59,48'), 0.2);
}

/* Pulse ring — dramatic, high-visibility */
.pulse-ring {
  position: absolute; width: calc(480px * var(--tv-scale)); height: calc(480px * var(--tv-scale)); border-radius: 50%;
  pointer-events: none;
  animation: pulseRing 2.5s ease-out infinite;
  top: 50%; left: 35%; transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.round-screen .pulse-ring {
  border: 3px solid rgba(var(--energy-glow, '255,59,48'), 0.65);
  box-shadow: 0 0 40px rgba(var(--energy-glow, '255,59,48'), 0.2), inset 0 0 60px rgba(var(--energy-glow, '255,59,48'), 0.08);
}
.round-screen.intensity-heavy .pulse-ring {
  width: calc(600px * var(--tv-scale)); height: calc(600px * var(--tv-scale));
  box-shadow: 0 0 60px rgba(var(--energy-glow, '255,59,48'), 0.3), inset 0 0 80px rgba(var(--energy-glow, '255,59,48'), 0.12);
}
.ring-2 { animation-delay: 1.2s; width: calc(720px * var(--tv-scale)); height: calc(720px * var(--tv-scale)); }

@keyframes pulseRing {
  0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

@keyframes ambientPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Floating particles — VISIBLE */
.round-particles {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.round-particle {
  position: absolute; bottom: calc(-10px * var(--tv-scale));
  width: calc(5px * var(--tv-scale)); height: calc(5px * var(--tv-scale)); border-radius: 50%;
  animation: particleFloat 4s ease-in-out infinite;
  will-change: transform, opacity;
}
.round-screen .round-particle {
  background: var(--energy-color, var(--accent)); opacity: 0.5;
  box-shadow: 0 0 6px rgba(var(--energy-glow, '255,59,48'), 0.4);
}
.round-screen.intensity-heavy .round-particle { opacity: 0.8; width: calc(6px * var(--tv-scale)); height: calc(6px * var(--tv-scale)); }

@keyframes particleFloat {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 0.4; }
  80% { opacity: 0.2; }
  100% { transform: translateY(-1080px) scale(0.5); opacity: 0; }
}

/* Intensity-specific drill cards — BOLD and VISIBLE */
.drill-card.intensity-light {
  border-color: rgba(59,130,246,0.3);
  box-shadow: 0 0 8px rgba(59,130,246,0.1);
}
.drill-card.intensity-medium {
  border-color: rgba(249,115,22,0.4);
  box-shadow: 0 0 12px rgba(249,115,22,0.15);
}
.drill-card.intensity-heavy {
  border-color: rgba(255,59,48,0.5);
  box-shadow: 0 0 20px rgba(255,59,48,0.2);
  animation: drillPulse 1.5s ease-in-out infinite;
  will-change: box-shadow;
}

@keyframes drillPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,59,48,0.08); }
  50% { box-shadow: 0 0 16px rgba(255,59,48,0.2); }
}

/* Intensity badge glow */
.round-badge-text.intensity-heavy {
  box-shadow: 0 0 12px rgba(255,59,48,0.2);
  animation: badgePulse 2s ease-in-out infinite;
  will-change: box-shadow;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255,59,48,0.15); }
  50% { box-shadow: 0 0 20px rgba(255,59,48,0.3); }
}

/* Intensity-specific intensity bar block glow */
.intensity-heavy .iblock.on {
  box-shadow: 0 0 4px var(--accent);
}

/* Timer screen shake on critical + heavy */
.intensity-heavy .timer-display.critical {
  animation: timerShake 0.3s ease-in-out infinite, timerFlash 0.5s ease-in-out infinite;
}
@keyframes timerShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* Vignette — energy-color tinted at heavy */
.round-screen.intensity-heavy::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(var(--energy-glow, '255,59,48'), 0.08) 100%);
}

/* ═══ TRANSITION COUNTDOWN ══════════════════════════════════════════════ */

.transition-countdown {
  display: flex; flex-direction: column; align-items: center; gap: calc(2px * var(--tv-scale));
  margin-top: calc(16px * var(--tv-scale));
}
.transition-label {
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.4em; color: rgba(255,255,255,0.55); font-weight: 700;
}
.transition-timer {
  font-family: var(--font-display);
  font-size: calc(180px * var(--tv-scale)); line-height: 1;
  color: var(--accent);
  animation: timerPulse 1s ease-in-out infinite;
  text-shadow: 0 0 60px rgba(255,59,48,0.4);
  will-change: opacity;
}

/* ═══ BOD PROGRESS BAR (top of screen) ══════════════════════════════════ */

.bod-progress-bar {
  position: fixed; top: 0; left: 0; right: 0; height: calc(3px * var(--tv-scale)); z-index: 50;
  background: rgba(255,255,255,0.04);
  transform: translateZ(0);
  contain: layout style paint;
}
.bod-progress-label {
  position: absolute; right: calc(8px * var(--tv-scale)); top: calc(5px * var(--tv-scale));
  font-family: var(--font-display); font-size: calc(30px * var(--tv-scale)); color: rgba(255,255,255,0.5);
  letter-spacing: 0.1em;
}

/* ═══ NEXT UP BAR (bottom of screen, persistent) ═══════════════════════ */

.next-up-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: calc(16px * var(--tv-scale));
  padding: calc(16px * var(--tv-scale)) calc(32px * var(--tv-scale));
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,15,0.95) 40%);
  animation: fadeIn 0.5s ease-out;
  transform: translateZ(0);
  contain: layout style paint;
}
.next-up-countdown {
  font-family: var(--font-display);
  font-size: calc(36px * var(--tv-scale)); font-weight: 900;
  color: #fff;
  min-width: calc(48px * var(--tv-scale)); text-align: center;
  text-shadow: 0 0 12px rgba(255,255,255,0.5);
  animation: timerPulse 1s ease-in-out infinite;
  will-change: opacity;
}
.next-up-label {
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.3em; color: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
}
.next-up-type {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); color: var(--accent); letter-spacing: 0.1em;
  font-weight: 700;
}
.next-up-name {
  font-size: calc(30px * var(--tv-scale)); color: rgba(255,255,255,0.7); font-weight: 600;
}
.next-up-exercise {
  font-size: calc(30px * var(--tv-scale)); color: rgba(255,255,255,0.5);
}
.next-up-duration {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); color: rgba(255,255,255,0.6);
  font-weight: 600;
}
.next-up-transition {
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.2em; color: var(--accent);
  background: rgba(255,59,48,0.15); border: 1px solid rgba(255,59,48,0.3);
  padding: calc(4px * var(--tv-scale)) calc(12px * var(--tv-scale)); border-radius: calc(4px * var(--tv-scale)); font-weight: 700;
  text-transform: uppercase;
}

/* ═══ BETWEEN ROUNDS / INTERVAL ═════════════════════════════════════════ */

/* REMOVED 2026-07-31 — `.interval-screen { display: grid !important; ... }`.
   It belonged to a two-column generation of this screen whose classes
   (.interval-left, .interval-activity-label, .interval-name-text,
   .interval-timer-big, .interval-right, .interval-lb-*) have ZERO .tsx callers.
   The rule itself was not dead though: the `!important` beat IntervalScreen.css
   and forced the live centred column into a 2×2 grid — the label top-left, the
   timer far right, the instruction adrift at the bottom. The screen now owns its
   own layout. The sibling rules below are dead but harmless; left in place rather
   than swept, since removing them is not this change's job. */
.interval-left {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: calc(40px * var(--tv-scale)); border-right: calc(1px * var(--tv-scale)) solid var(--border); gap: calc(12px * var(--tv-scale));
}
.interval-activity-label { font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.4em; color: var(--text-label); font-weight: 600; }
.interval-name-text {
  font-family: var(--font-display);
  font-size: calc(88px * var(--tv-scale)); color: var(--text); letter-spacing: 0.05em;
}
.interval-timer-big {
  font-family: var(--font-display);
  font-size: calc(120px * var(--tv-scale)); color: var(--accent); line-height: 1;
}
.sorteio-countdown-label { font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.2em; color: rgba(255,255,255,0.45); margin-top: calc(8px * var(--tv-scale)); }

.interval-right {
  padding: calc(24px * var(--tv-scale)); display: flex; flex-direction: column;
  justify-content: center; gap: calc(6px * var(--tv-scale));
}
.interval-lb-title { font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.3em; color: rgba(255,255,255,0.5); margin-bottom: calc(16px * var(--tv-scale)); font-weight: 600; }
.interval-lb-row {
  display: flex; align-items: center; gap: calc(14px * var(--tv-scale));
  padding: calc(12px * var(--tv-scale)) 0; border-bottom: calc(1px * var(--tv-scale)) solid #181818;
}
.interval-rank {
  font-family: var(--font-display);
  font-size: calc(36px * var(--tv-scale)); color: rgba(255,255,255,0.35); width: calc(36px * var(--tv-scale));
}
.interval-rank.g { color: var(--gold); }
.interval-rank.s { color: #aaa; }
.interval-rank.b { color: #cd7f32; }
.interval-name-lb { flex: 1; font-size: calc(30px * var(--tv-scale)); font-weight: 600; }
.interval-score-lb {
  font-family: var(--font-display);
  font-size: calc(36px * var(--tv-scale)); color: var(--accent);
}
.arrow { font-size: calc(30px * var(--tv-scale)); }
.arrow.up { color: #22C55E; }
.arrow.down { color: #EF4444; }

.interval-drill-preview {
  margin-top: calc(16px * var(--tv-scale));
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--tv-scale));
  align-items: center;
}
.interval-drill-label {
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.3em;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 600;
}
.interval-drill-name {
  font-family: var(--font-display);
  font-size: calc(44px * var(--tv-scale));
  letter-spacing: 0.15em;
  color: #fff;
  line-height: 1;
}
.interval-drill-strikes {
  display: flex;
  gap: calc(8px * var(--tv-scale));
  flex-wrap: wrap;
  margin-top: calc(2px * var(--tv-scale));
  justify-content: center;
}
.interval-strike-pill {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(255,59,48,0.1);
  border-radius: calc(4px * var(--tv-scale));
  padding: calc(2px * var(--tv-scale)) calc(8px * var(--tv-scale));
}

/* ═══ SORTEIO ═══════════════════════════════════════════════════════════ */

.sorteio-screen-container {
  display: grid;
  grid-template-columns: 1fr calc(360px * var(--tv-scale));
  grid-template-rows: auto 1fr auto;
  gap: calc(24px * var(--tv-scale));
  width: 100%;
  height: 1080px;
  padding: calc(32px * var(--tv-scale));
  background: var(--bg);
  overflow: hidden;
}

.sorteio-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(24px * var(--tv-scale));
  min-height: 0;
  overflow-y: auto;
}

.sorteio-sidebar {
  display: flex;
  flex-direction: column;
  gap: calc(24px * var(--tv-scale));
  min-height: 0;
  overflow-y: auto;
}

.sorteio-lb-section {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--tv-scale));
  padding: calc(8px * var(--tv-scale)) calc(12px * var(--tv-scale));
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(12px);
  border-top: calc(1px * var(--tv-scale)) solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
}

.sorteio-lb-title {
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: calc(4px * var(--tv-scale));
}

.sorteio-energy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(3px * var(--tv-scale)) calc(4px * var(--tv-scale));
  border-radius: calc(2px * var(--tv-scale));
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: calc(2px * var(--tv-scale));
}

.sorteio-energy-label {
  font-size: calc(30px * var(--tv-scale));
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sorteio-energy-value {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale));
  color: var(--primary, #22C55E);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sorteio-lb-row {
  display: grid;
  grid-template-columns: calc(32px * var(--tv-scale)) 1fr calc(48px * var(--tv-scale));
  gap: calc(12px * var(--tv-scale));
  align-items: center;
  padding: calc(8px * var(--tv-scale)) 0;
  font-size: calc(30px * var(--tv-scale));
}

.sorteio-rank {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale));
  color: var(--text-label);
  text-align: center;
  font-weight: 700;
}

.sorteio-rank.gold {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

.sorteio-rank.silver {
  color: #9CA3AF;
  text-shadow: 0 0 6px rgba(156, 163, 175, 0.3);
}

.sorteio-rank.bronze {
  color: #CD7F32;
  text-shadow: 0 0 6px rgba(205, 127, 50, 0.3);
}

.sorteio-athlete-name {
  font-size: calc(30px * var(--tv-scale));
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sorteio-score {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale));
  color: var(--text);
  text-align: right;
  font-weight: 700;
}

.sorteio-empty-lb {
  font-size: calc(30px * var(--tv-scale));
  color: var(--text-label);
  text-align: center;
  padding: calc(16px * var(--tv-scale)) 0;
}

.sorteio-drill-section {
  display: flex;
  flex-direction: column;
  gap: calc(12px * var(--tv-scale));
  padding: calc(16px * var(--tv-scale));
  background: var(--bg-card);
  border-radius: calc(6px * var(--tv-scale));
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sorteio-drill-label {
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.2em;
  color: var(--text-label);
  text-transform: uppercase;
  font-weight: 600;
}

.sorteio-drill-name {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.1em;
  color: var(--text);
  line-height: 1.2;
}

.sorteio-strike-pills {
  display: flex;
  gap: calc(6px * var(--tv-scale));
  flex-wrap: wrap;
  margin-top: calc(8px * var(--tv-scale));
}

.sorteio-strike-pill {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(255, 59, 48, 0.1);
  border-radius: calc(3px * var(--tv-scale));
  padding: calc(2px * var(--tv-scale)) calc(8px * var(--tv-scale));
}

.sorteio-title {
  font-family: var(--font-display);
  font-size: calc(48px * var(--tv-scale));
  letter-spacing: 0.3em;
  color: var(--accent, #FF3B30);
  text-transform: uppercase;
  margin-bottom: calc(16px * var(--tv-scale));
}

.sorteio-assignments-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(calc(160px * var(--tv-scale)), 1fr));
  gap: calc(16px * var(--tv-scale));
  width: 100%;
  max-width: calc(650px * var(--tv-scale));
}

.sorteio-assignment-pair {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--tv-scale));
  padding: calc(16px * var(--tv-scale));
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid #2a2a4a;
  border-radius: calc(8px * var(--tv-scale));
  min-height: calc(100px * var(--tv-scale));
  animation: cardReveal 0.4s ease-out backwards;
  will-change: transform, opacity;
}

.sorteio-assignment-pair:nth-child(1) { animation-delay: 0.0s; }
.sorteio-assignment-pair:nth-child(2) { animation-delay: 0.2s; }
.sorteio-assignment-pair:nth-child(3) { animation-delay: 0.4s; }
.sorteio-assignment-pair:nth-child(4) { animation-delay: 0.6s; }
.sorteio-assignment-pair:nth-child(5) { animation-delay: 0.8s; }
.sorteio-assignment-pair:nth-child(6) { animation-delay: 1.0s; }

.sorteio-assignment-athlete {
  flex: 1;
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale));
  color: #FFFFFF;
  text-align: center;
  font-weight: 700;
}

.sorteio-assignment-arrow {
  font-size: calc(30px * var(--tv-scale));
  color: var(--accent, #FF3B30);
  font-weight: 700;
}

.sorteio-assignment-station {
  flex: 1;
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale));
  color: var(--accent, #FF3B30);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(calc(160px * var(--tv-scale)), 1fr));
  gap: calc(16px * var(--tv-scale));
  width: 100%;
  max-width: calc(650px * var(--tv-scale));
  justify-items: center;
}
.fifa-card {
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%);
  border: calc(1px * var(--tv-scale)) solid #2a2a4a; border-radius: calc(8px * var(--tv-scale));
  padding: calc(20px * var(--tv-scale)) calc(14px * var(--tv-scale)); min-height: calc(140px * var(--tv-scale)); display: flex; flex-direction: column;
  align-items: center; gap: calc(6px * var(--tv-scale)); position: relative; overflow: hidden;
  animation: cardReveal 0.4s ease-out backwards;
  will-change: transform, opacity;
}
.fifa-card:nth-child(1) { animation-delay: 0.2s; }
.fifa-card:nth-child(2) { animation-delay: 0.6s; }
.fifa-card:nth-child(3) { animation-delay: 1.0s; }
.fifa-card:nth-child(4) { animation-delay: 1.4s; }
.fifa-card:nth-child(5) { animation-delay: 1.8s; }
.fifa-card:nth-child(6) { animation-delay: 2.2s; }
.fifa-card:nth-child(7) { animation-delay: 2.6s; }

.card-shine {
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  animation: cardShine 0.6s ease-out backwards;
  will-change: left;
}
.fifa-card:nth-child(1) .card-shine { animation-delay: 0.5s; }
.fifa-card:nth-child(2) .card-shine { animation-delay: 0.9s; }
.fifa-card:nth-child(3) .card-shine { animation-delay: 1.3s; }
.fifa-card:nth-child(4) .card-shine { animation-delay: 1.7s; }
.fifa-card:nth-child(5) .card-shine { animation-delay: 2.1s; }
.fifa-card:nth-child(6) .card-shine { animation-delay: 2.5s; }
.fifa-card:nth-child(7) .card-shine { animation-delay: 2.9s; }

.card-station { font-family: var(--font-display); font-size: calc(40px * var(--tv-scale)); letter-spacing: 0.15em; color: var(--accent); text-align: center; line-height: 1; }
.card-icon { font-size: calc(30px * var(--tv-scale)); margin: 4px 0; }
.card-athlete-name {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.08em; color: var(--text);
}
.card-drill { font-size: calc(30px * var(--tv-scale)); color: var(--text-label); letter-spacing: 0.1em; text-align: center; margin-top: calc(6px * var(--tv-scale)); }

.next-round-preview {
  display: flex; align-items: center; gap: calc(24px * var(--tv-scale));
  padding: calc(12px * var(--tv-scale)) calc(24px * var(--tv-scale));
  background: rgba(255,59,48,0.05); border: 1px solid rgba(255,59,48,0.15);
  border-radius: calc(6px * var(--tv-scale));
}

.sorteio-drill-preview {
  margin-top: calc(24px * var(--tv-scale));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(8px * var(--tv-scale));
}
.sorteio-drill-label {
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.3em;
  color: var(--text-dim);
  text-transform: uppercase;
  font-weight: 600;
}
.sorteio-drill-name {
  font-family: var(--font-display);
  font-size: calc(48px * var(--tv-scale));
  letter-spacing: 0.2em;
  color: #fff;
  line-height: 1;
}
.sorteio-drill-strikes {
  display: flex;
  gap: calc(8px * var(--tv-scale));
  flex-wrap: wrap;
  justify-content: center;
  margin-top: calc(4px * var(--tv-scale));
}
.sorteio-strike-pill {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.1em;
  color: var(--accent);
  background: rgba(255,59,48,0.1);
  border-radius: calc(4px * var(--tv-scale));
  padding: calc(2px * var(--tv-scale)) calc(10px * var(--tv-scale));
}

/* ═══ PR MOMENT: TROPHY VICTORY ═════════════════════════════════════════════════════════ */

.pr-screen {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--pr-bg);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Spotlight background */
.pr-spotlight-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    var(--pr-spotlight) 0%,
    transparent 60%
  );
  z-index: 0;
}

/* Trophy emoji container */
.pr-trophy {
  font-size: calc(120px * var(--tv-scale));
  z-index: 1;
  position: relative;
  margin-bottom: calc(20px * var(--tv-scale));
  animation: prTrophyRotate 4s linear infinite, prTrophyFadeIn 0.4s ease-out forwards;
  text-shadow: 0 0 20px var(--pr-glow);
  will-change: transform, opacity;
}

/* Athlete name */
.pr-athlete-name {
  font-size: calc(48px * var(--tv-scale));
  font-weight: 700;
  color: var(--pr-text);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: calc(16px * var(--tv-scale));
  z-index: 1;
  position: relative;
  animation: prNameReveal 0.4s ease-out 0.3s forwards;
  opacity: 0;
}

/* Score display with progression */
.pr-score-display {
  font-size: calc(56px * var(--tv-scale));
  font-weight: 900;
  color: var(--pr-accent);
  letter-spacing: 0.03em;
  margin-bottom: calc(12px * var(--tv-scale));
  z-index: 1;
  position: relative;
  text-shadow: 0 0 12px var(--pr-glow-strong);
  animation: prScoreFadeIn 0.4s ease-out 0.6s forwards;
  opacity: 0;
}

/* Station label */
.pr-station-label {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 500;
  color: var(--pr-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  z-index: 1;
  position: relative;
  animation: prStationFadeIn 0.3s ease-out 0.9s forwards;
  opacity: 0;
}

/* ─ Animations ─ */

@keyframes prTrophyRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes prTrophyFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes prNameReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes prScoreFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes prStationFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ═══ REVEAL SCREEN — Stat Card Design from HTML Mockup ═════════════════ */

.reveal-screen {
  width: 100%; height: 100%;
  background: #0a0710;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Atmosphere */
.rv-bg-atmos {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(var(--neon-rgb), 0.2), transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(var(--neon-rgb), 0.12), transparent 70%),
    #0a0710;
}
.rv-bg-atmos::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(255,255,255,0.04) 2px, rgba(255,255,255,0.04) 3px);
  pointer-events: none;
  z-index: 1;
}

.rv-corners { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rv-corners i {
  position: absolute; width: calc(140px * var(--tv-scale)); height: calc(140px * var(--tv-scale)); border-radius: 50%;
  border: 1px solid rgba(var(--neon-rgb), 0.25);
}
.rv-corners i:nth-child(1) { top: calc(40px * var(--tv-scale)); left: calc(40px * var(--tv-scale)); transform: translate(-50%,-50%); }
.rv-corners i:nth-child(2) { top: calc(40px * var(--tv-scale)); right: calc(40px * var(--tv-scale)); transform: translate(50%,-50%); }
.rv-corners i:nth-child(3) { bottom: calc(40px * var(--tv-scale)); left: calc(40px * var(--tv-scale)); transform: translate(-50%,50%); }
.rv-corners i:nth-child(4) { bottom: calc(40px * var(--tv-scale)); right: calc(40px * var(--tv-scale)); transform: translate(50%,50%); }

/* Stage */
.rv-stage {
  position: relative; z-index: 2;
  width: 100%; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: clamp(calc(60px * var(--tv-scale)), 86.4px, calc(100px * var(--tv-scale))) calc(36px * var(--tv-scale)) clamp(calc(60px * var(--tv-scale)), 86.4px, calc(100px * var(--tv-scale)));
  gap: clamp(calc(20px * var(--tv-scale)), 32.4px, calc(36px * var(--tv-scale)));
}

/* Eyebrow */
.rv-eyebrow {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--neon);
  display: inline-flex; align-items: center; gap: calc(14px * var(--tv-scale));
  text-shadow: 0 0 12px rgba(var(--neon-rgb), 0.8);
  animation: rv-eyeIn 600ms ease-out both;
}
.rv-eyebrow::before, .rv-eyebrow::after {
  content: ''; width: calc(28px * var(--tv-scale)); height: calc(1px * var(--tv-scale));
  background: linear-gradient(to right, transparent, var(--neon), transparent);
}
@keyframes rv-eyeIn { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } }

/* Head */
.rv-head {
  text-align: center;
  display: flex; flex-direction: column; gap: calc(14px * var(--tv-scale)); align-items: center;
}
.rv-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(calc(30px * var(--tv-scale)), 69.12px, calc(56px * var(--tv-scale)));
  letter-spacing: 0.02em; text-transform: uppercase;
  line-height: 0.95;
  animation: rv-eyeIn 700ms 120ms ease-out both;
}
.rv-title .n {
  color: var(--neon);
  text-shadow: 0 0 24px rgba(var(--neon-rgb), 0.6);
}

/* Stats grid */
.rv-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(calc(12px * var(--tv-scale)), 26.88px, calc(24px * var(--tv-scale)));
  width: 100%;
  max-width: 1480px;
}

/* Stat card */
.rv-stat {
  position: relative;
  aspect-ratio: 5/4;
  border: 1.5px solid rgba(var(--neon-rgb), 0.35);
  border-radius: calc(12px * var(--tv-scale));
  background:
    radial-gradient(ellipse at center top, rgba(var(--neon-rgb), 0.12), transparent 70%),
    linear-gradient(180deg, rgba(var(--neon-rgb), 0.08), rgba(10,7,16,0.6));
  padding: clamp(calc(18px * var(--tv-scale)), 30.72px, calc(28px * var(--tv-scale)));
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  filter: blur(12px);
  transition: opacity 500ms ease-out,
              transform 500ms ease-out,
              filter 500ms ease-out,
              box-shadow 700ms ease-in-out;
}
.rv-stat.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  animation: neonGlowBorder 2.5s ease-in-out infinite;
  will-change: box-shadow;
}
.rv-stat::before {
  content: ''; position: absolute; top: calc(14px * var(--tv-scale)); right: calc(14px * var(--tv-scale)); width: calc(22px * var(--tv-scale)); height: calc(22px * var(--tv-scale));
  border-top: calc(1px * var(--tv-scale)) solid var(--neon); border-right: calc(1px * var(--tv-scale)) solid var(--neon); opacity: 0.5;
}
.rv-stat::after {
  content: ''; position: absolute; bottom: calc(14px * var(--tv-scale)); left: calc(14px * var(--tv-scale)); width: calc(22px * var(--tv-scale)); height: calc(22px * var(--tv-scale));
  border-bottom: calc(1px * var(--tv-scale)) solid var(--neon); border-left: calc(1px * var(--tv-scale)) solid var(--neon); opacity: 0.5;
}

.rv-stat-top {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.rv-stat-label {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--neon);
}
.rv-stat-unit {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  padding: calc(3px * var(--tv-scale)) calc(8px * var(--tv-scale)); border: calc(1px * var(--tv-scale)) solid rgba(255,255,255,0.12); border-radius: calc(4px * var(--tv-scale));
}
.rv-stat-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(calc(44px * var(--tv-scale)), 107.52px, calc(84px * var(--tv-scale)));
  line-height: 0.88;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 0 30px rgba(var(--neon-rgb), 0.35);
  display: flex; align-items: baseline; gap: calc(6px * var(--tv-scale));
  animation: glowPulse 2s ease-in-out infinite;
}
.rv-stat-value .suffix {
  font-family: var(--font-display);
  font-size: 0.28em; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); font-weight: 500;
}
.rv-stat-foot {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}
.rv-delta { color: var(--neon); }
.rv-delta.down { color: rgba(255,255,255,0.45); }

.rv-stat-bar {
  height: calc(2px * var(--tv-scale)); width: 100%;
  background: rgba(255,255,255,0.06);
  border-radius: calc(2px * var(--tv-scale)); overflow: hidden;
  margin-top: calc(8px * var(--tv-scale));
}
.rv-stat-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, rgba(var(--neon-rgb), 0.6), var(--neon));
  box-shadow: 0 0 8px var(--neon);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1000ms cubic-bezier(.2,.7,.2,1) 400ms;
}
.rv-stat.in .rv-stat-bar i { transform: scaleX(var(--fill, 0.7)); }

/* ═══ PODIUM SCREEN — Pillar Design from HTML Mockup ═══════════════════ */

.podium-screen {
  width: 100%; height: 100%;
  background: #0a0710;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Atmosphere */
.pod-bg-atmos {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 70%, rgba(var(--neon-rgb), 0.22), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(var(--neon-rgb), 0.10), transparent 70%),
    #0a0710;
}
.pod-bg-atmos::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px);
  pointer-events: none;
}
.pod-bg-atmos::after {
  content: ''; position: absolute; left: 50%; top: 10%; width: calc(900px * var(--tv-scale)); height: calc(900px * var(--tv-scale));
  transform: translateX(-50%);
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--neon-rgb), 0.18), transparent 70%);
  pointer-events: none;
  animation: pod-pulse-spot 6s ease-in-out infinite;
  will-change: opacity;
}
@keyframes pod-pulse-spot { 0%,100%{opacity:0.7} 50%{opacity:1} }

.pod-corners { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pod-corners i {
  position: absolute; width: 140px; height: 140px; border-radius: 50%;
  border: 1px solid rgba(var(--neon-rgb), 0.22);
}
.pod-corners i:nth-child(1) { top: calc(40px * var(--tv-scale)); left: calc(40px * var(--tv-scale)); transform: translate(-50%,-50%); }
.pod-corners i:nth-child(2) { top: calc(40px * var(--tv-scale)); right: calc(40px * var(--tv-scale)); transform: translate(50%,-50%); }
.pod-corners i:nth-child(3) { bottom: calc(40px * var(--tv-scale)); left: calc(40px * var(--tv-scale)); transform: translate(-50%,50%); }
.pod-corners i:nth-child(4) { bottom: calc(40px * var(--tv-scale)); right: calc(40px * var(--tv-scale)); transform: translate(50%,50%); }

/* Header */
.pod-header {
  position: relative; z-index: 5;
  text-align: center;
  padding: calc(60px * var(--tv-scale)) calc(40px * var(--tv-scale)) 0;
}
.pod-eyebrow {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.4em;
  color: var(--neon); text-transform: uppercase;
  opacity: 0; animation: pod-fadeIn .8s .3s forwards;
}
.pod-title {
  margin-top: calc(14px * var(--tv-scale));
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(calc(56px * var(--tv-scale)), 153.6px, calc(112px * var(--tv-scale)));
  letter-spacing: 0.04em; line-height: 0.9;
  background: linear-gradient(180deg, #fff 0%, rgba(var(--neon-rgb), 0.9) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: 0; animation: pod-fadeIn .8s .5s forwards;
}
.pod-subtitle {
  margin-top: calc(10px * var(--tv-scale));
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.3em;
  color: rgba(255,255,255,0.32); text-transform: uppercase;
  opacity: 0; animation: pod-fadeIn .8s .7s forwards;
}
@keyframes pod-fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Stage */
.pod-stage {
  position: relative; z-index: 5;
  margin: calc(30px * var(--tv-scale)) auto 0;
  max-width: 1180px;
  padding: 0 calc(40px * var(--tv-scale)) calc(40px * var(--tv-scale));
}
.pod-podium {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: calc(28px * var(--tv-scale));
  align-items: end;
  position: relative;
}
.pod-podium::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(1px * var(--tv-scale));
  background: linear-gradient(90deg, transparent, rgba(var(--neon-rgb),0.7) 20%, rgba(var(--neon-rgb),0.7) 80%, transparent);
  box-shadow: 0 0 20px rgba(var(--neon-rgb),0.5);
}

/* Slot */
.pod-slot {
  position: relative;
  opacity: 0;
  transform: translateY(40px);
}
.pod-slot.reveal { animation: pod-slotIn .9s cubic-bezier(.2,.8,.2,1) forwards; }
.pod-slot[data-rank="2"].reveal { animation-delay: .8s; }
.pod-slot[data-rank="3"].reveal { animation-delay: 1.2s; }
.pod-slot[data-rank="1"].reveal { animation-delay: 1.6s; }
@keyframes pod-slotIn { to { opacity: 1; transform: translateY(0); } }

/* Athlete card */
.pod-athlete {
  position: relative;
  margin-bottom: calc(18px * var(--tv-scale));
  padding: calc(22px * var(--tv-scale)) calc(18px * var(--tv-scale)) calc(20px * var(--tv-scale));
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  backdrop-filter: blur(8px);
  border-radius: calc(14px * var(--tv-scale, 1));
  text-align: center;
}
.pod-athlete::before {
  content: ''; position: absolute; left: 20%; right: 20%; top: calc(-1px * var(--tv-scale)); height: calc(1px * var(--tv-scale));
  background: linear-gradient(90deg, transparent, var(--neon), transparent);
  box-shadow: 0 0 12px var(--neon);
}

/* Avatar */
.pod-avatar-wrap {
  position: relative;
  width: calc(88px * var(--tv-scale)); height: calc(88px * var(--tv-scale));
  margin: 0 auto calc(14px * var(--tv-scale));
}
.pod-avatar-ring {
  position: absolute; inset: calc(-6px * var(--tv-scale));
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--neon), transparent 30%, var(--neon) 60%, transparent 90%, var(--neon));
  animation: pod-spin 8s linear infinite;
  filter: blur(0.4px);
  opacity: 0.85;
  will-change: transform;
}
.pod-avatar-ring::after {
  content: ''; position: absolute; inset: calc(5px * var(--tv-scale)); border-radius: 50%;
  background: #0a0710;
}
@keyframes pod-spin { to { transform: rotate(360deg); } }
.pod-avatar {
  position: absolute; inset: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 600; font-size: calc(36px * var(--tv-scale));
  color: #fff;
  background: linear-gradient(135deg, rgba(var(--neon-rgb),0.3), rgba(var(--neon-rgb),0.15));
  border: 1px solid rgba(255,255,255,0.1);
  z-index: 2;
}

.pod-athlete-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pod-athlete-pts {
  margin-top: calc(6px * var(--tv-scale));
  font-family: var(--font-display); font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.22em;
  color: rgba(255,255,255,0.32); text-transform: uppercase;
}
.pod-athlete-pts b {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.02em;
  color: var(--neon);
  text-shadow: 0 0 18px rgba(var(--neon-rgb), 0.6);
  margin-top: calc(2px * var(--tv-scale));
}

/* Delta badge */
.pod-delta {
  position: absolute; top: calc(14px * var(--tv-scale)); right: calc(14px * var(--tv-scale));
  font-family: var(--font-display); font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.1em;
  padding: calc(3px * var(--tv-scale)) calc(7px * var(--tv-scale)); border-radius: calc(4px * var(--tv-scale));
  background: rgba(34,197,94,0.12);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.25);
}
.pod-delta.down {
  background: rgba(239,68,68,0.12);
  color: #f87171;
  border-color: rgba(239,68,68,0.25);
}

/* Pillar */
.pod-pillar {
  position: relative;
  border-radius: calc(10px * var(--tv-scale)) calc(10px * var(--tv-scale)) 0 0;
  border: 1px solid var(--neon);
  border-bottom: none;
  background: linear-gradient(180deg, rgba(var(--neon-rgb),0.22), rgba(var(--neon-rgb),0.08) 40%, rgba(var(--neon-rgb),0.03));
  box-shadow: inset 0 0 40px rgba(var(--neon-rgb),0.2), 0 0 40px rgba(var(--neon-rgb),0.25);
  overflow: hidden;
}
.pod-pillar::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 22px, rgba(var(--neon-rgb),0.08) 22px 23px);
  opacity: 0.5;
}
.pod-pillar::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 60%;
  left: -60%;
  background: linear-gradient(90deg, transparent, rgba(var(--neon-rgb),0.3), transparent);
  animation: pod-sweep 4s ease-in-out infinite;
}
@keyframes pod-sweep { 0%,100%{left:-60%} 50%{left:100%} }

.pod-pillar-inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(28px * var(--tv-scale)) calc(16px * var(--tv-scale)) calc(26px * var(--tv-scale));
}
.pod-rank-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(calc(90px * var(--tv-scale)), 230.4px, calc(160px * var(--tv-scale)));
  line-height: 0.85;
  color: var(--neon);
  text-shadow: 0 0 20px rgba(var(--neon-rgb),0.6), 0 0 50px rgba(var(--neon-rgb),0.4);
  letter-spacing: -0.02em;
}
.pod-pillar-foot {
  display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--tv-scale));
  font-family: var(--font-display); font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.25em;
  color: var(--neon);
  text-transform: uppercase;
}
.pod-pillar-foot .dot {
  width: calc(5px * var(--tv-scale)); height: calc(5px * var(--tv-scale)); border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 8px var(--neon);
}

/* Rank-specific sizes */
.pod-slot[data-rank="1"] .pod-pillar { height: calc(340px * var(--tv-scale)); }
.pod-slot[data-rank="1"] .pod-avatar-wrap { width: calc(110px * var(--tv-scale)); height: calc(110px * var(--tv-scale)); }
.pod-slot[data-rank="1"] .pod-avatar { font-size: calc(46px * var(--tv-scale)); }
.pod-slot[data-rank="1"] .pod-athlete-name { font-size: calc(30px * var(--tv-scale)); }
.pod-slot[data-rank="1"] .pod-athlete-pts b { font-size: calc(36px * var(--tv-scale)); }

.pod-slot[data-rank="2"] .pod-pillar { height: calc(260px * var(--tv-scale)); }
.pod-slot[data-rank="3"] .pod-pillar { height: calc(200px * var(--tv-scale)); }

/* Crown */
.pod-crown {
  position: absolute;
  top: calc(-32px * var(--tv-scale)); left: 50%; transform: translateX(-50%);
  width: calc(64px * var(--tv-scale)); height: calc(44px * var(--tv-scale));
  display: grid; place-items: center;
  opacity: 0;
  animation: pod-crownDrop 1s cubic-bezier(.3,1.4,.5,1) 2.4s forwards;
}
@keyframes pod-crownDrop {
  0% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.6); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.pod-crown svg { filter: drop-shadow(0 0 12px rgba(250,204,21,0.6)); }

/* Gold / Silver / Bronze */
.ranking-row:nth-child(1) .ranking-position,
.ranking-row:nth-child(1) .ranking-name { color: #FFD700; }
.ranking-row:nth-child(2) .ranking-position,
.ranking-row:nth-child(2) .ranking-name { color: #C0C0C0; }
.ranking-row:nth-child(3) .ranking-position,
.ranking-row:nth-child(3) .ranking-name { color: #CD7F32; }

.pr-badge {
  background: var(--gold); color: #000; padding: calc(2px * var(--tv-scale)) calc(8px * var(--tv-scale));
  border-radius: calc(500px * var(--tv-scale)); font-size: calc(30px * var(--tv-scale)); font-weight: 800;
  margin-left: calc(8px * var(--tv-scale)); letter-spacing: calc(1px * var(--tv-scale));
}

/* ═══ NON-STATION ROUND main area (uses .round-screen grid, not special-screen) ═════════════════════════════ */

.special-main {
  padding: calc(32px * var(--tv-scale)) calc(48px * var(--tv-scale)); display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative;
}
.special-round-label {
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.4em; color: #999; font-weight: 700;
  margin-bottom: calc(12px * var(--tv-scale)); text-align: center;
}
.special-name-big {
  font-family: var(--font-display);
  font-size: calc(130px * var(--tv-scale)); letter-spacing: 0.05em; color: var(--text);
  text-align: center; margin-bottom: calc(8px * var(--tv-scale)); line-height: 1;
}
.special-strikes {
  font-size: calc(30px * var(--tv-scale)); color: var(--text-dim);
  letter-spacing: 0.2em; margin-top: calc(20px * var(--tv-scale)); text-align: center;
}

/* ─── Session Leaderboard in sidebar ─── */
.sidebar-lb-row {
  display: flex; align-items: center; gap: calc(12px * var(--tv-scale));
  padding: calc(10px * var(--tv-scale)) 0; border-bottom: calc(1px * var(--tv-scale)) solid rgba(255,255,255,0.06); font-size: calc(30px * var(--tv-scale));
}
.sidebar-lb-rank {
  color: rgba(255,255,255,0.4); width: calc(28px * var(--tv-scale)); font-size: calc(30px * var(--tv-scale));
  font-family: var(--font-display); text-align: center;
}
.sidebar-lb-name { flex: 1; color: #fff; font-weight: 600; }
.sidebar-lb-pts {
  color: var(--energy-color, var(--accent)); font-weight: 700;
  font-family: var(--font-display); font-size: calc(30px * var(--tv-scale));
}
.sidebar-lb-row.rank-1 .sidebar-lb-name,
.sidebar-lb-row.rank-1 .sidebar-lb-rank { color: #FFD700; }
.sidebar-lb-row.rank-2 .sidebar-lb-name,
.sidebar-lb-row.rank-2 .sidebar-lb-rank { color: #C0C0C0; }
.sidebar-lb-row.rank-3 .sidebar-lb-name,
.sidebar-lb-row.rank-3 .sidebar-lb-rank { color: #CD7F32; }
.sidebar-empty { color: rgba(255,255,255,0.3); font-size: calc(30px * var(--tv-scale)); margin-top: calc(24px * var(--tv-scale)); text-align: center; font-weight: 500; }

/* ═══ SPECIAL ROUNDS (legacy — kept for any remaining uses) ═════════════════════════════ */

.special-screen {
  display: flex !important; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--bg); position: relative;
}
.special-round-label { font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.3em; color: var(--text-label); margin-bottom: calc(12px * var(--tv-scale)); font-weight: 600; }
.special-name {
  font-family: var(--font-display);
  font-size: calc(64px * var(--tv-scale)); color: var(--text); letter-spacing: 0.05em; margin-bottom: calc(16px * var(--tv-scale));
}
.special-timer {
  font-family: var(--font-display);
  font-size: calc(96px * var(--tv-scale)); color: var(--accent); line-height: 1;
}
.special-sublabel { font-size: calc(30px * var(--tv-scale)); color: var(--text-dim); margin-top: calc(16px * var(--tv-scale)); letter-spacing: 0.1em; font-weight: 500; }

.mode-warmup .special-name { color: var(--gold); }
.mode-force .special-name { color: var(--accent); }
.mode-relax .special-name { color: var(--light); }
.mode-relax .special-timer { color: var(--light); opacity: 0.6; }

/* ═══ COLLECTING OVERLAY ═════════════════════════════════════════════════ */

.collecting-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(10,10,15,0.9);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  animation: fadeIn 0.3s ease-out;
}
.collecting-text {
  font-family: var(--font-display);
  font-size: calc(32px * var(--tv-scale)); letter-spacing: 0.3em; color: var(--text-dim);
  animation: blink 1.2s ease-in-out infinite;
}

/* ═══ NOW PLAYING (Spotify badge) ═════════════════════════════════════ */

.now-playing {
  position: absolute;
  bottom: calc(80px * var(--tv-scale));
  right: calc(24px * var(--tv-scale));
  display: flex;
  align-items: center;
  gap: calc(14px * var(--tv-scale));
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
  backdrop-filter: blur(12px);
  border-radius: calc(10px * var(--tv-scale));
  border: calc(1px * var(--tv-scale)) solid rgba(255, 255, 255, 0.1);
  padding: calc(12px * var(--tv-scale)) calc(16px * var(--tv-scale));
  z-index: 10;
  animation: fadeIn 0.5s ease-out;
  box-shadow: 0 0 calc(20px * var(--tv-scale)) rgba(0, 0, 0, 0.5);
}

.now-playing-art {
  width: calc(44px * var(--tv-scale));
  height: calc(44px * var(--tv-scale));
  border-radius: calc(6px * var(--tv-scale));
  object-fit: cover;
  box-shadow: 0 0 calc(12px * var(--tv-scale)) rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.now-playing-info {
  display: flex;
  flex-direction: column;
  gap: calc(3px * var(--tv-scale));
  max-width: calc(240px * var(--tv-scale));
}

.now-playing-title {
  font-family: var(--font-body);
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.now-playing-artist {
  font-family: var(--font-body);
  font-size: calc(30px * var(--tv-scale));
  color: var(--text-label);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.now-playing-bpm {
  font-family: var(--font-mono);
  font-size: calc(30px * var(--tv-scale));
  color: var(--primary, #1ed760);
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.95;
  flex-shrink: 0;
}

/* ═══ ANIMATIONS ════════════════════════════════════════════════════════ */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes idleRowReveal {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes idleGoldPulse {
  0%, 100% { text-shadow: 0 0 12px rgba(255, 215, 0, 0.4); }
  50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { transform: translateX(30px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes cardReveal {
  from { transform: rotateY(90deg) scale(0.8); opacity: 0; }
  to { transform: rotateY(0deg) scale(1); opacity: 1; }
}

@keyframes cardShine {
  from { left: -100%; }
  to { left: 200%; }
}

@keyframes timerFlash {
  0%, 100% { color: var(--text); text-shadow: none; }
  50% { color: var(--accent); text-shadow: 0 0 40px rgba(255,59,48,0.3); }
}

@keyframes timerPulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

@keyframes starPop {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes nameExplode {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes fadeInUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes particleFall {
  0% { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(500px) rotate(360deg); opacity: 0; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes pulseSubtle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ═══ REVEAL SUSPENSE ════════════════════════════════════════════════════ */

.reveal-suspense-screen {
  display: flex !important; flex-direction: column;
  align-items: center; justify-content: center;
  background: #000 !important; gap: calc(32px * var(--tv-scale));
  animation: fadeIn 0.4s ease-out;
}

.suspense-scanlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.015) 2px, rgba(255,255,255,0.015) 4px);
}

.suspense-title {
  font-family: var(--font-display);
  font-size: calc(120px * var(--tv-scale)); letter-spacing: 0.6em; padding-right: 0.6em;
  animation: suspensePulse 0.9s ease-in-out infinite;
  position: relative; z-index: 1;
  will-change: color;
}

@keyframes suspensePulse {
  0%, 100% { color: rgba(255,255,255,0.06); text-shadow: none; }
  50% { color: rgba(255,59,48,0.55); text-shadow: 0 0 80px rgba(255,59,48,0.25); }
}

.suspense-energy {
  display: flex; flex-direction: column; align-items: center; gap: calc(4px * var(--tv-scale));
  position: relative; z-index: 1;
  animation: fadeInUp 0.7s ease-out 0.6s backwards;
}
.suspense-energy-label {
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.4em; color: rgba(255,255,255,0.45);
}
.suspense-energy-value {
  font-family: var(--font-display);
  font-size: calc(64px * var(--tv-scale)); color: rgba(255,215,0,0.55); letter-spacing: 0.05em;
}

/* ═══ P3 ANIMATION REGISTRY ════════════════════════════════════════════════
 * Authored animations from BoD cue.payload.animation.onMount land here via
 * TVStage. Each class wraps an existing @keyframes so this section only adds
 * the registry binding (class → keyframe + timing); no new keyframes are
 * defined. Authors can suppress the default by stamping `onMount: 'none'`
 * (resolveOnMountClass returns ''; no class is applied).
 * See vault/Plans/2026-05-17-bod-as-video-editor.md and animationRegistry.ts.
 */
.tv-anim-fadeIn { animation: fadeIn 360ms ease-out both; }
.tv-anim-slideIn { animation: slideIn 360ms ease-out both; }
.tv-anim-slideInRight { animation: slideInRight 360ms ease-out both; }
.tv-anim-cardReveal { animation: cardReveal 480ms ease-out both; }
.tv-anim-pulseGlow { animation: pod-pulse-spot 1200ms ease-in-out infinite; }

/* ═══ MOVERS ════════════════════════════════════════════════════════════ */

.mover-arrow {
  font-size: calc(30px * var(--tv-scale)); font-weight: 700;
  width: calc(18px * var(--tv-scale)); text-align: center; flex-shrink: 0;
  animation: fadeIn 0.4s ease-out;
}
.mover-arrow.up { color: #22C55E; }
.mover-arrow.down { color: var(--accent); }

/* ═══ TEAM ENERGY (sidebar + between_rounds) ═══════════════════════════ */

.sidebar-energy {
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.15em;
  color: rgba(255,215,0,0.6); margin-bottom: calc(6px * var(--tv-scale));
}

.interval-energy-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(6px * var(--tv-scale)) 0 calc(10px * var(--tv-scale)); margin-bottom: calc(4px * var(--tv-scale));
  border-bottom: calc(1px * var(--tv-scale)) solid rgba(255,215,0,0.08);
}
.interval-energy-label { font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.2em; color: rgba(255,215,0,0.6); }
.interval-energy-value {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); color: rgba(255,215,0,0.7);
}

/* ═══ PODIUM DRAMATIC ENTRANCE ══════════════════════════════════════════ */

/* Old podium-position rules removed — replaced by .pod-slot in podium screen section */


/* ═══ PERSISTENT COUNTDOWN OVERLAY ══════════════════════════════════════ */

.persistent-countdown {
  position: fixed; bottom: calc(24px * var(--tv-scale)); left: calc(24px * var(--tv-scale)); z-index: 50;
  display: flex; flex-direction: column; align-items: center;
  background: rgba(202, 240, 7, 0.75); border: 1px solid rgba(255,59,48,0.35);
  border-radius: calc(12px * var(--tv-scale)); padding: calc(12px * var(--tv-scale)) calc(24px * var(--tv-scale)); gap: calc(2px * var(--tv-scale));
  backdrop-filter: blur(8px);
  transform: translateZ(0);
  contain: layout style paint;
  will-change: backdrop-filter;
}
.pc-label { font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.2em; color: var(--text-dim); text-transform: uppercase; }
.pc-timer { font-family: var(--font-display); font-size: calc(52px * var(--tv-scale)); color: var(--accent); line-height: 1; }
.pc-next  { font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.12em; color: #777; margin-top: calc(4px * var(--tv-scale)); text-transform: uppercase; }

/* ═══ ROUND ACTIVE PREMIUM (100-inch TV) ════════════════════════════════ */

.round-active-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(420px * var(--tv-scale));
  grid-template-rows: auto 1fr auto;
  height: 1080px;
  gap: 0;
  background: #08081a;
  overflow: hidden;
  position: relative;
}

/* Atmospheric background layer */
.round-active-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 40%, rgba(217, 70, 239, 0.12), transparent 60%),
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(34, 211, 238, 0.08), transparent 60%),
    #08081a;
  pointer-events: none;
}

/* Energy pulse animation layer */
.round-active-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(217, 70, 239, 0.06), transparent 70%);
  animation: energy-pulse var(--pulse-speed, 2.5s) ease-in-out infinite;
  pointer-events: none;
  will-change: opacity;
}

@keyframes energy-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* Vertical beam animations */
.ras-beam {
  position: absolute;
  top: 0;
  width: calc(2px * var(--tv-scale));
  height: 100%;
  z-index: 1;
  opacity: 0.15;
  background: linear-gradient(180deg, transparent 0%, currentColor 50%, transparent 100%);
  animation: beam-sweep 3s ease-in-out infinite;
}
.ras-beam:nth-child(1) { left: 15%; color: #22d3ee; animation-delay: 0s; }
.ras-beam:nth-child(2) { left: 35%; color: #d946ef; animation-delay: 0.7s; }
.ras-beam:nth-child(3) { left: 65%; color: #22d3ee; animation-delay: 1.4s; }
.ras-beam:nth-child(4) { right: 15%; color: #d946ef; animation-delay: 2.1s; }

@keyframes beam-sweep {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.25; }
}

/* Particle dots (atmospheric) */
.ras-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.ras-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: float-particle 8s linear infinite;
  will-change: transform, opacity;
}
.ras-particle:nth-child(n) { width: 2px; height: 2px; }
.ras-particle:nth-child(3n) { width: 3px; height: 3px; opacity: 0.4; }
.ras-particle:nth-child(7n) { width: calc(4px * var(--tv-scale, 1)); height: 4px; opacity: 0.2; }

@keyframes float-particle {
  0% { transform: translateY(1080px) translateX(0); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-1080px) translateX(20px); opacity: 0; }
}

/* ═══ HEADER & GRID LAYOUT ═══════════════════════════════════════════════ */

.ras-main-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: 100%;
  gap: calc(80px * var(--tv-scale));
  padding: calc(60px * var(--tv-scale)) calc(80px * var(--tv-scale));
  align-items: center;
  justify-items: center;
}

.round-active-header {
  grid-column: 1 / -1;
  z-index: 10;
  padding: calc(16px * var(--tv-scale)) calc(32px * var(--tv-scale));
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: calc(2px * var(--tv-scale)) solid rgba(217, 70, 239, 0.3);
  background: rgba(0, 0, 0, 0.3);
}

.ras-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4px * var(--tv-scale));
}

.ras-header-title {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ras-header-info {
  font-size: calc(30px * var(--tv-scale));
  color: rgba(255, 255, 255, 0.6);
}

.ras-header-right {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  letter-spacing: 0.08em;
}

.round-active-main {
  grid-column: 1;
  grid-row: 2;
  z-index: 5;
  position: relative;
  overflow: hidden;
}

.round-active-main::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(150px * var(--tv-scale));
  height: calc(150px * var(--tv-scale));
  background: radial-gradient(circle, rgba(var(--glow-rgb), 0.4), transparent 70%);
  filter: blur(35px);
  z-index: 0;
}

.round-active-main > * {
  position: relative;
  z-index: 1;
}

.round-active-label {
  font-size: calc(36px * var(--tv-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
  text-align: center;
  font-weight: 500;
}

.round-active-timer {
  font-family: monospace;
  font-size: calc(140px * var(--tv-scale));
  font-weight: 900;
  letter-spacing: -0.01em;
  text-shadow: 0 0 20px rgba(var(--glow-rgb), 0.6), 0 0 40px rgba(var(--glow-rgb), 0.4), 0 0 60px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  line-height: 1;
}

.round-active-drills {
  display: flex;
  gap: calc(6px * var(--tv-scale));
  justify-content: center;
  flex-wrap: wrap;
}

@keyframes drill-card-glow {
  0%, 100% {
    box-shadow: 0 0 calc(15px * var(--tv-scale)) rgba(217, 70, 239, 0.4),
                0 1px calc(4px * var(--tv-scale)) rgba(0, 0, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 calc(35px * var(--tv-scale)) rgba(217, 70, 239, 0.6),
                0 1px calc(4px * var(--tv-scale)) rgba(0, 0, 0, 0.3);
  }
}

.round-active-drill-card {
  padding: calc(16px * var(--tv-scale)) calc(28px * var(--tv-scale));
  border-radius: calc(8px * var(--tv-scale));
  border: calc(2px * var(--tv-scale)) solid rgba(217, 70, 239, 0.4);
  background: rgba(217, 70, 239, 0.08);
  backdrop-filter: blur(12px);
  font-size: calc(32px * var(--tv-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.3;
  transition: opacity 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.round-active-drill-card.strike-active {
  opacity: 1;
  color: #d946ef;
  border-color: #d946ef;
  animation: drill-card-glow 2s ease-in-out infinite;
  will-change: box-shadow;
}

.round-active-intensity {
  grid-column: 1;
  grid-row: 3;
  width: 85%;
  height: calc(12px * var(--tv-scale));
  margin: calc(16px * var(--tv-scale)) auto;
  background: linear-gradient(90deg, var(--primary), transparent);
  border-radius: calc(6px * var(--tv-scale));
  box-shadow: 0 0 12px rgba(var(--glow-rgb), 0.6), 0 0 24px rgba(var(--glow-rgb), 0.4);
  position: relative;
  overflow: hidden;
}

.round-active-intensity::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  animation: shimmer 3s linear infinite;
}

/* Live leaderboard at bottom */
.round-active-leaderboard {
  grid-column: 1;
  grid-row: 4;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(280px * var(--tv-scale)), 1fr));
  gap: calc(16px * var(--tv-scale));
  padding: calc(20px * var(--tv-scale)) calc(32px * var(--tv-scale));
  border-top: calc(2px * var(--tv-scale)) solid rgba(var(--glow-rgb), 0.2);
  border-bottom: calc(2px * var(--tv-scale)) solid rgba(var(--glow-rgb), 0.2);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
  overflow-y: auto;
  max-height: calc(160px * var(--tv-scale));
}

.ral-entry {
  display: flex;
  align-items: center;
  gap: calc(16px * var(--tv-scale));
  padding: calc(12px * var(--tv-scale)) calc(16px * var(--tv-scale));
  background: rgba(var(--glow-rgb), 0.12);
  border: calc(1.5px * var(--tv-scale)) solid rgba(var(--glow-rgb), 0.4);
  border-radius: calc(8px * var(--tv-scale));
  backdrop-filter: blur(12px);
  transition: all 300ms ease;
}

.ral-entry:hover {
  background: rgba(var(--glow-rgb), 0.18);
  border-color: rgba(var(--glow-rgb), 0.6);
  box-shadow: 0 0 calc(20px * var(--tv-scale)) rgba(var(--glow-rgb), 0.2);
}

.ral-rank {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  color: var(--primary);
  min-width: calc(32px * var(--tv-scale));
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(48px * var(--tv-scale));
  height: calc(48px * var(--tv-scale));
  background: rgba(var(--glow-rgb), 0.15);
  border-radius: calc(6px * var(--tv-scale));
}

.ral-name {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.ral-score {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  color: var(--primary);
  text-align: right;
  font-family: monospace;
  letter-spacing: 0.05em;
}

.round-active-sidebar {
  grid-column: 1;
  grid-row: 4;
  padding: calc(12px * var(--tv-scale));
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(12px);
  border-top: calc(1px * var(--tv-scale)) solid rgba(255, 255, 255, 0.08);
  border-bottom: calc(1px * var(--tv-scale)) solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--tv-scale));
  align-items: center;
  contain: layout style paint;
  will-change: backdrop-filter;
}

.round-active-sidebar-title {
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.45;
  padding: calc(4px * var(--tv-scale)) calc(8px * var(--tv-scale));
  font-weight: 600;
  margin-bottom: calc(8px * var(--tv-scale));
}

.round-active-sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(12px * var(--tv-scale)) calc(16px * var(--tv-scale));
  border-radius: calc(4px * var(--tv-scale));
  font-size: calc(30px * var(--tv-scale));
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid rgba(255, 255, 255, 0.04);
  margin-bottom: calc(8px * var(--tv-scale));
}

.round-active-sidebar-rank {
  font-weight: 700;
  width: calc(24px * var(--tv-scale));
  text-align: center;
  color: var(--primary);
  font-size: calc(30px * var(--tv-scale));
}

.round-active-sidebar-name {
  flex: 1;
  padding: 0 calc(3px * var(--tv-scale));
  font-weight: 500;
}

.round-active-sidebar-score {
  font-weight: 600;
  text-align: right;
  font-size: calc(30px * var(--tv-scale));
}

.round-active-next {
  grid-column: 1 / -1;
  padding: calc(8px * var(--tv-scale));
  background: rgba(0, 0, 0, 0.3);
  border-top: calc(1px * var(--tv-scale)) solid rgba(255, 255, 255, 0.06);
  border-bottom: calc(1px * var(--tv-scale)) solid rgba(255, 255, 255, 0.06);
  font-size: calc(30px * var(--tv-scale));
  text-align: center;
}

.round-active-next-label {
  opacity: 0.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: calc(2px * var(--tv-scale));
  font-size: calc(30px * var(--tv-scale));
}

.round-active-next-name {
  font-weight: 600;
  color: var(--primary);
  font-size: calc(30px * var(--tv-scale));
}

.round-active-footer {
  grid-column: 1 / -1;
  grid-row: 5;
  position: relative;
  height: calc(100px * var(--tv-scale));
  overflow: hidden;
  border-top: calc(1px * var(--tv-scale)) solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: calc(4px * var(--tv-scale));
  align-items: flex-end;
  padding: 0 calc(8px * var(--tv-scale)) calc(12px * var(--tv-scale));
  justify-content: space-around;
  contain: layout style paint;
}

.round-active-wave-bar {
  flex: 1;
  min-width: 0;
  min-height: calc(8px * var(--tv-scale));
  border-radius: calc(2px * var(--tv-scale));
  background: linear-gradient(180deg, var(--primary), transparent);
  opacity: 0.8;
  animation: waveMove var(--pulse-speed, 1.2s) ease-in-out infinite;
  will-change: height;
  backface-visibility: hidden;
}

.round-active-wave-bar:nth-child(1) { animation-delay: 0.0s; }
.round-active-wave-bar:nth-child(2) { animation-delay: 0.1s; }
.round-active-wave-bar:nth-child(3) { animation-delay: 0.2s; }
.round-active-wave-bar:nth-child(4) { animation-delay: 0.3s; }
.round-active-wave-bar:nth-child(5) { animation-delay: 0.4s; }
.round-active-wave-bar:nth-child(6) { animation-delay: 0.5s; }
.round-active-wave-bar:nth-child(7) { animation-delay: 0.6s; }
.round-active-wave-bar:nth-child(8) { animation-delay: 0.7s; }

.round-active-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1.2px solid var(--primary);
  border-radius: 50%;
  opacity: 0;
  animation: pulseRingExpand var(--pulse-speed, 2.5s) ease-out infinite;
  z-index: 0;
  will-change: transform, opacity;
}

.round-active-pulse-primary {
  width: calc(80px * var(--tv-scale));
  height: calc(80px * var(--tv-scale));
}

.round-active-pulse-secondary {
  width: calc(80px * var(--tv-scale));
  height: calc(80px * var(--tv-scale));
  border-width: 0.calc(8px * var(--tv-scale));
  animation-delay: 0.3s;
}

.round-active-pulse-tertiary {
  width: calc(60px * var(--tv-scale));
  height: calc(60px * var(--tv-scale));
  border-width: calc(1px * var(--tv-scale));
  animation: pulseRingExpand 3s ease-out infinite;
  animation-delay: 0.6s;
}

.round-active-pulse-quaternary {
  width: calc(100px * var(--tv-scale));
  height: calc(100px * var(--tv-scale));
  border-width: 0.calc(6px * var(--tv-scale));
  animation: pulseRotate 3.5s ease-out infinite;
  animation-delay: 0.9s;
}

/* Corner pulses */
.round-active-pulse-corner {
  position: absolute;
  border: 1px solid var(--primary);
  border-radius: 50%;
  opacity: 0;
  animation: cornerPulse 4s ease-out infinite;
  will-change: transform, opacity;
}

.pulse-corner-tl {
  top: 12%;
  left: 8%;
  width: calc(60px * var(--tv-scale));
  height: calc(60px * var(--tv-scale));
  animation-delay: 0s;
}

.pulse-corner-tr {
  top: 12%;
  right: 8%;
  width: calc(50px * var(--tv-scale));
  height: calc(50px * var(--tv-scale));
  animation-delay: 0.5s;
}

.pulse-corner-bl {
  bottom: 20%;
  left: 8%;
  width: calc(70px * var(--tv-scale));
  height: calc(70px * var(--tv-scale));
  animation-delay: 1s;
}

.pulse-corner-br {
  bottom: 20%;
  right: 8%;
  width: calc(55px * var(--tv-scale));
  height: calc(55px * var(--tv-scale));
  animation-delay: 1.5s;
}

@keyframes pulseRingExpand {
  0% {
    width: 80px;
    height: 80px;
    opacity: 0.4;
  }
  100% {
    width: 240px;
    height: 240px;
    opacity: 0;
  }
}

@keyframes pulseRotate {
  0% {
    width: 100px;
    height: 100px;
    opacity: 0.3;
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(180deg);
  }
}

@keyframes cornerPulse {
  0% {
    opacity: 0.5;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ═══ CONFETTI & REVEAL ANIMATIONS ═════════════════════════════════════ */

/* Confetti container */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

/* Confetti particles */
.confetti {
  position: absolute;
  top: calc(-20px * var(--tv-scale));
  pointer-events: none;
  border-radius: 50%;
  animation: confettiFall 3.5s ease-in forwards;
  box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.6);
  will-change: transform, opacity;
}

.confetti.small {
  width: calc(6px * var(--tv-scale));
  height: calc(6px * var(--tv-scale));
  background: var(--primary);
  opacity: 0.8;
}

.confetti.medium {
  width: calc(12px * var(--tv-scale));
  height: calc(12px * var(--tv-scale));
  background: var(--primary);
  opacity: 0.9;
}

.confetti.large {
  width: calc(18px * var(--tv-scale));
  height: calc(18px * var(--tv-scale));
  background: var(--primary);
  opacity: 0.7;
}

/* Requires --tx custom property set by JavaScript for horizontal random offset per element */
@keyframes confettiFall {
  0% {
    top: calc(-20px * var(--tv-scale, 1));
    opacity: 1;
    transform: translateX(0) rotate(0deg) scale(1);
  }
  25% {
    opacity: 1;
    transform: translateX(var(--tx)) rotate(90deg) scale(1.1);
  }
  50% {
    opacity: 1;
    transform: translateX(var(--tx)) rotate(180deg) scale(0.9);
  }
  75% {
    opacity: 0.7;
    transform: translateX(var(--tx)) rotate(270deg) scale(1.05);
  }
  100% {
    top: 100%;
    opacity: 0;
    transform: translateX(var(--tx)) rotate(360deg) scale(0.8);
  }
}

@keyframes podiumReveal {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes rowGlow {
  0%, 100% {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
  }
  50% {
    border-color: rgba(var(--glow-rgb), 0.3);
    background: rgba(var(--glow-rgb), 0.08);
    box-shadow: inset 0 0 12px rgba(var(--glow-rgb), 0.1);
  }
}

@keyframes blockGlow {
  0%, 100% {
    border-color: rgba(var(--glow-rgb), 0.4);
    box-shadow: 0 0 20px var(--glow), inset 0 0 20px rgba(0,0,0,0.3);
  }
  50% {
    border-color: rgba(var(--glow-rgb), 0.8);
    box-shadow: 0 0 40px var(--glow), inset 0 0 20px rgba(var(--glow-rgb), 0.1);
  }
}

@keyframes sparkleShine {
  0%, 100% {
    opacity: 0;
    transform: translateX(-100%);
  }
  50% {
    opacity: 0.8;
    transform: translateX(100%);
  }
}

@keyframes winnerGlow {
  0%, 100% {
    opacity: 0.4;
    transform: translateX(-50%) scale(0.8);
  }
  50% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1.2);
  }
}

@keyframes rankPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px var(--glow));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px var(--glow));
  }
}

@keyframes nameShake {
  0%, 100% { transform: translateX(0) scaleY(1); }
  8% { transform: translateX(-4px) scaleY(1.08); }
  16% { transform: translateX(4px) scaleY(0.92); }
  24% { transform: translateX(-3px) scaleY(1.06); }
  32% { transform: translateX(3px) scaleY(0.94); }
  40% { transform: translateX(-2px) scaleY(1.04); }
  48% { transform: translateX(2px) scaleY(0.96); }
  56% { transform: translateX(-1px) scaleY(1.02); }
  64% { transform: translateX(1px) scaleY(0.98); }
  72% { transform: translateX(-1px) scaleY(1.01); }
  80% { transform: translateX(1px) scaleY(0.99); }
  90% { transform: translateX(0) scaleY(1); }
}

/* TV layout grid — single column (the session-progress sidebar was removed) */
.tv-layout {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  height: 100%;
  gap: 0;
  contain: layout style;
}

.tv-main-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* TVStage wrapper — unstyled div was collapsing height:100% on child screens */
.tv-stage {
  width: 100%;
  height: 100%;
}

/* FIXED 2026-07-31 — syntax error introduced by b9aa2f8 (2026-05-05): inserting
   `.tv-stage` here closed `.tv-main-content` early, orphaning four declarations
   and leaving a stray `}`. PostCSS rejects the whole stylesheet on it, so `vite
   dev` served the TV with NO CSS at all.
   The orphans (`padding-bottom: 80px` for the NextUpBar overlay, `box-sizing`,
   `transform: translateZ(0)`, `contain`) were dead in every parser since May, so
   they are removed rather than restored — deleting them changes nothing, while
   restoring them would silently alter a layout that has run without them for
   three months. Whether `.tv-main-content` should get that padding back is a
   separate call. */

/* ─── Session Progress Panel Sidebar ─── */
.panel-header {
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  border-bottom: calc(1px * var(--tv-scale)) solid rgba(var(--glow-rgb), 0.3);
  padding-bottom: calc(12px * var(--tv-scale));
}

.panel-stat {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--tv-scale));
}

.stat-label {
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 700;
}

.stat-value {
  font-size: calc(30px * var(--tv-scale));
  font-family: var(--font-display);
  color: var(--primary);
  font-weight: 700;
}

.panel-progress {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--tv-scale));
}

.progress-bar {
  height: calc(3px * var(--tv-scale));
  background: rgba(255, 255, 255, 0.1);
  border-radius: calc(2px * var(--tv-scale));
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: calc(2px * var(--tv-scale));
  transition: width 0.3s ease-out;
}

/* ─── Panel Stats Row ─── */
.panel-stat-row {
  display: flex;
  gap: calc(12px * var(--tv-scale));
}

.panel-stat-row .panel-stat {
  flex: 1;
}

/* ─── Rounds List ─── */
.panel-rounds-list {
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--tv-scale));
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: calc(8px * var(--tv-scale)) 0;
  border-top: calc(1px * var(--tv-scale)) solid rgba(var(--glow-rgb), 0.15);
  padding-top: calc(12px * var(--tv-scale));
}

.panel-round-card {
  display: grid;
  grid-template-columns: calc(28px * var(--tv-scale)) 1fr auto;
  gap: calc(8px * var(--tv-scale));
  align-items: center;
  padding: calc(14px * var(--tv-scale)) calc(12px * var(--tv-scale));
  border-radius: calc(6px * var(--tv-scale));
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
  font-size: calc(30px * var(--tv-scale));
}

.panel-round-card.is-active {
  background: linear-gradient(135deg, rgba(var(--glow-rgb), 0.12), rgba(var(--glow-rgb), 0.04));
  border-color: var(--primary);
  box-shadow: 0 0 8px rgba(var(--glow-rgb), 0.2);
}

.panel-round-card.is-done {
  opacity: 0.5;
}

.panel-round-card:hover:not(.is-done) {
  background: rgba(var(--glow-rgb), 0.08);
  border-color: rgba(var(--glow-rgb), 0.25);
}

.prc-num {
  font-family: var(--font-display);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6);
  font-size: calc(30px * var(--tv-scale));
  text-align: center;
}

.panel-round-card.is-active .prc-num {
  color: var(--primary);
}

.prc-type {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.05em;
}

.prc-name {
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  font-size: calc(30px * var(--tv-scale));
  text-overflow: ellipsis;
  font-size: calc(30px * var(--tv-scale));
}

.prc-dot {
  width: calc(6px * var(--tv-scale));
  height: calc(6px * var(--tv-scale));
  border-radius: 50%;
  flex-shrink: 0;
}

.prc-dur {
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  flex-shrink: 0;
}

.prc-drill {
  grid-column: 1 / -1;
  font-size: calc(30px * var(--tv-scale));
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: italic;
}

/* ═══ SORTEIO MATCHBOARD — Flip Card Design ════════════════════════════ */

.sorteio-screen {
  width: 100%; height: 100%;
  background: #0a0710;
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* Atmospheric background */
.sorteio-bg-atmos {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(var(--neon-rgb), 0.14), transparent 60%),
    radial-gradient(ellipse 40% 30% at 20% 80%, rgba(var(--neon-rgb), 0.08), transparent 70%),
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(var(--neon-rgb), 0.08), transparent 70%),
    #0a0710;
}
.sorteio-bg-atmos::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 3px, rgba(255,255,255,0.015) 3px, rgba(255,255,255,0.015) 4px);
  pointer-events: none;
}

/* Corner rings */
.sorteio-watermark {
  position: absolute; top: 50%; left: 50%; z-index: 0;
  width: calc(780px * var(--tv-scale, 1)); height: calc(780px * var(--tv-scale, 1));
  transform: translate(-50%, -50%); pointer-events: none;
  background: var(--neon); opacity: .05;
  -webkit-mask: url(/brand/strikex-mark.png) center/contain no-repeat;
  mask: url(/brand/strikex-mark.png) center/contain no-repeat;
}
.sorteio-corners { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sorteio-corners i {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 1px solid rgba(var(--neon-rgb), 0.25);
}
.sorteio-corners i:nth-child(1) { top: 40px; left: 40px; transform: translate(-50%, -50%); }
.sorteio-corners i:nth-child(2) { top: 40px; right: 40px; transform: translate(50%, -50%); }
.sorteio-corners i:nth-child(3) { bottom: 40px; left: 40px; transform: translate(-50%, 50%); }
.sorteio-corners i:nth-child(4) { bottom: 40px; right: 40px; transform: translate(50%, 50%); }

/* Stage */
.sorteio-stage {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  display: grid; place-items: center;
  /* The 170px bottom reserve was for the next-up footer, which this screen no
     longer carries. Top raised to 56px so the countdown clears the TVFrame's
     double rule instead of sitting on it. */
  padding: calc(56px * var(--tv-scale)) calc(40px * var(--tv-scale)) calc(48px * var(--tv-scale));
}
.sorteio-p1 {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  row-gap: calc(18px * var(--tv-scale));
  width: 100%; height: 100%;
}

/* Round badge */
.sorteio-round-badge {
  display: inline-flex; align-items: center; gap: calc(10px * var(--tv-scale));
  padding: calc(8px * var(--tv-scale)) calc(16px * var(--tv-scale));
  border: 1.5px solid var(--neon);
  border-radius: calc(4px * var(--tv-scale));
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--neon);
  box-shadow: inset 0 0 20px rgba(var(--neon-rgb), 0.08), 0 0 20px rgba(var(--neon-rgb), 0.2);
  background: rgba(var(--neon-rgb), 0.04);
}
.sorteio-round-badge .dot {
  width: calc(8px * var(--tv-scale)); height: calc(8px * var(--tv-scale)); border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 10px var(--neon);
  animation: sorteio-pulse 1.4s ease-in-out infinite;
}
@keyframes sorteio-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Headline */
.sorteio-p1-head {
  text-align: center;
  display: flex; flex-direction: column; gap: calc(14px * var(--tv-scale)); align-items: center;
}

/* Grid */
.sorteio-p1-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: calc(18px * var(--tv-scale));
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: 0 calc(40px * var(--tv-scale));
}

/* Flip card */
.sorteio-screen .flip-card {
  /* 80% of the grid cell (−20%), centred — leaves breathing room around each card */
  height: 80%;
  width: 80%;
  place-self: center;
  perspective: 1400px;
  position: relative;
}
.sorteio-screen .flip-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.7,-0.25,.3,1.25);
}
.sorteio-screen .flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.sorteio-screen .flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: calc(10px * var(--tv-scale));
  border: 1.5px solid var(--card-border);
  background: linear-gradient(160deg, rgba(var(--neon-rgb), 0.08), rgba(var(--neon-rgb), 0.02));
  padding: calc(12px * var(--tv-scale)) calc(24px * var(--tv-scale)) calc(24px * var(--tv-scale));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sorteio-screen .flip-face::before {
  content: '';
  position: absolute; top: calc(16px * var(--tv-scale)); right: calc(16px * var(--tv-scale)); width: calc(30px * var(--tv-scale)); height: calc(30px * var(--tv-scale));
  border-top: calc(1px * var(--tv-scale)) solid var(--neon); border-right: calc(1px * var(--tv-scale)) solid var(--neon);
  opacity: 0.5;
}
.sorteio-screen .flip-face::after {
  content: '';
  position: absolute; bottom: calc(16px * var(--tv-scale)); left: calc(16px * var(--tv-scale)); width: calc(30px * var(--tv-scale)); height: calc(30px * var(--tv-scale));
  border-bottom: calc(1px * var(--tv-scale)) solid var(--neon); border-left: calc(1px * var(--tv-scale)) solid var(--neon);
  opacity: 0.5;
}

.sorteio-screen .flip-front {
  align-items: center; justify-content: center;
  background-image:
    linear-gradient(160deg, rgba(var(--neon-rgb), 0.08), rgba(var(--neon-rgb), 0.02)),
    repeating-linear-gradient(45deg, transparent 0, transparent 8px, rgba(var(--neon-rgb), 0.04) 8px, rgba(var(--neon-rgb), 0.04) 9px);
}
.sorteio-screen .flip-front .logo-stack {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: calc(3px * var(--tv-scale)); width: calc(36px * var(--tv-scale)); height: calc(36px * var(--tv-scale));
  margin-bottom: calc(20px * var(--tv-scale));
}
.sorteio-screen .flip-front .logo-stack i { background: #fff; opacity: 0.5; }
.sorteio-screen .flip-front .logo-stack i:nth-child(5) { background: var(--neon); opacity: 1; box-shadow: 0 0 8px var(--neon); }
.sorteio-screen .flip-front .q {
  font-family: var(--font-display);
  font-size: calc(80px * var(--tv-scale)); line-height: 0.8;
  color: var(--neon);
  text-shadow: 0 0 24px rgba(var(--neon-rgb), 0.8);
  font-weight: 700;
}
.sorteio-screen .flip-front .w {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.32);
  margin-top: auto;
}

.sorteio-screen .flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, rgba(var(--neon-rgb), 0.18), rgba(var(--neon-rgb), 0.08));
  border-color: var(--neon);
  box-shadow: inset 0 0 40px rgba(var(--neon-rgb), 0.15), 0 0 30px rgba(var(--neon-rgb), 0.3);
}
.sorteio-screen .flip-back .station-type {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--neon);
  margin-bottom: calc(6px * var(--tv-scale));
}
/* The station name is what the athlete looks for; it was set at the same 30px as
   its own category label above it, so nothing led. */
.sorteio-screen .flip-back .station-name {
  font-family: var(--font-display);
  font-size: calc(46px * var(--tv-scale)); line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 600;
  color: #fff;
  margin-bottom: calc(12px * var(--tv-scale));
}
.sorteio-screen .flip-back .divider {
  height: calc(1px * var(--tv-scale));
  background: linear-gradient(to right, transparent, var(--neon), transparent);
  margin-bottom: calc(5px * var(--tv-scale));
}
.sorteio-screen .flip-back .athletes { display: flex; flex-direction: column; gap: calc(2px * var(--tv-scale)); flex-grow: 1; justify-content: flex-start; }
.sorteio-screen .flip-back .ath {
  display: flex; align-items: center; gap: calc(12px * var(--tv-scale));
  font-family: var(--font-display);
  font-size: calc(40px * var(--tv-scale));
  letter-spacing: 0.02em;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  min-width: 0;
}
.sorteio-screen .flip-back .ath .ath-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Plain numerals, not boxed chips: at this size the box fought the name for
   attention and the roster read as a form rather than a list. */
.sorteio-screen .flip-back .ath .num {
  font-family: var(--font-display);
  font-size: calc(34px * var(--tv-scale)); color: var(--neon);
  min-width: calc(30px * var(--tv-scale)); flex-shrink: 0;
  font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Countdown card — sits in the 8th (empty) grid slot during sorteio.
   Visually matches .flip-back (same border/glow/gradient) but is static. */
/* Countdown — compact pill in the header (out of the grid so it can't invade the
   footer). Keeps the alert-pulse animation. */
.sorteio-screen .sorteio-countdown {
  display: inline-flex; align-items: center; gap: calc(20px * var(--tv-scale));
  padding: calc(8px * var(--tv-scale)) calc(28px * var(--tv-scale));
  border-radius: calc(12px * var(--tv-scale));
  border: 1.5px solid var(--neon);
  background: linear-gradient(160deg, rgba(var(--neon-rgb), 0.18), rgba(var(--neon-rgb), 0.06));
  box-shadow: 0 0 26px rgba(var(--neon-rgb), 0.3);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sorteio-screen .sorteio-countdown .sc-label {
  font-family: var(--font-display);
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.sorteio-screen .sorteio-countdown .sc-timer {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(64px * var(--tv-scale));
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--neon);
  text-shadow: 0 0 24px rgba(var(--neon-rgb), 0.8);
  font-variant-numeric: tabular-nums;
}
/* Alert state — last 3 seconds. Shifts colour to red and pulses. */
.sorteio-screen .sorteio-countdown.is-alert {
  --neon: #ff3b30;
  --neon-rgb: 255, 59, 48;
  border-color: #ff3b30;
  box-shadow: 0 0 40px rgba(255, 59, 48, 0.5);
  animation: sorteio-countdown-pulse 600ms ease-in-out infinite;
}
@keyframes sorteio-countdown-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* ════════════════════════════════════════════════════════════════════════════
   PREVIEW EDITORIAL SCREEN
   Cinematic pre-class layout: hero title, coach card, drill pills, leaderboard
   Fonts: Anton (display), Archivo Narrow (labels), JetBrains Mono (stats), Inter (body)
   ════════════════════════════════════════════════════════════════════════════ */

.pv {
  --pv-bg: #050507;
  --pv-ink: #f2f4f0;
  --pv-ink-dim: rgba(242,244,240,0.62);
  --pv-ink-faint: rgba(242,244,240,0.38);
  --pv-rule: rgba(242,244,240,0.10);
  --pv-rule-strong: rgba(242,244,240,0.22);
  --pv-green: #3dff8b;
  --pv-blue: #5aa8ff;

  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(61,255,139,0.06), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(90,168,255,0.04), transparent 60%),
    var(--pv-bg);
  color: var(--pv-ink);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr calc(420px * var(--tv-scale));
  grid-template-rows: 1fr auto;
}

.pv::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: calc(80px * var(--tv-scale)) calc(80px * var(--tv-scale));
  pointer-events: none;
  z-index: 0;
}

.pv > * { position: relative; z-index: 1; }

.pv-hero {
  padding: calc(32px * var(--tv-scale)) calc(40px * var(--tv-scale));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pv-meta {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pv-ink-faint);
}

.pv-title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  line-height: 0.88;
  margin: 0;
}

.pv-title-white {
  font-size: calc(110px * var(--tv-scale));
  color: var(--pv-ink);
  display: block;
}

.pv-title-green {
  font-size: calc(130px * var(--tv-scale));
  color: var(--pv-green);
  display: block;
  text-shadow: 0 0 30px rgba(61,255,139,0.55), 0 0 6px rgba(61,255,139,0.8);
}

.pv-stats-row {
  display: flex;
  align-items: flex-end;
  gap: calc(32px * var(--tv-scale));
}

.pv-countdown-block {}

.pv-countdown-label {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pv-ink-faint);
  margin-bottom: calc(4px * var(--tv-scale));
}

.pv-countdown {
  font-family: 'JetBrains Mono', monospace;
  font-size: calc(80px * var(--tv-scale));
  font-weight: 600;
  color: var(--pv-green);
  line-height: 1;
  text-shadow: 0 0 30px rgba(61,255,139,0.55), 0 0 6px rgba(61,255,139,0.8);
}

.pv-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pv-stat-value {
  font-family: 'Inter', sans-serif;
  font-size: calc(48px * var(--tv-scale));
  font-weight: 700;
  color: var(--pv-ink);
  line-height: 1;
}

.pv-stat-value sub {
  font-size: 0.5em;
  color: var(--pv-ink-dim);
  font-weight: 400;
}

.pv-stat-label {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pv-ink-faint);
}

.pv-coach {
  padding: calc(32px * var(--tv-scale)) calc(32px * var(--tv-scale));
  border-left: 1px solid var(--pv-rule);
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--tv-scale));
}

.pv-coach-label {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pv-ink-faint);
}

.pv-coach-avatar {
  width: calc(120px * var(--tv-scale));
  height: calc(120px * var(--tv-scale));
  background: var(--pv-green);
  border-radius: calc(12px * var(--tv-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Anton', sans-serif;
  font-size: calc(48px * var(--tv-scale));
  color: #000;
}

.pv-coach-name {
  font-family: 'Anton', sans-serif;
  font-size: calc(32px * var(--tv-scale));
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.pv-coach-spec {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pv-ink-dim);
}

.pv-coach-quote {
  margin-top: auto;
  font-family: 'Inter', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-style: italic;
  color: var(--pv-ink-dim);
  line-height: 1.5;
  border-top: 1px solid var(--pv-rule);
  padding-top: calc(16px * var(--tv-scale));
}

.pv-drills {
  padding: calc(24px * var(--tv-scale)) calc(40px * var(--tv-scale));
  border-top: 1px solid var(--pv-rule);
}

.pv-drills-label {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pv-ink-faint);
  margin-bottom: calc(12px * var(--tv-scale));
}

.pv-drills-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8px * var(--tv-scale));
}

.pv-drill-pill {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: calc(8px * var(--tv-scale)) calc(16px * var(--tv-scale));
  border: 1px solid var(--pv-rule-strong);
  border-radius: calc(4px * var(--tv-scale));
  color: var(--pv-ink);
  background: transparent;
}

.pv-lb {
  padding: calc(24px * var(--tv-scale)) calc(32px * var(--tv-scale));
  border-top: 1px solid var(--pv-rule);
  border-left: 1px solid var(--pv-rule);
}

.pv-lb-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(16px * var(--tv-scale));
}

.pv-lb-label {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pv-ink-faint);
}

.pv-lb-link {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pv-ink-faint);
}

.pv-lb-list {
  display: flex;
  gap: calc(24px * var(--tv-scale));
}

.pv-lb-entry {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--tv-scale));
}

.pv-lb-rank {
  font-family: 'Inter', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  color: var(--pv-ink);
  min-width: calc(28px * var(--tv-scale));
}

.pv-lb-badge {
  width: calc(28px * var(--tv-scale));
  height: calc(28px * var(--tv-scale));
  border-radius: 50%;
  border: 2px solid var(--pv-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Archivo Narrow', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  color: var(--pv-blue);
  text-transform: uppercase;
}

.pv-lb-info {
  display: flex;
  flex-direction: column;
}

.pv-lb-name {
  font-family: 'Inter', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  color: var(--pv-ink);
  text-transform: uppercase;
}

.pv-lb-detail {
  font-family: 'Archivo Narrow', sans-serif;
  font-size: calc(30px * var(--tv-scale));
  color: var(--pv-ink-faint);
}

@keyframes pvPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.15); }
}

.pv-live-dot {
  display: inline-block;
  width: calc(10px * var(--tv-scale));
  height: calc(10px * var(--tv-scale));
  border-radius: 50%;
  background: var(--pv-green);
  box-shadow: 0 0 14px var(--pv-green), 0 0 24px rgba(61,255,139,0.5);
  animation: pvPulse 1.6s ease-in-out infinite;
  margin-right: calc(8px * var(--tv-scale));
  vertical-align: middle;
}

/* ────────────────────────────────────────────────────────────────────────────
   ANIMATIONS
   ────────────────────────────────────────────────────────────────────────────── */

@keyframes glowBreathe {
  0%, 100% {
    text-shadow: 0 0 10px var(--glow);
  }
  50% {
    text-shadow: 0 0 20px var(--glow), 0 0 30px rgba(var(--glow-rgb), 0.5);
  }
}

@keyframes curveDraw {
  0% {
    opacity: 0;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  100% {
    opacity: 1;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
  }
}

@keyframes labelFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes barScaleIn {
  0% {
    opacity: 0;
    height: 0;
  }
  100% {
    opacity: 1;
    height: 100%;
  }
}

@keyframes slideInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cornerPulse {
  0%, 100% {
    opacity: 0.2;
    box-shadow: 0 0 10px rgba(var(--glow-rgb), 0.2);
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 20px rgba(var(--glow-rgb), 0.4);
  }
}

/* ═══ PHASE 1: CINEMATIC ANIMATION ENHANCEMENTS ═══════════════════════════
   Apr 30, 2026: Retro-Futurism + Neon Glow
   - slideInFromBottom: Staggered cascade for leaderboard entries
   - glowPulse: Neon breathing effect on energy values
   - Enhanced scanlines: More visible retro-CRT texture (5% → 8% opacity)
*/

@keyframes slideInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glowPulse {
  0%, 100% {
    text-shadow: 0 0 8px rgba(var(--neon-rgb), 0.6),
                 0 0 16px rgba(var(--neon-rgb), 0.3);
    filter: brightness(1);
  }
  50% {
    text-shadow: 0 0 16px rgba(var(--neon-rgb), 0.9),
                 0 0 32px rgba(var(--neon-rgb), 0.5);
    filter: brightness(1.1);
  }
}

@keyframes neonGlowBorder {
  0%, 100% {
    box-shadow:
      inset 0 0 20px rgba(var(--neon-rgb), 0.05),
      0 0 20px rgba(var(--neon-rgb), 0.2),
      0 0 40px rgba(var(--neon-rgb), 0.1);
    border-color: rgba(var(--neon-rgb), 0.4);
  }
  50% {
    box-shadow:
      inset 0 0 30px rgba(var(--neon-rgb), 0.1),
      0 0 30px rgba(var(--neon-rgb), 0.35),
      0 0 60px rgba(var(--neon-rgb), 0.2);
    border-color: rgba(var(--neon-rgb), 0.6);
  }
}

@keyframes radialExpand {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--neon-rgb), 0.5);
  }
  50% {
    box-shadow: 0 0 0 50px rgba(var(--neon-rgb), 0.2);
  }
  100% {
    box-shadow: 0 0 0 100px rgba(var(--neon-rgb), 0);
  }
}

/* ═══ REFACTORED ROUND ACTIVE SCREEN — MATCHING ACTUAL SCREENSHOT ═════ */

/* Drill buttons (pills, not large cards) */
.round-active-drills {
  display: flex;
  gap: calc(12px * var(--tv-scale));
  justify-content: center;
  flex-wrap: wrap;
}

.round-active-drill-btn {
  padding: calc(12px * var(--tv-scale)) calc(24px * var(--tv-scale));
  border-radius: calc(20px * var(--tv-scale));
  border: calc(2px * var(--tv-scale)) solid rgba(217, 70, 239, 0.3);
  background: rgba(217, 70, 239, 0.05);
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition: all 0.3s ease;
}

.round-active-drill-btn.active {
  color: #d946ef;
  border-color: #d946ef;
  background: rgba(217, 70, 239, 0.15);
  box-shadow: 0 0 calc(24px * var(--tv-scale)) rgba(217, 70, 239, 0.5);
}

/* Drill section (left/right) */
.ras-drill-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(16px * var(--tv-scale));
  flex: 1;
}

.ras-section-label {
  font-size: calc(32px * var(--tv-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: label-glow 2s ease-in-out infinite;
}

.ras-label-combate { color: #d946ef; }
.ras-label-forca { color: #22d3ee; }

.ras-phase-name {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.04em;
  min-height: calc(48px * var(--tv-scale));
  color: rgba(255, 255, 255, 0.9);
}

/* Timer */
.ras-timer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(12px * var(--tv-scale));
}

.ras-timer {
  font-family: monospace;
  font-size: calc(180px * var(--tv-scale));
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
  animation: neon-glow-timer var(--pulse-speed, 2.5s) ease-in-out infinite;
  letter-spacing: -0.02em;
}

.ras-round-meta {
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

/* Sidebar */
.ras-sidebar {
  grid-column: 2;
  grid-row: 1 / -1;
  z-index: 10;
  background: linear-gradient(180deg, rgba(217, 70, 239, 0.08) 0%, rgba(34, 211, 238, 0.06) 100%),
              rgba(0, 0, 0, 0.4);
  border-left: calc(2px * var(--tv-scale)) solid rgba(217, 70, 239, 0.4);
  padding: calc(16px * var(--tv-scale));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.ras-sidebar-header {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #d946ef;
  padding-bottom: calc(12px * var(--tv-scale));
  margin-bottom: calc(12px * var(--tv-scale));
  border-bottom: calc(1px * var(--tv-scale)) solid rgba(217, 70, 239, 0.3);
  text-transform: uppercase;
}

.ras-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--tv-scale));
  flex: 1;
  overflow-y: auto;
}

.ras-activity-item {
  display: flex;
  gap: calc(12px * var(--tv-scale));
  padding: calc(12px * var(--tv-scale)) calc(12px * var(--tv-scale));
  border-radius: calc(6px * var(--tv-scale));
  border: calc(1px * var(--tv-scale)) solid rgba(34, 211, 238, 0.25);
  background: rgba(34, 211, 238, 0.06);
  font-size: calc(30px * var(--tv-scale));
  transition: all 0.3s ease;
}

.ras-activity-item:hover {
  background: rgba(34, 211, 238, 0.12);
  border-color: rgba(34, 211, 238, 0.4);
}

.ras-activity-number {
  font-weight: 700;
  color: #d946ef;
  min-width: calc(24px * var(--tv-scale));
  text-align: center;
}

.ras-activity-main {
  display: flex;
  flex-direction: column;
  gap: calc(2px * var(--tv-scale));
  flex: 1;
  min-width: 0;
}

.ras-activity-code {
  font-weight: 700;
  color: #ffffff;
}

.ras-activity-type {
  font-size: calc(30px * var(--tv-scale));
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ras-activity-duration {
  font-size: calc(30px * var(--tv-scale));
  color: rgba(255, 255, 255, 0.5);
}

/* Footer */
.ras-footer {
  grid-column: 1 / 2;
  grid-row: 3;
  z-index: 10;
  padding: calc(16px * var(--tv-scale)) calc(40px * var(--tv-scale));
  display: flex;
  align-items: center;
  gap: calc(32px * var(--tv-scale));
  background: rgba(0, 0, 0, 0.3);
  border-top: calc(2px * var(--tv-scale)) solid rgba(217, 70, 239, 0.3);
}

.ras-nextup-label {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.ras-nextup-left {
  flex: 1;
  font-size: calc(30px * var(--tv-scale));
  font-weight: 600;
  color: #ffffff;
}

.ras-nextup-time {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.08em;
}

/* Collect overlay */
.collecting-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(calc(8px * var(--tv-scale)));
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(16px * var(--tv-scale));
  will-change: backdrop-filter;
  contain: layout style paint;
}

.collecting-text {
  font-size: calc(64px * var(--tv-scale));
  font-weight: 700;
  color: #d946ef;
  letter-spacing: 0.18em;
  text-shadow: 0 0 calc(30px * var(--tv-scale)) rgba(217, 70, 239, 0.6);
  animation: neon-glow-timer var(--pulse-speed, 2.5s) ease-in-out infinite;
}

.collecting-sub {
  font-size: calc(30px * var(--tv-scale));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.collecting-dots::after {
  content: '...';
  display: inline-block;
  width: calc(40px * var(--tv-scale));
  text-align: left;
  animation: collecting-ellipsis 1.4s steps(4, end) infinite;
}

@keyframes collecting-ellipsis {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%, 100% { content: '...'; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RAS v2 — Fiel ao TV-RoundActive-Reference.html
   Spec: vault/TV-RoundActive-Spec.md
   All classes prefixed ras2- to avoid collision with old CSS

   Removed 2026-08-13 (#257): 62 dead `.ras2-*` rules and 4 keyframes they alone
   used (arrowJump, sweep, spin, bigEq). RoundActiveScreen.tsx applies exactly ONE
   ras2 class — `ras2-screen` — and nothing builds them dynamically, so every rule
   needing `.ras2-<other>` to match could never fire. What survives is that one
   rule plus the 10 keyframes still named by a live `animation:`.
═══════════════════════════════════════════════════════════════════════════ */

/* ════ DESIGN TOKENS ════ */
.ras2-screen {
  --bg: #0a0710;
  --ink: #ffffff;
  --ink-dim: rgba(255,255,255,0.82);
  --ink-faint: rgba(255,255,255,0.55);
  --rule: rgba(255,255,255,0.14);
  --neon: #d946ef;
  --neon-2: #a855f7;
  --neon-deep: #7e22ce;
  --cyan: #22d3ee;
  --cyan-deep: #0891b2;
  --hot: #f43f5e;
  --warm: #f59e0b;
  --green: #1db954;
  --neon-rgb: 217,70,239;
  --cyan-rgb: 34,211,238;
  --hot-rgb: 244,63,94;
  --warm-rgb: 245,158,11;
  --green-rgb: 29,185,84;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Archivo', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
}

/* ════ KEYFRAMES ════ */
@keyframes ras2-bpmPulse {
  0%,100% { opacity: 0.4; transform: scale(0.95); }
  50%     { opacity: 0.95; transform: scale(1.05); }
}
@keyframes ras2-blink {
  0%,49%  { opacity: 1; }
  50%,100%{ opacity: 0; }
}
@keyframes ras2-beamPulse {
  0%,100% { opacity: 0.2; }
  50%     { opacity: 0.85; }
}
@keyframes ras2-rise {
  0%   { transform: translateY(1188px) translateX(var(--dx,0)) scale(0.4); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-1296px) translateX(var(--dx,0)) scale(1.4); opacity: 0; }
}
@keyframes ras2-spotlight {
  0%   { left: -192px; top: 40%; width: 648px; height: 648px; opacity: 0.6; }
  20%  { left: 480px;  top: 25%; width: 756px; height: 756px; opacity: 0.8; }
  40%  { left: 1056px;  top: 55%; width: 594px; height: 594px; opacity: 0.7; }
  60%  { left: 1536px;  top: 30%; width: 702px; height: 702px; opacity: 0.8; }
  80%  { left: 864px;  top: 60%; width: 648px; height: 648px; opacity: 0.6; }
  100% { left: 2112px; top: 40%; width: 648px; height: 648px; opacity: 0.6; }
}
@keyframes ras2-drillSlam {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 30px rgba(var(--energy-glow),0.7)); }
  50%     { transform: scale(1.04); filter: drop-shadow(0 0 60px rgba(var(--energy-glow),0.9)); }
}
@keyframes ras2-drillSlamCyan {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 30px rgba(var(--energy-glow),0.7)); }
  50%     { transform: scale(1.04); filter: drop-shadow(0 0 60px rgba(var(--energy-glow),0.9)); }
}
@keyframes ras2-plusBeat {
  0%,100% { transform: rotate(0deg) scale(1); }
  50%     { transform: rotate(45deg) scale(1.1); }
}


@keyframes ras2-timerBlink {
  0%,49%  { color: var(--neon); }
  50%,100%{ color: rgba(217,70,239,0.15); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIVE CLASS TV — valores copiados exactamente do HTML original
   Apenas: prefix lct-*, position fixed→absolute, height 100vh→100%
═══════════════════════════════════════════════════════════════════════════ */

/* ════ ATMOSPHERIC (absolute, scoped to .ras2-screen) ════ */
.lct-bg-atmos {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 20% 50%, rgba(var(--energy-glow),0.14) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 75% 50%, rgba(var(--energy-glow),0.10) 0%, transparent 55%),
    var(--bg);
}
.lct-energy-pulse {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 50% 50% at 30% 50%, rgba(var(--energy-glow),0.15) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 70% 50%, rgba(var(--energy-glow),0.10) 0%, transparent 55%);
  animation: ras2-bpmPulse var(--pulse-speed, 0.46s) ease-in-out infinite;
}
.lct-beams { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lct-beam { position: absolute; top: -15%; width: 6px; height: 130%; opacity: 0.2; filter: blur(2px); }
.lct-beam.b1 { left: 18%;  background: linear-gradient(180deg, transparent, var(--energy-color, var(--neon)), transparent); transform: rotate(-8deg);  animation: ras2-beamPulse 1.4s ease-in-out infinite; }
.lct-beam.b2 { left: 38%;  background: linear-gradient(180deg, transparent, var(--energy-color, var(--neon)), transparent); transform: rotate(12deg);  animation: ras2-beamPulse 1.8s ease-in-out infinite 0.3s; }
.lct-beam.b3 { left: 62%;  background: linear-gradient(180deg, transparent, var(--energy-color, var(--cyan)), transparent); transform: rotate(-4deg);  animation: ras2-beamPulse 2.0s ease-in-out infinite 0.7s; }
.lct-beam.b4 { left: 82%;  background: linear-gradient(180deg, transparent, var(--energy-color, var(--cyan)), transparent); transform: rotate(6deg);   animation: ras2-beamPulse 1.6s ease-in-out infinite 1.1s; }
/* Single radial-gradient glow overlay — replaces the per-particle box-shadow
   stack. Was: 36 particles × 2 box-shadow layers = ~72 GPU compositing layers
   continuously animating. Now: 1 background layer; particles render as plain
   circles. Visually similar at TV viewing distance (5m+). */
.lct-particle-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 30% 100%, rgba(var(--energy-glow), 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 70% 100%, rgba(var(--energy-glow), 0.12) 0%, transparent 50%);
  mix-blend-mode: screen;
}
.lct-particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lct-particle { position: absolute; bottom: 0; border-radius: 50%; animation: ras2-rise linear infinite; background: var(--energy-color, var(--neon)); }
.lct-particle.m { background: var(--energy-color, var(--neon)); }
.lct-particle.cyan { background: var(--energy-color, var(--cyan)); }
.lct-global-sweep {
  position: absolute; z-index: 2; pointer-events: none;
  mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(var(--energy-glow),0.08) 30%, rgba(var(--energy-glow),0.05) 60%, rgba(var(--energy-glow),0.03) 80%, transparent 100%);
  filter: blur(28px);
  animation: ras2-spotlight 7s ease-in-out infinite;
}

/* ════ LAYOUT ════ */
.lct-app {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: minmax(0,1fr) calc(390px * var(--tv-scale));
  height: 100%;
  /* Frame-safe inset: keep foreground (header/stages/sidebar/footer) inside the TV
     border. The bg layers (.lct-beams etc.) are siblings behind this, so they still
     fill to the edges — only the content is inset. */
  padding: calc(40px * var(--tv-scale));
}
.lct-main {
  display: grid;
  /* Two rows since the round header was removed: the drill stage takes every
     pixel that is left, the footer sizes to its content. With the old
     `auto 1fr auto` the elastic row fell to the FOOTER once there were only two
     children — 226px of dead space under the cards while the drills stayed
     squeezed at 424px. */
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

/* Removed 2026-07-31 (founder): the round header and its pill —
   `.lct-main-header`, `.lct-pill`, `.lct-live`, `.lct-phase-pill`. The markup went
   with it, so these are orphans of that edit rather than pre-existing dead code. */

/* ════ PHASE CHANGE — full-screen takeover ════
   Rebuilt 2026-07-31. The old version was a centred strip printing a hardcoded
   "FASE 2 / DESCANSOS LONGOS"; the subtitle described nothing the system knows,
   so it is gone. Everything here is fed by real data (phaseNum, roundNum,
   bodTotalRounds, the rotation's startRound/endRound) — see the component. */
.ptb {
  position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 62px 68px 54px; box-sizing: border-box;
  background:
    radial-gradient(ellipse 60% 50% at 22% 34%, rgba(var(--neon-rgb, 34,211,238), .10), transparent 66%),
    #05070a;
  color: #f4f7f9;
  font-family: var(--font-display), sans-serif;
  animation: ptb-fade-in 0.4s ease-out;
}
.ptb-watermark {
  position: absolute; top: 50%; left: 50%;
  width: 760px; height: 760px; transform: translate(-50%, -50%);
  background: var(--ptb-accent, var(--cyan)); opacity: .05; pointer-events: none;
  -webkit-mask: url(/brand/strikex-mark.png) center/contain no-repeat;
  mask: url(/brand/strikex-mark.png) center/contain no-repeat;
}

/* ── countdown ── */
.ptb-top { position: relative; z-index: 1; }
.ptb-count { display: flex; align-items: baseline; gap: 24px; }
.ptb-count-lbl {
  font-family: var(--font-mono, monospace); font-size: 30px;
  letter-spacing: .32em; text-transform: uppercase; color: #78838e;
}
.ptb-count-val {
  font-weight: 700; font-size: 104px; line-height: .9;
  font-variant-numeric: tabular-nums; color: #fff;
}
/* Same language as the round timer bar: the fill runs accent → hot across its
   length, so the bar reads as heat building rather than a block sliding. */
.ptb-bar {
  margin-top: 18px; height: 7px; border-radius: 999px;
  background: rgba(255,255,255,.10); overflow: hidden;
}
.ptb-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg,
    var(--ptb-accent, var(--cyan)),
    var(--ptb-accent, var(--cyan)) 40%,
    var(--hot, #f43f5e));
  transition: width 1s linear;
}

/* ── hero ── */
.ptb-hero {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  animation: ptb-scale-in 0.5s cubic-bezier(.2,.8,.2,1);
}
.ptb-eyebrow {
  font-family: var(--font-mono, monospace); font-size: 34px;
  letter-spacing: .36em; text-transform: uppercase; color: var(--ptb-accent, var(--cyan));
}
/* Signage: 200px ≈ 125mm cap height on a 75" panel — this is the one thing the
   room must read from anywhere. */
.ptb-phase {
  margin-top: 14px;
  font-weight: 700; font-size: 200px; line-height: .92;
  letter-spacing: .01em; text-transform: uppercase; color: #fff;
}

/* ── phase progress ── */
.ptb-foot { position: relative; z-index: 1; }
.ptb-segs { display: flex; gap: 8px; }
.ptb-seg {
  flex: 1; height: 12px; border-radius: 999px;
  background: rgba(255,255,255,.10);
}
.ptb-seg.done { background: rgba(255,255,255,.34); }
.ptb-seg.now { background: var(--ptb-accent, var(--cyan)); }
.ptb-legend { display: flex; gap: 8px; margin-top: 16px; }
.ptb-leg {
  flex: 1;
  font-family: var(--font-mono, monospace); font-size: 26px;
  letter-spacing: .22em; text-transform: uppercase; color: #78838e;
}
.ptb-leg.now { color: var(--ptb-accent, var(--cyan)); }

@keyframes ptb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ptb-scale-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

/* ════ CORNER TIMER ════ */
.corner-timer {
  position: fixed; top: calc(32px * var(--tv-scale));
  z-index: 60; pointer-events: none;
  padding: calc(12px * var(--tv-scale)) calc(18px * var(--tv-scale));
  background: rgba(0,0,0,0.72);
  border: calc(1px * var(--tv-scale)) solid rgba(255,255,255,0.12);
  border-radius: calc(12px * var(--tv-scale));
  font-family: var(--font-display);
  text-align: right;
  backdrop-filter: blur(calc(8px * var(--tv-scale)));
  transform: translateZ(0);
  contain: layout style paint;
  will-change: backdrop-filter;
}
.corner-timer[data-position="top-right"] { right: calc(32px * var(--tv-scale)); }
.corner-timer[data-position="top-left"]  { left: calc(32px * var(--tv-scale)); right: auto; text-align: left; }
.corner-timer-time {
  font-size: calc(56px * var(--tv-scale)); font-weight: 700; line-height: 1;
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 0 calc(18px * var(--tv-scale)) rgba(34,211,238,0.5);
}
.corner-timer-next {
  margin-top: calc(6px * var(--tv-scale));
  font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.24em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}

/* ════ PODIUM N=1 / N=2 layouts ════ */
.podium-screen.podium-n1 .pod-podium {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.podium-screen.podium-n1 .pod-slot { max-width: calc(420px * var(--tv-scale)); }
.podium-screen.podium-n2 .pod-podium {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}
/* `.lct-spacer` removed with the header it padded (zero callers). */

/* ════ DUAL STAGE ════ */
.lct-dual {
  display: grid;
  /* THREE equal columns on screen. The combat side is one grid cell that splits
     internally into two (.lct-combat-split, 1fr 1fr), so it must be 2fr against
     Força's 1fr for all three to come out the same width. The old 1.5fr made the
     two combat panels narrower than Força — same content, less room. */
  grid-template-columns: minmax(0,2fr) calc(2px * var(--tv-scale)) minmax(0,1fr);
  overflow: hidden;
  /* The columns share ONE top edge and the group floats in the middle. Centring
     each column independently (the old `safe center` on .lct-stage) made every
     column start at its own height; top-aligning them pinned the block to the
     ceiling with a void underneath. Centring the ROW and starting the ITEMS gives
     both — and `safe` rides the block up to the top when the drills outgrow the
     space instead of clipping it at both ends. */
  align-content: safe center;
  align-items: start;
}
/* Non-combat round: a single centred stage. The separator column and the combat
   cell are not rendered at all, so the template collapses to one track. */
.lct-dual.solo {
  grid-template-columns: minmax(0,1fr);
  justify-items: center;
}
/* Solo has the whole canvas instead of a third of it. 120px ≈ 75mm cap height on
   the 75" panel — the split columns run 66px (≈41mm), just over the 40mm floor. */
.lct-stage.force.solo { text-align: center; width: 100%; }
.lct-stage.force.solo .lct-drill { font-size: calc(120px * var(--tv-scale)); }
.lct-stage.force.solo .lct-force-move { font-size: calc(120px * var(--tv-scale)); }
.lct-divider {
  background: linear-gradient(180deg, transparent 0%, var(--rule) 30%, var(--rule) 70%, transparent 100%);
}
/* Content starts at the stage's top; .lct-dual centres the row as a block, so the
   columns share one top edge without the group hugging the ceiling. */
.lct-stage {
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: calc(14px * var(--tv-scale));
  padding: calc(16px * var(--tv-scale)) calc(20px * var(--tv-scale)); overflow: hidden;
}

/* Eyebrow */
.lct-eyebrow {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--tv-scale));
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: calc(30px * var(--tv-scale));
  letter-spacing: 0.30em;
  text-transform: uppercase;
  width: 100%;
  justify-content: center;
}
.lct-stage.combat .lct-eyebrow { color: var(--energy-color, var(--neon)); text-shadow: 0 0 calc(12px * var(--tv-scale)) rgba(var(--energy-glow),0.6); }
.lct-stage.force  .lct-eyebrow { color: var(--energy-color, var(--cyan)); text-shadow: 0 0 calc(12px * var(--tv-scale)) rgba(var(--energy-glow),0.6); }
.lct-eyebrow .lct-dot { width: calc(8px * var(--tv-scale)); height: calc(8px * var(--tv-scale)); border-radius: 50%; flex-shrink: 0; }
.lct-stage.combat .lct-eyebrow .lct-dot { background: var(--energy-color, var(--neon)); box-shadow: 0 0 calc(8px * var(--tv-scale)) var(--energy-color, var(--neon)); animation: ras2-blink 1s steps(2) infinite; }
.lct-stage.force  .lct-eyebrow .lct-dot { background: var(--energy-color, var(--cyan)); box-shadow: 0 0 calc(8px * var(--tv-scale)) var(--energy-color, var(--cyan)); animation: ras2-blink 1s steps(2) infinite 0.5s; }
.lct-eyebrow-dot { width: calc(8px * var(--tv-scale)); height: calc(8px * var(--tv-scale)); border-radius: 50%; flex-shrink: 0; }
.lct-eyebrow-dot.combat { background: var(--neon); box-shadow: 0 0 calc(8px * var(--tv-scale)) var(--neon); animation: ras2-blink 1s steps(2) infinite; }
.lct-eyebrow-dot.force  { background: var(--cyan); box-shadow: 0 0 calc(8px * var(--tv-scale)) var(--cyan); animation: ras2-blink 1s steps(2) infinite 0.5s; }
/* Drill name */
.lct-drill {
  display: flex; align-items: baseline; gap: calc(8px * var(--tv-scale));
  line-height: 0.92;
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(80px * var(--tv-scale));
  text-transform: uppercase; text-align: center;
  flex-wrap: wrap; justify-content: center;
}
.lct-step { display: inline-block; transition: opacity 600ms cubic-bezier(.4,0,.2,1), transform 600ms cubic-bezier(.4,0,.2,1); }
.lct-step.faded { opacity: 0.18; transform: scale(0.78); }
.lct-step.active.combat-tx {
  background: linear-gradient(180deg, #ffffff 30%, var(--energy-color, var(--neon)) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: ras2-drillSlam var(--pulse-speed, 0.46s) ease-in-out infinite;
}
.lct-step.active.force-tx {
  background: linear-gradient(180deg, #ffffff 30%, var(--energy-color, var(--cyan)) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: ras2-drillSlamCyan var(--pulse-speed, 0.46s) ease-in-out infinite;
}

/* Force-station interval circuit — per-segment countdown (work → movement label,
   rest → "Respira..."). Active segment + countdown derived from the round playhead
   (Principle A). Falls back to .lct-drill (static name + reps/sets) when no segments. */
.lct-force-interval { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6px * var(--tv-scale)); text-align: center; }
.lct-force-move {
  font-family: var(--font-display); font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase;
  font-size: calc(74px * var(--tv-scale)); line-height: 1;
  background: linear-gradient(180deg, #ffffff 30%, var(--energy-color, var(--cyan)) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.lct-force-move.rest {
  background: linear-gradient(180deg, #ffffff 30%, #f59e0b 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.lct-force-cd {
  font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  font-size: calc(88px * var(--tv-scale)); line-height: 1; color: #ffffff;
}
.lct-force-cd.rest { color: #f59e0b; }
.lct-force-pips { display: flex; gap: calc(6px * var(--tv-scale)); margin-top: calc(18px * var(--tv-scale)); }
.lct-force-pip { width: calc(44px * var(--tv-scale)); height: calc(7px * var(--tv-scale)); border-radius: 99px; background: rgba(255,255,255,.12); transition: background .15s, box-shadow .15s; }
.lct-force-pip.work { background: rgba(30,215,96,.18); }
.lct-force-pip.rest { background: rgba(245,158,11,.18); }
.lct-force-pip.active.work { background: var(--neon, #1ed760); box-shadow: 0 0 calc(10px * var(--tv-scale)) rgba(30,215,96,.6); }
.lct-force-pip.active.rest { background: #f59e0b; box-shadow: 0 0 calc(10px * var(--tv-scale)) rgba(245,158,11,.6); }

/* Vertical-blink combo — authored drill segments (work→strikes, rest→dash).
   The active line is derived from the round playhead (Principle A). */
.lct-combo { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4px * var(--tv-scale)); }
.lct-combo-ln { display: flex; align-items: center; gap: calc(18px * var(--tv-scale)); line-height: 1.02; opacity: 0.3; transition: opacity .15s linear; }
.lct-combo-dot { width: calc(14px * var(--tv-scale)); height: calc(14px * var(--tv-scale)); border-radius: 50%; background: #39414f; transition: background .15s, box-shadow .15s, transform .15s; flex-shrink: 0; }
.lct-combo-tx {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
  font-size: calc(70px * var(--tv-scale)); color: #5b6680;
}
@keyframes ras2-combo-flash {
  0%   { transform: scale(1.06); filter: drop-shadow(0 0 calc(22px * var(--tv-scale)) rgba(96,165,250,.85)); }
  100% { transform: scale(1.0);  filter: drop-shadow(0 0 calc(8px * var(--tv-scale)) rgba(96,165,250,.35)); }
}
.lct-combo-ln.now { opacity: 1; }
.lct-combo-ln.now .lct-combo-tx {
  background: linear-gradient(180deg, #ffffff 30%, var(--energy-color, var(--neon)) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: ras2-combo-flash .5s ease-out;
  transform-origin: left center;
}
.lct-combo-ln.now .lct-combo-dot { background: var(--energy-color, var(--cyan)); box-shadow: 0 0 calc(16px * var(--tv-scale)) var(--energy-color, var(--cyan)); transform: scale(1.35); }
.lct-combo-ln.rest .lct-combo-tx { color: #6b5b3a; }
.lct-combo-ln.rest.now .lct-combo-tx {
  background: linear-gradient(180deg, #ffffff 30%, #f59e0b 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.lct-combo-ln.rest.now .lct-combo-dot { background: #f59e0b; box-shadow: 0 0 calc(16px * var(--tv-scale)) #f59e0b; }

/* ════ Sub 5: Combat split — Muay Thai (cadenced) | Boxe (free-loop) ════
   .lct-stage.combat keeps its flex column; .lct-combat-split is a 2-col grid
   holding the two station panels. Each panel stacks eyebrow + combo. The two
   panels are half-width, so type sizes step down from the legacy full-width combo. */
.lct-combat-split {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: calc(6px * var(--tv-scale));
  width: 100%;
  align-items: stretch;
}
/* Separator between the two combat panels — the reference rules every column,
   not just the combat/força boundary the grid already draws. */
.lct-combat-split > .lct-panel + .lct-panel {
  border-left: calc(2px * var(--tv-scale)) solid var(--rule);
}
.lct-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: calc(8px * var(--tv-scale));
  padding: calc(4px * var(--tv-scale)) calc(8px * var(--tv-scale));
  min-width: 0; min-height: 0;
}
/* Panel eyebrows are smaller — two sit side-by-side in the combat column. */
.lct-panel .lct-eyebrow { font-size: calc(30px * var(--tv-scale)); letter-spacing: 0.22em; gap: calc(5px * var(--tv-scale)); }
/* Half-width combo: tighter gap, smaller type so 3–5 lines fit a column. */
.lct-panel .lct-combo { gap: calc(18px * var(--tv-scale)); }
.lct-panel .lct-combo-ln { gap: calc(12px * var(--tv-scale)); }
/* Larger, per the reference: at 48px the strikes were 30mm on a 75" panel at 8m,
   under the 40mm critical floor. 66px ≈ 41mm. */
.lct-panel .lct-combo-tx { font-size: calc(var(--drill-fs, 66px) * var(--tv-scale)); }
.lct-panel .lct-combo-dot { width: calc(10px * var(--tv-scale)); height: calc(10px * var(--tv-scale)); }
/* Both panels are now `.cadenced` and keep the legacy .now flash. The `.free`
   block that made Boxe a flat static prompt was removed 2026-08-01 when the
   founder asked for the same per-strike highlight at 500ms. */
.lct-plus {
  display: inline-block;
  font-size: calc(36px * var(--tv-scale));
  opacity: 0; transform: rotate(-90deg) scale(0.6);
  transition: all 600ms cubic-bezier(.4,0,.2,1);
  color: var(--energy-color, var(--neon)); text-shadow: 0 0 calc(20px * var(--tv-scale)) rgba(var(--energy-glow),0.8);
}
.lct-plus.show {
  opacity: 1; transform: rotate(0deg) scale(1);
  animation: ras2-plusBeat 0.92s ease-in-out infinite;
}

/* Phase cards */
.lct-phases { display: flex; align-items: center; justify-content: center; gap: calc(10px * var(--tv-scale)); }
.lct-phase {
  display: flex; align-items: baseline; gap: calc(6px * var(--tv-scale));
  padding: calc(8px * var(--tv-scale)) calc(14px * var(--tv-scale));
  border: calc(2px * var(--tv-scale)) solid var(--rule); border-radius: calc(8px * var(--tv-scale));
  font-family: var(--font-mono); font-weight: 700;
  font-size: calc(30px * var(--tv-scale)); transition: all 0.4s ease;
}
.lct-phase .lct-num, .lct-num {
  font-size: calc(30px * var(--tv-scale)); color: var(--energy-color, var(--neon));
  text-shadow: 0 0 calc(12px * var(--tv-scale)) rgba(var(--energy-glow),0.6);
  min-width: calc(40px * var(--tv-scale)); text-align: right;
}
.lct-phase.is-active {
  border-color: var(--energy-color, var(--neon)); background: rgba(var(--energy-glow),0.18);
  box-shadow: 0 0 calc(12px * var(--tv-scale)) rgba(var(--energy-glow),0.3);
}
.lct-phase.is-done { opacity: 0.4; }
.lct-phase-arrow {
  width: calc(16px * var(--tv-scale)); height: calc(2px * var(--tv-scale));
  background: linear-gradient(90deg, var(--rule), var(--energy-color, var(--neon)));
  border-radius: calc(2px * var(--tv-scale)); opacity: 0.4; transition: opacity 0.4s ease;
}
.lct-phase-arrow.lit { opacity: 1; }

/* Force stat */
.lct-drill-stat { display: flex; align-items: baseline; justify-content: center; gap: calc(12px * var(--tv-scale)); }
.lct-reps {
  font-family: var(--font-mono); font-weight: 700;
  font-size: calc(40px * var(--tv-scale)); color: var(--energy-color, var(--cyan));
  text-shadow: 0 0 calc(20px * var(--tv-scale)) rgba(var(--energy-glow),0.6); line-height: 1;
}
.lct-reps small { font-size: calc(30px * var(--tv-scale)); color: var(--ink-faint); display: block; margin-top: calc(2px * var(--tv-scale)); }
.lct-sets, .lct-mul {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(30px * var(--tv-scale)); color: var(--ink-dim);
}

/* ════ ROUND TIMER ════ */
.lct-round-timer {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: calc(20px * var(--tv-scale));
  padding: calc(10px * var(--tv-scale)) calc(18px * var(--tv-scale));
  border-top: calc(2px * var(--tv-scale)) solid var(--rule); border-bottom: calc(2px * var(--tv-scale)) solid var(--rule);
  background: rgba(0,0,0,0.35); flex-shrink: 0;
}
.lct-rt-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(38px * var(--tv-scale)); text-transform: uppercase;
  color: var(--ink-dim); white-space: nowrap;
}
.lct-rt-label b { color: var(--ink); }
.lct-rt-bar {
  height: calc(12px * var(--tv-scale)); border-radius: 999px;
  border: calc(2px * var(--tv-scale)) solid var(--rule); overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.lct-rt-bar i, .lct-rt-progress {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--energy-color, var(--neon-2)), var(--energy-color, var(--neon)), var(--hot));
  box-shadow: 0 0 calc(12px * var(--tv-scale)) rgba(var(--energy-glow),0.5);
  transition: width 1s linear;
}
/* The timer is the single most-read element on the floor and must not tie with
   anything. At 60px it measured 37mm cap height on a 75" panel at 8m — under the
   40mm critical floor, and smaller than the força exercise name beside it.
   140px ≈ 87mm: unambiguously dominant. */
.lct-rt-time {
  font-family: var(--font-mono); font-weight: 700;
  font-size: calc(140px * var(--tv-scale)); letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums; line-height: 1;
  color: var(--ink); white-space: nowrap;
  display: flex; align-items: baseline; gap: calc(4px * var(--tv-scale));
}
.lct-rt-time.critical {
  color: #ff2e2e;
  animation: rt-critical-pulse 0.6s ease-in-out infinite;
  text-shadow: 0 0 calc(16px * var(--tv-scale)) rgba(255,46,46,0.6);
}
.lct-rt-time .lct-colon, .lct-rt-colon {
  animation: ras2-timerBlink 1s steps(2) infinite; margin: 0 calc(2px * var(--tv-scale));
}
.lct-rt-time.critical .lct-colon {
  animation: rt-critical-pulse 0.6s ease-in-out infinite;
}
.lct-rt-min, .lct-rt-sec { font-variant-numeric: tabular-nums; }

@keyframes rt-critical-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ════ FOOTER NEXT-GRID ════ */
.lct-main-foot { display: flex; flex-direction: column; gap: 0; min-width: 0; }

/* One up-next line + the lockup, to the founder's reference. Was a 3-column grid
   of cards; the second card restated the same round and the Spotify card is gone. */
.lct-footer-grid {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: calc(6px * var(--tv-scale)); padding: calc(6px * var(--tv-scale)) calc(12px * var(--tv-scale)) calc(8px * var(--tv-scale));
  background: rgba(0,0,0,0.3);
  position: relative; z-index: 5;
  flex-shrink: 0;
  align-content: stretch;
  min-width: 0;
  width: 100%;
}
/* The up-next CARDS and the Spotify card were removed from NextUpGrid on
   2026-07-31 (founder: one line, plus the lockup). Their ~105 lines of CSS were
   deleted 2026-08-01 — no component renders .lct-next-card / .lct-spotify any
   more, and dead rules in this file have twice broken live screens by winning a
   specificity fight (.interval-screen !important, .timer-display). */


/* ════ SIDEBAR — 780px ════ */
/* h2: 44px, badge: 26px, sg-name: 30px, a-name: 30px, a-bpm: 26px (HTML exact) */
.lct-side {
  width: calc(390px * var(--tv-scale)); border-left: calc(2px * var(--tv-scale)) solid var(--rule);
  background: rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  /* Top gap so the first station header clears the ROUND x/50 frame badge
     without a big empty gap. */
  padding-top: calc(34px * var(--tv-scale));
  min-height: 0; overflow: hidden;
}
.lct-side-head { padding: calc(12px * var(--tv-scale)) calc(15px * var(--tv-scale)) calc(9px * var(--tv-scale)); border-bottom: calc(2px * var(--tv-scale)) solid var(--rule); flex-shrink: 0; }
.lct-side-head-top { display: flex; align-items: center; gap: calc(8px * var(--tv-scale)); margin-bottom: calc(8px * var(--tv-scale)); }
.lct-side-head-top h2, .lct-side-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(30px * var(--tv-scale)); text-transform: uppercase; letter-spacing: 0.06em;
}
.lct-side-badge, .badge {
  font-family: var(--font-mono); font-weight: 700;
  background: var(--neon); color: var(--ink);
  border-radius: calc(6px * var(--tv-scale)); padding: calc(2px * var(--tv-scale)) calc(10px * var(--tv-scale));
  box-shadow: 0 0 calc(8px * var(--tv-scale)) rgba(217,70,239,0.5);
  font-size: calc(30px * var(--tv-scale));
}
.lct-side-stats { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8px * var(--tv-scale)); margin-bottom: calc(6px * var(--tv-scale)); }
.lct-stat-block { display: flex; align-items: center; gap: calc(6px * var(--tv-scale)); }
.lct-stat-val {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(30px * var(--tv-scale)); color: var(--ink);
}
.lct-stat-val small { font-size: calc(30px * var(--tv-scale)); color: var(--ink-faint); font-family: var(--font-mono); }
.lct-heart {
  animation: ras2-bpmPulse var(--pulse-speed, 0.46s) ease-in-out infinite;
  color: var(--hot); filter: drop-shadow(0 0 calc(8px * var(--tv-scale)) var(--hot)); font-size: calc(30px * var(--tv-scale));
}
.lct-side-sub { font-family: var(--font-mono); font-size: calc(30px * var(--tv-scale)); display: flex; gap: calc(10px * var(--tv-scale)); flex-wrap: wrap; }
.lct-side-sub .s-combat { color: var(--neon); }
.lct-side-sub .s-force  { color: var(--cyan); }
.lct-side-sub .s-libre  { color: var(--warm); }

/* Station groups */
.lct-side-list {
  flex: 1; overflow: hidden; padding: calc(8px * var(--tv-scale));
  display: flex; flex-direction: column; gap: calc(6px * var(--tv-scale));
  min-height: 0;
}
.lct-station-group {
  border: calc(2px * var(--tv-scale)) solid var(--accent, var(--neon));
  border-radius: calc(8px * var(--tv-scale)); background: var(--accent-bg, rgba(217,70,239,0.06));
  box-shadow: 0 0 calc(10px * var(--tv-scale)) var(--accent-glow, rgba(217,70,239,0.15));
  overflow: hidden;
  flex-basis: auto; flex-shrink: 1; flex-grow: 1;
  min-height: calc(36px * var(--tv-scale)); /* header always visible */
  display: flex; flex-direction: column;
}
.lct-station-group[data-t="combat"], .lct-station-group.combat { --accent: var(--energy-color, var(--neon)); --accent-bg: rgba(var(--energy-glow),0.06); --accent-glow: rgba(var(--energy-glow),0.15); }
.lct-station-group[data-t="force"],  .lct-station-group.force  { --accent: var(--energy-color, var(--cyan)); --accent-bg: rgba(var(--energy-glow),0.06); --accent-glow: rgba(var(--energy-glow),0.15); }
.lct-station-group[data-t="libre"],  .lct-station-group.libre  { --accent: var(--warm); --accent-bg: rgba(245,158,11,0.06); --accent-glow: rgba(245,158,11,0.15); }
.lct-sg-head {
  display: flex; align-items: center; flex-shrink: 0;
  padding: calc(6px * var(--tv-scale)) calc(12px * var(--tv-scale));
  border-bottom: calc(1px * var(--tv-scale)) solid var(--accent, var(--neon)); gap: calc(6px * var(--tv-scale));
}
.lct-sg-list {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.lct-sg-head .lct-sg-ic, .lct-sg-ic {
  width: calc(8px * var(--tv-scale)); height: calc(8px * var(--tv-scale)); border-radius: 50%;
  background: var(--accent, var(--neon));
  box-shadow: 0 0 calc(6px * var(--tv-scale)) var(--accent, var(--neon)); flex-shrink: 0;
}
.lct-sg-head .lct-sg-name, .lct-sg-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(28px * var(--tv-scale)); text-transform: uppercase; letter-spacing: 0.06em; flex: 1;
}
.lct-sg-head .lct-sg-count, .lct-sg-count {
  font-family: var(--font-mono); font-weight: 700;
  font-size: calc(30px * var(--tv-scale)); color: var(--accent, var(--neon));
}
.lct-athlete-row {
  /* avatar | name | HR. The avatar column is `auto`, so a row with no photo and
     no initials (an empty name) collapses instead of leaving a hole. */
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; padding: calc(5px * var(--tv-scale)) calc(12px * var(--tv-scale));
  border-bottom: 1px solid rgba(255,255,255,0.06); gap: calc(10px * var(--tv-scale));
}
.lct-athlete-row:last-child { border-bottom: none; }
.lct-a-name, .lct-athlete-name {
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(26px * var(--tv-scale)); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  color: var(--ink-dim);
}
.lct-a-bpm, .lct-athlete-bpm {
  display: flex; align-items: center; gap: calc(4px * var(--tv-scale));
  font-family: var(--font-mono); font-weight: 700;
  font-size: calc(30px * var(--tv-scale)); white-space: nowrap;
}
.lct-a-bpm .lct-dot, .lct-bpm-dot {
  width: calc(6px * var(--tv-scale)); height: calc(6px * var(--tv-scale)); border-radius: 50%;
  background: var(--hot); box-shadow: 0 0 calc(6px * var(--tv-scale)) var(--hot);
  animation: ras2-bpmPulse var(--pulse-speed, 0.46s) ease-in-out infinite;
  display: inline-block;
}
.lct-a-bpm small, .lct-athlete-bpm small { font-size: calc(30px * var(--tv-scale)); color: var(--ink-faint); }

/* Flat athlete row (no sorteio groups) */
.lct-athlete-row--flat {
  padding: calc(8px * var(--tv-scale)) calc(14px * var(--tv-scale));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lct-athlete-row--flat:last-child { border-bottom: none; }

/* Remove NextUpBar padding reserve during round_active */
.tv-no-pad { padding-bottom: 0 !important; }

/* ─── Next Up Footer — fixed wrapper for sorteio/preview/podium screens ─── */
.next-up-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* Hide on small viewports (same breakpoint as session panel) */
@media (max-width: 900px) {
  .next-up-footer { display: none; }
}

/* PodiumScreen empty state — when round produced no scoring data. */
.pod-empty {
  position: absolute;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.5px;
}
.pod-empty-icon {
  font-size: calc(56px * var(--tv-scale, 1));
  opacity: 0.6;
  margin-bottom: 8px;
}
.pod-empty-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: calc(4px * var(--tv-scale, 1));
  color: #fff;
  opacity: 0.7;
}
.pod-empty-sub {
  font-size: calc(30px * var(--tv-scale, 1));
  margin-top: calc(4px * var(--tv-scale, 1));
  opacity: 0.6;
}


/* ════ ATHLETE AVATARS — sidebar + sorteio ════
   The podium/lobby/standby avatars predate these and keep their own rules; this
   is the same <Avatar> rendering into two new containers. ~40% of athletes have
   no synced photo, so the initials branch is a first-class state, not an error
   one: same circle, same ring, letters instead of a face. */
.lct-a-avatar, .sorteio-screen .ath-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  color: var(--energy-color, var(--neon));
  border: calc(2px * var(--tv-scale)) solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}
/* Eleven rows share the sidebar's height, so the face rides just under the name's
   cap height rather than setting the row height itself. */
.lct-a-avatar {
  width: calc(38px * var(--tv-scale)); height: calc(38px * var(--tv-scale));
  font-size: calc(16px * var(--tv-scale));
}
/* The sorteio is the roster moment — the face carries it, so it runs larger. */
.sorteio-screen .ath-avatar {
  width: calc(52px * var(--tv-scale)); height: calc(52px * var(--tv-scale));
  font-size: calc(22px * var(--tv-scale));
}
/* ════════════════════════════════════════════════════════════════════════════
   SparMaster kiosk — `/sparmaster` (fatia 1b, #615)

   StrikeX tactical tokens (canvas aprovado 2026-09-14): #0b0808 chão, #e3121e
   accents, Barlow Condensed 800 para números, Inter para corpo. Display-only,
   legível a 2 m em movimento (10-foot UI). Namespace `spk-` — não redefinir
   keyframes de tv.css.
   ════════════════════════════════════════════════════════════════════════════ */

.spk-root {
  position: fixed; inset: 0;
  background: #0b0808;
  color: #f5f3f0;
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
}

/* ── BoxingBar diagram ──────────────────────────────────────────────────────
   Os doze pads do aparelho, desenhados na geometria da barra (#663). O pad activo
   acende; o seguinte fica delineado.

   A afirmação anterior — «5 e 7 ausentes (D1)» — era FALSA sobre o aparelho, e esta
   era a quarta cópia dela no repo (#661).                                       */

/* O diagrama é um SVG com a geometria do aparelho, portada do canvas «SparMaster
   Sequências» do founder (#663): poste, braços, corpo hexagonal, e raios diferentes por
   pad — o 12 é maior, como na barra. Antes eram três filas de `div` arredondados: números
   certos, forma nenhuma. */
.spk-bar { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
/* NO ECRÃ DE ROUND LIMITA-SE POR ALTURA, e não por largura — é aí que partia. O SVG tem
   `viewBox 0 0 300 420`, logo pede sempre 1,4× a largura em altura: a 340px de largo são
   476px de alto, e a coluna da chamada passava a precisar de 988px num ecrã de 800. O
   relógio e a barra de progresso saíam pelo fundo e o `overflow:hidden` do `.spk-root`
   cortava-os em SILÊNCIO — sem scrollbar, sem erro. Só se via com câmara a funcionar, que
   é o caminho principal e o que eu não tinha visto.

   O TECTO SAIU no #665. Era `min(300px, 38vh)` — um número meu, que acertava nos três
   tamanhos que eu tinha medido e desperdiçava espaço em todos os outros. Agora o diagrama
   recebe a folga da grelha e enche-a: cabe por construção, em vez de por estimativa. */
.spk-bar-round { height: 100%; width: auto; max-width: 100%; margin: 0 auto; }
.spk-bar-post, .spk-bar-body { fill: #161010; stroke: rgba(245, 243, 240, 0.12); stroke-width: 2; }
.spk-bar-arm { stroke: rgba(245, 243, 240, 0.12); stroke-width: 6; stroke-linecap: round; }

.spk-pad {
  fill: rgba(245, 243, 240, 0.03);
  stroke: rgba(245, 243, 240, 0.18); stroke-width: 2;
  transition: fill 120ms, stroke 120ms;
}
.spk-pad.is-next { stroke: rgba(245, 243, 240, 0.5); stroke-width: 3; }
.spk-pad.is-active { fill: rgba(227, 18, 30, 0.85); stroke: #ff4f3b; stroke-width: 3; }
/* O ponto de luz é o que faz o pad ler como ILUMINADO e não apenas pintado. Vem do canvas. */
.spk-pad-glint { fill: #f6f5f1; opacity: 0.9; }
.spk-pad-num {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 800;
  fill: rgba(245, 243, 240, 0.35);
}
.spk-pad-num.is-next { fill: rgba(245, 243, 240, 0.7); }
.spk-pad-num.is-active { fill: #fff; }

/* ── Idle ─────────────────────────────────────────────────────────────────── */

.spk-idle {
  position: absolute; inset: 0;
  display: grid;
  /* O TÍTULO É `auto` E O DESENHO LEVA A FOLGA (#673). Antes era `1fr auto`: o título ficava
     centrado na folga e o desenho, que tem altura intrínseca fixa (viewBox 300×420 a 340 px
     de largura = 476 px), não encolhia por nada. Havia 12 px de margem num tablet de 800, e a
     linha do momento gasta 56 — medido, não estimado: a faixa do sorteio passava a acabar
     aos 856 px de uma caixa de 800 e saía do ecrã.

     É literalmente a lição do #665, do outro lado do kiosk: quem tem de encolher é o desenho,
     e para isso a linha dele tem de ser `minmax(0, 1fr)` — `1fr` sozinho é `minmax(auto, 1fr)`
     e esse mínimo `auto` volta a travar tudo. */
  grid-template-rows: auto minmax(0, 1fr);
  padding: 48px 64px;
}
.spk-idle-title {
  text-align: center;
}
.spk-idle-kicker {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  letter-spacing: 0.35em; font-size: 28px; color: #e3121e;
}
.spk-idle-name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 96px; line-height: 1; letter-spacing: 0.04em; margin-top: 8px;
}
/* Duas linhas: o desenho leva a folga, a faixa do sorteio fica com o que precisa. A faixa
   é `auto` de propósito — é ela que nunca pode ser cortada, porque é quem diz o nome. */
.spk-idle-bar {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center; align-items: center;
  min-height: 0;
}
/* Em Idle o desenho recebe a altura da linha, em vez de impor a sua (ver acima). */
.spk-bar-idle { height: 100%; width: auto; max-width: 340px; margin: 0 auto; }

/* O momento da aula (#673): uma faixa discreta, porque não é o assunto do ecrã — o assunto
   é a barra. Diz o que a sala está a fazer quando esta barra não está a ser usada.

   VIVE DENTRO DE `.spk-idle-title`, e isso não é arrumação. A primeira versão metia-o numa
   TERCEIRA linha da grelha, e o título — que tem `align-self: center` numa linha `1fr` —
   transbordava para cima dele: «AGORA · Pódio» saía impresso por cima de «BOXING BAR», com
   os 18 testes verdes. Um teste que pergunta ao DOM se o texto lá está nunca vê dois textos
   no mesmo sítio. Dentro do título, o momento é uma linha de texto a seguir a outra e não há
   sobreposição possível. */
.spk-idle-momento {
  display: flex; align-items: baseline; justify-content: center; gap: 16px;
  margin-top: 20px; font-family: 'Inter', sans-serif;
}
.spk-idle-momento-label {
  font-size: 16px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(245, 243, 240, 0.4);
}
.spk-idle-momento-name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 40px; letter-spacing: 0.02em; color: #f5f3f0;
}
.spk-idle-banner {
  display: flex; align-items: center; justify-content: center; gap: 32px;
  padding: 24px 32px; margin-top: 24px;
  border-top: 1px solid rgba(245, 243, 240, 0.12);
  font-family: 'Inter', sans-serif;
}
.spk-idle-banner.has-athlete { border-top-color: rgba(227, 18, 30, 0.5); }
.spk-idle-banner-label { font-size: 18px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,243,240,0.55); }
.spk-idle-banner-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 44px; }
.spk-idle-banner-fase { font-size: 22px; color: rgba(245,243,240,0.7); }
.spk-idle-wait { font-size: 22px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,243,240,0.4); }

/* ── Round ativo (canvas: câmara 55% · chamada 45%) ───────────────────────── */
/* O espelho com esqueleto entrou no #652 e substituiu o placeholder da 1b.     */

.spk-round {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 55fr 45fr;
  /* A LINHA TEM DE SER LIMITADA. Sem isto a linha implícita é `auto` e as colunas crescem
     com o conteúdo: o `.spk-round-call` passava a ser mais alto que o ecrã e o
     `overflow:hidden` do `.spk-root` engolia o relógio. `minmax(0, …)` e não `1fr` seco,
     porque o mínimo `auto` de um `1fr` impede a linha de encolher abaixo do conteúdo —
     que é exactamente o que se quer evitar aqui. */
  grid-template-rows: minmax(0, 1fr);
}
.spk-round-camera {
  position: relative;
  background: #050404;
  display: grid; place-items: center;
  border-right: 1px solid rgba(245, 243, 240, 0.08);
}

/* O espelho: vídeo em baixo, esqueleto por cima (#652).
   
   OS DOIS TÊM DE RECORTAR IGUAL, e é aqui que se ganha ou perde o critério 1. A coluna
   dos 55% não tem o formato da câmara (640×480): num tablet de 1280×800 são ~704×800,
   logo há sempre corte. O `<canvas>` tem o bitmap igualado ao vídeo pelo `drawSkeleton`,
   portanto o MESMO formato intrínseco — dando aos dois o mesmo `object-fit` e a mesma
   caixa, o browser recorta ambos da mesma maneira e o esqueleto assenta no corpo.
   Um canvas esticado a `width:100%` sobre um vídeo em `cover` desalinhava sempre.
   
   O ESPELHO DO VÍDEO É AQUI. O do canvas NÃO: esse está dentro do `drawSkeleton`, no
   contexto. Acrescentar `scaleX(-1)` ao canvas espelha-o duas vezes. */
.spk-mirror { position: absolute; inset: 0; overflow: hidden; }
.spk-mirror-video,
.spk-mirror-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.spk-mirror-video { transform: scaleX(-1); }
.spk-mirror-canvas { pointer-events: none; }
.spk-mirror-note {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: 'Inter', sans-serif; font-size: 13px;
  color: rgba(245, 243, 240, 0.5);
  background: rgba(5, 4, 4, 0.7);
  padding: 6px 12px;
}

/* Sem câmara: o diagrama ocupa os 55%, com a causa por baixo (critério 4). */
.spk-round-camera-fallback {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center;
  gap: 16px; padding: 24px;
}
.spk-round-camera-cause {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  font-family: 'Inter', sans-serif;
}
.spk-round-camera-cause strong {
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 16px;
  color: rgba(245, 243, 240, 0.65);
}
.spk-round-camera-cause span {
  font-size: 14px; color: rgba(245, 243, 240, 0.4); max-width: 46ch; line-height: 1.5;
}
.spk-round-call {
  position: relative;
  display: grid;
  /* A FOLGA VAI PARA O DIAGRAMA, não para o número (#665). Era `auto 1fr auto`, com o
     `1fr` na linha do número grande a absorver todo o espaço livre — o diagrama ficava
     numa linha `auto` e eu travei-o com um tecto adivinhado. Em ecrãs altos sobrava
     espaço que ninguém usava; o founder viu-o no kiosk: «o desenho ficou pequeno».
     Assim o diagrama recebe o que sobra DEPOIS de todos os outros, logo não pode
     empurrar ninguém — a garantia do #663 passa a ser estrutural em vez de um número. */
  /* `minmax(0, 1fr)` e não `1fr`: um `1fr` é `minmax(auto, 1fr)`, e esse mínimo `auto`
     impede a linha de encolher abaixo do conteúdo — o `height:100%` do SVG numa linha de
     altura indefinida resolve para o tamanho intrínseco (420) e a grelha CRESCE em vez de
     limitar. Medido: com `1fr` o relógio saía do ecrã nos quatro tamanhos testados. */
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 36px 48px 28px;
  gap: 16px;
}
.spk-round-hud {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Inter', sans-serif;
}
.spk-round-hud-fase {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 26px; letter-spacing: 0.12em;
}
.spk-round-hud-fase .spk-fase-num { color: #e3121e; }

/* #632 — a fase só ganha esta etiqueta quando NÃO é a do atleta (escotilha do URL ou
   progresso indisponível). Discreta de propósito: informa o professor sem competir com
   a chamada, que é o que o atleta lê a 2 m. */
.spk-fase-source {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff9f1c;
}
.spk-round-hud-cadence { font-size: 18px; color: rgba(245,243,240,0.6); letter-spacing: 0.1em; }

.spk-round-big {
  display: grid; align-items: center; justify-items: center;
}
.spk-round-big-number {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  /* ACOMPANHA A ALTURA DO ECRÃ (#665). Era fixo em 280px, e num ecrã de 600 comia o
     espaço todo: o diagrama ficava com 64px — cabia, e ninguém o lia. O `clamp` mantém-no
     grande onde há altura e deixa-o ceder onde não há, para os dois dividirem o espaço em
     vez de o número levar tudo. O tecto de 280px preserva o tamanho que o founder já viu
     e aprovou nos ecrãs onde ele cabia. */
  font-size: clamp(110px, 28vh, 280px); line-height: 0.85; color: #fff;
  text-shadow: 0 0 60px rgba(227, 18, 30, 0.35);
}
.spk-round-big-number.is-rest { color: rgba(245,243,240,0.3); text-shadow: none; font-size: 180px; }
.spk-round-big-name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: clamp(20px, 4.5vh, 36px); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(245,243,240,0.75); margin-top: clamp(4px, 1.5vh, 12px);
}

.spk-round-bar {
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; place-items: center;
  min-height: 0; gap: 12px;
}
.spk-round-progress {
  width: 100%; height: 6px; background: rgba(245,243,240,0.1); border-radius: 3px; overflow: hidden;
  margin-top: 16px;
}
.spk-round-progress-fill { height: 100%; background: #e3121e; transition: width 200ms linear; }
.spk-round-timer {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 24px; color: rgba(245,243,240,0.6); margin-top: 10px; text-align: center;
}

/* "a seguir" — o próximo pad, lido no canto periférico. */
.spk-round-next {
  position: absolute; right: 48px; top: 36px;
  font-family: 'Inter', sans-serif; text-align: right;
}
.spk-round-next-label { font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(245,243,240,0.4); }
.spk-round-next-num {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 800;
  font-size: 56px; color: rgba(245,243,240,0.5); line-height: 1;
}/* SparMaster pose spike — fatia 1c (#616). Minimal, instrumented. Namespace `spk-spike-`. */
.spk-spike-root { position: fixed; inset: 0; background: #0b0808; color: #f5f3f0; font-family: 'Inter', sans-serif; display: grid; grid-template-columns: 1fr 420px; gap: 0; }
.spk-spike-stage { position: relative; display: grid; place-items: center; background: #000; overflow: hidden; }
.spk-spike-stage video { max-width: 100%; max-height: 100%; transform: scaleX(-1); /* mirror front camera */ }
.spk-spike-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spk-spike-stage-empty { color: rgba(245,243,240,0.4); letter-spacing: 0.2em; text-transform: uppercase; }
.spk-spike-panel { padding: 24px 28px; border-left: 1px solid rgba(245,243,240,0.1); display: flex; flex-direction: column; gap: 18px; overflow: auto; }
.spk-spike-h1 { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: 0.08em; margin: 0; }
.spk-spike-row { display: flex; flex-direction: column; gap: 6px; }
.spk-spike-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,243,240,0.5); }
.spk-spike-value { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; }
.spk-spike-value.ok { color: #22cc44; } .spk-spike-value.bad { color: #e3121e; } .spk-spike-value.warn { color: #e3a012; }
.spk-spike-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.spk-spike-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.spk-spike-btn { background: rgba(245,243,240,0.08); color: #f5f3f0; border: 1px solid rgba(245,243,240,0.2); padding: 10px 16px; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px; cursor: pointer; }
.spk-spike-btn:hover { background: rgba(245,243,240,0.14); }
.spk-spike-btn.primary { background: #e3121e; border-color: #e3121e; }
.spk-spike-note { font-size: 13px; color: rgba(245,243,240,0.55); line-height: 1.5; }
.spk-spike-note code { background: rgba(245,243,240,0.1); padding: 1px 5px; border-radius: 3px; }
.spk-spike-err { color: #e3121e; font-size: 13px; }