:root {
  --fondo: #0a0d14; --panel: #0f141f; --linea: #1f2937;
  --rojo: #ef4444; --verde: #22c55e; --cian: #38bdf8; --ambar: #f59e0b; --texto: #cbd5e1;
  --mono: "Share Tech Mono", "Courier New", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--texto); font-family: var(--mono); line-height: 1.6;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(239,68,68,.14), transparent 55%),
    radial-gradient(ellipse at 90% 40%, rgba(56,189,248,.07), transparent 50%),
    linear-gradient(rgba(56,189,248,.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(56,189,248,.035) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--fondo);
}
.crt { position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.15) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.5)); }
.crt::after { content: ""; position: absolute; left: 0; right: 0; height: 100px;
  background: linear-gradient(to bottom, transparent, rgba(56,189,248,.06), transparent); animation: barrido 9s linear infinite; }

/* Barra de navegación HUD táctica unificada */
.barra {
  position: sticky; top: 0; z-index: 40;
  display: flex; justify-content: center; align-items: center;
  min-height: 72px;
  padding: .45rem 1rem;
  background: rgba(8, 11, 18, 0.94);
  border-bottom: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
}

.hud-consola {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 2.5vw, 2.2rem);
  width: 100%;
  max-width: 820px;
}

/* Timer Housing tipo panel militar/cyberpunk */
.hud-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .32rem 1.6rem .42rem;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.9) 0%, rgba(4, 7, 13, 0.98) 100%);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 10px;
  box-shadow:
    inset 0 0 16px rgba(239, 68, 68, 0.16),
    0 0 22px rgba(239, 68, 68, 0.15),
    0 4px 12px rgba(0, 0, 0, 0.5);
  position: relative;
  min-width: 220px;
}

.hud-timer__cab {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .12rem;
}

.hud-timer__led {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 0 8px var(--rojo);
  flex-shrink: 0;
}

.hud-timer__label {
  font-size: .62rem;
  color: #94a3b8;
  letter-spacing: .16em;
  font-weight: 700;
  text-transform: uppercase;
}

.hud-timer__reloj {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 700;
  color: var(--rojo);
  text-shadow: 0 0 16px rgba(239, 68, 68, 0.85), 0 0 32px rgba(239, 68, 68, 0.35);
  letter-spacing: .08em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-family: var(--mono);
}

/* Botones HUD tácticos coherentes */
.hud-btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem 1.25rem;
  font-family: var(--mono);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
  white-space: nowrap;
}

.hud-btn__icon {
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Botón Registrar */
/* El atributo hidden tiene que ganarle al display de .hud-btn: si no, el hueco
   del nombre de equipo se ve como un boton vacio antes de identificarse. */
.hud-btn[hidden] { display: none; }

.hud-btn--registro {
  background: linear-gradient(180deg, rgba(14, 116, 144, 0.28) 0%, rgba(8, 145, 178, 0.12) 100%);
  border: 1px solid rgba(56, 189, 248, 0.6);
  color: #e0f2fe;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hud-btn--registro:hover {
  background: linear-gradient(180deg, rgba(14, 116, 144, 0.5) 0%, rgba(8, 145, 178, 0.28) 100%);
  border-color: var(--cian);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Botón Volver a la red (en retos individuales) */
.hud-btn--volver {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(8, 12, 20, 0.95) 100%);
  border: 1px solid rgba(56, 189, 248, 0.5);
  color: var(--cian);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.12);
}

.hud-btn--volver:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: var(--cian);
  color: #fff;
  transform: translateX(-3px);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.3);
}

/* Botón Reiniciar */
.hud-btn--reiniciar {
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.22) 0%, rgba(127, 29, 29, 0.12) 100%);
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #fecaca;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hud-btn--reiniciar:hover {
  background: linear-gradient(180deg, rgba(185, 28, 28, 0.45) 0%, rgba(127, 29, 29, 0.28) 100%);
  border-color: var(--rojo);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hud-btn:active {
  transform: translateY(1px);
}

.blink { animation: parpadeo 1.1s steps(2, start) infinite; }

/* Hero principal encuadrado exactamente en el viewport para no sangrar a la siguiente sección */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
  gap: clamp(1.2rem, 3.5vw, 2.8rem);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  height: calc(100vh - 74px);
  height: calc(100dvh - 74px);
  min-height: 520px;
  box-sizing: border-box;
}
.hero__bajada { font-size: 1.15rem; color: #f8fafc; margin: 0 0 .5rem; }
.hero__bajada strong { color: var(--rojo); }
.glitch { position: relative; margin: 0 0 .75rem; color: #fff; font-size: clamp(2rem, 4.8vw, 3.8rem); line-height: 1.05; letter-spacing: .03em; text-shadow: 0 0 20px rgba(239,68,68,.4); }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; overflow: hidden; }
.glitch::before { color: var(--rojo); transform: translateX(-3px); animation: glitch-a 3.4s infinite steps(1); }
.glitch::after { color: var(--cian); transform: translateX(3px); animation: glitch-b 2.9s infinite steps(1); }

.hero__ayuda { margin: 0 0 1.5rem; color: #94a3b8; font-size: .95rem; line-height: 1.55; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Terminal interactiva en Hero */
.terminal--hero { background: #05080e; border: 1px solid rgba(239,68,68,.45); border-radius: 12px; box-shadow: 0 0 45px rgba(239,68,68,.18); overflow: hidden; }
.terminal__barra { display: flex; align-items: center; gap: .4rem; padding: .6rem .85rem; background: #111827; font-size: .8rem; color: #94a3b8; border-bottom: 1px solid var(--linea); }
.terminal__barra i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--rojo); }
.terminal__barra i:nth-child(2) { background: var(--ambar); }
.terminal__barra i:nth-child(3) { background: var(--verde); }
.terminal__barra span { margin-left: .6rem; color: #e2e8f0; font-weight: 700; }
.terminal__pantalla { padding: 1.1rem 1.3rem; min-height: 11.5rem; font-family: var(--mono); }
.terminal__cmd { color: var(--cian); font-size: .9rem; font-weight: 700; margin: 0 0 1rem; }
.terminal__mensaje-x { color: #f8fafc; font-size: clamp(.92rem, 1.7vw, 1.05rem); line-height: 1.65; white-space: pre-line; display: inline; }
.terminal__cursor { color: var(--rojo); font-size: 1.2rem; animation: parpadeo .8s infinite; display: inline-block; vertical-align: middle; margin-left: 3px; }

/* Secciones */
.seccion { max-width: 1100px; margin: 0 auto; padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2rem); }
.seccion__titulo { margin: 0 0 .5rem; color: #fff; font-size: clamp(1.4rem, 3.5vw, 2rem); }
.seccion__ayuda { max-width: 75ch; margin: 0 0 1.5rem; color: #94a3b8; font-size: .98rem; line-height: 1.6; }

/* Misión / Las reglas de X (ocultas hasta terminar el comunicado de la terminal o hacer scroll) */
#mision {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
body.comunicado-listo #mision,
#mision:focus-within {
  opacity: 1;
  transform: translateY(0);
}

.pasos-humanos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.paso-card { display: flex; flex-direction: column; gap: .75rem; background: rgba(15,20,31,.75); border: 1px solid var(--linea);
  border-radius: 12px; padding: 1.25rem; transition: transform .2s, border-color .2s; }
.paso-card:hover { transform: translateY(-3px); border-color: var(--cian); }
.paso-card__num { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: rgba(56,189,248,.12); border: 1px solid var(--cian); color: var(--cian); font-weight: 700; font-size: 1rem; }
.paso-card__contenido h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: #fff; }
.paso-card__contenido p { margin: 0; font-size: .9rem; color: #94a3b8; line-height: 1.55; }
.paso-card__contenido strong { color: #f1f5f9; }

.info-chips { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; background: rgba(15,23,42,.8);
  border: 1px solid var(--linea); border-radius: 20px; font-size: .88rem; color: #cbd5e1; }
.chip strong { color: #fff; }

/* Cabecera del mapa de retos */
.mapa-cabecera {
  margin-bottom: 1.5rem;
}

.mapa-guia-estados {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  margin-top: .85rem;
}

.guia-estado {
  font-size: .84rem;
  font-weight: 700;
  padding: .35rem .85rem;
  border-radius: 6px;
  letter-spacing: .04em;
}

.guia-estado--ambar {
  color: var(--ambar);
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.guia-estado--rojo {
  color: var(--rojo);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.45);
}

.guia-estado--verde {
  color: var(--verde);
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.45);
}

/* Mapa SVG de los 12 Retos */
.red-scroll { overflow-x: auto; padding: .5rem 0 2rem; }
.red { display: block; width: 100%; min-width: 600px; max-width: 800px; margin: 0 auto; height: auto; }
.enlace { stroke: #1e3a52; stroke-width: 2; stroke-dasharray: 6 8; animation: flujo 1.6s linear infinite; }
.nucleo circle { fill: #07101a; stroke: var(--cian); stroke-width: 2; filter: drop-shadow(0 0 14px rgba(56,189,248,.5)); }
.nucleo__t { font: 13px var(--mono); fill: #94a3b8; }
.nucleo__n { font: 700 34px var(--mono); fill: var(--cian); }
.nodo { cursor: pointer; outline: none; }
.nodo__forma { fill: #0b1019; stroke-width: 3; transition: fill .2s, filter .2s; }
.nodo__num { font: 700 28px var(--mono); }
.nodo__titulo { font: 700 15px var(--mono); fill: var(--texto); }
.nodo__estado { font: 12px var(--mono); }
.nodo--cifrado .nodo__forma { stroke: #7f1d1d; }
.nodo--cifrado .nodo__num, .nodo--cifrado .nodo__estado { fill: var(--rojo); opacity: .85; }
.nodo--cifrado:hover .nodo__forma, .nodo--cifrado:focus-visible .nodo__forma { fill: #1a0d12; filter: drop-shadow(0 0 10px var(--rojo)); }
.nodo--propio .nodo__forma { stroke: var(--ambar); animation: pulso 1.7s ease-in-out infinite; }
.nodo--propio .nodo__num, .nodo--propio .nodo__estado { fill: var(--ambar); }
.nodo--propio:hover .nodo__forma, .nodo--propio:focus-visible .nodo__forma { fill: #221a08; }
.nodo--hecho .nodo__forma { stroke: var(--verde); animation: none; filter: drop-shadow(0 0 10px rgba(34,197,94,.7)); }
.nodo--hecho .nodo__num, .nodo--hecho .nodo__estado { fill: var(--verde); opacity: 1; }
.nodo:focus-visible .nodo__forma { stroke: #fff; }

/* Sección de la cerradura maestra centrada al final */
.seccion--consola {
  border-top: 1px solid rgba(239, 68, 68, 0.25);
  background: radial-gradient(ellipse at 50% 100%, rgba(239, 68, 68, 0.08) 0%, transparent 70%);
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
}

.consola-contenedor {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.consola-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .85rem;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 20px;
  color: #fca5a5;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin-bottom: 1rem;
}

.consola-badge__dot {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--rojo);
  box-shadow: 0 0 8px var(--rojo);
}

.consola__titulo {
  margin: 0 0 .5rem;
  text-align: center;
}

.consola__ayuda {
  margin: 0 auto 1.8rem;
  text-align: center;
  max-width: 65ch;
}

/* Slots de la contraseña con hover y centrado */
.slots {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(.35rem, 1vw, .75rem);
  width: 100%;
  max-width: 860px;
  margin: 0 auto 1.5rem;
  justify-content: center;
}

.slot-caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  transition: transform .2s ease;
  cursor: pointer;
}

.slot-caja span {
  display: block;
  margin-bottom: .35rem;
  font-size: clamp(.62rem, 1vw, .72rem);
  color: #64748b;
  text-align: center;
  font-weight: 700;
  letter-spacing: .06em;
  transition: color .2s ease, text-shadow .2s ease;
}

.slot-caja:hover span {
  color: var(--cian);
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.7);
}

.slot {
  width: 100%;
  aspect-ratio: 1 / 1.15;
  text-align: center;
  text-transform: uppercase;
  font: 700 clamp(1.2rem, 2.5vw, 1.8rem) var(--mono);
  color: var(--cian);
  background: #05080e;
  border: 2px solid var(--linea);
  border-radius: 10px;
  caret-color: var(--ambar);
  transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* Efecto hover interactivo en las casillas */
.slot:hover {
  border-color: rgba(56, 189, 248, 0.95);
  background: rgba(14, 25, 45, 0.95);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.5), inset 0 0 12px rgba(56, 189, 248, 0.25);
  transform: translateY(-4px) scale(1.05);
}

.slot:focus {
  outline: none;
  border-color: var(--cian);
  background: #0a1728;
  box-shadow: 0 0 24px rgba(56, 189, 248, 0.7), inset 0 0 14px rgba(56, 189, 248, 0.3);
  transform: translateY(-4px) scale(1.06);
}

.slot--auto {
  color: var(--verde);
  border-color: var(--verde);
  background: rgba(34, 197, 94, 0.1);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.35);
}

.slot--auto:hover {
  border-color: #4ade80;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.55), inset 0 0 10px rgba(34, 197, 94, 0.2);
  transform: translateY(-3px) scale(1.04);
}

.slots.error { animation: vibrar .45s; }
.slots.error .slot { border-color: var(--rojo); color: var(--rojo); }
.mensaje { min-height: 1.6rem; margin: 0 auto .75rem; font-weight: 700; text-align: center; }
.mensaje--error { color: var(--rojo); } .mensaje--ok { color: var(--verde); }

/* Recuperada: la usan login.html, panel.html y el aviso de la revelacion de
   reto_base.html. Se perdio al traer el CSS nuevo del frontend. */
.consejo { max-width: 70ch; margin: 1rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--cian); background: rgba(56,189,248,.07); }

/* Botones */
.btn { display: inline-block; font: 700 .95rem var(--mono); letter-spacing: .04em; text-decoration: none; cursor: pointer; border-radius: 8px;
  padding: .7rem 1.2rem; background: transparent; color: var(--texto); border: 2px solid currentColor; transition: background .15s, transform .1s; }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.btn--cian { color: var(--cian); } .btn--cian:hover { background: rgba(56,189,248,.15); }
.btn--rojo { color: var(--rojo); } .btn--rojo:hover { background: rgba(239,68,68,.15); }
.btn--rojo-solido { color: #fff; background: var(--rojo); border-color: var(--rojo); box-shadow: 0 0 20px rgba(239,68,68,.4); }
.btn--rojo-solido:hover { background: #dc2626; transform: translateY(-1px); }
.btn--restaurar { width: min(100%, 540px); margin: 0 auto; padding: 1.15rem; font-size: 1.15rem; letter-spacing: .08em; color: #fff; background: var(--rojo); border: 3px dashed #fecaca; box-shadow: 0 0 26px rgba(239,68,68,.55); border-radius: 12px; transition: all .25s ease; }
.btn--restaurar:hover { background: #dc2626; transform: translateY(-2px); box-shadow: 0 0 38px rgba(239,68,68,.85); }
.btn:disabled { opacity: .55; cursor: wait; }
body.restaurado .btn--restaurar { background: var(--verde); border-color: #bbf7d0; box-shadow: 0 0 26px rgba(34,197,94,.6); }
body.restaurado .barra { border-color: var(--verde); }
body.restaurado .reloj { color: var(--verde); text-shadow: none; }

.pie { padding: 2.5rem 1rem 3.5rem; text-align: center; color: #64748b; font-size: .85rem; }

/* Modales */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(2,6,12,.88); }
.modal[hidden] { display: none; }
.modal__caja { width: min(30rem, 100%); max-height: 90vh; overflow-y: auto; padding: 1.5rem; background: var(--panel); border: 2px solid var(--cian); border-radius: 12px; box-shadow: 0 0 40px rgba(56,189,248,.25); }
.modal__caja--rojo { border-color: var(--rojo); box-shadow: 0 0 40px rgba(239,68,68,.35); }
.modal__titulo { margin: 0 0 1rem; color: var(--rojo); font-size: 1.2rem; }
.modal__titulo--cian { color: var(--cian); }
.modal__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
label { display: block; margin: .75rem 0 .25rem; color: var(--cian); font-size: .9rem; }
input[type="text"], select { width: 100%; padding: .6rem; font: 1rem var(--mono); color: var(--texto); background: #05080e; border: 1px solid var(--linea); border-radius: 6px; }
input[type="text"]:focus, select:focus { outline: 2px solid var(--cian); outline-offset: 1px; }

@keyframes parpadeo { 50% { opacity: .25; } }
@keyframes aparece { to { opacity: 1; } }
@keyframes flujo { to { stroke-dashoffset: -28; } }
@keyframes pulso { 50% { filter: drop-shadow(0 0 12px var(--ambar)); stroke: #fde68a; } }
@keyframes barrido { from { top: -140px; } to { top: 100%; } }
@keyframes vibrar { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@keyframes glitch-a { 0%, 92%, 100% { clip-path: inset(0 0 100% 0); } 93% { clip-path: inset(10% 0 55% 0); } 96% { clip-path: inset(60% 0 8% 0); } }
@keyframes glitch-b { 0%, 88%, 100% { clip-path: inset(100% 0 0 0); } 89% { clip-path: inset(40% 0 30% 0); } 94% { clip-path: inset(5% 0 75% 0); } }

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    height: auto;
    min-height: calc(100vh - 74px);
    min-height: calc(100dvh - 74px);
    padding: 2rem clamp(1rem, 4vw, 2rem) 3rem;
  }
  .slots {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .hud-consola { gap: .7rem; }
  .hud-timer { padding: .25rem 1rem .35rem; min-width: 170px; }
  .hud-timer__reloj { font-size: 1.65rem; }
  .hud-btn { padding: .5rem .85rem; font-size: .8rem; gap: .35rem; }
}
@media (max-width: 480px) {
  .hud-consola { flex-wrap: wrap; justify-content: center; }
  .hud-timer { order: -1; width: 100%; max-width: 240px; }
  .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.reloj--critico { animation: parpadeo .8s steps(2, start) infinite; }
.reloj--agotado { animation: parpadeo .5s steps(2, start) infinite; text-shadow: 0 0 18px var(--rojo); }

/* La pista que el organizador manda desde el panel. Fija abajo, para que se
   vea este donde este el equipo en la pagina, y en ambar para no confundirla
   con los avisos rojos del sistema secuestrado. */
.pista { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline;
  padding: .7rem clamp(1rem, 4vw, 2.5rem);
  border-top: 2px solid var(--ambar); background: rgba(22, 16, 4, .97); }
/* Otra vez: el display de arriba le ganaria al atributo hidden. */
.pista[hidden] { display: none; }
.pista__quien { flex: none; color: var(--ambar); font-size: .7rem; font-weight: 700; letter-spacing: .08em; }
.pista__texto { margin: 0; color: #fff; font-size: .95rem; }