/* Pantalla completa de verdad, y sin que el navegador se quede ningun gesto. */
:root { color-scheme: dark; }

/* EL `hidden` GANA A CUALQUIER `display`, Y ESTO TAPO LA PANTALLA ENTERA.
   La regla del navegador para [hidden] es `display: none`, pero le gana
   cualquier selector de id. Como `#aviso` es `position: fixed; inset: 0` con
   fondo opaco y lleva `display: grid`, el cartel de error CUBRIA TODO —vacio y
   permanente— y el laberinto se dibujaba detras. Pantalla negra en el movil y
   en el PC, sin un solo error en la consola.
   Es la segunda de las tres formas de no ver nada, y ni siquiera era del 3D. */
[hidden] { display: none !important; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  background: #0A0C1A;
  color: #E6E9F5;
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  /* Sin seleccion, sin recuadro azul al tocar, sin scroll ni zoom por gesto.
     Los cuatro juntos: es el mismo grupo de fallos que ya mordio tres veces en
     belagame, y ninguno se ve hasta que lo juegas en un movil. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#lienzo {
  display: block;
  width: 100vw;
  /* dvh y no vh: con vh, la barra de direcciones deja el lienzo mas alto que la
     pantalla y la pagina hace scroll al tocar. */
  height: 100dvh;
  touch-action: none;
  cursor: crosshair;
}
#hud {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  padding: 10px 12px;
  font: 12px/1.4 ui-monospace, monospace;
  color: rgba(230, 233, 245, 0.82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  white-space: pre;
}
#mando {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0) + 14px);
  text-align: center;
  font-size: 12px;
  color: rgba(230, 233, 245, 0.55);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  animation: apagar 1s ease-in 9s forwards;
}
@keyframes apagar { to { opacity: 0; } }
#aviso {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 24px;
  text-align: center;
  background: #0A0C1A;
}