/* La escena ocupa toda la pantalla y la interfaz flota dentro de ella, como en
   los juegos. Toda la tipografía es Geist Pixel; la legibilidad se cuida con el
   tamaño: 10-11px para rótulos, 15-17px para párrafos. */

:root {
  /* Una sola tipografía: Geist Pixel cubre latin-ext, así que sirve igual para
     rótulos y para párrafos con acentos. */
  --pixel: "Geist Pixel", ui-monospace, monospace;

  --bg: #05070e;
  --frame: #0b1120;
  --line: #1d2740;
  --ink: #e7ecf7;
  --dim: #8b9ab8;
  --cyan: #22c9e0;
  --amber: #ffb545;
  --green: #3ddc84;

  /* Borde de los chips del HUD: --line no se ve contra la pared de la escena. */
  --chip-border: #2b3a5c;

  /* Trama del hueco alrededor de la pantalla. */
  --dot: rgba(139, 154, 184, 0.16);
  --dot-strong: rgba(34, 201, 224, 0.14);
  --vignette: rgba(0, 0, 0, 0.55);
}

:root[data-theme="day"] {
  --bg: #dfe5f2;
  --frame: #eef2f9;
  --line: #c3ccdc;
  --ink: #2a3348;
  --dim: #697899;
  --cyan: #0d84cc;
  --amber: #b06f0c;
  --green: #1f9d55;

  --chip-border: #b3c0da;

  --dot: rgba(42, 51, 72, 0.16);
  --dot-strong: rgba(13, 132, 204, 0.12);
  --vignette: rgba(120, 134, 159, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  cursor: var(--cursor-arrow, default);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--pixel);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  /* Ni pellizco ni doble toque para hacer zoom: la página no se mueve, y dentro
     de la escena esos gestos solo estorban. Lo que sí necesita desplazarse (los
     paneles de información) lo reactiva más abajo. */
  touch-action: none;
  transition: background-color 0.4s ease;
}

/* ------------------------------------------------------------ cabina */

#cabinet {
  height: 100%;
  display: grid;
  place-items: center;

  /* Rejilla de puntos a 8px, el mismo paso que los píxeles de la escena, con un
     punto más marcado cada 48px. Así el hueco alrededor deja de estar muerto. */
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, var(--dot-strong) 1px, transparent 1px),
    radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size:
    48px 48px,
    8px 8px;
  background-position: center;
}

/* Viñeta: oscurece los bordes, no el centro. */
#cabinet::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, var(--vignette) 100%);
}

/* ------------------------------------------------------------ escena */

/* Sin elevación: solo el borde. Va como outline y no como border para no
   robarle 4px al canvas, cuyo tamaño lo fija fit() en JS. */
#stage {
  position: relative;
  line-height: 0;
  outline: 2px solid var(--line);
}

canvas#scene {
  display: block;
  image-rendering: pixelated;
  background: var(--frame);
  /* Ningún gesto del navegador sobre la escena: los toques son del juego. */
  touch-action: none;
}

/* La capa de puntos calientes cubre el escenario entero, así que no puede comerse
   los clics: solo los cogen sus botones. Sin esto, los juegos de tocar de la
   máquina recreativa no recibirían ni un toque. */
#hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hotspot {
  pointer-events: auto;
}

/* ------------------------------------------------------ pantalla de carga */

/* Tapa la pantalla mientras llegan el módulo, la fuente y el logo. Usa monoespacio
   del sistema a propósito: es justo Geist Pixel lo que se está esperando, y verla
   cambiar a media carga se leería como un fallo. */
#loading {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle, var(--dot-strong) 1px, transparent 1px),
    radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size:
    48px 48px,
    8px 8px;
  background-position: center;
  transition: opacity 0.45s ease;
}

#loading.done {
  opacity: 0;
  pointer-events: none;
}

#loading[hidden] {
  display: none;
}

.load-box {
  width: min(18rem, calc(100% - 3rem));
  text-align: center;
  font-family: ui-monospace, monospace;
}

.load-brand {
  margin: 0 0 1.1rem;
  font-size: 13px;
  letter-spacing: 0.42em;
  text-indent: 0.42em; /* compensa el espaciado de la última letra */
  color: var(--cyan);
}

.load-bar {
  height: 10px;
  padding: 2px;
  border: 1px solid var(--chip-border);
  background: var(--frame);
}

.load-bar > i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--cyan);
  transition: width 0.3s ease;
}

.load-msg {
  margin: 0.7rem 0 0;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--dim);
}

/* ---------- interfaz dentro de la ventana ---------- */

.hud {
  position: absolute;
  z-index: 5;
  display: flex;
  gap: 0.35rem;
  align-items: flex-start;
  line-height: normal;
}

.hud.tl {
  top: 0.5rem;
  left: 0.5rem;
}

/* Una sola fila y todos a la misma altura: antes CONTACTO se iba a una segunda
   línea en móvil y quedaba desalineado con los demás. */
.hud.tr {
  top: 0.5rem;
  right: 0.5rem;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
}

.hud.tr > * {
  display: inline-flex;
  align-items: center;
  /* Centrado también en horizontal: con min-width, el "?" quedaba pegado a la
     izquierda de su caja. */
  justify-content: center;
  white-space: nowrap;
}

/* Esta regla gana al display:none del navegador para [hidden], así que hay que
   reponerlo: si no, el botón de volver se veía también dentro del cuarto. */
.hud.tr > *[hidden] {
  display: none;
}

#btn-hint {
  min-width: 2.2rem;
}

/* El CTA destaca solo por el color del texto. Con borde cian se veía más grande
   que los otros dos, cuyo borde apenas contrasta con la pared: la diferencia era
   el borde, no el tamaño. Se rellena al pasar por encima. */
.mini.cta {
  color: var(--cyan);
  background: var(--frame);
}

.mini.cta:hover,
.mini.cta:focus-visible {
  color: var(--bg);
  background: var(--cyan);
}

/* ---------- pregunta con opciones ---------- */

/* Va dentro del escenario, no en toda la pantalla: es un modal "de la ventana". */
#ask {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  background: rgba(3, 5, 10, 0.6);
}

:root[data-theme="day"] #ask {
  background: rgba(210, 220, 238, 0.62);
}

#ask[hidden] {
  display: none;
}

.ask-panel {
  width: min(22rem, calc(100% - 2rem));
  padding: 1rem;
  background: var(--frame);
  border: 2px solid var(--cyan);
}

.ask-q {
  margin: 0 0 0.9rem;
  font-size: clamp(14px, 4vw, 16px);
  line-height: 1.4;
  color: var(--ink);
}

.ask-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.choice {
  width: 100%;
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1;
  padding: 0.53rem 0.7rem 0.47rem;
  color: var(--cyan);
  background: var(--frame);
  border: 1px solid var(--cyan);
  cursor: var(--cursor-hand, pointer);
  text-align: left;
}

.choice:hover,
.choice:focus-visible {
  color: var(--bg);
  background: var(--cyan);
}

@media (max-width: 560px) {
  .choice {
    font-size: 11px;
  }
}

/* ---------- mandos de la máquina recreativa ---------- */

/* Pegados abajo, sobre la repisa del mueble que dibuja el motor de juegos. Van
   dentro del escenario, no en la página: la interfaz de este sitio vive siempre
   dentro de la ventana del juego. */
#pad {
  position: absolute;
  z-index: 7;
  bottom: 0.45rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

#pad[hidden] {
  display: none;
}

.padbtn {
  width: 3rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  font-family: var(--pixel);
  font-size: 14px;
  line-height: 1;
  color: var(--cyan);
  background: var(--frame);
  border: 1px solid var(--chip-border);
  cursor: var(--cursor-hand, pointer);
  /* Sin selección ni menú contextual al mantener apretado con el dedo. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* `display: grid` le gana al display:none que el navegador da a [hidden], así que
   hay que reponerlo: si no, en el juego de tocar seguían saliendo unos mandos que
   allí no sirven para nada. */
.padbtn[hidden] {
  display: none;
}

.padbtn.fire {
  width: 4.2rem;
  color: var(--amber);
}

/* Fuera de la partida el botón central es el de empezar y lleva palabra, no
   símbolo: es lo único que hay que pulsar para entrar al juego. */
.padbtn.fire.go {
  width: 5.4rem;
  font-size: 11px;
  border-color: var(--amber);
}

.padbtn:active,
.padbtn:focus-visible {
  color: var(--bg);
  background: var(--cyan);
}

.padbtn.fire:active {
  background: var(--amber);
}

@media (pointer: coarse) {
  /* Con el dedo hacen falta áreas de verdad, y como el cañón dispara solo, las
     flechas son el mando principal: se llevan el tamaño. */
  .padbtn {
    width: 4.8rem;
    height: 3.4rem;
    font-size: 17px;
  }

  .padbtn.fire {
    width: 4rem;
  }

  .padbtn.fire.go {
    width: 6rem;
  }
}

/* Panel de ajustes, colgado del botón. */
#settings {
  position: absolute;
  z-index: 6;
  top: 2.6rem;
  right: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.4rem;
  background: var(--frame);
  border: 1px solid var(--cyan);
}

#settings[hidden] {
  display: none;
}

.mini.wide {
  width: 100%;
  justify-content: space-between;
  text-align: left;
}

.hotspot {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: var(--cursor-hand, pointer);
  -webkit-tap-highlight-color: transparent;
}

.hotspot:focus {
  outline: none;
}

.hotspot:focus-visible {
  outline: 2px dashed var(--amber);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ controles */

.mini {
  cursor: var(--cursor-hand, pointer);
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1;
  /* Vertical asimétrico a propósito: la caja de línea reserva 3px de descendente
     que las mayúsculas no usan, así que la tinta queda alta dentro de ella y hay
     que compensar con ~1,5px más de relleno arriba. Medido, no a ojo. */
  padding: 0.53rem 0.7rem 0.47rem;
  color: var(--dim);
  background: var(--frame);
  border: 1px solid var(--chip-border);
  cursor: pointer;
}

.mini:hover,
.mini:focus-visible {
  color: var(--cyan);
  border-color: var(--cyan);
}

/* Ancho fijo: si no, al pasar de "ON" a "OFF" el botón crece y desplaza toda la
   botonera, y el resto de los botones se te mueven bajo el dedo. */
#btn-sound {
  min-width: 8.5rem;
}

/* ---------- volumen ---------- */

.vol {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: default;
}

.vol:hover {
  color: var(--dim);
  border-color: var(--line);
}

#vol-num {
  min-width: 2.2ch;
  text-align: right;
  color: var(--ink);
}

/* Deslizador cuadrado, a juego con los píxeles de la escena. */
#vol {
  -webkit-appearance: none;
  appearance: none;
  width: 5.5rem;
  height: 12px;
  background: transparent;
  cursor: pointer;
}

#vol::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--line);
  border: 0;
}

#vol::-moz-range-track {
  height: 4px;
  background: var(--line);
  border: 0;
}

#vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 12px;
  margin-top: -4px;
  background: var(--cyan);
  border: 0;
  border-radius: 0;
}

#vol::-moz-range-thumb {
  width: 10px;
  height: 12px;
  background: var(--cyan);
  border: 0;
  border-radius: 0;
}

#vol:focus-visible {
  outline: 2px dashed var(--cyan);
  outline-offset: 3px;
}

/* Lectura, no botón: mismo chip que los botones pero con borde de puntos y sin
   hover. Antes usaba var(--line) como color de texto, el mismo tono que los
   bordes, y por eso no se leía. */
#fps {
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1;
  /* Mismo relleno compensado que los botones: si no, el chip queda 3px más alto
     y con el texto descentrado respecto a ellos. */
  padding: 0.53rem 0.7rem 0.47rem;
  color: var(--dim);
  background: var(--frame);
  border: 1px dotted var(--chip-border);
  min-width: 5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ paneles */

#overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(3, 5, 10, 0.78);
}

:root[data-theme="day"] #overlay {
  background: rgba(210, 220, 238, 0.8);
}

#overlay[hidden] {
  display: none;
}

#panel {
  width: min(32rem, 100%);
  max-height: min(86vh, 46rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Lo único que se desplaza con el dedo en todo el sitio: el cuerpo tiene el
     táctil bloqueado para que no haya zoom, y aquí se devuelve el arrastre
     vertical (que no reactiva el pellizco). */
  touch-action: pan-y;
  background: var(--frame);
  border: 2px solid var(--cyan);
  padding: clamp(1rem, 4vw, 1.75rem);
  box-shadow: 0 0 40px -10px rgba(34, 201, 224, 0.5);
}

/* Voz del narrador dentro del panel: es la misma frase que sale en la barra de
   abajo, repetida aquí porque con el modal abierto nadie mira la barra. */
.narrator {
  margin: 0 0 1.1rem;
  padding: 0.5rem 0.7rem;
  font-size: 15px;
  line-height: 1.45;
  color: var(--dim);
  background: rgba(34, 201, 224, 0.06);
  border-left: 3px solid var(--cyan);
}

:root[data-theme="day"] .narrator {
  background: rgba(13, 132, 204, 0.07);
}

.kicker {
  font-family: var(--pixel);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1rem;
}

#panel h2 {
  font-family: var(--pixel);
  font-size: clamp(16px, 4.6vw, 22px);
  line-height: 1.6;
  margin: 0 0 1rem;
}

#panel h2 em {
  font-style: normal;
  color: var(--cyan);
}

#panel h3 {
  font-family: var(--pixel);
  font-size: 14px;
  line-height: 1.6;
  margin: 1.4rem 0 0.5rem;
  color: var(--cyan);
}

#panel h4 {
  font-family: var(--pixel);
  font-size: 13px;
  line-height: 1.6;
  margin: 1.1rem 0 0.4rem;
}

/* Los párrafos piden tamaño: por debajo de 15px la fuente de píxeles cansa. */
#panel p {
  margin: 0 0 0.8rem;
  font-family: var(--pixel);
  font-size: clamp(15px, 4vw, 17px);
  line-height: 1.5;
  color: var(--ink);
}

#panel p.dim {
  color: var(--dim);
}

#panel p.live {
  color: var(--green);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0 0 0.9rem;
}

.tags span {
  font-family: var(--pixel);
  font-size: 11px;
  line-height: 1.4;
  padding: 0.4rem;
  color: var(--dim);
  border: 1px solid var(--line);
}

.rows {
  margin: 0 0 1rem;
  font-family: var(--pixel);
  font-size: 15px;
}

.rows div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--line);
}

.rows dt {
  font-family: var(--pixel);
  font-size: 11px;
  color: var(--dim);
  padding-top: 0.35rem;
}

.rows dd {
  margin: 0;
  text-align: right;
}

.rows a,
#panel p a {
  color: var(--cyan);
  text-decoration: none;
}

/* Acotado al panel: sin el #panel, este margen se le aplicaba también al botón
   CONTACTO del HUD (comparte la clase .cta) y lo desalineaba 19px. */
#panel .actions,
#panel .cta {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.2rem;
}

.btn {
  cursor: var(--cursor-hand, pointer);
  flex: 1 1 auto;
  font-family: var(--pixel);
  font-size: 13px;
  line-height: 1.5;
  padding: 0.9rem 0.8rem;
  text-align: center;
  text-decoration: none;
  color: var(--bg);
  background: var(--cyan);
  border: 2px solid var(--cyan);
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  filter: brightness(1.15);
}

/* ------------------------------------------------------------ noscript */

#static {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2rem 1.25rem;
  font-family: var(--pixel);
  font-size: 16px;
  line-height: 1.5;
}

#static h1 {
  font-family: var(--pixel);
  font-size: 22px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  html,
  body {
    transition: none;
  }
}

/* ------------------------------------------------------------ móvil */

@media (max-width: 560px) {
  .mini {
    font-size: 10px;
    padding: 0.5rem 0.5rem;
  }

  #btn-sound {
    min-width: 0;
  }

  .hud.tr {
    max-width: calc(100% - 5rem);
  }

  #vol {
    width: 4.5rem;
  }

  /* Los paneles suben desde abajo: más cómodo para el pulgar. */
  #overlay {
    align-items: flex-end;
    padding: 0;
  }

  #panel {
    width: 100%;
    max-height: 82vh;
    border-width: 2px 0 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  /* El botón de cerrar siempre alcanzable sin scrollear hasta el final. */
  #panel .actions {
    position: sticky;
    bottom: 0;
    background: var(--frame);
    padding-top: 0.6rem;
    margin-top: 0.8rem;
  }
}

@media (max-height: 420px) {
  .hud.tl,
  .hud.tr {
    top: 0.3rem;
  }
}