/* =============================================================================
   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;
  /* LA MESA NO ES PIXEL ART, ASÍ QUE NO SE PINTA COMO SI LO FUERA. La imagen
     viene pintada a 1664x945 y en cualquier monitor de hoy se ve más grande que
     eso; con `pixelated`, ampliar significa repetir píxeles a lo bruto y la
     madera, las velas y los brillos salían a escalones. Suavizándola, lo que se
     ve es una ilustración un poco más grande, que es lo que es.
     El pixel art de dentro —las polaroids, la foto grande— lleva su propio
     `pixelated` puesto a mano, que ahí sí hace falta. */
  image-rendering: auto;
  /* 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; }

/* -----------------------------------------------------------------------------
   EL TOPE DE TRES PRUEBAS
   Ningún fantasma deja más de tres, así que la libreta ya no deja marcar las
   siete. Cuando se intenta la cuarta, la casilla rebota y se dice por qué: un
   botón que no hace nada y no explica nada se lee como una avería.
-------------------------------------------------------------------------------- */
.ex-prueba.nocabe {
  animation: ex-rebote 340ms cubic-bezier(.36, .07, .19, .97);
  box-shadow: inset 0 0 0 .12cqw rgba(180, 40, 40, .7);
}
@keyframes ex-rebote {
  10%, 90% { transform: translateX(-.25cqw); }
  30%, 70% { transform: translateX(.4cqw); }
  50% { transform: translateX(-.4cqw); }
}
.ex-tope {
  margin: .3cqw 0 0;
  padding: .5cqw .8cqw;
  border-radius: .4cqw;
  background: rgba(162, 37, 31, .12);
  box-shadow: inset 0 0 0 1px rgba(162, 37, 31, .3);
  font-size: 1.02cqw;
  line-height: 1.4;
  color: #8d2b22;
}
/* Con las tres puestas, el contador se enciende entero: es la señal de «ya
   tienes todo lo que se puede tener», que es justo cuando hay que ir a mirar
   quién queda en pie. */
.ex-progreso.lleno .ex-progreso-t { color: var(--lime); }

/* -----------------------------------------------------------------------------
   LA PÁGINA DE SISTEMA: UNA HOJA DE CUADERNO, NO UN PANEL

   Es la única página de la libreta que NO crece: dos ajustes y siete teclas,
   siempre los mismos. Y como no crece, se puede componer como se compone una
   página de papel en vez de dejar que el contenido caiga donde caiga.

   LO QUE LA HACE PARECER UNA PÁGINA Y NO UNA LISTA FLOTANDO:

   1. MÁRGENES DE VERDAD, y los cuatro. El contenido llegaba al canto del papel
      por arriba y por la derecha —el ajuste de volumen se estiraba hasta el
      filo— y eso es lo que la hacía parecer una caja de interfaz pegada encima
      del dibujo. Un cuaderno tiene aire alrededor de lo escrito.
   2. LA RAYA DE MARGEN, la roja de la izquierda. Es lo primero que dice
      «cuaderno» sin decir nada, y de paso da una vertical de la que colgar
      todo: los rótulos, la tira del volumen y las teclas arrancan de la misma
      raya, que es lo que hace que se vea cuadrado.
   3. RENGLONES. Cada tecla se apoya en su línea, como en un cuaderno rayado. Sin
      ellos, las siete filas eran siete cosas sueltas en medio de un vacío; con
      ellos, el sitio en blanco de la derecha se lee como PÁGINA y no como hueco.
   4. VERSALITAS PARA LO QUE HACE CADA TECLA. La misma serif de versalitas que
      titula la web (`--face-titular`): a esta letra se le lee de lejos, es la
      que se usa en las leyendas de los planos de toda la vida y le pone a la
      página el aire de documento que la de interfaz no le puede poner. Las
      teclas siguen en letra de píxel, que es la del juego.
-------------------------------------------------------------------------------- */
.ex-hoja--sistema {
  display: flex;
  flex-direction: column;
  gap: 1.1cqw;
  /* Cabe entero: sin scroll y sin barra que ensucie el papel. */
  overflow: hidden;
  /* Arriba, derecha, abajo, izquierda. La izquierda deja sitio a la raya. */
  padding: 1.7cqw 4.2cqw 1.7cqw 3.8cqw;
}

/* La raya de margen. Va del primer renglón al último, no de canto a canto: una
   raya que llega hasta el borde del papel parece un borde de caja. */
.ex-hoja--sistema::before {
  content: '';
  position: absolute;
  left: 2.5cqw;
  top: 1.7cqw;
  bottom: 1.7cqw;
  width: .12cqw;
  background: rgba(168, 66, 52, .32);
}

/* Los rótulos siguen midiendo lo que mide su palabra. En columna, un hijo se
   estira a todo lo ancho por defecto, y una brocha de lado a lado ya no es una
   brocha: es una barra de título. */
.ex-hoja--sistema .ex-rotulo { align-self: flex-start; margin: 0; }

/* --- El ajuste, en su tira de papel ------------------------------------------ */
.ex-hoja--sistema .ex-sonido {
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  margin: 0;
  padding: .8cqw 1.2cqw;
  background: rgba(255, 255, 255, .42);
  box-shadow: inset 0 0 0 1px rgba(90, 70, 40, .26);
}
.ex-campo {
  flex: none;
  font-family: var(--face-titular);
  font-size: 1.2cqw;
  letter-spacing: .07em;
  color: #6b5c46;
}
.ex-hoja--sistema .ex-rango { flex: 1; min-width: 0; }

/* --- Las siete teclas, en renglones ------------------------------------------ */
.ex-hoja--sistema .ex-teclas {
  flex: 1;
  align-content: space-evenly;
  /* UNA SOLA COLUMNA, y no dos. Son siete: en dos columnas ocupan cuatro filas,
     dejan un tercio de página en blanco y encima obligan a leer en zigzag para
     encontrar una. En una columna se leen de arriba abajo como una lista de
     verdad y caben más grandes. */
  grid-template-columns: 1fr;
  gap: 0;
}
.ex-hoja--sistema .ex-tecla {
  gap: 1.4cqw;
  padding-bottom: .42cqw;
  border-bottom: .1cqw solid rgba(90, 70, 40, .17);
}
.ex-hoja--sistema .ex-tecla:last-child { border-bottom: 0; }

/* LAS TECLAS, EN SU COLUMNA. Sin un ancho fijo cada explicación empieza donde
   acaben sus teclas —«andar» detrás de cuatro, «soltar lo que lleves» detrás de
   una— y la lista queda con el borde izquierdo del texto haciendo eses. Con la
   columna reservada, todas las explicaciones arrancan en la misma raya. El ancho
   es el de la fila más larga: cuatro teclas y sus tres huecos. */
.ex-hoja--sistema .ex-tapas { gap: .4cqw; min-width: 10.4cqw; }
.ex-hoja--sistema .ex-tapas kbd {
  min-width: 2.1cqw;
  padding: .26cqw .44cqw;
  border-radius: .3cqw;
  font-size: 1.25cqw;
  /* Una sombra dura debajo: una tecla tiene canto, y con el canto se lee como
     algo que se pulsa en vez de como una etiqueta oscura. */
  box-shadow: 0 .18cqw 0 rgba(20, 16, 34, .55);
}
.ex-hoja--sistema .ex-nota {
  margin: 0;
  font-family: var(--face-titular);
  font-size: 1.24cqw;
  letter-spacing: .03em;
  line-height: 1.2;
  color: #4a3f30;
}

/* -----------------------------------------------------------------------------
   EL TABLÓN DEL EQUIPO, ENCAJADO EN LOS HUECOS PINTADOS

   La imagen del fondo trae el tablón con DOS recuadros dentro: uno alto arriba
   y otro más bajo debajo. Hasta ahora el contenido se apilaba encima de los dos
   sin hacerles caso —y además desbordaba el marco por los lados, porque la caja
   era más ancha que el dibujo—, así que se leía como una lista pegada sobre una
   ilustración en vez de como un tablón con cosas dentro.

   LAS MEDIDAS SALEN DE LA PROPIA IMAGEN, no de mirar y aproximar: leyendo dónde
   cambia el brillo en el archivo (1664 x 945) los recuadros están en

     hueco de arriba   x 1137..1437   y 232..527
     hueco de abajo    x 1137..1437   y 551..702

   que son los porcentajes de aquí abajo. Las tres filas de la rejilla —título,
   hueco alto, hueco bajo— y los dos espacios entre ellas reproducen esa misma
   proporción, así que el contenido cae dentro del dibujo a cualquier tamaño.
-------------------------------------------------------------------------------- */
.ex-tablero--equipo {
  /* 1137/1664 y 170/945: el borde de arriba del tablón, ya por dentro del marco. */
  left: 68.33%;
  top: 17.99%;
  width: 18.03%;
  height: 56.4%;
  display: grid;
  /* título · aire · hueco alto · aire · hueco bajo */
  grid-template-rows: 10.92% .75% 55.56% 4.33% 28.44%;
  gap: 0;
  padding: 0;
  overflow: visible;
}
.ex-tablero--equipo .ex-rotulo--verde {
  grid-row: 1;
  align-self: center;
}
.ex-tablero--equipo .ex-panel--salidas {
  grid-row: 3;
  /* Los botones se reparten por el hueco en vez de amontonarse arriba: el
     recuadro pintado mide lo que mide y dejarlo medio vacío se ve. */
  align-content: space-evenly;
  gap: .6cqw;
  /* El recuadro ya está pintado en la imagen. Repintarlo encima con otro borde
     deja dos marcos, uno dentro del otro, descuadrados entre sí por un pelo. */
  background: transparent;
  box-shadow: none;
  padding: .8cqw;
}
.ex-tablero--equipo .ex-panel--gente {
  grid-row: 5;
  align-content: center;
  gap: .35cqw;
  padding: .7cqw .8cqw;
  background: transparent;
  box-shadow: none;
}

/* --- La cuadrilla ----------------------------------------------------------- */
.ex-colega {
  display: flex;
  align-items: center;
  gap: .7cqw;
  min-width: 0;
}
.ex-colega-cara {
  flex: none;
  /* La cara sale de la lámina del muñeco: aquí sí se pinta a lo bruto, que es
     pixel art de verdad y suavizarlo lo emborrona. */
  image-rendering: pixelated;
  width: 2.4cqw;
  height: 2.4cqw;
  background-size: auto 12cqw;
}
.ex-colega-n {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--face-ui);
  font-size: 1.05cqw;
  color: #cfd6e6;
}
.ex-colega-tu {
  flex: none;
  padding: .1cqw .5cqw;
  border-radius: .3cqw;
  background: rgba(168, 244, 37, .18);
  font-family: var(--face-pixel);
  font-size: .8cqw;
  letter-spacing: .08em;
  color: var(--lime);
}
.ex-colega-tu--mal { background: rgba(255, 85, 102, .18); color: #ffc9d2; }
.ex-colega--caido .ex-colega-cara { filter: grayscale(1); opacity: .45; }
.ex-colega--caido .ex-colega-n { color: #7d8598; text-decoration: line-through; }
.ex-solo { margin: 0; text-align: center; font-size: 1cqw; line-height: 1.5; }