html, body {
  margin: 0;
  height: 100%;
  background: #0a0710;
  color: #6b5b7a;
  font-family: "Courier New", monospace;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  user-select: none;
  -webkit-user-select: none;
}

/* El "mueble": marco de monitor CRT beige de 1990 */
#cabinet {
  position: relative;
  padding: 18px;
  border-radius: 14px;
  background: linear-gradient(160deg, #3a3340 0%, #241f2b 60%, #191520 100%);
  box-shadow:
    0 0 0 2px #120e18,
    0 18px 50px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.06);
  line-height: 0;
}
#cabinet::after {
  content: "MOFA-VISION 320";
  position: absolute;
  bottom: 3px; right: 16px;
  font-size: 9px;
  letter-spacing: 2px;
  color: #4a4155;
  line-height: 1;
}

#screen {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  border-radius: 3px;
  box-shadow: 0 0 24px rgba(120, 80, 180, .18);
}

/* Scanlines + máscara de fósforo */
#crt {
  position: absolute;
  inset: 18px;
  pointer-events: none;
  border-radius: 3px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.00) 0px,
      rgba(0,0,0,.00) 2px,
      rgba(0,0,0,.22) 3px,
      rgba(0,0,0,.22) 4px
    );
  mix-blend-mode: multiply;
  opacity: .85;
}

/* Brillo curvo del cristal + viñeta */
#glare {
  position: absolute;
  inset: 18px;
  pointer-events: none;
  border-radius: 3px;
  background:
    radial-gradient(120% 90% at 50% 45%, rgba(255,255,255,0) 55%, rgba(0,0,0,.45) 100%),
    linear-gradient(115deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 38%);
}

/* ================= La barra de opciones =================
   Existe por el móvil: silenciar, pantalla completa, idioma y velocidad solo
   tenían tecla, y sin teclado no había manera de llegar a ellas. */
#barra {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
}

#barra button {
  /* Cuarenta y cuatro píxeles de alto no es un capricho de diseño: es el
     tamaño por debajo del cual un dedo falla más de lo que acierta. */
  min-height: 44px;
  padding: 8px 14px;
  background: #241b2e;
  color: #c8b0c4;
  border: 1px solid #4a3555;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .5px;
  cursor: pointer;
  /* Sin esto, en el móvil un toque rápido en un botón puede acabar
     seleccionando su texto o disparando el zoom del doble toque. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#barra button:hover { background: #33253f; color: #e8d8e4; border-color: #6b4a7a; }
#barra button:active { background: #3f2d4d; }
#barra button:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }

#barra kbd {
  font-family: inherit;
  font-size: 11px;
  padding: 1px 5px;
  margin-left: 2px;
  border: 1px solid #4a3555;
  border-radius: 3px;
  color: #8a6f88;
  background: #1a1322;
}

/* Los contextuales: cada uno solo donde hace algo. game.js escribe en
   data-pantalla en cada cambio de pantalla, y de ahí sale todo esto.

   No es un adorno: un botón que aparece siempre y solo funciona a veces
   enseña al jugador a desconfiar de la barra entera. */
.solo-intro, .solo-portada, .con-diario, .con-records, .con-volver,
.con-idioma { display: none; }

body[data-pantalla="intro"] .solo-intro,
/* "Ver la intro" solo si hay partida: sin ella la intro llega sola. */
body[data-pantalla="title"][data-partida="si"] .solo-portada,
/* El diario se abre desde el mapa y desde dentro de un sitio */
body[data-pantalla="mapa"] .con-diario,
body[data-pantalla="lugar"] .con-diario,
/* Los récords, solo desde el mapa, que es donde el juego escucha la R */
body[data-pantalla="mapa"] .con-records,
/* El idioma, en la portada y en el mapa: son los dos sitios donde el juego
   está parado, y cambiarlo rehace los menús que ya estuvieran armados.
   Y solo si hay más de uno cargado, que si no el botón no puede hacer nada.
   Va por atributo y no borrando el botón porque los demás idiomas llegan por
   la red: cuando se decide esto todavía pueden no haber llegado. */
body[data-idiomas="varios"][data-pantalla="title"] .con-idioma,
body[data-idiomas="varios"][data-pantalla="mapa"] .con-idioma,
/* Y "volver" donde hay algo de lo que volver */
body[data-pantalla="lugar"] .con-volver,
body[data-pantalla="diario"] .con-volver,
body[data-pantalla="records"] .con-volver,
body[data-pantalla="idioma"] .con-volver { display: inline-block; }

/* ================= Pantalla completa ================= */

body.fs #cabinet { padding: 0; border-radius: 0; background: #000; box-shadow: none; }
body.fs #crt, body.fs #glare { inset: 0; border-radius: 0; }

/* La barra NO se esconde en pantalla completa, y es lo más importante de todo
   esto: escondiéndola, en un móvil se entra a pantalla completa y ya no se
   sale nunca —no hay tecla F que pulsar y en el iPhone tampoco hay gesto del
   navegador, porque ahí requestFullscreen ni existe—. Se queda flotando en una
   esquina, discreta, y se ve entera al tocarla. */
body.fs #barra {
  position: fixed;
  top: 8px; right: 8px;
  z-index: 10;
  justify-content: flex-end;
  /* Sitio de sobra: recortándola a 60vw, en un móvil los tres botones se
     partían en dos filas y quedaba un amasijo en la esquina. */
  max-width: calc(100vw - 16px);
  gap: 6px;
  padding: 0;
  opacity: .35;
  transition: opacity .15s;
}
body.fs #barra:hover, body.fs #barra:focus-within { opacity: 1; }
body.fs #barra button {
  background: rgba(20, 14, 28, .92);
  font-size: 12px;
  padding: 7px 10px;
}
/* Las teclas sobran donde no hay teclado que valga la pena enseñar */
body.fs #barra kbd { display: none; }

@media (max-width: 620px) {
  #barra { gap: 6px; }
  #barra button { font-size: 13px; padding: 8px 11px; }
  /* En una pantalla estrecha la tecla es ruido: quien la lea no la tiene. */
  #barra kbd { display: none; }
}

/* ================= Pantallas bajas: el móvil en horizontal =================
   Aquí el alto es el recurso escaso y el lienzo compite por cada píxel: son
   200 de los 375 que tiene un móvil tumbado. La barra adelgaza y el mueble
   pierde marco. No es maquillaje: cada píxel que se libera aquí puede ser el
   que permita un aumento más, y un aumento más es un tercio de pantalla. */
@media (max-height: 480px) {
  body { gap: 8px; }
  #barra { gap: 5px; }
  #barra button { min-height: 34px; padding: 5px 9px; font-size: 12px; }
  #barra kbd { display: none; }
  #cabinet { padding: 8px; }
  #crt, #glare { inset: 8px; }
}

/* Un dedo no hace hover: el botón se quedaría iluminado desde el primer toque
   hasta el siguiente, como si estuviera pulsado todo el rato. */
@media (hover: none) {
  #barra button:hover { background: #241b2e; color: #c8b0c4; border-color: #4a3555; }
  body.fs #barra { opacity: .75; }
}