/* Ruleta Bóveda · Visa BHD
   Tipografía: Trust Sans (Regular y Medium), cargada desde la carpeta de la app.
   Colores tomados del arte: negro, grises 58595b / 808285 / bcbec0 / e6e7e8 y el gris de texto 414042. */

@font-face { font-family: "TrustSansApp"; src: url("../assets/fuentes/TrustSans-Regular.otf") format("opentype"); font-weight: 400; font-display: block; }
@font-face { font-family: "TrustSansApp"; src: url("../assets/fuentes/TrustSans-Medium.otf") format("opentype"); font-weight: 500; font-display: block; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: #fff; font-family: "TrustSansApp", "Segoe UI", sans-serif; }
body { overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body.sin-cursor #marco { cursor: none; }
[hidden] { display: none !important; }

/* ---------- escenario ---------- */
#marco { position: fixed; inset: 0; background: #000; overflow: hidden; touch-action: none; }
#escenario { position: absolute; left: 50%; top: 50%; width: 1080px; height: 1920px; transform-origin: 50% 50%; overflow: hidden; background: #000; }
#fondo, #intro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#intro.oculto { visibility: hidden; }

#ruleta { position: absolute; opacity: 0; visibility: hidden; transition: opacity .18s linear; }
#ruleta.visible { opacity: 1; visibility: visible; }
#ruleta .capa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#ruleta .capa-disco { transform-origin: 50% 50%; will-change: transform; }
/* El puntero se inclina sobre su borde superior cuando lo empuja un perno (lo mueve publico.js).
   Con premio elegido se enciende: cuerpo claro, borde negro y un resplandor que late. */
#ruleta .capa-freno { transform-origin: 50% 0.9%; will-change: transform; }
#ruleta .capa-freno .freno-borde, #ruleta .capa-freno .freno-luz { opacity: 0; transition: opacity .3s; }
#ruleta .capa-freno.elegido .freno-borde, #ruleta .capa-freno.elegido .freno-luz { opacity: 1; }
#ruleta .capa-freno.elegido { animation: latido 1.3s ease-in-out infinite; }
@keyframes latido {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,255,255,.75)); }
  50% { filter: drop-shadow(0 0 22px #fff) drop-shadow(0 0 8px #fff); }
}
/* Las casillas que no ganaron se oscurecen */
#ruleta .capa-disco .resto { fill: #000; opacity: 0; transition: opacity .6s; }
#ruleta .capa-disco .resto.visible { opacity: .58; }

#aviso { position: absolute; left: 0; right: 0; top: 1642px; text-align: center; font-weight: 500; font-size: 46px; letter-spacing: .04em;
  color: #fff; text-shadow: 0 2px 18px #000; opacity: 0; transition: opacity .35s; pointer-events: none; }
#aviso.visible { opacity: 1; }
#aviso.pulso.visible { animation: pulso 2.2s ease-in-out infinite; }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

#marca-prueba { position: absolute; right: 28px; top: 28px; padding: 8px 18px; border: 2px solid #bcbec0; border-radius: 8px;
  font-weight: 500; font-size: 26px; letter-spacing: .12em; color: #e6e7e8; background: rgba(0,0,0,.6); }

#velo { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .36s; }
#velo.visible { opacity: 1; }
#zona-panel { position: absolute; left: 0; top: 0; width: 170px; height: 170px; }

/* ---------- tarjeta de resultado ----------
   Va arriba: en el tótem (pantalla de 2 a 6 pies del piso) esa franja queda a la altura de los ojos,
   y deja la ruleta entera a la vista con el puntero encendido. */
#resultado { position: absolute; left: 0; right: 0; top: 78px; display: flex; flex-direction: column; align-items: center;
  opacity: 0; visibility: hidden; transform: translateY(-40px); transition: opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s .45s; pointer-events: none; }
#resultado.visible { opacity: 1; visibility: visible; transform: none; transition: opacity .45s, transform .45s cubic-bezier(.2,.8,.2,1); }
.res-caja { position: relative; width: 900px; padding: 32px 56px 30px; text-align: center; border-radius: 30px;
  background: linear-gradient(#1c1c1d, #050505); border: 2px solid #808285;
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(230,231,232,.35), 0 30px 80px rgba(0,0,0,.85); }
.res-titulo { font-weight: 500; font-size: 40px; letter-spacing: .2em; text-transform: uppercase; color: #bcbec0; }
.res-sub { margin-top: 6px; font-size: 30px; color: #808285; }
#res-nombre { margin: 4px 0 20px; font-weight: 500; line-height: 1.08; color: #fff; text-wrap: balance; }
.res-logos { display: flex; align-items: center; justify-content: center; gap: 30px; padding-top: 20px; border-top: 1px solid #58595b; }
#res-visa { height: 38px; width: 116px; }
.res-raya { width: 1px; height: 46px; background: #808285; }
.res-logos img { height: 50px; display: block; }
#res-prueba { position: absolute; left: 26px; top: 22px; padding: 4px 12px; border: 2px solid #bcbec0; border-radius: 6px; font-size: 22px; font-weight: 500; letter-spacing: .12em; color: #e6e7e8; }

/* ---------- PIN ---------- */
#pin { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.82); }
.pin-caja { width: min(360px, 86vw); padding: 26px; border-radius: 18px; background: #161617; border: 1px solid #58595b; text-align: center; }
.pin-caja p { margin: 0 0 10px; color: #bcbec0; font-size: 18px; }
.pin-caja .puntos { height: 34px; font-size: 26px; letter-spacing: .4em; }
#pin.mal .pin-caja { animation: mal .35s; border-color: #e6e7e8; }
@keyframes mal { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.teclas button { height: 62px; font: 500 22px "TrustSansApp", sans-serif; color: #fff; background: #2a2a2b; border: 1px solid #414042; border-radius: 12px; }
.teclas button:active { background: #414042; }

@media (prefers-reduced-motion: reduce) { #aviso.pulso.visible { animation: none; } }