/* =========================================================
   AntiCheat · repetición de una respuesta (race.js)
   ---------------------------------------------------------
   Tarjeta oscura tipo "replay" en ambos temas: cronómetro mono,
   cursor que barre la línea de tiempo y un punto por jugador que
   aparece cuando picó. El color del jugador (--rc) sigue la lectura
   de la respuesta: naranja normal, ámbar dudosa, rojo sospechosa.
   Negro y grises neutros R=G=B, sin slate.
   ========================================================= */
.ac-race {
  --rc: #FF7A22;
  --rc-glow: rgba(255, 122, 34, .16);
  --rc-bg: #0F0F0F;
  --rc-line: rgba(255, 255, 255, .07);
  --rc-muted: #8A8A8A;
  --rc-stage: 118px;

  flex-basis: 100%;
  margin: 8px 0 0 30px;
  padding: 16px 18px 14px;
  border-radius: var(--ds-r, 14px);
  border: 1px solid rgba(255, 255, 255, .06);
  background:
    radial-gradient(120% 150% at 0% 0%, var(--rc-glow), transparent 55%),
    var(--rc-bg);
  color: #F5F4F0;
  font-family: var(--siti-f-body, system-ui, sans-serif);
  animation: ac-race-in .35s var(--ds-ease, ease-out) both;
}

.ac-race[hidden] { display: none; }
.ac-race.is-medium { --rc: #FEBB28; --rc-glow: rgba(254, 187, 40, .14); }
.ac-race.is-high   { --rc: #FF4D4D; --rc-glow: rgba(255, 77, 77, .18); }

@keyframes ac-race-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ── Cabeza: reloj, contador en vivo, controles ───────────── */
.ac-race__head {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.ac-race__clock {
  display: flex;
  align-items: baseline;
  gap: 2px;
  min-width: 104px;
  font-family: var(--siti-f-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

.ac-race__num {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
}

.ac-race__unit { font-size: 14px; color: var(--rc-muted); }

.ac-race.is-tapped .ac-race__num { animation: ac-race-flash .6s ease-out; }

@keyframes ac-race-flash {
  0%   { color: var(--rc); text-shadow: 0 0 18px var(--rc); }
  100% { color: inherit; text-shadow: none; }
}

.ac-race__live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--siti-f-mono, ui-monospace, monospace);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rc-muted);
}

.ac-race__count { color: #F5F4F0; font-weight: 700; font-variant-numeric: tabular-nums; }

.ac-race__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4A4A4A;
}

.ac-race.is-running .ac-race__pulse {
  background: var(--rc);
  animation: ac-race-pulse 1s ease-in-out infinite;
}

@keyframes ac-race-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--rc); }
  50%      { box-shadow: 0 0 0 4px transparent; }
}

.ac-race__ctrl {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ac-race__speed {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}

.ac-race__speed button,
.ac-race__replay {
  border: 0;
  background: transparent;
  color: var(--rc-muted);
  font-family: var(--siti-f-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.ac-race__speed button { padding: 4px 9px; border-radius: 999px; }
.ac-race__speed button:hover { color: #F5F4F0; }
.ac-race__speed button.is-on { background: rgba(255, 255, 255, .14); color: #F5F4F0; }

.ac-race__replay {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}

.ac-race__replay:hover { background: var(--rc); color: #1A0B00; }

/* ── Escenario: la gente, la mediana y él ─────────────────── */
.ac-race__stage {
  position: relative;
  height: var(--rc-stage);
  margin-top: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* Donde contestó la mitad de la gente (p25–p75). */
.ac-race__iqr {
  position: absolute;
  top: 34px;
  bottom: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015));
  border-radius: 6px 6px 0 0;
}

.ac-race__med {
  position: absolute;
  top: 20px;
  bottom: 0;
  border-left: 1px dashed rgba(255, 255, 255, .4);
}

.ac-race__med span {
  position: absolute;
  top: -1px;
  left: 5px;
  font-family: var(--siti-f-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rc-muted);
  white-space: nowrap;
}

/* Un punto por jugador. Relleno = acertó, hueco = falló. */
.ac-race__dot {
  position: absolute;
  width: var(--dot, 6px);
  height: var(--dot, 6px);
  margin-left: calc(var(--dot, 6px) / -2);
  margin-bottom: 2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
  opacity: 0;
  transform: scale(0);
}

.ac-race__dot.is-miss {
  background: transparent;
  box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, .5);
}

.ac-race__dot.is-on {
  opacity: 1;
  transform: scale(1);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .15s;
}

/* Él: línea, punto grande en la base y etiqueta con su tiempo. */
.ac-race__me {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 2;
}

.ac-race__tag {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, 4px);
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--rc);
  color: #1A0B00;
  font-family: var(--siti-f-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  box-shadow: 0 6px 18px -6px var(--rc);
}

.ac-race__line {
  position: absolute;
  top: 22px;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: linear-gradient(to top, var(--rc), transparent);
  transform: scaleY(0);
  transform-origin: bottom;
}

.ac-race__hit {
  position: absolute;
  bottom: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--rc);
  box-shadow: 0 0 0 3px var(--rc-bg), 0 0 20px var(--rc);
  transform: scale(0);
}

.ac-race__hit::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--rc);
  opacity: 0;
}

.ac-race.is-tapped .ac-race__tag {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: opacity .2s, transform .35s var(--ds-ease, ease-out);
}

.ac-race.is-tapped .ac-race__line {
  transform: scaleY(1);
  transition: transform .4s var(--ds-ease, ease-out);
}

.ac-race.is-tapped .ac-race__hit { animation: ac-race-hit .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.ac-race.is-tapped .ac-race__hit::after { animation: ac-race-ring .9s ease-out both; }

@keyframes ac-race-hit {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

@keyframes ac-race-ring {
  0%   { opacity: .9; transform: scale(1); }
  100% { opacity: 0;  transform: scale(3.2); }
}

/* El cursor que barre: lo que "está pasando" ahora mismo. */
.ac-race__cursor {
  position: absolute;
  top: 0;
  bottom: -1px;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to top, #FFFFFF, rgba(255, 255, 255, .1));
  box-shadow: 0 0 12px rgba(255, 255, 255, .55);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.ac-race__cursor::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2px;
  width: 70px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, .06));
}

.ac-race.is-running .ac-race__cursor { opacity: 1; }

/* ── Eje: segundos, con la rejilla subiendo al escenario ──── */
.ac-race__axis {
  position: relative;
  height: 20px;
}

.ac-race__tick {
  position: absolute;
  top: 5px;
  transform: translateX(-50%);
  font-family: var(--siti-f-mono, ui-monospace, monospace);
  font-size: 9.5px;
  color: #5E5E5E;
}

.ac-race__tick::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 5px);
  width: 1px;
  height: var(--rc-stage);
  background: var(--rc-line);
  pointer-events: none;
}

/* ── Números del resto de la gente ────────────────────────── */
.ac-race__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.ac-race__stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
}

.ac-race__stat b {
  font-family: var(--siti-f-mono, ui-monospace, monospace);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ac-race__stat span {
  font-family: var(--siti-f-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--rc-muted);
}

.ac-race__stat.is-me {
  border-color: var(--rc);
  background: var(--rc-glow);
}

.ac-race__stat.is-me b { color: var(--rc); }

/* El más rápido del resto: punto azul en la gráfica + su tarjeta. */
.ac-race { --rv: #38BDF8; }

.ac-race__dot.is-rival {
  z-index: 1;
  background: var(--rv);
  box-shadow: 0 0 0 2px var(--rc-bg), 0 0 12px var(--rv);
}

.ac-race__dot.is-rival.is-miss {
  background: transparent;
  box-shadow: inset 0 0 0 1.6px var(--rv), 0 0 10px var(--rv);
}

.ac-race__rival {
  grid-column: span 2;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-color: rgba(56, 189, 248, .35);
  background: rgba(56, 189, 248, .07);
  transition: border-color .15s, background .15s;
}

.ac-race__rival:hover { border-color: var(--rv); background: rgba(56, 189, 248, .13); }
.ac-race__rival .ds-avatar { width: 32px; height: 32px; box-shadow: 0 0 0 2px var(--rv); }

/* .ac-race__stat span pinta etiquetas mono: aquí sólo la última lo es. */
.ac-race__stat .ac-race__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

.ac-race__stat .ds-avatar--fb {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: #F5F4F0;
  background: #2A2A2A;
}

.ac-race__rival b { color: var(--rv); display: inline-flex; align-items: baseline; gap: 6px; }

.ac-race__rival b em {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #BDBDBD;
}

.ac-race__rival b em.is-miss { color: #FF8A8A; }

.ac-race__rival strong {
  font-size: 12.5px;
  font-weight: 700;
  color: #F5F4F0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ac-race__legend i.is-rival {
  margin-left: 6px;
  background: var(--rv);
  box-shadow: 0 0 6px var(--rv);
}

.ac-race__verdict {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 12px;
  color: #BDBDBD;
}

.ac-race__verdict strong { color: #F5F4F0; }
.ac-race__verdict strong.is-fast { color: var(--rc); }

.ac-race__legend {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--rc-muted);
}

.ac-race__legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .62);
}

.ac-race__legend i.is-miss {
  margin-left: 6px;
  background: transparent;
  box-shadow: inset 0 0 0 1.2px rgba(255, 255, 255, .5);
}

@media (max-width: 700px) {
  .ac-race { margin-left: 0; padding: 14px; }
  .ac-race__num { font-size: 28px; }
  .ac-race__ctrl { margin-left: 0; }
  .ac-race__legend { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-race,
  .ac-race.is-tapped .ac-race__num,
  .ac-race.is-tapped .ac-race__hit,
  .ac-race.is-tapped .ac-race__hit::after,
  .ac-race.is-running .ac-race__pulse { animation: none; }
  .ac-race.is-tapped .ac-race__hit { transform: scale(1); }
  .ac-race__dot.is-on,
  .ac-race.is-tapped .ac-race__tag,
  .ac-race.is-tapped .ac-race__line { transition: none; }
}