/*
  Plantilla Web de Antorium.

  Lo unico que hace esta hoja es que la pagina no se note: fondo del color del juego, el
  lienzo llenando la ventana y una carga con el icono de Antorium en vez del de Unity.

  El color de fondo es el mismo tono oscuro con el que arranca el juego. Importa que
  coincida: mientras el .data se descarga no hay nada dibujado, y si la pagina fuera blanca
  el jugador veria un flash blanco de varios segundos antes del juego.
*/

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #171310;
  overflow: hidden;

  /* El rebote de iOS arrastra la pagina entera al deslizar sobre el lienzo, y en un juego
     que se maneja con el dedo eso significa mover el mapa y el navegador a la vez. */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;

  /* Un toque mantenido sobre el lienzo abria el menu de seleccion de iOS encima del juego. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;

  /* Sin esto, cada toque pinta un recuadro gris translucido sobre el juego en Android. */
  -webkit-tap-highlight-color: transparent;
}

#antorium-container {
  position: absolute;
  inset: 0;
}

/* La clase la pone index.html: aqui el lienzo llena siempre, no solo en moviles. */
#antorium-container.fill,
canvas.fill {
  width: 100%;
  height: 100%;
}

#unity-canvas {
  display: block;
  background: #171310;

  /* El juego es pixel art: al escalar el lienzo, el navegador tiene que repetir pixeles y
     no interpolarlos, o el borde duro que justifica el estilo se vuelve papilla. */
  image-rendering: pixelated;

  /* Le dice al navegador que no intente gestos propios sobre el lienzo: sin ello, el
     desplazamiento con un dedo mueve la pagina en vez de la camara. */
  touch-action: none;
}

/* ------------------------------------------------------------------ la carga -- */

#antorium-loading {
  position: absolute;
  inset: 0;
  display: none;            /* index.html la enciende al empezar a cargar */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: #171310;
}

#antorium-logo {
  width: 128px;
  height: 128px;
  background: url('logo.png') no-repeat center;
  background-size: contain;

  /* Un latido muy lento. Es lo que separa "esta cargando" de "se ha quedado colgado" en los
     segundos en que la barra apenas se mueve porque esta descomprimiendo el .wasm. */
  animation: antorium-latido 2.4s ease-in-out infinite;
}

@keyframes antorium-latido {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%      { transform: scale(0.94); opacity: 0.78; }
}

/* Quien haya pedido menos movimiento no lo recibe. */
@media (prefers-reduced-motion: reduce) {
  #antorium-logo { animation: none; }
}

#antorium-bar-empty {
  width: 220px;
  height: 10px;
  border-radius: 5px;
  background: #2e2620;
  overflow: hidden;
}

#antorium-bar-full {
  width: 0%;
  height: 100%;
  border-radius: 5px;

  /* El mismo oro del cartel de logros (0.98, 0.78, 0.30). */
  background: #fac74d;
  transition: width 0.15s linear;
}

/* ------------------------------------------------------------------- avisos -- */

#unity-warning {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  display: none;
  max-width: 90%;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 13px;
  color: #000;
  text-align: center;
  z-index: 10;
}