/* =============================================================================
   La partida: el lienzo a pantalla completa y el HUD montado encima.
   Solo asoma lo imprescindible: la casa a oscuras es lo que importa.
============================================================================= */

.game {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #05040c;
}
.game[hidden] { display: none; }

#game-canvas { position: absolute; inset: 0; display: grid; place-items: center; }
#game-canvas canvas { display: block; image-rendering: pixelated; }

.hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--gap);
  font-family: var(--face-ui);
}

/* En pantallas grandes, el HUD entero crece con ellas. Un panel de 330 px se
   lee de sobra en un portátil y se queda en un sello en un monitor de 27, y no
   hay ganas de mantener dos juegos de medidas: `zoom` estira lo que ya está
   medido, tipografías y sombras incluidas. */
@media (min-width: 1700px) { .hud { zoom: 1.2; } }
@media (min-width: 2300px) { .hud { zoom: 1.45; } }

/* Arriba: objetivos a la izquierda, cacharros en medio, cordura a la derecha.
   Con tres columnas la barra de cacharros queda centrada de verdad y no se
   mueve de sitio porque a alguien se le alargue el nombre. */
.hud-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--gap);
}
.hud-top > :last-child { justify-self: end; }

.hud-bottom {
  display: grid;
  grid-template-columns: 1fr minmax(0, 2fr) 1fr;
  align-items: end;
  gap: var(--gap);
}
.hud-centro { display: grid; gap: 12px; justify-self: center; width: min(760px, 100%); }
.hud-hueco { min-height: 1px; }
.hud-net { display: flex; align-items: center; gap: 8px; }

/* =============================================================================
   LA BARRA DE CACHARROS (arriba, en medio)
   Tres huecos con su número. El que llevas en la mano se enciende, y su
   pantalla sale abajo a la derecha.
============================================================================= */
/* `hidden` tiene que ganarle al `display` de la clase: si no, esconder la
   barra en el cuartel no la esconde. */
.hb[hidden] { display: none; }
.hb { display: flex; gap: 12px; pointer-events: auto; }
.hb-hueco {
  position: relative;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(5, 4, 12, .72);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14);
  transition: box-shadow 140ms ease, background 140ms ease, transform 140ms var(--ease-pop);
}
.hb-hueco.vacio { background: rgba(5, 4, 12, .45); }
.hb-hueco.on {
  background: rgba(168, 244, 37, .16);
  box-shadow: inset 0 0 0 2px var(--lime), 0 0 20px rgba(168, 244, 37, .3);
  transform: translateY(2px);
}
.hb-tecla {
  position: absolute;
  top: 5px;
  left: 10px;
  font-family: var(--face-pixel);
  font-size: 20px;
  color: rgba(255, 255, 255, .45);
}
.hb-hueco.on .hb-tecla { color: var(--lime); }

/* El piloto de lo que llevas encendido y la cuenta de lo que se gasta. */
.hb-on {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #46d34a;
  box-shadow: 0 0 10px rgba(70, 211, 74, .9);
  animation: hb-latido 1.2s ease-in-out infinite;
}
@keyframes hb-latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.hb-cargas {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-family: var(--face-pixel);
  font-size: 17px;
  color: rgba(255, 255, 255, .8);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .8);
}

.icono-obj {
  display: block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5));
}

/* =============================================================================
   LOS OBJETIVOS (arriba, izquierda)
============================================================================= */
.obj {
  justify-self: start;
  min-width: 330px;
  max-width: 430px;
  padding: 15px 20px 17px;
  border-radius: 16px;
  background: rgba(5, 4, 12, .72);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}
/* Escondidos, pero SIN quitarlos de la rejilla: si desaparecen del todo, la
   barra de cacharros se va al hueco que dejan y deja de estar centrada. */
.obj[hidden], .cor[hidden] { visibility: hidden; }
.ap[hidden] { display: none; }
.obj-titulo, .cor-titulo {
  margin: 0 0 11px;
  font-family: var(--face-pixel);
  font-size: 23px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lime);
}
.obj-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.obj-item {
  display: flex;
  gap: 10px;
  font-size: 17px;
  line-height: 1.3;
  color: rgba(255, 255, 255, .8);
}
.obj-marca { color: rgba(255, 255, 255, .4); }
.obj-item.hecho { color: rgba(255, 255, 255, .42); text-decoration: line-through; }
.obj-item.hecho .obj-marca { color: var(--lime); text-decoration: none; }

/* =============================================================================
   LA CORDURA DEL EQUIPO (arriba, derecha)
============================================================================= */
.cor {
  min-width: 340px;
  padding: 15px 20px 17px;
  border-radius: 16px;
  background: rgba(5, 4, 12, .72);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}
.cor-prom {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.cor-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.cor-fila { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.cor-nombre {
  font-family: var(--face-pixel);
  font-size: 23px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .82);
}
.cor-nombre.yo { color: #fff; }
.cor-num { font-family: var(--face-pixel); font-size: 23px; }
.cor-num.bien { color: var(--lime); }
.cor-num.regular { color: #ffd166; }
.cor-num.mal { color: #ff5d5d; }

/* =============================================================================
   EL APARATO EN LA MANO (abajo, derecha)
   Cada cacharro enseña lo suyo: el EMF sus luces, el termómetro sus grados.
============================================================================= */
.ap {
  justify-self: end;
  width: 330px;
  padding: 15px 18px 17px;
  border-radius: 16px;
  background: rgba(5, 4, 12, .78);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14);
}
.ap-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ap-nombre {
  font-family: var(--face-pixel);
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: .04em;
  color: #fff;
}
.ap-pantalla {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 14px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.ap-lectura { margin: 0; font-size: 16px; color: rgba(255, 255, 255, .62); text-align: center; }
.ap-pista { margin: 0; font-size: 16px; line-height: 1.35; color: rgba(255, 255, 255, .78); text-align: center; }
.ap-numero {
  margin: 0;
  font-family: var(--face-pixel);
  font-size: 54px;
  line-height: 1;
  color: var(--lime);
  transition: color .25s ease;
}
/* El termómetro se pone azul al enfriarse: el número solo, sin adornos, ya
   avisa por el rabillo del ojo de que has entrado donde no debías. */
/* Lo que ha contestado la spirit box: entrecomillado y en grande, porque es
   una palabra suelta y tiene que leerse de un vistazo desde lejos. */
.ap-voz {
  margin: 0;
  font-family: var(--face-pixel);
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 14px rgba(168, 244, 37, .45);
}

.ap-numero.fresco { color: #7fd4ff; }
.ap-numero.frio {
  color: #4fe0ff;
  text-shadow: 0 0 18px rgba(79, 224, 255, .55);
}
/* Y el pie se enciende cuando lo que marca VALE COMO PRUEBA, que es el momento
   que hay que cazar: nivel cinco, o bajo cero. */
.ap-lectura.prueba {
  color: var(--lime);
  font-weight: 700;
  letter-spacing: .04em;
}
/* =============================================================================
   EL VISOR DE LAS CÁMARAS
   El hueco va TRANSPARENTE: por ahí se ve el lienzo del juego, donde una
   segunda cámara dibuja el mundo más de cerca y con su filtro. Aquí solo está
   el marco, el rótulo y las rayas de tubo.
============================================================================= */
.ap-visor {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  /* LA VIÑETA, MUY BAJADA. Estaba en 40px de negro al 80 %, y en una pantallita
     de trescientos píxeles eso no es una viñeta: es una tapa. La imagen de la
     cámara salía casi negra y para compensarlo se le subía el brillo a la
     escena, con lo que la parte alumbrada se quemaba. Se ve MEJOR quitando la
     tapa que subiendo la luz. */
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22), inset 0 0 12px rgba(0, 0, 0, .4);
  overflow: hidden;
}
.ap-visor-rec {
  position: absolute;
  top: 7px;
  left: 9px;
  z-index: 2;
  font-family: var(--face-pixel);
  font-size: 15px;
  letter-spacing: .08em;
  color: #ff5d5d;
  text-shadow: 0 0 8px rgba(255, 93, 93, .8);
  animation: ap-rec 1.6s steps(1) infinite;
}
@keyframes ap-rec { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.ap-visor-dato {
  position: absolute;
  right: 9px;
  bottom: 7px;
  z-index: 2;
  font-family: var(--face-pixel);
  font-size: 14px;
  color: rgba(255, 255, 255, .75);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .8);
}
/* Las rayas de tubo y las esquinas quemadas, que es lo que hace que parezca
   una pantallita y no un recorte del juego. */
.ap-visor-rayas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 72%, rgba(0, 0, 0, .32)),
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, .04) 0 1px,
      transparent 1px 4px);
}
/* ==========================================================================
   EL PANEL DE UNA CÁMARA NO TIENE FONDO. NINGUNO.

   Esto era el fallo de la imagen «apagada» del visor, y costó dar con él: la
   pantallita no es un dibujo, es una SEGUNDA CÁMARA de Phaser pintando en el
   lienzo, que está DEBAJO de todo el HTML. El panel del aparato llevaba un
   fondo negro al 78 % y la caja de la pantalla otro al 45 %: entre los dos se
   quedaban con tres cuartas partes de la imagen antes de que llegara al ojo.
   Para compensarlo se le subía el brillo a la escena, y de ahí venía lo de
   «demasiada luz»: lo poco que se veía salía quemado y el resto seguía negro.

   Así que cuando el aparato es una cámara, el panel se queda sin fondo y cada
   trozo de texto se pone el suyo. Se ve la imagen tal cual, y el filtro puede
   ser suave, que es cuando el blanco y negro se ve bien.
   ========================================================================== */
.ap-pantalla:has(.ap-visor) { background: none; box-shadow: none; padding: 0; }
.ap:has(.ap-visor) { background: none; box-shadow: none; padding: 0; }
.ap:has(.ap-visor) .ap-cabeza,
.ap:has(.ap-visor) .ap-pie,
.ap:has(.ap-visor) .ap-pista,
.ap:has(.ap-visor) .ap-lectura {
  margin: 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(5, 4, 12, .82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.ap:has(.ap-visor) .ap-cabeza { margin-bottom: 8px; }
.ap:has(.ap-visor) .ap-pantalla { gap: 8px; }

/* Los usos que le quedan a la sal o a las pastillas, como balas. */
.ap-cargas { display: flex; gap: 5px; }
.ap-carga {
  width: 12px;
  height: 22px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.ap-carga.on { background: var(--lime); box-shadow: 0 0 8px rgba(168, 244, 37, .6); }

.ap-aviso {
  margin: 4px 0 0;
  min-height: 1em;
  text-align: center;
  font-size: 12.5px;
  color: #ffd166;
}
.ap-aviso.parpadeo { animation: inv-parpadeo 520ms ease; }

.ap-pie {
  margin: 11px 0 0;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(255, 255, 255, .45);
}

/* Las cinco luces del EMF. */
.ap-leds { display: flex; gap: 6px; }
.ap-led {
  width: 22px;
  height: 42px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.ap-led--verde.on { background: #46d34a; box-shadow: 0 0 10px rgba(70, 211, 74, .8); }
.ap-led--ambar.on { background: #ffd166; box-shadow: 0 0 10px rgba(255, 209, 102, .8); }
.ap-led--rojo.on { background: #ff4d4d; box-shadow: 0 0 12px rgba(255, 77, 77, .85); }

/* La estática del spirit box. */
.ap-onda { display: flex; align-items: flex-end; gap: 5px; height: 48px; }
.ap-onda i {
  width: 6px;
  border-radius: 3px;
  background: rgba(168, 244, 37, .75);
  animation: ap-onda 900ms ease-in-out infinite alternate;
}
@keyframes ap-onda {
  from { transform: scaleY(.5); opacity: .5; }
  to { transform: scaleY(1); opacity: 1; }
}

/* La muestra de color de los cacharros que dan luz. */
.ap-luz {
  width: 100%;
  height: 42px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  transition: background 200ms ease, box-shadow 200ms ease;
}
.ap-luz--blanca.on { background: rgba(255, 246, 214, .85); box-shadow: 0 0 16px rgba(255, 246, 214, .6); }
.ap-luz--uv.on { background: rgba(154, 77, 255, .85); box-shadow: 0 0 18px rgba(154, 77, 255, .7); }
.ap-luz--dots.on { background: rgba(53, 255, 150, .8); box-shadow: 0 0 18px rgba(53, 255, 150, .6); }
.ap-luz--fuego.on { background: rgba(255, 177, 77, .85); box-shadow: 0 0 18px rgba(255, 177, 77, .6); }

/* El chat, abajo en medio: se ve siempre, tenue, y se despierta al escribir. */
.hud-chat { pointer-events: auto; width: 100%; opacity: .72; transition: opacity 160ms ease; }
.hud-chat:hover, .hud-chat.on { opacity: 1; }
.hud-chat .dev-slot { height: 68px; gap: 14px; padding: 0 20px; border-radius: 14px; }
.hud-chat input { cursor: text; font-size: 21px; }
.hud-chat .marker { font-size: 22px; }

.hud-log {
  width: 100%;
  max-height: 200px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  font-family: var(--face-ui);
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.85);
}
.hud-log .from { color: var(--slime); margin-right: 6px; }
/* Las líneas se van solas. Antes se quedaban las seis últimas clavadas para
   siempre y al volver al cuartel seguían ahí los susurros de la partida
   anterior; ahora cada una tiene su reloj y se desvanece sin dar el cante. */
.hud-log > div {
  transition: opacity 900ms ease, transform 900ms ease;
}
.hud-log > div.yendose {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
/* La voz del fantasma: en cursiva y con el nombre en rojo. Que no se confunda
   con un compañero hablando, o alguien acabará contestándole. */
.hud-log .fantasma { font-style: italic; color: #ffd9e6; text-shadow: 0 0 12px rgba(255, 60, 120, .45); }

/* LO QUE DICEN LOS MUERTOS. En azul frío y algo apagado: hablan entre ellos y
   los vivos no les leen, así que quien ve esto es porque ya está del otro lado.
   Que se distinga del chat normal de un vistazo es lo que impide contestarle a
   alguien que ya no puede oírte. */
.hud-log .muerto { color: #9fd4ff; opacity: .82; }
.hud-log .muerto .from { color: #6fb6e8; }
.hud-log .fantasma .from { color: #ff5d8f; }
.hud-log .sys { color: var(--ink-faint); }

/* Si se cae el enlace ya no hay juego: se tapa y se dice. */
.hud-lost {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(5, 4, 12, 0.9);
  pointer-events: auto;
}
.hud-lost[hidden] { display: none; }
.hud-lost p {
  font-family: var(--face-ui);
  font-size: var(--t-small);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--danger);
  text-align: center;
}

/* =============================================================================
   AVISO DE PANTALLA COMPLETA
   El navegador solo concede pantalla completa si viene de un gesto reciente del
   usuario, y ese permiso caduca en segundos. Si al entrar ya ha caducado, se
   pide con este botón, que sí cuenta como gesto.
============================================================================= */
.fs-nudge {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 20px;
  padding: 24px;
  background: rgba(5, 4, 12, 0.92);
  backdrop-filter: blur(6px);
  pointer-events: auto;
  text-align: center;
}
.fs-nudge[hidden] { display: none; }
.fs-nudge p {
  margin: 0;
  font-family: var(--face-pixel);
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

/* =============================================================================
   MENÚ DE PAUSA
   Cajas, cinta y botones del Basic GUI Bundle. Ojo: ese pack NO es pixel art,
   son PNG vectoriales de 1500 px, así que aquí NO se pone `image-rendering:
   pixelated` (dejaría los bordes dentados) y el 9-slice se corta por donde acaba
   la esquina redondeada del original: 200 px en la caja, 175 px en los botones.

   POSICIÓN FIJA, no absoluta: el menú aparece justo cuando el navegador SALE de
   pantalla completa, y en ese instante el lienzo del juego todavía tiene el
   tamaño de antes. Colgado del lienzo, el menú salía descentrado; anclado a la
   ventana, cae siempre en el medio.
============================================================================= */
.pause {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 45%, rgba(24, 10, 44, .72), rgba(4, 3, 10, .92));
  backdrop-filter: blur(6px);
  pointer-events: auto;
  animation: pause-in 200ms var(--ease-out);
}
.pause[hidden] { display: none; }
@keyframes pause-in { from { opacity: 0; } to { opacity: 1; } }

.pause-box {
  display: grid;
  justify-items: stretch;
  width: min(392px, 90vw);
  padding: 0 20px 18px;
  border: 32px solid transparent;
  border-image: url('../assets/gui/Box_Rounded.png') 200 fill stretch;
  animation: pause-box 300ms var(--ease-pop);
}
@keyframes pause-box {
  from { transform: scale(.9) translateY(10px); }
  to { transform: none; }
}

/* La cinta sube por encima del borde de la caja. Su proporción es la del PNG
   (1139x456 = 2,5) para que la curva no se deforme. */
.pause-banner {
  justify-self: center;
  width: 296px;
  max-width: 100%;
  aspect-ratio: 2.5;
  margin: -62px 0 6px; /* la curva baja en el centro: sin este aire roza el botón */
  display: grid;
  place-items: center;
  background: url('../assets/gui/Banner_Grey.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}

/* CENTRAR DE VERDAD, no matemáticamente. Jersey 25 reserva mucho hueco encima y
   debajo de la letra, así que una caja centrada deja el texto visualmente alto;
   se baja un pelo a mano. La cinta además es cóncava, y su hueco útil está algo
   por encima de su centro geométrico: de ahí que el ajuste sea pequeño. */
.pause-title {
  margin: 0;
  transform: translateY(3px);
  font-family: var(--face-pixel);
  font-size: 42px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .5);
}

.pause-acts { display: grid; gap: 12px; }

/* El botón es un 9-slice: su alto lo pone el borde (24 px arriba y abajo) más
   la caja de contenido. La palabra se centra en esa caja y se baja 2 px por lo
   mismo que el rótulo: la fuente reserva más aire arriba que abajo. */
.pause-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 26px;
  height: 26px;
  border: 24px solid transparent;
  border-image: url('../assets/gui/ButtonText_Large_GreyOutline_Round.png') 175 fill stretch;
  background: none;
  color: #fff;
  font-family: var(--face-pixel);
  font-size: 22px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: transform 140ms var(--ease-pop), filter 140ms ease;
}
/* `display: flex` gana a `[hidden]`, así que hay que decirlo a mano o el botón
   de dejar la sala se ve siempre, incluso jugando en solitario. */
.pause-btn[hidden] { display: none; }
.pause-btn:hover { transform: translateY(-2px); filter: brightness(1.14); }
.pause-btn:active { transform: translateY(1px); }
.pause-btn--go { border-image-source: url('../assets/gui/ButtonText_Large_Green_Round.png'); }

.pause-hint {
  margin: 12px 6px 0;
  text-align: center;
  font-family: var(--face-ui);
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .58);
}

/* =============================================================================
   EL CÓDIGO DE LA SALA
   Arriba a la izquierda y discreto: se lee cuando hace falta y no molesta el
   resto del rato. Se pincha para copiar.
============================================================================= */
.sala {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 30;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 9px 15px 8px;
  border: 0;
  border-radius: 12px;
  background: rgba(9, 7, 18, 0.82);
  box-shadow: inset 0 0 0 1px rgba(168, 244, 37, 0.35), 0 6px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
  pointer-events: auto;
  transition: transform 150ms var(--ease-pop), box-shadow 150ms ease;
}
.sala[hidden] { display: none; }
.sala:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--lime), 0 8px 24px rgba(0, 0, 0, .55); }

.sala-lab {
  font-family: var(--face-ui);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sala-code {
  font-family: var(--face-pixel);
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--lime);
}
.sala-gente { font-family: var(--face-ui); font-size: 11px; color: var(--ink-dim); }

/* =============================================================================
   EL TERMINAL DE PARTIDAS (la tecla E)

   FUERA LAS CAJAS GRISES DEL PACK. Eran las mismas del menú de pausa y en una
   pantalla de este tamaño se veían por lo que son: plástico gris de kit de
   interfaz, con botones de pastilla, en un juego que va de una casa a oscuras.
   Y encima obligaban a una caja estrecha, así que elegir casa vivía escondida
   detrás de un botón que llevaba a otra pantalla.

   Ahora es un panel ANCHO y oscuro, de dos columnas, pintado con CSS: madera
   quemada, un filo cálido y el rótulo grabado. Sin una sola imagen de más.
============================================================================= */
.term {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 45%, rgba(24, 10, 44, .72), rgba(3, 2, 8, .95));
  backdrop-filter: blur(7px);
  pointer-events: auto;
  animation: pause-in 200ms var(--ease-out);
}
.term[hidden] { display: none; }

.term-box {
  position: relative;
  width: min(1040px, 94vw);
  max-height: 88vh;
  overflow: auto;
  padding: 30px 26px 26px;
  border-radius: 16px;
  /* Tres capas: el filo cálido de fuera, el fondo de madera quemada y una
     lumbre floja arriba, que es lo que hace que el panel parezca alumbrado por
     algo y no recortado y pegado encima. */
  border: 1px solid rgba(255, 190, 120, .16);
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 176, 92, .1), transparent 60%),
    linear-gradient(180deg, #1b1526 0%, #14101d 55%, #0f0c16 100%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    inset 0 -40px 90px rgba(0, 0, 0, .45);
  animation: pause-box 300ms var(--ease-pop);
}

/* El rótulo: grabado en la propia madera, no una chapa pegada. */
.term-banner {
  display: grid;
  place-items: center;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 190, 120, .12);
}
.term-title {
  margin: 0;
  font-family: var(--face-pixel);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f3e6cf;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 22px rgba(255, 176, 92, .25);
}

.term-body { display: grid; gap: 14px; }

/* Dos columnas: a dónde vais y quién viene. En pantalla estrecha, una encima
   de otra — y la de la casa primero, que es la que hay que decidir. */
.term-cols {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) { .term-cols { grid-template-columns: 1fr; } }

.term-col {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.term-rotulo {
  margin: 0;
  font-family: var(--face-pixel);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 210, 150, .72);
}

.term-lead {
  margin: 0 2px 2px;
  text-align: center;
  font-family: var(--face-ui);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .72);
}
.term-acts { display: grid; gap: 9px; margin-top: 2px; }

/* Los botones: chapa oscura con filo, no pastilla gris. */
.term-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 18px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 6px 16px rgba(0, 0, 0, .35);
  color: #ece3d4;
  font-family: var(--face-pixel);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: transform 130ms var(--ease-pop), box-shadow 130ms ease, background 130ms ease;
}
.term-btn:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255, 210, 150, .16), rgba(255, 176, 92, .06));
  box-shadow:
    inset 0 0 0 1px rgba(255, 210, 150, .34),
    0 10px 22px rgba(0, 0, 0, .45);
}
.term-btn:active { transform: translateY(1px); }
.term-btn:disabled {
  /* Apagado de verdad: un botón que no se puede pulsar no puede seguir
     pareciendo el botón bueno. El verde apagado seguía cantando «púlsame». */
  filter: grayscale(1) brightness(.5) contrast(.9);
  opacity: .75;
  cursor: not-allowed;
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* El de salir es el único verde: es el que termina la conversación. */
.term-btn--go {
  color: #0c1206;
  background: linear-gradient(180deg, #bdf94a, #8fd21f);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 8px 20px rgba(140, 210, 40, .22);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
.term-btn--go:hover {
  background: linear-gradient(180deg, #cffb63, #9ee026);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .22), 0 12px 26px rgba(140, 210, 40, .3);
}
.term-btn--ghost {
  font-size: 15px;
  color: rgba(236, 227, 212, .74);
  background: rgba(255, 255, 255, .03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}

.term-form { display: grid; gap: 11px; }
.term-code {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 10px;
  background: rgba(5, 4, 12, .55);
  box-shadow: inset 0 0 0 2px rgba(168, 244, 37, .45);
  color: var(--lime);
  font-family: var(--face-pixel);
  font-size: 38px;
  line-height: 1;
  letter-spacing: 0.28em;
  text-align: center;
  text-transform: uppercase;
}
.term-code:focus { outline: none; box-shadow: inset 0 0 0 2px var(--lime), 0 0 22px rgba(168, 244, 37, .3); }
.term-code::placeholder { color: rgba(168, 244, 37, .3); }

.term-aviso {
  margin: 0;
  min-height: 16px;
  text-align: center;
  font-family: var(--face-ui);
  font-size: 12px;
  color: var(--amber);
}

/* =============================================================================
   LA PANTALLA DE CARGA
   Tapa el juego entero mientras se monta un mapa: logotipo, barra de verdad
   —la mueve la carga, no un temporizador— y una frase que va cambiando. Un
   cartel quieto hace que diez segundos parezcan treinta.
============================================================================= */
.carga {
  position: absolute;
  inset: 0;
  z-index: 70;   /* por encima de pausa, inventario y personajes */
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 40%, #180a2c, #030208);
  pointer-events: auto;
  transition: opacity 380ms ease;
}
.carga[hidden] { display: none; }
.carga[data-yendo='true'] { opacity: 0; }

.carga-logo {
  height: auto;
  width: min(360px, 66vw);
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .6));
  animation: carga-flota 4s ease-in-out infinite;
}
@keyframes carga-flota {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.carga-texto {
  margin: 0;
  font-family: var(--face-pixel);
  font-size: 26px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.carga-texto span,
.carga-puntos i {
  display: inline-block;
  animation: carga-latido 1.4s ease-in-out infinite;
}
.carga-puntos i { font-style: normal; }
@keyframes carga-latido {
  0%, 60%, 100% { opacity: .45; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

.carga-barra {
  width: min(420px, 74vw);
  height: 12px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}
.carga-barra i {
  display: block;
  width: 5%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime), #d9ff7a);
  box-shadow: 0 0 16px rgba(168, 244, 37, .5);
  transition: width 260ms ease;
}

.carga-frase {
  margin: 0;
  min-height: 1.4em;
  max-width: min(560px, 88vw);
  font-family: var(--face-ui);
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .66);
}
.carga-frase.entra { animation: carga-frase-in 420ms var(--ease-out); }
@keyframes carga-frase-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* =============================================================================
   LA SALA EN EL TERMINAL
   La tripulación con su lucecita: verde el que ya está listo. Se lee de un
   vistazo quién falta, que es lo único que importa antes de salir.
============================================================================= */
.sala-crew {
  display: grid;
  gap: 6px;
  margin: 0 0 2px;
  padding: 0;
  list-style: none;
}
.sala-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(5, 4, 12, .42);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .09);
}
.sala-luz {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.sala-luz.on {
  background: var(--lime);
  box-shadow: 0 0 10px rgba(168, 244, 37, .8);
}
.sala-nombre {
  flex: 1;
  font-family: var(--face-pixel);
  font-size: 18px;
  letter-spacing: .04em;
  color: #fff;
}
.sala-tag {
  font-family: var(--face-ui);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.sala-tag--jefe { color: var(--lime); }

/* =============================================================================
   EL BOCADILLO DE TEXTO
   Abajo y centrado, con la caja del Basic GUI Bundle. Ancho generoso pero con
   tope: un párrafo que cruza una pantalla de 4K no hay quien lo lea.
============================================================================= */
.boca {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 42;
  display: grid;
  justify-items: center;
  padding: 0 24px 34px;
  pointer-events: auto;
  animation: boca-sube 220ms var(--ease-out);
}
.boca[hidden] { display: none; }
@keyframes boca-sube {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.boca-caja {
  width: min(880px, 94vw);
  padding: 6px 26px 16px;
  border: 30px solid transparent;
  border-image: url('../assets/gui/Box_Rounded.png') 200 fill stretch;
}

.boca-texto {
  margin: 0;
  min-height: 2.6em;
  font-family: var(--face-pixel);
  /* Bien grande: es un mensaje que hay que poder leer de un vistazo desde el
     sofá, no un pie de foto. */
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  /* El texto se escribe letra a letra: sin esto, la caja pega saltos cada vez
     que una palabra cambia de línea. */
  overflow-wrap: break-word;
}

.boca-pie {
  margin: 8px 0 0;
  text-align: right;
  font-family: var(--face-ui);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* =============================================================================
   ELEGIR PERSONAJE
   Las caras se recortan de la misma lámina que usa el juego, así que la
   miniatura y el muñeco no pueden dejar de parecerse.
============================================================================= */
.pjs {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 45%, rgba(24, 10, 44, .7), rgba(4, 3, 10, .92));
  backdrop-filter: blur(6px);
  pointer-events: auto;
  animation: pause-in 200ms var(--ease-out);
}
.pjs[hidden] { display: none; }

.pjs-box {
  display: grid;
  gap: 14px;
  justify-items: stretch;
  width: min(660px, 94vw);
  padding: 0 22px 20px;
  border: 32px solid transparent;
  border-image: url('../assets/gui/Box_Rounded.png') 200 fill stretch;
  animation: pause-box 300ms var(--ease-pop);
}
.pjs-banner {
  justify-self: center;
  width: 296px;
  max-width: 100%;
  aspect-ratio: 2.5;
  margin: -62px 0 2px;
  display: grid;
  place-items: center;
  background: url('../assets/gui/Banner_Grey.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}
.pjs-title {
  margin: 0;
  transform: translateY(3px);
  font-family: var(--face-pixel);
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .5);
}

.pjs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.pjs-card {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 12px 10px 14px;
  border: 0;
  border-radius: 14px;
  background: rgba(5, 4, 12, 0.4);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: transform 150ms var(--ease-pop), box-shadow 150ms ease, background 150ms ease;
}
.pjs-card:hover { transform: translateY(-3px); background: rgba(5, 4, 12, .55); }
.pjs-card.on {
  background: rgba(168, 244, 37, .16);
  box-shadow: inset 0 0 0 2px var(--lime), 0 0 24px rgba(168, 244, 37, .25);
}

.pjs-cara {
  display: block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45));
}
.pjs-nombre {
  font-family: var(--face-pixel);
  font-size: 22px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pjs-desc {
  font-family: var(--face-ui);
  font-size: 11.5px;
  line-height: 1.35;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

/* =============================================================================
   EL INVENTARIO DEL CAMIÓN
   Mismo armazón que el terminal y el elige-personaje —caja, cinta y botón—
   porque son el mismo mueble: un menú del juego. Lo suyo es la estantería, que
   se dibuja recortando la lámina de objetos y no con un fichero por icono.
============================================================================= */
.inv {
  position: fixed;
  inset: 0;
  z-index: 57;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(120% 90% at 50% 45%, rgba(24, 10, 44, .7), rgba(4, 3, 10, .93));
  backdrop-filter: blur(6px);
  pointer-events: auto;
  animation: pause-in 200ms var(--ease-out);
}
.inv[hidden] { display: none; }

.inv-box {
  display: grid;
  gap: 12px;
  justify-items: stretch;
  width: min(860px, 95vw);
  max-height: 92vh;
  padding: 0 22px 18px;
  border: 32px solid transparent;
  border-image: url('../assets/gui/Box_Rounded.png') 200 fill stretch;
  animation: pause-box 300ms var(--ease-pop);
}
.inv-banner {
  justify-self: center;
  width: 296px;
  max-width: 100%;
  aspect-ratio: 2.5;
  margin: -62px 0 -2px;
  display: grid;
  place-items: center;
  background: url('../assets/gui/Banner_Grey.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .55));
}
.inv-title {
  margin: 0;
  transform: translateY(3px);
  font-family: var(--face-pixel);
  font-size: 34px;
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .5);
}
.inv-lead {
  margin: 0;
  text-align: center;
  font-family: var(--face-ui);
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}

/* Las tres manos. Se ven siempre, llenas o vacías: así se entiende de un
   vistazo que el tope es tres y cuánto queda. */
.inv-manos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.inv-mano {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 6px 10px;
  border: 0;
  border-radius: 14px;
  background: rgba(168, 244, 37, .14);
  box-shadow: inset 0 0 0 2px var(--lime);
  color: #fff;
  cursor: pointer;
  transition: transform 150ms var(--ease-pop), filter 150ms ease;
}
.inv-mano:hover { transform: translateY(-2px); filter: brightness(1.12); }
.inv-mano.vacia {
  background: rgba(5, 4, 12, .38);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
  cursor: default;
}
.inv-vacia {
  display: grid;
  place-items: center;
  height: 72px;
  font-family: var(--face-pixel);
  font-size: 30px;
  color: rgba(255, 255, 255, .18);
}
.inv-mano-nombre {
  font-family: var(--face-pixel);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
}

/* La estantería. Con scroll propio: son veintisiete y van a ser muchos más. */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
  overflow-y: auto;
  max-height: 46vh;
  padding: 4px 6px 4px 2px;
}
.inv-card {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 8px 5px 9px;
  border: 0;
  border-radius: 12px;
  background: rgba(5, 4, 12, .4);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  transition: transform 150ms var(--ease-pop), box-shadow 150ms ease, background 150ms ease;
}
.inv-card:hover { transform: translateY(-3px); background: rgba(5, 4, 12, .6); }
.inv-card.on {
  background: rgba(168, 244, 37, .16);
  box-shadow: inset 0 0 0 2px var(--lime), 0 0 20px rgba(168, 244, 37, .22);
}
.inv-nombre {
  font-family: var(--face-ui);
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  color: rgba(255, 255, 255, .78);
}
.inv-icono {
  display: block;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
}
.inv-pie {
  margin: 0;
  text-align: center;
  font-family: var(--face-ui);
  font-size: 12px;
  color: rgba(255, 255, 255, .58);
}
.inv-pie.parpadeo { animation: inv-parpadeo 520ms ease; color: #ffd166; }
@keyframes inv-parpadeo {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* --- El disparo de la cámara de fotos ---------------------------------------
   Dos cosas a la vez, que es lo que se ve de verdad al disparar: el fogonazo
   blanco del flash y el obturador cerrando y abriendo. Dura un cuarto de
   segundo: más y estorba, menos y no se ve. */
.ap-visor.disparo::before,
.ap-visor.disparo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
/* El fogonazo. */
.ap-visor.disparo::before {
  background: #fff;
  animation: ap-flash 260ms ease-out forwards;
}
@keyframes ap-flash {
  0% { opacity: .95; }
  25% { opacity: .55; }
  100% { opacity: 0; }
}
/* Y el obturador: dos hojas negras que se juntan y se abren. */
.ap-visor.disparo::after {
  background: linear-gradient(to bottom, #05040c 50%, #05040c 50%);
  animation: ap-obturador 260ms ease-in-out forwards;
}
@keyframes ap-obturador {
  0% { clip-path: inset(0 0 100% 0); }
  40% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(100% 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ap-visor.disparo::before,
  .ap-visor.disparo::after { display: none; }
}

/* --- Los objetivos de propina -----------------------------------------------
   Van debajo de los tres de siempre, con su letra más pequeña y el porcentaje
   que pagan a la derecha. El porcentaje no es adorno: es lo que hace que uno
   se plantee quedarse cinco minutos más en una casa de la que ya se podía ir. */
.obj-titulo--extra {
  margin-top: 12px;
  font-size: 17px;
  color: rgba(255, 255, 255, .55);
}
.obj-lista--extra .obj-item { font-size: 15px; color: rgba(255, 255, 255, .8); }
.obj-pago {
  margin-left: auto;
  padding-left: 8px;
  color: var(--lime);
  font-family: var(--face-pixel);
  font-size: 13px;
}

/* ==========================================================================
   EL ORÁCULO
   Lo que contesta la ouija o el espejo. Es la respuesta más cara del juego
   —quince o veinte de cordura, y la cordura ya no se recupera sola— así que
   sale en el centro y hay que darle para cerrarla: lo que acabas de pagar
   merece que lo leas entero.
   ========================================================================== */
.orc {
  position: fixed;
  inset: 0;
  z-index: 58;
  display: grid;
  place-items: center;
  background: rgba(4, 3, 10, .72);
  cursor: pointer;
}
.orc[hidden] { display: none; }

.orc-caja {
  position: relative;
  width: min(560px, 86vw);
  padding: 30px 34px 26px;
  border: 1px solid rgba(180, 150, 255, .4);
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(150, 110, 255, .16), transparent 70%),
    #100b22;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .05);
  text-align: center;
  animation: orc-entra 280ms cubic-bezier(.2, 1.3, .4, 1);
}
.orc-caja--espejo { border-color: rgba(140, 200, 255, .45); }
.orc-caja--roto { border-color: rgba(255, 85, 102, .55); }

@keyframes orc-entra {
  0% { transform: scale(.9) translateY(14px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

.orc-marca {
  display: block;
  margin-bottom: 6px;
  font-size: 30px;
  color: rgba(190, 160, 255, .8);
  animation: orc-late 2.4s ease-in-out infinite;
}
@keyframes orc-late { 0%, 100% { opacity: .8; } 50% { opacity: .35; } }

.orc-titulo {
  margin: 0 0 14px;
  font-family: var(--face-pixel);
  font-size: 17px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
/* La frase es lo que se ha pagado: es lo más gordo de la caja. */
.orc-texto {
  margin: 0 0 12px;
  font-size: 26px;
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 0 22px rgba(160, 120, 255, .45);
}
.orc-pie { margin: 0; font-size: 15px; color: rgba(255, 255, 255, .5); }
.orc-precio {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 85, 102, .14);
  color: #ff8d99;
  font-family: var(--face-pixel);
  font-size: 13px;
}
.orc-cerrar {
  display: block;
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, .35);
}

/* ==========================================================================
   LA CAZA Y LA MUERTE
   Esto FALTABA ENTERO. El fichero de la caza pintaba su capa y sus rótulos
   desde el primer día, pero nunca hubo estilos para ellos: la capa existía,
   invisible, y la partida seguía igual de tranquila con el bicho detrás. De
   ahí que morirse no se notara — no es que no pasara nada, es que no se veía.
   ========================================================================== */
.cz {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.cz[hidden] { display: none; }

.cz-centro {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  transform: translateY(-14vh);
}
.cz-rotulo {
  font-family: var(--face-pixel);
  font-size: clamp(26px, 4.4vw, 56px);
  letter-spacing: .06em;
  color: #fff;
  text-shadow: 0 0 24px rgba(0, 0, 0, .9), 0 4px 0 rgba(0, 0, 0, .6);
}
.cz-reloj {
  font-family: var(--face-pixel);
  font-size: clamp(13px, 1.5vw, 20px);
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .9);
}

/* --- EL AVISO: se ha ido la luz y todavía no se mueve ---------------------
   Oscuro y quieto. Son los dos peores segundos de la partida justamente
   porque no pasa nada: la viñeta se cierra despacio y el rótulo respira. */
.cz--aviso {
  background: radial-gradient(ellipse at center, transparent 25%, rgba(4, 3, 10, .85) 92%);
  animation: cz-cierra 700ms ease-out;
}
.cz--aviso .cz-rotulo { animation: cz-respira 1.5s ease-in-out infinite; }
@keyframes cz-cierra {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes cz-respira {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.985); }
}

/* --- LA CAZA: ya viene --------------------------------------------------- */
.cz--caza {
  background: radial-gradient(ellipse at center, transparent 18%, rgba(120, 8, 16, .5) 78%, rgba(60, 2, 8, .82) 100%);
  animation: cz-late 820ms ease-in-out infinite;
}
.cz--caza .cz-rotulo { color: #ff6a6a; }
@keyframes cz-late {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}

/* --- MUERTO: se acabó ----------------------------------------------------
   El mundo se queda en gris. No es un adorno: es la única manera de saber, de
   un vistazo y sin leer nada, que lo que ves ya no va contigo. */
.cz--muerto {
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, .72) 95%);
}
.cz--muerto .cz-rotulo {
  color: #d8d8d8;
  animation: cz-muere 1.1s ease-out;
}
@keyframes cz-muere {
  0% { transform: scale(1.5); opacity: 0; letter-spacing: .3em; }
  100% { transform: none; opacity: 1; letter-spacing: .06em; }
}

/* EL LIENZO EN GRIS. Va por una clase en el cuerpo y no dentro de Phaser
   porque es un filtro de imagen y el navegador lo hace gratis; hacerlo en el
   motor costaría una pasada de pantalla entera cada fotograma. */
body.esta-muerto canvas {
  filter: grayscale(1) brightness(.72) contrast(1.05);
  transition: filter 900ms ease-out;
}

/* --- EL ZARPAZO: el instante en que te pilla ----------------------------- */
.cz-zarpazo {
  position: fixed;
  inset: 0;
  z-index: 46;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 40, 40, .55), rgba(90, 0, 6, .95));
  animation: cz-zarpa 900ms ease-out forwards;
}
@keyframes cz-zarpa {
  0% { opacity: 0; }
  12% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cz--aviso, .cz--caza, .cz--aviso .cz-rotulo, .cz--muerto .cz-rotulo, .cz-zarpazo { animation: none; }
}

/* El cartel de muerto se aparta a los tres segundos: arriba, pequeño y sin
   tapar nada. Estar muerto es quedarse de espectador un buen rato, y ese rato
   hay que poder verlo. */
.cz--muerto.cz--arriba { background: none; }
.cz--muerto.cz--arriba .cz-centro {
  transform: translateY(calc(-50vh + 46px));
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(4, 3, 10, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform 600ms ease, padding 600ms ease;
}
.cz--muerto.cz--arriba .cz-rotulo { font-size: 18px; animation: none; }
.cz--muerto.cz--arriba .cz-reloj { font-size: 11px; }


/* ==========================================================================
   DE DÓNDE VINO EL RUIDO
   Un arco en el borde, en la dirección de lo que has oído. Ni flecha ni punto:
   un oído no sabe distancias, así que esto tampoco.
   ========================================================================== */
.rd {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 6;
}
.rd.on { opacity: 1; transition: opacity .12s ease; }

.rd-arco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(96vmin, 1100px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(var(--a, 0deg));
  border-radius: 50%;
  /* El gajo: opaco donde suena y desvanecido hacia los lados, para que se lea
     como «por ahí» y no como «justo ahí». */
  background: conic-gradient(
    from calc(var(--ancho, 34deg) / -2),
    rgba(255, 240, 210, var(--fuerza, .2)),
    rgba(255, 240, 210, 0) var(--ancho, 34deg)
  );
  /* Y solo el borde: el centro se recorta, que si no se tiñe media pantalla. */
  -webkit-mask: radial-gradient(closest-side, transparent 76%, #000 92%);
  mask: radial-gradient(closest-side, transparent 76%, #000 92%);
}


/* =============================================================================
   EL MANDO DEL FANTASMA
   Abajo del todo y sin adornos: quien lleva al bicho no tiene mochila que
   mirar, tiene tres botones y una correa.
============================================================================= */
.mando {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 8;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(28, 12, 40, .82), rgba(10, 6, 18, .9));
  box-shadow: inset 0 0 0 1px rgba(200, 120, 255, .22), 0 16px 40px rgba(0, 0, 0, .6);
  pointer-events: auto;
}
.mando[hidden] { display: none; }

.mando-cinta { display: flex; align-items: center; gap: 10px; }
.mando-quien {
  font-family: var(--face-pixel);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(220, 180, 255, .8);
}
.mando-caza, .mando-libre {
  font-family: var(--face-pixel);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
}
.mando-caza { background: rgba(255, 60, 80, .22); color: #ff8a9a; }
.mando-libre { background: rgba(120, 200, 255, .18); color: #9fd8ff; }

.mando-botones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.mando-btn {
  display: grid;
  gap: 3px;
  justify-items: center;
  min-width: 116px;
  padding: 9px 14px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px rgba(200, 120, 255, .25);
  color: #f0e6ff;
  cursor: pointer;
  transition: transform 120ms var(--ease-pop), box-shadow 120ms ease;
}
.mando-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(220, 160, 255, .55);
}
.mando-btn:disabled { filter: grayscale(.7) brightness(.65); cursor: not-allowed; }
.mando-btn-t { font-family: var(--face-pixel); font-size: 15px; }
.mando-btn-k {
  font-family: var(--face-ui);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.mando-btn-c { font-family: var(--face-pixel); font-size: 12px; color: #ffb14d; }

.mando-pie {
  margin: 0;
  font-family: var(--face-ui);
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

/* =============================================================================
   EL SUSURRO
   =============================================================================
   Lo que se oye decir cuando no llevas la caja en la mano. Una línea baja, en
   cursiva y sin nombre: se lee y se va. NO es chat —el chat va arriba, con el
   nombre de quien habla— y esa diferencia es justo lo que hay que ver de un
   vistazo, porque al chat se le contesta y a esto no.
============================================================================= */
.susurro {
  position: fixed;
  left: 50%;
  bottom: 16%;
  translate: -50% 0;
  z-index: 60;
  max-width: min(46ch, 84vw);
  text-align: center;
  font-family: var(--face-ui);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.5;
  color: rgba(226, 214, 255, .92);
  text-shadow: 0 2px 10px #000, 0 0 26px rgba(0, 0, 0, .9);
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
}
.susurro[data-on='true'] { opacity: 1; transition: opacity 260ms ease; }