/* Estilos del juego.

   El escenario es un lienzo fijo de 1080x1920 que app.js escala con un
   transform. Todo lo de aca adentro se mide en pixeles de diseno, no en vw/vh:
   asi la pieza se ve identica en el totem de 32", en el monitor vertical de
   27" y en un celular, sin recalcular nada.

   Tipografia del sistema a proposito: una web font pesaria y es un riesgo
   offline en el salon. El diseno usa una condensada gruesa; la familia de
   abajo es lo mas cerca que se llega sin descargar nada. */

:root {
  --cielo-alto:  #8cc8e8;
  --cielo-medio: #74c4ee;
  --cielo-bajo:  #c2e8fb;
  --azul-marca:  #1b4f8c;
  --azul-hondo:  #0f3666;
  --azul-vivo:   #2682d5;
  --hielo-claro: #d6eeff;
}

/* Outfit variable, servida del propio proyecto y no de un CDN: el totem tiene
   que arrancar sin red. 32 KB, eje de peso 100-900, con todos los glifos del
   espanol.

   Por que Outfit y no la condensada del sistema que habia antes: se midio la
   razon ancho/alto-de-caja del texto de la muestra del cliente (9,43) contra
   la de cada candidata. Arial Narrow daba 10,24 y se veia claramente mas
   angosta y grotesca; Outfit sola da 12,37, o sea demasiado ancha, pero las
   formas (O circular, terminales horizontales en C y S, A de apice plano) son
   las de la muestra. La diferencia se cierra apretandola por CSS, que es
   seguramente lo que hizo el disenador. */
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/outfit.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: block;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0b2238;
  font-family: 'Outfit', "Trebuchet MS", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}

#escena {
  position: absolute; top: 0; left: 0;
  width: 1080px; height: 1920px;
  transform-origin: 0 0;
}

#cv { display: block; width: 1080px; height: 1920px; }

/* ---------- fondo escarchado de las pantallas de texto ---------- */

/* Lo comparten la entrada y el resultado. Es el mismo cielo del tablero para
   que el corte entre pantallas no se note como un salto de color. */
.escarchado {
  background:
    url('../assets/img/fondo.webp') center/cover no-repeat,
    linear-gradient(180deg, var(--cielo-alto) 0%, var(--cielo-medio) 55%, var(--cielo-bajo) 100%);
}

/* ---------- encabezado del juego ---------- */

/* Las tres piezas salen de la capa "botones" del PSD y van posicionadas en sus
   coordenadas exactas del lienzo de 1080x1920. Nada de flex: el diseno ya
   decidio donde va cada una. */

#head {
  position: absolute; top: 0; left: 0; right: 0; height: 260px;
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
body.jugando #head, body.pifia #head { opacity: 1; pointer-events: auto; }

.icono, #chapa {
  position: absolute;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border: 0; padding: 0; cursor: pointer;
}

#home  { left: 32px;  top: 80px; width: 123px; height: 123px;
         background-image: url('../assets/img/boton-home.webp'); }
#otra  { left: 931px; top: 82px; width: 119px; height: 118px;
         background-image: url('../assets/img/boton-otra.webp'); }
#chapa { left: 241px; top: 68px; width: 597px; height: 161px;
         background-image: url('../assets/img/chapa-titulo.webp');
         display: grid; place-items: center; cursor: default; }

.icono:active { transform: translateY(3px); }

/* El SVG de cada boton es el respaldo: si la imagen del PSD no carga, se ve
   el icono dibujado sobre una pildora azul y el juego sigue usable. */
.icono svg { width: 58px; height: 58px; fill: #fff; opacity: 0; }
.icono { display: grid; place-items: center; }

/* El titulo viene INCRUSTADO en la chapa del PSD, asi que normalmente no se
   dibuja texto encima. Si alguien cambia el copy desde el panel, el juego
   pasa a la chapa dibujada con el texto en vivo: se pierde el calce exacto
   con la pieza aprobada, pero el panel sigue sirviendo. */
#titulo { display: none; }

body.copy-propio #chapa {
  background-image: none;
  border: 5px solid rgba(255,255,255,.95);
  border-radius: 80px;
  background-color: #2682d5;
  background-image: linear-gradient(180deg, #58aeea, #2682d5 50%, #1565b0);
  padding: 16px 30px;
}
body.copy-propio #titulo {
  display: block;
  font-size: 56px; font-weight: 900; line-height: 1.04;
  text-transform: uppercase; color: #fff; text-align: center;
}

/* ---------- pantalla de entrada ---------- */

/* Texto, botones y logo salen del PSD y van en sus coordenadas exactas del
   lienzo de 1080x1920. Nada de flex: el diseno ya decidio donde va cada cosa.

   Los botones vinieron como capas sueltas, asi que siguen siendo <button> de
   verdad con el arte del cliente encima. Si hubieran venido en una sola imagen
   plana habria que ponerles areas invisibles por arriba y adivinar donde
   empieza cada uno.

   OJO: en el PSD los nombres de las capas de los botones estan CRUZADOS. La
   que se llama 'bot-nno' es el ¡QUIERO!. Se verifico mirando las imagenes. */

#atrae {
  position: absolute; inset: 0;
  display: none;
  background: url('../assets/img/fondo.webp') center/cover no-repeat;
}
body.atractor #atrae { display: block; }

/* Las propiedades del fondo van SUELTAS y no con el atajo `background`: el
   atajo resetea background-image a none, y como esta regla es mas especifica
   que `.marca-logo` le borraba la imagen al logo. */
#atrae > *, #r-premio, #result .marca-logo {
  position: absolute;
  background-color: transparent;   /* ver nota de abajo */
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border: 0; padding: 0;
}

/* El `background-color: transparent` de arriba no es decorativo: un <button>
   trae un color de fondo propio del navegador (el gris de los botones del
   sistema). Sacarle el borde no alcanza — el gris asoma por todo lo que el PNG
   tiene transparente, y como el recorte de la capa es rectangular, se ve un
   recuadro gris alrededor de la pastilla. Parecia un problema del asset y no lo
   era: el alfa del PNG es un ovalo limpio. */

#a-tit { left: 125px; top:  472px; width: 833px; height: 374px;
         background-image: url('../assets/img/inicio-texto.webp'); }
#a-si  { left:  92px; top: 1011px; width: 416px; height: 139px; cursor: pointer;
         background-image: url('../assets/img/boton-quiero.webp'); }
#a-no  { left: 576px; top: 1011px; width: 416px; height: 139px; cursor: pointer;
         background-image: url('../assets/img/boton-no.webp'); }

#a-si:active, #a-no:active { transform: translateY(4px); }

/* ---------- resultado ---------- */

#result {
  position: absolute; inset: 0;
  display: none;
}
body.premio #result, body.pifia #result { display: block; }
body.premio #result { background: url('../assets/img/fondo.webp') center/cover no-repeat; }

/* El premio es la pieza del cliente, entera y en su posicion. */
#r-premio { left: 54px; top: 626px; width: 972px; height: 508px;
            background-image: url('../assets/img/premio-texto.webp'); display: none; }
body.premio #r-premio { display: block; }

/* El reintento NO esta en la ruta aprobada: lo inventamos para cuando el hielo
   se va por el canal vacio. Sigue siendo texto en vivo, dura 2,2 s y se va
   solo. No tapa el tablero: taparlo haria sentir un castigo donde no lo hay. */
#r-caja { display: none; }
body.pifia #r-caja {
  display: block;
  /* Baja al medio de la torre: a 420 tapaba el primer pasador, que es
     justamente lo que el jugador tiene que volver a mirar. */
  position: absolute; left: 50%; top: 700px;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  background: rgba(10,42,74,.82);
  border: 4px solid rgba(255,255,255,.75);
  border-radius: 44px;
  padding: 30px 70px;
}
body.pifia #r-tit {
  margin: 0; font-size: 96px; font-weight: 800; line-height: 1;
  text-transform: uppercase; color: #fff; letter-spacing: -.01em;
}
body.pifia #r-sub {
  margin: 8px 0 0; font-size: 40px; font-weight: 800;
  text-transform: uppercase; color: #dceeff; letter-spacing: .01em;
}

/* ---------- logo ---------- */

/* El de las pantallas, 411x105, que vino en el PSD nuevo. Reemplaza la
   descarga que veniamos usando. El chiquito de 133x35 sigue siendo otro: ese
   va impreso en el vaso y lo dibuja el canvas. */
.marca-logo {
  left: 334px; top: 1414px; width: 411px; height: 105px;
  background-image: url('../assets/img/logo-pantalla.webp');
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#atrae .marca-logo { position: absolute; }
body.pifia .marca-logo { display: none; }

/* ---------- controles del operador ---------- */

/* Dos botones y nada mas. No hay panel oculto ni entrada por toques: este
   juego vive un par de horas, atendido por staff que entrega un cupon en
   mano, y cuando se acaba se apaga. Nada que configurar en vivo.

   Van tenues a proposito, pero en tinte OSCURO y no blanco: el fondo de esta
   pieza es celeste claro y el blanco al 14% que usaba el juego anterior —que
   iba sobre hielo oscuro— aca desaparecia por completo. Medido: no se veian. */

.discreto {
  position: absolute; top: 22px;
  width: 86px; height: 86px;
  border: 0; border-radius: 22px;
  background: rgba(16,52,92,.15);
  display: grid; place-items: center;
  cursor: pointer; padding: 0; z-index: 6;
  color: rgba(16,52,92,.52);
}
.discreto svg { width: 42px; height: 42px; fill: currentColor; }
.discreto[hidden] { display: none; }

#fs   { left: 22px; }
#mute { left: 120px; }

/* El aviso de offline. Deliberadamente casi invisible: va en el mismo azul
   tenue de los botones del operador, en cuerpo chico, sin recuadro ni fondo, y
   se desvanece a los seis segundos. Tiene que poder leerse si uno lo busca y
   no competir con el celeste de la pieza. */
#offline {
  position: absolute; left: 26px; top: 126px; z-index: 6;
  font-size: 23px; font-weight: 800; letter-spacing: .04em;
  color: rgba(16,52,92,.40);
  display: flex; align-items: center; gap: 9px;
  pointer-events: none;
  transition: opacity 1.2s ease;
}
#offline[hidden] { display: none; }
#offline.seva { opacity: 0; }
#offline i {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(16,52,92,.40);
}

/* El tachado solo aparece cuando esta silenciado, y ahi se van las ondas. */
#mute .tachado { opacity: 0; }
/* Silenciado se marca mas fuerte que el resto: es un estado que el operador
   tiene que poder ver de un vistazo, no adivinar. */
body.sinSonido #mute { background: rgba(16,52,92,.3); color: rgba(16,52,92,.8); }
body.sinSonido #mute .ondas { opacity: .25; }
body.sinSonido #mute .tachado { opacity: 1; }