/* ═══════════════════════════════════════════════════════════════════════════
   MONNET LATAM SLOTS — totem touch vertical
   ───────────────────────────────────────────────────────────────────────────
   El arte de Monnet (2160x3840) es la unica fuente de verdad de la pantalla:
   aqui no se redibuja ningun boton ni ningun texto. Solo se colocan encima las
   zonas tactiles invisibles, los tres rodillos y la imagen del premio, en
   porcentajes medidos sobre esos 2160x3840.

   Las medidas salieron de medir el arte pixel a pixel:
     ventana de rodillos   y 690..1830   (la cara termina ahi; abajo ya es bisel)
     filas de simbolos     y 930 / 1290 / 1650   -> celda de 360, no de 393
     rodillo 1  cara x 296..776 al medio   rodillo 2  x 811..1313
     rodillo 3  cara x 1343..1850 al medio
     boton PLAY            x 480..1700   y 2010..2390
     caja del premio       x 186..1965   y 2880..3640
     boton BACK (premio)   x 480..1700   y 3010..3400
     boton BACK (keep)     x 460..1700   y 2870..3320
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --cell: 33.3333%;          /* cada rodillo muestra 3 simbolos */
}

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

html, body {
  height: 100%;
  background: #050a2a;
  overflow: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* El puntero no se esconde a secas: si no, en una PC con mouse no hay forma de
   probar el juego. Se oculta solo cuando el mouse lleva unos segundos quieto
   (js/juego.js), y reaparece apenas se mueve. En el totem, que se maneja con
   el dedo, eso equivale a no verlo nunca. */
body.sin-puntero, body.sin-puntero * { cursor: none !important; }

/* El arte es 9:16. En una pantalla que no lo sea se ajusta entero y centrado:
   recortarlo seria comerse el logo o el boton. */
#escenario {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100vw, calc(100vh * 2160 / 3840));
  height: min(100vh, calc(100vw * 3840 / 2160));
  overflow: hidden;
  container-type: size;             /* adentro se mide contra el arte, no contra la ventana */
}

/* Pantalla de pie conectada a una Mac que la cree horizontal (index.html?rotar=90).
   El escenario se arma con ancho y alto cruzados y se gira sobre su centro:
   el sistema sigue horizontal, asi el touch cae donde se toca, y el navegador
   traduce cada toque a traves del giro. Adentro todo sigue en % del arte. */
html.rot90 #escenario,
html.rot270 #escenario {
  width: min(100vh, calc(100vw * 2160 / 3840));
  height: min(100vw, calc(100vh * 3840 / 2160));
  /* con inset:0 y alto mayor que la ventana, margin:auto no centra: se hace a mano */
  inset: auto;
  left: 50%;
  top: 50%;
}
html.rot90  #escenario { transform: translate(-50%, -50%) rotate(90deg); }
html.rot270 #escenario { transform: translate(-50%, -50%) rotate(-90deg); }

.pantalla {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease;
}
.pantalla.activa { opacity: 1; visibility: visible; }

/* ── Zonas tactiles invisibles sobre los botones dibujados en el arte ─────── */
.zona {
  position: absolute;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 2%;
  transition: background-color .1s ease;
}
.zona:active { background-color: rgba(255,255,255,.12); }
.zona[disabled] { pointer-events: none; }

#btnPlay      { left: 22.222%; top: 52.344%; width: 56.481%; height: 9.896%; }
#btnGanaBack  { left: 22.222%; top: 78.385%; width: 56.481%; height: 10.156%; }
#btnKeepBack  { left: 21.296%; top: 74.740%; width: 57.407%; height: 11.719%; }

/* El acceso al stock ya NO va sobre la palabra MONNET: lo pidio asi el cliente
   el 2026-09-22, porque cualquier invitado que tocara el logo entraba al panel.
   Ahora el stock vive en su propia pagina: admin.html, publicada aparte. */

/* ── Los rodillos ─────────────────────────────────────────────────────────────
   Cada rodillo es una ventana con la tira de simbolos corriendo por dentro.
   El sombreado del cilindro va ENCIMA y quieto: es luz, no parte de la tira,
   y se saco del propio arte, asi que coincide exactamente. */
/* En el arte el conjunto es un BARRIL: los costados de cada rodillo son arcos,
   no verticales. Un rectangulo recto encima le come la curva, y ahi es donde
   las lineas divisorias se ven delgadas y los contornos rectos. Por eso cada
   rodillo se recorta con la silueta sacada del propio arte (img/mask_r*.png).
   La caja es mas ancha que la cara: la cara se mueve dentro de ella con la
   altura, y la mascara tapa lo que sobra. La mascara tambien tapa los primeros
   57 px (y 690..746 del arte): eso es el labio blanco del bisel, no cara del
   rodillo, y un simbolo que pase por ahi al girar se veria a plena luz sobre
   el borde blanco (Carlos, 2026-09-22). */
.rodillo {
  position: absolute;
  top: 17.969%;
  height: 29.688%;                  /* la cara llega hasta y=1830, no 1870 */
  overflow: hidden;
  background: #fff;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* --dx corre la tira dentro de la caja para que los simbolos caigan sobre el
   eje donde el arte los dibuja: x 540 / 1070 / 1604 del arte. Ese eje es FIJO
   por rodillo —el arte no lo curva con el barril— y no coincide con el centro
   de la caja ni con el de la cara: medido encajando cada simbolo sobre el PDF
   (2026-09-22), no supuesto. */
#r1 { left: 13.657%; width: 24.167%; --dx: -3.065%;
      -webkit-mask-image: url('../img/mask_r1.png?v=2'); mask-image: url('../img/mask_r1.png?v=2'); }
#r2 { left: 37.500%; width: 23.380%; --dx:  1.485%;
      -webkit-mask-image: url('../img/mask_r2.png?v=2'); mask-image: url('../img/mask_r2.png?v=2'); }
#r3 { left: 60.463%; width: 25.278%; --dx:  4.579%;
      -webkit-mask-image: url('../img/mask_r3.png?v=2'); mask-image: url('../img/mask_r3.png?v=2'); }

/* top: las tres filas del arte estan en y 930/1290/1650, que no arrancan al
   ras de la ventana: la tira entra 60px (5.2632%) para que caigan en su sitio. */
.tira {
  position: absolute;
  left: var(--dx); right: calc(-1 * var(--dx));
  top: 5.2632%;
  will-change: transform;
}

.celda {
  height: var(--cell-px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Cada simbolo se dibuja al tamano que tiene en el arte, medido sobre la
   celda de 360 px: si se escalan todos igual, unos quedan enormes y otros
   diminutos frente al original. */
.celda img { width: auto; object-fit: contain; display: block; }
.celda img.banco     { height: 91.389%; }
.celda img.billete   { height: 40.000%; }
.celda img.billetera { height: 75.556%; }
.celda img.mapa      { height: 92.778%; }
.celda img.qr        { height: 65.278%; }
.celda img.tarjeta   { height: 77.778%; }

/* La tira de sombra se saco sobre y 690..1870 y la ventana ahora llega a 1830:
   se dibuja a su alto original (103.5088% del nuevo) anclada arriba, asi cada
   fila del degradado sigue cayendo en la misma altura del arte. */
.sombra {
  position: absolute;
  inset: 0;
  background-image: url('../img/reel_fondo.png');
  background-size: 100% 103.5088%;
  background-position: left top;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ── La caja del premio de la pantalla principal ──────────────────────────── */
.caja-premio {
  position: absolute;
  left: 8.611%;
  top: 75%;
  width: 82.361%;
  height: 19.792%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.caja-premio img {
  max-height: 90%;
  max-width: 62%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .3s ease;
}
.caja-premio img.visible { opacity: 1; }

/* ── Remates de la jugada ─────────────────────────────────────────────────── */

/* El asentamiento del rodillo NO se hace con una animacion aparte: la tira se
   mueve con transform, y una animacion que tambien tocara transform le pisaria
   la posicion final y la haria saltar. El rebote va dentro de la propia
   transicion de frenado, en js/juego.js. */

/* ── La pantalla del premio ───────────────────────────────────────────────
   El arte de Monnet no se toca: la animacion va encima. Entra con un impulso
   corto, cae confeti de verdad sobre el arte (que ya trae confeti dibujado, la
   idea es que se sienta continuo), un brillo barre el CONGRATULATIONS y el
   BACK late para que se note que hay que tocarlo. */
#pGana.activa { animation: llegaPremio .62s cubic-bezier(.18,.9,.28,1.06); }
@keyframes llegaPremio {
  0%   { transform: scale(1.07); opacity: 0 }
  40%  { opacity: 1 }
  100% { transform: scale(1); opacity: 1 }
}

#confeti {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* Barrido de luz sobre el texto dorado, medido sobre el arte. */
#brilloBanner {
  position: absolute;
  left: 14.861%; top: 19.062%; width: 70.694%; height: 4.323%;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}
#brilloBanner::after {
  content: "";
  position: absolute;
  top: -60%; bottom: -60%; width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  filter: blur(2px);
  transform: skewX(-18deg);
  animation: barrido 2.6s ease-in-out .45s infinite;
}
@keyframes barrido {
  0%   { left: -30% }
  55%  { left: 115% }
  100% { left: 115% }
}

/* El BACK respira, para que se vea que espera un toque. */
.zona.late { animation: latirBoton 1.9s ease-in-out .8s infinite; border-radius: 3%; }
@keyframes latirBoton {
  0%, 100% { background-color: rgba(255,255,255,0) }
  50%      { background-color: rgba(140,230,255,.13) }
}

/* La linea central se enciende cuando la jugada gana. */
#lineaGanadora {
  position: absolute;
  left: 13.704%; width: 71.944%;
  top: 28.906%;  height: 9.375%;           /* la fila del medio: y 1110..1470 */
  opacity: 0;
  pointer-events: none;
  border-radius: 1.2cqh;
  box-shadow: inset 0 0 0 .5cqh rgba(90,240,255,.95),
              0 0 4cqh rgba(90,240,255,.75);
  background: linear-gradient(90deg, rgba(90,240,255,.12), rgba(255,255,255,.2), rgba(90,240,255,.12));
}
#lineaGanadora.on { animation: latirLinea 1.15s ease-in-out; }
@keyframes latirLinea {
  0%   { opacity: 0 }
  18%  { opacity: 1 }
  55%  { opacity: .45 }
  80%  { opacity: 1 }
  100% { opacity: 0 }
}

/* Un destello blanco al ganar, corto, sin tapar la pantalla. */
#escenario.destello::after {
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  animation: fogonazo .5s ease-out forwards;
  pointer-events: none;
  z-index: 60;
}
@keyframes fogonazo { from { opacity: .55 } to { opacity: 0 } }

.zona.pulsado { background-color: rgba(120,230,255,.22); }

/* ── Precarga ─────────────────────────────────────────────────────────────── */
#cargando {
  position: absolute; inset: 0; z-index: 90;
  background: #071046;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4cqh;
  transition: opacity .45s ease;
}
#cargando.listo { opacity: 0; pointer-events: none; }
#cargando .marca {
  color: #fff; font-size: 4.4cqh; font-weight: 300; letter-spacing: .12em;
}
#cargando .marca b { color: #35c5f2; font-weight: 800; }
.pista-carga {
  width: 46%; height: 1.1cqh; border-radius: 99px;
  background: rgba(255,255,255,.14); overflow: hidden;
}
#barra {
  width: 0; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #1b7de8, #35c5f2);
  transition: width .25s ease;
}

/* ── Velo de aviso (solo para el operador: sin stock) ─────────────────────── */
.velo {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(4,8,34,.94);
  z-index: 80;
  padding: 8%;
}
.velo.on { display: flex; }
.velo-caja { text-align: center; }
.velo-titulo { color: #fff; font-size: 4.2cqh; font-weight: 800; margin-bottom: 2cqh; }
.velo-nota   { color: #8fb6e8; font-size: 2.6cqh; line-height: 1.5; }