/* «Secuencia» — solo lo suyo.
   ---------------------------------------------------------------------------
   Lo compartido con las demás pruebas (paleta de zaxfun, hoja, cabecera,
   resultado, botones, pie y el texto de abajo) está en `base.css`, que es un
   enlace a la única copia que hay en `zaxfun/pruebas/css/`. Aquí queda la mesa
   de juego: el aviso y las nueve casillas. */

/* Dentro de la mesa no puede haber selección ni menú contextual: un pulsado
   largo sacando «copiar» a mitad de una cadena la estropea. */
.mesa { -webkit-user-select: none; user-select: none; }

/* ---------- Marcador ---------- */

.marcador {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 1.1rem;
  margin-bottom: .7rem;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}
.marcador b { color: var(--texto); font-weight: 600; }
/* El aviso de la derecha solo aparece cuando hay algo que avisar (la segunda
   oportunidad). Un hueco con texto fijo ahí es ruido. */
.marcador em {
  font-style: normal;
  color: var(--oro);
  opacity: 0;
  transition: opacity .25s ease;
}
.marcador em.viva { opacity: 1; }

/* ---------- El aviso ----------
   Hace de botón para empezar y para salir de la pausa, y durante la prueba dice
   de quién es el turno. Es una sola línea que no cambia de sitio: si saltara,
   habría que ir a buscarla justo cuando hay que mirar la rejilla. */

.aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  width: 100%;
  min-height: 88px;
  margin: 0 0 1rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--panel-borde);
  border-radius: 20px;
  background: var(--panel);
  color: var(--texto);
  font-family: var(--tipo-texto);
  text-align: center;
  transition: border-color .2s ease, box-shadow .25s ease;
}
.aviso b {
  font: 700 clamp(1.3rem, 6vw, 1.7rem)/1.1 var(--tipo-titulo);
  letter-spacing: -.01em;
}
.aviso span {
  max-width: 32ch;
  font-size: .88rem;
  line-height: 1.4;
  color: var(--texto-tenue);
}

/* Reposo: el aviso es un botón de verdad y se nota. */
body[data-estado="listo"] .aviso,
body[data-estado="pausa"] .aviso {
  cursor: pointer;
  border-color: rgba(111, 211, 255, .3);
  box-shadow: 0 0 0 1px rgba(111, 211, 255, .08), 0 18px 50px -30px var(--cian);
}
body[data-estado="listo"] .aviso b,
body[data-estado="pausa"] .aviso b { color: var(--cian); }
/* Mientras la cadena se enseña, el turno es de la máquina y se dice con el
   color; cuando toca repetir, con el otro. Son los mismos dos colores que
   usan las casillas al encenderse. */
body[data-estado="mirando"] .aviso b { color: var(--violeta); }
body[data-estado="repitiendo"] .aviso b { color: var(--cian); }

body[data-estado="fin"] .mesa { display: none; }

/* ---------- Las nueve casillas ----------
   Iguales entre sí: ni color ni número que las distinga. Si cada una fuera de
   un color, la cadena se podría guardar como una lista de nombres —«rojo,
   verde, rojo»— y eso ya es otra memoria, la verbal. Aquí lo único que queda
   por guardar es el recorrido. */

.rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  max-width: 420px;
  margin: 0 auto;
}

.rejilla button {
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 18px;
  background: rgba(255, 255, 255, .045);
  cursor: pointer;
  /* Sin transición al ENCENDER: el destello tiene que empezar en el fotograma
     en que se pide, o la cadena se lee más lenta de lo que es. El apagado sí
     se funde, que es lo que deja el rastro de por dónde iba. */
  transition: background .34s ease, box-shadow .34s ease, border-color .34s ease, transform .12s ease;
}
.rejilla button:active { transform: scale(.97); }

/* La casilla encendida por la máquina: violeta, el color del turno de ella. */
.rejilla button.viva {
  transition: none;
  background: rgba(185, 140, 255, .85);
  border-color: rgba(185, 140, 255, .95);
  box-shadow: 0 0 0 1px rgba(185, 140, 255, .6), 0 0 46px -8px var(--violeta);
}
/* La que toca la persona: cian, el color de su turno. */
.rejilla button.tocada {
  transition: none;
  background: rgba(111, 211, 255, .85);
  border-color: rgba(111, 211, 255, .95);
  box-shadow: 0 0 0 1px rgba(111, 211, 255, .6), 0 0 46px -8px var(--cian);
}
/* La que rompió la cadena. */
.rejilla button.mal {
  transition: none;
  background: rgba(255, 107, 138, .8);
  border-color: var(--rojo);
  box-shadow: 0 0 0 1px var(--rojo), 0 0 46px -8px var(--rojo);
}

/* La rejilla solo responde cuando toca repetir. Mientras la cadena se enseña
   está viva pero muda: dejar tocar ahí invita a adelantarse y a estrenar la
   prueba fallando. */
body[data-estado="listo"] .rejilla button,
body[data-estado="mirando"] .rejilla button,
body[data-estado="veredicto"] .rejilla button,
body[data-estado="pausa"] .rejilla button {
  pointer-events: none;
}
body[data-estado="listo"] .rejilla,
body[data-estado="pausa"] .rejilla { opacity: .45; }
.rejilla { transition: opacity .3s ease; }

/* El veredicto de la cadena: el marco entero se tiñe medio segundo. Es la única
   manera de que se vea sin apartar la vista de la rejilla. */
body[data-fallo="si"] .aviso {
  border-color: var(--rojo);
  box-shadow: 0 0 0 1px var(--rojo), 0 0 60px -20px var(--rojo);
}
body[data-fallo="no"] .aviso {
  border-color: var(--verde);
  box-shadow: 0 0 0 1px var(--verde), 0 0 60px -20px var(--verde);
}
body[data-fallo="si"] .aviso b { color: var(--rojo); }
body[data-fallo="no"] .aviso b { color: var(--verde); }

/* ---------- Cómo lo repetiste ----------
   El segundo dato del final: el ritmo al que devolviste la cadena más larga y
   por dónde se te rompió la última. Sale de la propia partida, no de ninguna
   tabla de fuera, y por eso tiene su propio marco. */

.ritmo {
  margin: 0 0 1.1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--panel-borde);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}
/* Sin número: el marco se queda para explicar por qué no lo hay, pero apagado,
   que un hueco donde debería ir una cifra grande canta más que la explicación. */
.ritmo.sin-cifra { border-style: dashed; }
.ritmo.sin-cifra b { display: none; }
.ritmo b {
  display: block;
  font: 700 1.5rem/1.1 var(--tipo-titulo);
  color: var(--violeta);
  font-variant-numeric: tabular-nums;
}
.ritmo span {
  display: block;
  margin-top: .25rem;
  font-size: .87rem;
  line-height: 1.45;
  color: var(--texto-tenue);
}

.ritmo-cuentas {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin-top: .7rem;
  font-size: .8rem;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}
.ritmo-cuentas i { display: block; font-style: normal; color: var(--texto); font-weight: 600; }