/* Tela — o vídeo manda; a interface é tinta escura e só acende o que importa.
   Laranja-sinal (Crosspopz) = ação. Vermelho tally = no ar, e só isso. */
:root {
  --tinta: #1A1F2E;
  --tinta-2: #222839;
  --tinta-3: #333C55;
  --papel: #EEF0F6;
  --nevoa: #9AA2B8;
  --sinal: #FF7A1A;
  --sinal-forte: #FF9244;
  --tally: #FF3B4E;
  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --raio-campo: 6px;
  --raio-painel: 14px;
  --margem: clamp(16px, 3vw, 32px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--tinta);
  color: var(--papel);
  font: 400 1rem/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--sinal); outline-offset: 2px; }

.marca {
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--papel);
  text-decoration: none;
}

/* --- luz de "no ar" --- */
.tally {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 40px;
  padding: 0 1rem 0 0.8rem;
  border-radius: 999px;
  background: var(--tinta-2);
  border: 1px solid var(--tinta-3);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
.lampada {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: #4A5470;
}
.tally-contagem {
  padding-left: 0.7rem;
  border-left: 1px solid var(--tinta-3);
  color: var(--nevoa);
  font-weight: 500;
}
.tally-contagem b {
  color: var(--papel);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
.tally[data-estado="noar"] {
  border-color: color-mix(in srgb, var(--tally) 60%, transparent);
  background: color-mix(in srgb, var(--tally) 12%, var(--tinta-2));
}
.tally[data-estado="noar"] .lampada {
  background: var(--tally);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tally) 28%, transparent), 0 0 16px 2px var(--tally);
  animation: pulso 2.4s ease-in-out infinite;
}
.tally[data-estado="conectando"] .lampada,
.tally[data-estado="reconectando"] .lampada {
  background: var(--sinal);
  animation: piscar 1s steps(2, jump-none) infinite;
}
@keyframes pulso { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--tally) 14%, transparent), 0 0 22px 4px var(--tally); } }
@keyframes piscar { 50% { opacity: 0.25; } }

/* --- cantos de visor (a mira da Crosspopz); ficam vermelhos quando está no ar --- */
.mira { position: relative; }
.mira::after {
  content: "";
  position: absolute;
  inset: clamp(10px, 2vw, 18px);
  pointer-events: none;
  --c: rgb(238 240 246 / 0.32);
  --l: clamp(14px, 2.4vw, 26px);
  --w: 2px;
  background:
    linear-gradient(var(--c) 0 0) top left / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) top left / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) top right / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) top right / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) bottom left / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) bottom right / var(--w) var(--l);
  background-repeat: no-repeat;
}
.mira[data-noar]::after { --c: color-mix(in srgb, var(--tally) 85%, transparent); }

/* --- botões e campos --- */
.btn {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--raio-campo);
  border: 1px solid var(--tinta-3);
  background: transparent;
  color: var(--papel);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { background: var(--tinta-3); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; }
.btn-sinal { background: var(--sinal); border-color: var(--sinal); color: var(--tinta); }
.btn-sinal:hover { background: var(--sinal-forte); border-color: var(--sinal-forte); }
.btn-grande { min-height: 54px; padding: 0 26px; font-size: 1.0625rem; font-stretch: 112%; }
.btn-texto { border-color: transparent; color: var(--nevoa); padding: 0 8px; }
.btn-texto:hover { color: var(--papel); }
.btn-parar:hover { border-color: var(--tally); background: color-mix(in srgb, var(--tally) 18%, transparent); }

.acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.campo-linha { display: flex; gap: 8px; }
.campo-linha input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 12px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--papel);
  background: var(--tinta);
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio-campo);
}
.campo-linha input::placeholder { color: var(--nevoa); }

/* --- página de transmitir --- */
.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px var(--margem);
}
.mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 var(--margem) 40px;
}
.visor {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--raio-painel);
  overflow: hidden;
}
.visor video { display: block; width: 100%; height: 100%; object-fit: contain; }
.visor-vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background: var(--tinta-2);
}
.dica { max-width: 54ch; color: var(--nevoa); font-size: 0.9375rem; }
.dica p { margin: 0; text-wrap: pretty; }
.dica p + p { margin-top: 4px; }
.dica strong { color: var(--papel); font-weight: 600; }

.painel-ao-vivo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 20px;
  margin-top: 14px;
}
.medidas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  color: var(--nevoa);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.medidas span:first-child { color: var(--papel); font-weight: 600; }
.medida-alerta { color: var(--sinal); }

.aviso {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: var(--raio-campo);
  background: color-mix(in srgb, var(--tally) 14%, var(--tinta));
  border: 1px solid color-mix(in srgb, var(--tally) 45%, transparent);
  font-size: 0.9375rem;
}

/* uma superfície só, seções separadas por fio — não três cartões iguais */
.lateral { background: var(--tinta-2); border-radius: var(--raio-painel); }
.bloco { padding: 20px; }
.bloco + .bloco { border-top: 1px solid var(--tinta-3); }
.bloco h2 { margin: 0 0 12px; font-size: 1rem; font-weight: 700; font-stretch: 112%; }
.bloco .acoes { margin-top: 8px; }
.nota { margin: 12px 0 0; color: var(--nevoa); font-size: 0.8125rem; line-height: 1.5; }
.nota-alerta { color: var(--sinal); }

.opcoes { display: grid; gap: 6px; }
.opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--tinta-3);
  border-radius: var(--raio-campo);
  cursor: pointer;
}
.opcao:hover { border-color: var(--nevoa); }
.opcao:has(input:checked) { border-color: var(--sinal); background: color-mix(in srgb, var(--sinal) 9%, transparent); }
.opcao input { margin: 0; accent-color: var(--sinal); }
.opcao b { display: block; font-weight: 650; }
.opcao small { display: block; color: var(--nevoa); font-size: 0.8125rem; }

@media (max-width: 920px) {
  .mesa { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .tally { padding: 0 0.8rem 0 0.65rem; font-size: 0.875rem; }
  .visor { aspect-ratio: 4 / 3; }
  .painel-ao-vivo .acoes, .painel-ao-vivo .btn { width: 100%; }
}

/* --- página de assistir --- */
.pg-assistir { background: #000; overflow: hidden; }
.sala { position: fixed; inset: 0; background: #000; }
.sala video { display: block; width: 100%; height: 100%; object-fit: contain; }
.sala[data-ocioso] { cursor: none; }

.sobre {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px var(--margem);
  transition: opacity 0.35s ease;
}
.sobre-topo { top: 0; padding-top: max(16px, env(safe-area-inset-top)); background: linear-gradient(rgb(0 0 0 / 0.65), transparent); }
.sobre-base { bottom: 0; padding-bottom: max(16px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgb(0 0 0 / 0.65)); }
.sala[data-ocioso] .sobre { opacity: 0; pointer-events: none; }
.sobre .btn { background: rgb(26 31 46 / 0.72); backdrop-filter: blur(6px); }
.sobre .btn:hover { background: var(--tinta-3); }
.sobre .btn-sinal { background: var(--sinal); }
.sobre .btn-sinal:hover { background: var(--sinal-forte); }
.sobre-base .acoes { margin-left: auto; }

.espera {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 32px var(--margem);
  text-align: center;
  background: var(--tinta);
}
.espera-titulo {
  margin: 0 auto 0.5em;
  max-width: 16ch;
  font-size: clamp(1.75rem, 5vw, 3.25rem);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.espera-texto { margin: 0 auto; max-width: 38ch; color: var(--nevoa); }

@media (prefers-reduced-motion: reduce) {
  .lampada { animation: none !important; }
  .sobre { transition: none; }
}