/* El aspecto de la página, con los colores del servidor del campo. */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;

  /* verde bosque con dos halos, hoja y sol. Es lo que se ve alrededor del
     juego cuando la pantalla no tiene la misma forma que el tablero. */
  background-color: #2c4102;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(144, 169, 20, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(219, 191, 55, 0.10) 0%, transparent 50%);
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

/* El juego llena el aparato entero. Va centrado y, cuando la pantalla está
   de pie, girado un cuarto de vuelta desde `lienzo.js`, que es quien le pone
   la medida y el giro. Aquí solo se le quita todo lo que estorbe. */
#pantalla {
  position: fixed;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
  line-height: 0;
  overflow: hidden;
  touch-action: none;        /* el dedo juega, no arrastra la página */
  user-select: none;
}

/* Las dos capas van una encima de la otra, llenando el marco. Las dos se
   dibujan en su tamaño de siempre y es el navegador quien las estira. */
#lienzo, #letras {
  display: block;
  width: 100%;
  height: 100%;
}

/* La capa del juego: píxel gordo y sin suavizar. */
#lienzo {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* La capa de la letra: encima de TODO, también de la película, y a la
   resolución de verdad de la pantalla.

   Va la última a propósito, y por dos motivos que son el mismo: el dedo se
   recoge aquí —`entrada.js` escucha en esta capa—, así que lo que esté por
   encima se come los toques; y lo que se escribe aquí tiene que leerse
   sobre lo que haya debajo, película incluida. Con el vídeo delante, la
   intro ni se saltaba ni enseñaba el aviso de saltarla. */
#letras {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* La capa del vídeo: la intro del prólogo, que ya no son postales dibujadas
   sino una película. Va DENTRO de `#pantalla`, así que el giro y la medida
   los hereda del marco y aquí no hay que girar nada.

   Se ve ENTERA, sin recortar (`contain`): el montaje lleva el logo abajo a
   la derecha y recortando se le comerían las patas. Lo que sobra a los lados
   se queda negro, que en una película es lo natural.

   Nace apagada. Solo se enciende mientras dura la intro. */
#video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000000;
  display: none;

  /* Debajo de la letra, y sorda al dedo: los toques la atraviesan y llegan
     a la capa que los recoge, que es la de arriba. */
  z-index: 1;
  pointer-events: none;
}