/* Marco del juego. Todo lo demás se dibuja en el canvas. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Piedra oscura, no morado genérico: en pantallas que no encajan a zoom
     entero exacto sobra marco alrededor del lienzo, y con este tono se lee
     como el borde de una vitrina en vez de como espacio sin rellenar. */
  background: radial-gradient(ellipse at center, #26211c 0%, #14110e 100%);
  color: #cbbfa4;
  font: 14px/1.5 Consolas, ui-monospace, monospace;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  /* El joystick virtual necesita los gestos del navegador desactivados o el
     móvil hace scroll y zoom mientras juegas. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Contenedor de los dos lienzos. Existe para que la interfaz pueda colocarse
   ENCIMA del juego con posición absoluta sin salirse de su sitio: el body está
   centrado con flex, y un absoluto contra el body se iría a la esquina. */
#marco {
  position: relative;
  line-height: 0;      /* o el hueco de la línea base añade unos píxeles debajo */
}

/* La interfaz va clavada sobre el juego, al mismo tamaño en CSS pero con muchos
   más píxeles reales por debajo. NADA de `image-rendering: pixelated` aquí: es
   justo lo contrario de lo que se busca. */
#interfaz {
  position: absolute;
  left: 0;
  top: 0;
  /* Transparente a los eventos: el joystick virtual y el foco los sigue
     recibiendo el lienzo del juego, que es donde Entrada se engancha. */
  pointer-events: none;
}

#juego {
  display: block;
  /* El orden importa: gana la última que el navegador entienda. `pixelated` va
     al final porque es la que aplica Chrome; `crisp-edges` queda de repliegue
     para los que no la soporten. */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  background: #b99b6b;
  /* Sin esto, el navegador interpola al escalar y se pierde la nitidez que
     tanto cuesta mantener en el resto del motor. */
  -ms-interpolation-mode: nearest-neighbor;

  /* EL BLANCO Y NEGRO DEL RELOJ DE EMERITA entra y sale por aquí. Mientras la
     horda está parada, js/main.js pone la clase `congelado` en este lienzo y el
     mundo entero se queda en gris: suelo, bichos, partículas y disparos, todo
     de una vez.

     EN CSS Y NO EN EL BUCLE DE DIBUJO, y esa es la razón de que esto salga
     gratis. El filtro lo aplica el compositor sobre una capa que ya existe, así
     que el coste por frame en JS es CERO: no se toca ni una sola llamada de
     dibujo. La alternativa de dentro del canvas —`ctx.filter`— se aplica por
     operación, o sea que pasaría por el filtro cada blit de cada enemigo,
     cientos por frame.

     Y es el lienzo del JUEGO, no el de la interfaz: por eso el HUD, la cuenta
     atrás y las barras siguen en color mientras el mundo está en gris, sin que
     nadie tenga que hacer nada para conseguirlo. Los dos lienzos separados ya
     trazaban esa línea (ver js/ui/capa.js); esto solo se aprovecha de ella.

     La transición hace el resto: el mundo se apaga y vuelve en un cuarto de
     segundo en vez de dar un salto de color. */
  transition: filter .25s linear;
}

#juego.congelado {
  filter: grayscale(1);
}

/* Botón de pantalla completa. Discreto, en la esquina, y solo visible al
   pasar el ratón por cerca o al llevar el foco por teclado: en un juego que
   se controla con teclado o mando, un icono fijo encima de la partida sería
   ruido el 100% del tiempo para algo que se usa una vez por sesión. */
#pantallaCompleta {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 20;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid rgba(203,191,164,.3);
  background: rgba(13,11,18,.55);
  color: #cbbfa4;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease;
}
#marco:hover ~ #pantallaCompleta,
#pantallaCompleta:hover,
#pantallaCompleta:focus-visible {
  opacity: 1;
}

#cargando {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  color: #8f8271;
}

#pie {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  color: #4a4450;
  pointer-events: none;
}

/* La chuleta de atajos es para JUGAR. En el título y en la selección estorba:
   son pantallas ilustradas de borde a borde y tres líneas de teclas de
   depuración por encima las convierten en una pantalla de pruebas. main.js
   pone y quita esta clase al cambiar de pantalla. */
body.enMenu #pie { display: none; }

/* --- El código de invitación del cooperativo --------------------------------
   HTML de verdad encima del lienzo, no dibujo. Un texto pintado en un canvas
   no se puede seleccionar ni copiar, y un código de trescientos caracteres que
   no se puede copiar no sirve de nada.
   La posición la pone js/ui/codigoRed.js midiendo el lienzo: la pantalla se
   escala a cualquier tamaño y esto tiene que caer justo donde el resto del
   dibujo deja el hueco. */
#codigoRed {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  /* Sí recibe eventos, al revés que la capa de interfaz: aquí es donde se
     selecciona y se pulsa. */
  pointer-events: auto;
}

/* EL `hidden` TIENE QUE GANARLE AL `display: flex` DE ARRIBA.
   El navegador oculta un elemento con `[hidden]` poniéndole `display: none` en
   su hoja por defecto, y esa hoja PIERDE contra cualquier regla propia con un
   selector de id. O sea que la caja se quedaba pintada encima del menú con el
   atributo puesto y todo.
   Y no lo cazó la prueba, porque preguntaba por el atributo -que sí estaba- en
   vez de por lo que se veía. Se descubrió mirando una captura. */
#codigoRed[hidden] { display: none; }

#codigoRedTexto {
  width: 100%;
  box-sizing: border-box;
  resize: none;
  border: 1px solid #6b5a33;
  border-radius: 3px;
  background: rgba(14, 13, 20, .92);
  color: #b9bec6;
  /* Monoespaciada: es un código, y en una proporcional los grupos de letras
     iguales bailan y cuesta ver si se ha copiado entero. */
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  line-height: 1.35;
  padding: 8px 10px;
  overflow: hidden;
}

#codigoRedTexto:focus { outline: 1px solid #c9a227; }

#codigoRedCopiar {
  border: 1px solid #6b5a33;
  border-radius: 3px;
  background: rgba(30, 26, 18, .95);
  color: #e8e2d2;
  font-family: "Segoe UI", "Noto Sans", system-ui, sans-serif;
  cursor: pointer;
  padding: 6px 18px;
}

#codigoRedCopiar:hover,
#codigoRedCopiar:focus-visible { background: rgba(60, 50, 28, .95); border-color: #c9a227; }
#codigoRedCopiar.hecho { color: #9fd48a; border-color: #9fd48a; }