/* =============================================================================
   POLTERBYTE · la mesa del equipo (el expediente, con la J o Esc)

   ES UNA MESA, NO UN MENÚ. Todo el fondo es una sola imagen —la mesa del
   equipo, con su libreta abierta, su medidor, sus velas y su tablón— y lo único
   que hace esta hoja de estilos es colocar el contenido EN LOS HUECOS que la
   imagen deja.

   TRES DECISIONES QUE SOSTIENEN TODO LO DEMÁS:

   1. COORDENADAS EN PORCENTAJE, medidas sobre la imagen (1664 x 945). Así el
      menú se estira a cualquier pantalla sin que nada se salga de su hueco.
   2. LETRAS EN `cqw` — centésimas del ancho del marco. Al crecer la mesa crece
      la letra con ella y la composición se mantiene idéntica en un portátil y
      en un monitor de treinta pulgadas. Con píxeles habría que rehacerla dos
      veces y aun así quedaría mal en la tercera.
   3. EL MARCO NUNCA SE DEFORMA: mantiene la proporción de la imagen y se ajusta
      al lado que se quede corto. Una mesa estirada se nota a un kilómetro.

   Y LAS LUCES SE ENCIENDEN. La imagen trae las velas y los pilotos pintados,
   pero quietos, y una llama quieta es una pegatina: encima se les pone un
   resplandor que respira, cada uno a su compás.
============================================================================= */

.ex {
  position: fixed;
  inset: 0;
  z-index: 62;
  display: grid;
  place-items: center;
  background: #05040a;
}
.ex[hidden] { display: none; }

/* --- La mesa ---------------------------------------------------------------- */
.ex-marco {
  position: relative;
  width: min(100vw, calc(100vh * 1664 / 945));
  height: min(100vh, calc(100vw * 945 / 1664));
  background: url('../assets/ui/fondomenu.png') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  /* Para que `cqw` signifique «centésima del ancho de la mesa». */
  container-type: size;
  font-family: var(--face-ui);
  color: #2f2a22;
  overflow: hidden;
}

/* --- La placa del título ----------------------------------------------------- */
.ex-placa {
  position: absolute;
  left: 1.6%;
  top: 2.4%;
  width: 26%;
  height: 8.4%;
  display: grid;
  align-content: center;
  gap: 0.2cqw;
  padding-left: 3cqw;
}
.ex-placa strong {
  font-family: var(--face-pixel);
  font-size: 2.1cqw;
  letter-spacing: .05em;
  line-height: 1;
  color: #cbb6ff;
  text-shadow: 0 0 1.2cqw rgba(157, 107, 255, .7);
}
.ex-placa span {
  font-family: var(--face-pixel);
  font-size: 1.15cqw;
  letter-spacing: .12em;
  color: var(--lime);
}

/* --- Las cuatro pestañas ------------------------------------------------------ */
.ex-pestanas[hidden] { display: none; }
.ex-pestanas {
  position: absolute;
  left: 29.3%;
  top: 1.4%;
  width: 41.1%;
  height: 12%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6%;
  align-items: end;
}
.ex-pestana {
  height: 100%;
  border: 0;
  background: transparent;
  color: #9fb4e8;
  font-family: var(--face-pixel);
  font-size: 1.2cqw;
  letter-spacing: .07em;
  cursor: pointer;
  /* El texto va abajo del todo: arriba está el icono que trae la imagen. */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: .9cqw;
  transition: color 120ms ease;
}
.ex-pestana:hover { color: #dce8ff; }
/* La pestaña puesta se ENCIENDE. La imagen las trae todas apagadas, así que el
   verde se pone aquí: un tinte por encima que respeta el dibujo de debajo. */
.ex-pestana.on {
  color: #0f1405;
  background: linear-gradient(180deg, rgba(168, 244, 37, .92), rgba(120, 190, 20, .86));
  border-radius: .8cqw .8cqw 0 0;
  box-shadow: 0 0 2.4cqw rgba(168, 244, 37, .45);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.ex-aviso {
  position: absolute;
  right: 9%;
  top: 6%;
  font-family: var(--face-pixel);
  font-size: 1.05cqw;
  letter-spacing: .06em;
  color: #8f9ec4;
}
.ex-equis {
  position: absolute;
  right: 2.4%;
  top: 2.4%;
  width: 4.6%;
  height: 8.6%;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.ex-equis:hover { filter: brightness(1.4) drop-shadow(0 0 .8cqw rgba(255, 60, 60, .8)); }

/* --- La hoja de la libreta ------------------------------------------------------ */
.ex-hoja {
  position: absolute;
  left: 19.6%;
  top: 17%;
  width: 43.5%;
  height: 69%;
  overflow-y: auto;
  padding-right: .6cqw;
  /* El papel ya lo pone la imagen: aquí solo va lo escrito encima. */
  color: #3a3227;
  scrollbar-width: thin;
}
.ex-hoja::-webkit-scrollbar { width: .5cqw; }
.ex-hoja::-webkit-scrollbar-thumb { background: rgba(90, 70, 40, .35); border-radius: 1cqw; }

/* El rótulo de brocha: una tira oscura con el texto encima, como en la maqueta. */
.ex-rotulo {
  display: inline-block;
  margin: .4cqw 0 .5cqw;
  padding: .35cqw 1.4cqw .45cqw;
  background: #2c2740;
  transform: rotate(-.5deg);
  box-shadow: .25cqw .25cqw 0 rgba(0, 0, 0, .25);
  font-family: var(--face-pixel);
  font-size: 1.5cqw;
  letter-spacing: .06em;
  color: #f3eee0;
}
.ex-rotulo--verde { background: transparent; box-shadow: none; color: var(--lime); transform: none; }
.ex-rotulo-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  margin-top: .8cqw;
}
.ex-cuantos {
  padding: .3cqw .9cqw;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(90, 70, 40, .35);
  font-family: var(--face-pixel);
  font-size: 1.1cqw;
  color: #4a3b23;
}
.ex-cuantos.clavado {
  background: rgba(168, 244, 37, .55);
  color: #2a3305;
  animation: ex-late 1.4s ease-in-out infinite;
}
@keyframes ex-late { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

.ex-nota { margin: 0 0 .5cqw; font-size: 1.05cqw; line-height: 1.45; color: #6b5c46; }

/* --- Las siete pruebas ------------------------------------------------------------ */
.ex-pruebas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5cqw;
  margin-bottom: .6cqw;
}
.ex-prueba {
  display: flex;
  align-items: center;
  gap: .8cqw;
  padding: .55cqw .8cqw;
  border: 0;
  border-radius: .4cqw;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px rgba(90, 70, 40, .3);
  color: #3a3227;
  font-family: var(--face-ui);
  font-size: 1.1cqw;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease;
}
.ex-prueba:hover { background: rgba(255, 255, 255, .82); }
.ex-casilla {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.8cqw;
  height: 1.8cqw;
  background: #fffdf6;
  box-shadow: inset 0 0 0 .15cqw #4a3b23;
  font-size: 1.2cqw;
  color: #2a3305;
}
.ex-prueba--si { background: rgba(168, 244, 37, .38); }
.ex-prueba--no { opacity: .6; }
.ex-prueba--no .ex-prueba-n { text-decoration: line-through; }
.ex-prueba--no .ex-casilla { color: #a2251f; }

/* --- Los ocho sospechosos ---------------------------------------------------------- */
.ex-sospechosos {
  display: grid;
  /* CINCO POR FILA. Con ocho fantasmas iban de cuatro en cuatro y sobraba
     hoja; con catorce, cuatro columnas se comían la conclusión de abajo y
     había que hacer scroll para leer a cuántos has dejado en pie, que es
     justo lo que se viene a mirar. Cinco columnas los dejan en tres filas. */
  grid-template-columns: repeat(5, 1fr);
  gap: .5cqw;
  margin: .4cqw 0 .6cqw;
}
.ex-sospechoso {
  position: relative;
  display: grid;
  grid-template-columns: 2.2cqw 1fr;
  align-items: center;
  gap: .4cqw;
  padding: .45cqw .45cqw .45cqw .4cqw;
  border: 0;
  background: #efe7d6;
  box-shadow: .2cqw .2cqw 0 rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(90, 70, 40, .3);
  color: #3a3227;
  cursor: pointer;
  transition: transform 140ms var(--ease-pop), box-shadow 140ms ease, opacity 200ms ease;
}
.ex-sospechoso strong {
  font-family: var(--face-pixel);
  font-size: .92cqw;
  letter-spacing: .04em;
  text-align: left;
}
.ex-sospechoso:hover { transform: translateY(-.25cqw); }
/* La chincheta roja de la maqueta: cada ficha va clavada al papel. */
.ex-chincheta {
  position: absolute;
  top: -.4cqw;
  left: 1.1cqw;
  width: .9cqw;
  height: .9cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #c02020);
  box-shadow: 0 .15cqw .3cqw rgba(0, 0, 0, .45);
}
.ex-retrato {
  display: grid;
  place-items: center;
  width: 2.2cqw;
  aspect-ratio: 1;
  background: #171226;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
}
.ex-retrato svg { width: 84%; height: 84%; }
/* Descartado: se apaga y se queda en gris. No desaparece, porque hay que poder
   ver que lo has descartado y volver atrás si te has colado. */
.ex-sospechoso.fuera { opacity: .35; filter: grayscale(1); }
.ex-sospechoso.fuera:hover { opacity: .6; }
.ex-sospechoso.elegido { box-shadow: 0 0 0 .25cqw var(--lime), .2cqw .2cqw 0 rgba(0, 0, 0, .22); }

.ex-veredicto {
  margin: .4cqw 0 0;
  padding-top: .5cqw;
  border-top: 1px solid rgba(90, 70, 40, .3);
  font-size: 1.05cqw;
  color: #5a4c38;
}

/* --- Los fragmentos de historia ------------------------------------------------------ */
.ex-cinta { display: grid; gap: .5cqw; }
.ex-trozo {
  display: grid;
  grid-template-columns: 2.4cqw 1fr;
  gap: .8cqw;
  align-items: start;
  padding: .7cqw .9cqw;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px rgba(90, 70, 40, .28);
}
.ex-trozo p { margin: 0; font-size: 1.05cqw; line-height: 1.45; }
.ex-trozo-n {
  display: grid;
  place-items: center;
  width: 2.2cqw;
  height: 2.2cqw;
  background: #2c2740;
  color: var(--lime);
  font-family: var(--face-pixel);
  font-size: 1.2cqw;
}
/* Los que faltan se ven, pero borrosos: saber CUÁNTOS te quedan es la mitad de
   las ganas de seguir buscando. */
.ex-trozo.cerrado { opacity: .55; }
.ex-trozo.cerrado p { filter: blur(.18cqw); font-style: italic; }
.ex-trozo.cerrado .ex-trozo-n { background: rgba(90, 70, 40, .3); color: #8b7a5e; }

/* --- El álbum ------------------------------------------------------------------------- */
.ex-album {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1cqw;
  margin-top: .5cqw;
}
.ex-polaroid {
  margin: 0;
  padding: .35cqw .35cqw .25cqw;
  background: #fffaf0;
  box-shadow: .25cqw .35cqw .6cqw rgba(0, 0, 0, .35);
  transform: rotate(-1.2deg);
  transition: transform 160ms var(--ease-pop);
}
.ex-polaroid:nth-child(even) { transform: rotate(1.4deg); }
.ex-polaroid:hover { transform: rotate(0) scale(1.06); z-index: 2; }
.ex-polaroid img { display: block; width: 100%; image-rendering: pixelated; background: #0a0714; }
.ex-polaroid figcaption {
  font-family: var(--face-pixel);
  font-size: .95cqw;
  color: #5c5343;
  text-align: right;
}

/* --- El tablón de la derecha ----------------------------------------------------------- */
.ex-tablero {
  position: absolute;
  left: 66.3%;
  top: 16.5%;
  width: 23.5%;
  /* El tablón entero: la ficha del sospechoso es a lo que se viene, así que se
     le deja todo el alto que da la imagen. */
  height: 70%;
  display: grid;
  align-content: start;
  gap: .7cqw;
  padding: .4cqw;
  overflow-y: auto;
  color: #cfd6e6;
}
.ex-tablero::-webkit-scrollbar { width: .5cqw; }
.ex-tablero::-webkit-scrollbar-thumb { background: rgba(168, 244, 37, .3); border-radius: 1cqw; }
.ex-tablero .ex-rotulo--verde {
  margin: 0;
  font-size: 1.25cqw;
  letter-spacing: .08em;
  text-align: center;
}

.ex-panel {
  display: grid;
  gap: .5cqw;
  padding: .9cqw;
  border-radius: .5cqw;
  background: rgba(10, 18, 20, .55);
  box-shadow: inset 0 0 0 1px rgba(168, 244, 37, .25);
}
.ex-panel--foto { place-items: center; }
.ex-panel--salidas { gap: .45cqw; }
.ex-tablero .ex-nota { color: #8b97ab; font-size: 1cqw; }

.ex-ficha-cara {
  display: grid;
  place-items: center;
  width: 100%;
  padding: .4cqw 0;
}
.ex-ficha-cara svg { width: 45%; height: auto; }
.ex-ficha-nombre {
  margin: 0;
  font-family: var(--face-pixel);
  font-size: 2.1cqw;
  letter-spacing: .04em;
  color: #fff;
  text-align: center;
}
.ex-ficha-texto { margin: 0; font-size: 1cqw; line-height: 1.45; color: #b9c3d4; }
.ex-dato { margin: 0; font-size: 1cqw; }
.ex-dato-k {
  margin-right: .5cqw;
  font-family: var(--face-pixel);
  font-size: 1cqw;
  letter-spacing: .08em;
  color: var(--lime);
}
.ex-etiqueta {
  font-family: var(--face-pixel);
  font-size: 1cqw;
  letter-spacing: .08em;
  color: #8b97ab;
}
.ex-etiqueta--bien { color: var(--lime); }
.ex-etiqueta--mal { color: #ff8fae; }
.ex-foto-grande { width: 100%; image-rendering: pixelated; box-shadow: 0 .3cqw .6cqw rgba(0, 0, 0, .5); }

/* --- Sonido, teclas y botones ----------------------------------------------------------- */
.ex-sonido { display: flex; align-items: center; gap: 1cqw; margin-bottom: .6cqw; }
.ex-rango {
  flex: 1;
  height: 2cqw;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.ex-rango::-webkit-slider-runnable-track {
  height: .8cqw;
  border-radius: .4cqw;
  background: linear-gradient(90deg,
    #6aa310 0 var(--llenado, 50%),
    rgba(90, 70, 40, .3) var(--llenado, 50%) 100%);
}
.ex-rango::-webkit-slider-thumb {
  appearance: none;
  width: 1.6cqw;
  height: 1.6cqw;
  margin-top: -.4cqw;
  border-radius: .35cqw;
  background: #2c2740;
}
.ex-rango::-moz-range-track { height: .8cqw; border-radius: .4cqw; background: rgba(90, 70, 40, .3); }
.ex-rango::-moz-range-progress { height: .8cqw; border-radius: .4cqw; background: #6aa310; }
.ex-rango::-moz-range-thumb { width: 1.5cqw; height: 1.5cqw; border: 0; border-radius: .35cqw; background: #2c2740; }
.ex-cifra {
  min-width: 6cqw;
  font-family: var(--face-pixel);
  font-size: 1.3cqw;
  color: #4a3b23;
}
.ex-cifra.mudo { color: #a2251f; }

.ex-teclas { display: grid; grid-template-columns: 1fr 1fr; gap: .4cqw 1cqw; }
.ex-tecla { display: flex; align-items: center; gap: .6cqw; }
.ex-tapas { display: flex; gap: .25cqw; flex: none; }
.ex-tapas kbd {
  display: grid;
  place-items: center;
  min-width: 1.7cqw;
  padding: .15cqw .35cqw;
  border-radius: .25cqw;
  background: #2c2740;
  color: #f3eee0;
  font-family: var(--face-pixel);
  font-size: 1cqw;
}

.ex-btn {
  padding: .7cqw .9cqw;
  border: 0;
  border-radius: .4cqw;
  background: rgba(157, 107, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(157, 107, 255, .4);
  color: #dfe6f3;
  font-family: var(--face-pixel);
  font-size: 1.2cqw;
  letter-spacing: .04em;
  text-align: left;
  cursor: pointer;
  transition: background 130ms ease, transform 130ms var(--ease-pop);
}
.ex-btn:hover { background: rgba(157, 107, 255, .3); transform: translateY(-.1cqw); }
.ex-btn--go {
  background: linear-gradient(180deg, rgba(168, 244, 37, .9), rgba(110, 175, 15, .9));
  box-shadow: inset 0 0 0 1px rgba(220, 255, 160, .6), 0 0 1.6cqw rgba(168, 244, 37, .35);
  color: #14200a;
}
.ex-btn--malo {
  background: rgba(255, 85, 102, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 85, 102, .5);
  color: #ffc9d2;
}
.ex-btn--chico {
  flex: none;
  padding: .45cqw .8cqw;
  font-size: 1cqw;
  background: rgba(90, 70, 40, .18);
  color: #4a3b23;
  box-shadow: inset 0 0 0 1px rgba(90, 70, 40, .4);
}

/* --- La barra de abajo -------------------------------------------------------------------- */
.ex-pie {
  position: absolute;
  left: 1.6%;
  bottom: 1.4%;
  width: 96.8%;
  height: 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5cqw;
}
.ex-volver {
  border: 0;
  background: transparent;
  color: #b9a7ee;
  font-family: var(--face-pixel);
  font-size: 1.35cqw;
  letter-spacing: .06em;
  cursor: pointer;
}
.ex-volver:hover { color: #fff; text-shadow: 0 0 1cqw rgba(157, 107, 255, .8); }
.ex-progreso { display: flex; align-items: center; gap: 1cqw; }
.ex-progreso-t {
  font-family: var(--face-pixel);
  font-size: 1.1cqw;
  letter-spacing: .08em;
  color: #8f9ec4;
}
.ex-progreso-cajas { display: flex; gap: .35cqw; }
.ex-progreso-caja {
  width: 2.2cqw;
  height: 1.3cqw;
  border-radius: .2cqw;
  background: rgba(120, 140, 90, .25);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
}
.ex-progreso-caja.on {
  background: var(--lime);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 0 .8cqw rgba(168, 244, 37, .7);
}

/* =============================================================================
   LAS LUCES DE LA MESA
   La imagen trae las llamas y los pilotos pintados, pero quietos. Encima se les
   pone un resplandor que respira: es lo que separa una foto de una vela de una
   vela. Sin interacción, que están solo para mirar.
============================================================================= */
.ex-luces { position: absolute; inset: 0; pointer-events: none; }
.ex-luz {
  position: absolute;
  width: var(--lado);
  height: var(--lado);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  mix-blend-mode: screen;
}

/* La vela: un halo cálido que tiembla. Dos animaciones a la vez —una de tamaño
   y otra de opacidad, con tiempos que no son múltiplos— para que el parpadeo no
   se repita nunca igual. */
.ex-luz--vela {
  background: radial-gradient(circle,
    rgba(255, 214, 130, .85) 0%,
    rgba(255, 150, 40, .38) 35%,
    transparent 70%);
  animation: ex-llama 1.7s ease-in-out infinite, ex-tiembla 0.43s ease-in-out infinite;
}
@keyframes ex-llama {
  0%, 100% { opacity: .85; }
  30% { opacity: 1; }
  55% { opacity: .62; }
  75% { opacity: .95; }
}
@keyframes ex-tiembla {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -51%) scale(1.09); }
}

/* Los pilotos: un punto de luz que late despacio, cada uno a su ritmo. Un led no
   tiembla como una llama, pulsa. */
.ex-luz--led-verde,
.ex-luz--led-rojo,
.ex-luz--led-azul { animation: ex-piloto 2.1s ease-in-out infinite; }
.ex-luz--led-verde { background: radial-gradient(circle, rgba(150, 255, 90, .9) 0%, transparent 65%); }
.ex-luz--led-rojo { background: radial-gradient(circle, rgba(255, 90, 80, .9) 0%, transparent 65%); }
.ex-luz--led-azul { background: radial-gradient(circle, rgba(110, 190, 255, .9) 0%, transparent 65%); }
@keyframes ex-piloto {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}


/* ==========================================================================
   LA TAPA DEL MENÚ DEL CUARTEL
   La imagen del fondo trae pintadas las cuatro pestañas del expediente, y en
   el cuartel no hay pestañas. Una chapa pintada que no responde a nada es peor
   que no tener chapa, así que se le pone encima un rectángulo del color de la
   mesa y desaparecen.
   ========================================================================== */
.ex-tapas-menu[hidden] { display: none; }
.ex-tapa { position: absolute; display: block; }
.ex-tapa--pestanas {
  left: 26.5%;
  top: 0;
  width: 46.5%;
  height: 15%;
  /* Con los bordes desvanecidos: un rectángulo de color plano deja una costura
     vertical que se ve más que las pestañas que venía a tapar. */
  background: linear-gradient(90deg,
    rgba(10, 11, 20, 0) 0%, #0a0b14 4%, #0a0b14 96%, rgba(10, 11, 20, 0) 100%);
}

/* ==========================================================================
   MARCAR COSAS
   Todo lo de aquí abajo es para un solo gesto: el de apuntar algo. Es el que
   más se repite en la partida y era el que menos contestaba —la casilla
   cambiaba de contenido y ya— así que ahora el sello CAE, la tachadura se
   DIBUJA y el sospechoso se queda con su firma encima. La clase `recien` solo
   la lleva el que acabas de tocar: sin eso se animaría media hoja de golpe.
   ========================================================================== */

/* El tic y la cruz caen a plomo y rebotan, como un sello de goma. */
.ex-prueba.recien .ex-casilla { animation: ex-sello 320ms var(--ease-pop, cubic-bezier(.2, 1.6, .4, 1)); }
@keyframes ex-sello {
  0% { transform: scale(2.4) rotate(-14deg); opacity: 0; }
  55% { transform: scale(.86) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Y la fila entera da un respingo hacia la derecha, como el carro de una
   máquina de escribir. Poco: lo justo para que el ojo lo pille. */
.ex-prueba.recien { animation: ex-respingo 260ms ease-out; }
@keyframes ex-respingo {
  0% { transform: translateX(0); }
  35% { transform: translateX(.45cqw); }
  100% { transform: translateX(0); }
}

/* Conseguida: un destello verde que se va solo. */
.ex-prueba--si.recien { animation: ex-respingo 260ms ease-out, ex-destello 520ms ease-out; }
@keyframes ex-destello {
  0% { background: rgba(168, 244, 37, .95); box-shadow: 0 0 2cqw rgba(168, 244, 37, .8); }
  100% { background: rgba(168, 244, 37, .38); box-shadow: inset 0 0 0 1px rgba(90, 70, 40, .3); }
}

/* Descartada: la raya se DIBUJA de izquierda a derecha en vez de aparecer. Es
   la diferencia entre tachar y que salga tachado. */
.ex-prueba-n { position: relative; }
.ex-prueba--no .ex-prueba-n { text-decoration: none; }
.ex-prueba--no .ex-prueba-n::after {
  content: '';
  position: absolute;
  left: -.15cqw;
  right: -.15cqw;
  top: 52%;
  height: .14cqw;
  background: #a2251f;
  transform-origin: left center;
}
.ex-prueba--no.recien .ex-prueba-n::after { animation: ex-tachar 220ms ease-out; }
@keyframes ex-tachar {
  0% { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* --- El sello del sospechoso ----------------------------------------------- */
.ex-sello {
  position: absolute;
  right: -.3cqw;
  bottom: -.35cqw;
  padding: .1cqw .35cqw;
  border: .16cqw solid #c0392b;
  border-radius: .2cqw;
  color: #c0392b;
  font-family: var(--face-pixel);
  font-size: .62cqw;
  letter-spacing: .08em;
  transform: rotate(-9deg) scale(.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.ex-sospechoso.elegido .ex-sello { opacity: .9; transform: rotate(-9deg) scale(1); }
/* Al señalarlo, el sello CAE encima. Es el gesto entero: el resto de la ficha
   solo se aparta un poco para dejarlo caer. */
.ex-sospechoso.elegido.recien .ex-sello { animation: ex-sello-cae 380ms var(--ease-pop, cubic-bezier(.2, 1.6, .4, 1)); }
@keyframes ex-sello-cae {
  0% { transform: rotate(-40deg) scale(3.2); opacity: 0; }
  60% { transform: rotate(-4deg) scale(.88); opacity: 1; }
  100% { transform: rotate(-9deg) scale(1); opacity: .9; }
}
.ex-sospechoso.elegido.recien { animation: ex-clavar 380ms var(--ease-pop, cubic-bezier(.2, 1.6, .4, 1)); }
@keyframes ex-clavar {
  0% { transform: translateY(-.7cqw) scale(1.06); }
  55% { transform: translateY(.15cqw) scale(.98); }
  100% { transform: translateY(0) scale(1); }
}
/* Y la chincheta se hunde en el papel. */
.ex-sospechoso.elegido.recien .ex-chincheta { animation: ex-chincheta-clava 380ms ease-out; }
@keyframes ex-chincheta-clava {
  0% { transform: translateY(-.9cqw) scale(1.5); }
  60% { transform: translateY(.1cqw) scale(.9); }
  100% { transform: translateY(0) scale(1); }
}

/* Descartar por pruebas también se ve: la ficha se apaga con una vuelta. */
.ex-sospechoso.fuera { transition: opacity 260ms ease, filter 260ms ease, transform 260ms ease; }
.ex-sospechoso.fuera.recien { animation: ex-descartar 300ms ease-out; }
@keyframes ex-descartar {
  0% { transform: rotate(0) scale(1); opacity: .9; }
  50% { transform: rotate(-2.5deg) scale(.94); }
  100% { transform: rotate(0) scale(1); opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-prueba.recien,
  .ex-prueba--si.recien,
  .ex-prueba.recien .ex-casilla,
  .ex-prueba--no.recien .ex-prueba-n::after,
  .ex-sospechoso.elegido.recien,
  .ex-sospechoso.elegido.recien .ex-sello,
  .ex-sospechoso.elegido.recien .ex-chincheta,
  .ex-sospechoso.fuera.recien { animation: none; }
}

/* La manía del sospechoso: lo que le hace distinto de los otros trece aparte de
   las tres pruebas. Va con un punto de énfasis porque es lo que se lee para
   decidir, no relleno de ambientación. */
.ex-mania {
  margin-top: .2cqw;
  /* Va en el tablón oscuro de la derecha, no en el papel: con la tinta marrón
     de la libreta no se leía. */
  color: #d8cfae;
  font-style: italic;
}

/* ==========================================================================
   QUE EL EXPEDIENTE SE MUEVA
   Todo lo de aquí abajo es para un gesto que se repite cien veces por partida:
   abrir esto, cambiar de página y marcar cosas. Antes se abría de golpe, la
   página cambiaba sin avisar y marcar una prueba era ver aparecer una uve en
   un cuadrito. Funcionaba, pero no CONTESTABA.
   ========================================================================== */

/* --- Al abrir: NADA. De golpe. -------------------------------------------
   Había aquí una entrada por piezas y se ha quitado a posta. Esto se abre en
   mitad de una partida, muchas veces con el bicho rondando: medio segundo de
   mesa montándose no se lee como un adorno, se lee como que el juego se ha
   quedado pillado. Lo que se mueve es lo que hace el jugador dentro. */

/* --- Al cambiar de pestaña: la hoja pasa ---------------------------------- */
.ex-hoja.ex-pasa { animation: ex-pagina 260ms ease-out; }
.ex-tablero.ex-pasa { animation: ex-pagina 260ms 50ms backwards ease-out; }
@keyframes ex-pagina {
  0% { transform: translateX(1.2cqw) rotate(.35deg); opacity: 0; filter: blur(1px); }
  100% { transform: none; opacity: 1; filter: none; }
}
/* La pestaña elegida se hunde un poco, como una tecla. */
.ex-pestana { transition: transform 130ms var(--ease-pop, cubic-bezier(.2, 1.5, .4, 1)); }
.ex-pestana:hover:not(.on) { transform: translateY(-.25cqw); }
.ex-pestana.on { transform: translateY(.15cqw); }

/* --- Marcar una prueba: el barrido de tinta ------------------------------- */
.ex-prueba { position: relative; overflow: hidden; }
/* Una lengua de luz cruza la fila de izquierda a derecha, como si acabaras de
   pasar el rotulador. Dura lo que dura el gesto y no deja nada. */
.ex-prueba.recien::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255, 255, 255, .75) 45%, transparent 90%);
  animation: ex-barrido 420ms ease-out;
}
@keyframes ex-barrido {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(105%); }
}
/* Y la casilla gira sobre sí misma al cambiar de marca, como una ficha que se
   voltea. Es el mismo gesto que hace la mano al sellar. */
.ex-prueba.recien .ex-casilla { animation: ex-voltea 340ms cubic-bezier(.2, 1.4, .4, 1); }
@keyframes ex-voltea {
  0% { transform: rotateY(90deg) scale(1.5); }
  55% { transform: rotateY(-12deg) scale(.9); }
  100% { transform: none; }
}

/* --- El contador de abajo: la casilla nueva brinca ------------------------ */
.ex-progreso-caja { transition: background 200ms ease, box-shadow 200ms ease; }
.ex-progreso-caja.nueva { animation: ex-brinca 420ms cubic-bezier(.2, 1.6, .4, 1); }
@keyframes ex-brinca {
  0% { transform: scaleY(.2) translateY(.5cqw); }
  55% { transform: scaleY(1.25) translateY(-.25cqw); }
  100% { transform: none; }
}

/* --- El sospechoso: cinta roja de tablón de comisaría --------------------- */
/* Dentro de la ficha, no cruzando a las vecinas: con catorce fichas pegadas,
   una cinta que se sale se lee como una raya suelta por encima de todas. */
.ex-cinta-roja {
  position: absolute;
  left: 2%;
  right: 2%;
  /* Por debajo del nombre: cruzada por el medio tapaba justo lo que hay que
     leer, que es de quién es la ficha. */
  top: 62%;
  height: .4cqw;
  background: linear-gradient(90deg, #d0392b, #ff6a5a 45%, #d0392b);
  box-shadow: 0 .1cqw .25cqw rgba(0, 0, 0, .45);
  transform: rotate(-6deg) scaleX(0);
  transform-origin: left center;
  opacity: 0;
  pointer-events: none;
}
.ex-sospechoso.elegido .ex-cinta-roja { opacity: .95; transform: rotate(-6deg) scaleX(1); }
/* Se TIENDE de un lado a otro al señalar: se ve el gesto, no el resultado. */
.ex-sospechoso.elegido.recien .ex-cinta-roja { animation: ex-tiende 380ms 60ms backwards ease-out; }
@keyframes ex-tiende {
  0% { transform: rotate(-6deg) scaleX(0); opacity: .95; }
  100% { transform: rotate(-6deg) scaleX(1); opacity: .95; }
}
/* Y el retrato se acerca un pelín: la ficha entera se pone en pie. */
.ex-sospechoso .ex-retrato { transition: transform 180ms var(--ease-pop, cubic-bezier(.2, 1.5, .4, 1)); }
.ex-sospechoso.elegido .ex-retrato { transform: scale(1.12); }
.ex-sospechoso.elegido {
  box-shadow: 0 0 0 .25cqw var(--lime), .2cqw .2cqw 0 rgba(0, 0, 0, .22),
    0 0 1.8cqw rgba(168, 244, 37, .35);
}

/* --- El descartado: la equis se dibuja ------------------------------------ */
/* UNA raya y no dos. Con la equis completa, catorce fichas tachadas eran una
   maraña de aspas y no se distinguía la que seguía en pie, que es justo lo que
   se viene a mirar. Una tachadura de lápiz basta. */
.ex-tachon {
  position: absolute;
  inset: 10%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom right,
    transparent calc(50% - .07cqw), rgba(120, 30, 24, .6) 50%, transparent calc(50% + .07cqw));
}
.ex-sospechoso.fuera .ex-tachon { opacity: 1; animation: ex-tacha 300ms ease-out; }
@keyframes ex-tacha {
  0% { opacity: 0; transform: scale(.4) rotate(-8deg); }
  100% { opacity: 1; transform: none; }
}
/* Descartado ya no se pone en blanco y negro del todo: se queda apagado y algo
   torcido, como una ficha que alguien ha descartado de un manotazo. */
.ex-sospechoso.fuera { opacity: .4; filter: grayscale(.85); transform: rotate(-1.2deg); }
.ex-sospechoso.fuera:hover { opacity: .7; transform: rotate(0); }

/* --- Y cuando solo queda uno --------------------------------------------- */
.ex-cuantos.clavado { animation: ex-late 1s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .ex-hoja.ex-pasa,
  .ex-tablero.ex-pasa,
  .ex-prueba.recien::before,
  .ex-prueba.recien .ex-casilla,
  .ex-progreso-caja.nueva,
  .ex-sospechoso.elegido.recien .ex-cinta-roja,
  .ex-sospechoso.fuera .ex-tachon { animation: none; }
}

/* ==========================================================================
   LOS CACHARROS DE LA MESA
   La imagen del fondo tiene pintados un papel clavado, un medidor con su
   pantalla verde y un marco vacío a la derecha. Eran decorado; ahora los tres
   dicen algo, y las medidas salen de mirar la imagen píxel a píxel.
   ========================================================================== */

/* --- El papel: el nombre, cuando ya solo puede ser uno ------------------- */
.ex-papel {
  position: absolute;
  left: 2%;
  top: 34.5%;
  width: 11.5%;
  height: 13%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .3cqw;
  padding: .4cqw;
  text-align: center;
  /* Escrito a mano en un papel clavado: va torcido, como todo lo que se
     escribe deprisa. */
  transform: rotate(-1.2deg);
}
.ex-papel-t {
  font-family: var(--face-pixel);
  font-size: .78cqw;
  letter-spacing: .08em;
  color: #8a7a5e;
}
.ex-papel-p { font-size: .8cqw; color: #8a7a5e; }
.ex-papel-n {
  font-family: var(--face-pixel);
  font-size: 1.35cqw;
  line-height: 1.1;
  letter-spacing: .02em;
  color: #2f2a22;
}
/* Resuelto: el nombre en rojo de rotulador y un subrayado. Es EL momento del
   juego y merecía más que una línea de texto perdida en la hoja. */
.ex-papel.resuelto .ex-papel-t { color: #b3392c; }
.ex-papel.resuelto .ex-papel-n {
  color: #b3392c;
  text-decoration: underline;
  text-decoration-thickness: .12cqw;
  text-underline-offset: .2cqw;
  animation: ex-papel-cae 420ms cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes ex-papel-cae {
  0% { transform: scale(1.6) rotate(-6deg); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* --- El medidor: tu cordura, en verde de pantalla ------------------------ */
.ex-emf {
  position: absolute;
  left: 5%;
  top: 58%;
  width: 5.6%;
  height: 9%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .15cqw;
  /* Sin fondo: el verde de la pantallita ya está pintado en la imagen y lo que
     va aquí son los números encendidos encima. */
  font-family: var(--face-pixel);
  color: #b6ff6a;
  text-shadow: 0 0 .5cqw rgba(150, 255, 90, .9), 0 0 1.2cqw rgba(120, 255, 60, .5);
}
.ex-emf-n { font-size: 2cqw; line-height: 1; }
.ex-emf-u { font-size: .9cqw; opacity: .8; }
/* Por debajo de treinta y cinco parpadea en rojo: es cuando puede empezar una
   caza en cualquier momento, y eso hay que verlo sin leer un número. */
.ex-emf.bajo {
  color: #ff6a5a;
  text-shadow: 0 0 .5cqw rgba(255, 90, 70, .9);
  animation: ex-emf-alarma 900ms steps(1) infinite;
}
@keyframes ex-emf-alarma { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  .ex-papel.resuelto .ex-papel-n,
  .ex-emf.bajo { animation: none; }
}

/* Con el expediente abierto, los carteles del juego se apartan: por el agujero
   de la ventana se ve lo que haya debajo, y debajo están también ellos. */
body.con-expediente #hud { display: none; }