/* ══════════════════════════════════════════════════════════════════
   Booking Game Launcher · abre el booking game (iframe) tras el popup
   Transición "portal" con capas parallax. Modular y autocontenido.
   Estética arcade · azul eléctrico dominante · teal acento.
   ══════════════════════════════════════════════════════════════════ */
#booking-game-overlay{
  --g-blue:#3b82f6; --g-blue-soft:#4f8dff; --g-blue-hi:#9cc0ff; --g-teal:#00d4b4;
}
#booking-game-overlay[hidden]{ display:none; }
#booking-game-overlay{
  position:fixed; inset:0; z-index:100001;
  background:#04050b; overflow:hidden;
  opacity:0; transition:opacity .25s ease;
}
#booking-game-overlay.is-open{ opacity:1; }

/* ── Capas parallax del "portal" de lanzamiento ── */
.bgame-warp{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bgame-warp span{
  position:absolute; left:50%; top:50%; border-radius:50%;
  transform:translate(-50%,-50%) scale(.2); opacity:0;
}
.bgame-warp .w1{ width:60vmax; height:60vmax; background:radial-gradient(circle, rgba(59,130,246,.45), transparent 62%); }
.bgame-warp .w2{ width:40vmax; height:40vmax; background:radial-gradient(circle, rgba(29,78,216,.5), transparent 60%); }
.bgame-warp .w3{ width:22vmax; height:22vmax; background:radial-gradient(circle, rgba(0,212,180,.35), transparent 58%); }
/* rejilla synthwave que se precipita al abrir */
.bgame-grid{
  position:absolute; left:50%; bottom:-8%; z-index:1; width:340%; height:80%;
  transform:translateX(-50%) perspective(420px) rotateX(74deg) scale(2);
  transform-origin:50% 100%; opacity:0;
  background-image:
    linear-gradient(rgba(96,160,255,.7) 2px, transparent 2px),
    linear-gradient(90deg, rgba(96,160,255,.5) 2px, transparent 2px);
  background-size:54px 54px;
  -webkit-mask-image:linear-gradient(transparent 0%, #000 40%); mask-image:linear-gradient(transparent 0%, #000 40%);
}

#booking-game-overlay.is-open .bgame-warp .w1{ animation:bgameWarp .85s cubic-bezier(.16,.84,.24,1) forwards; }
#booking-game-overlay.is-open .bgame-warp .w2{ animation:bgameWarp .85s cubic-bezier(.16,.84,.24,1) .06s forwards; }
#booking-game-overlay.is-open .bgame-warp .w3{ animation:bgameWarp .85s cubic-bezier(.16,.84,.24,1) .12s forwards; }
@keyframes bgameWarp{ 0%{opacity:0; transform:translate(-50%,-50%) scale(.2)} 45%{opacity:.9} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.6)} }
#booking-game-overlay.is-open .bgame-grid{ animation:bgameGridIn 1s cubic-bezier(.16,.84,.24,1) forwards; }
@keyframes bgameGridIn{ 0%{opacity:0; transform:translateX(-50%) perspective(420px) rotateX(74deg) scale(2)} 60%{opacity:.6} 100%{opacity:.18; transform:translateX(-50%) perspective(420px) rotateX(74deg) scale(1)} }

/* ── HUD de carga ── */
.bgame-loading{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center; pointer-events:none;
  transition:opacity .4s ease;
}
.bgame-loading-title{
  font-family:'Press Start 2P','Inter',monospace; font-size:13px; color:#fff;
  letter-spacing:.04em; text-shadow:0 0 16px rgba(79,141,255,.7);
}
.bgame-loading-sub{ font-family:'Press Start 2P','Inter',monospace; font-size:8px; color:var(--g-teal); letter-spacing:.14em; animation:bgameBlink 1s steps(1) infinite; }
@keyframes bgameBlink{ 0%,49%{opacity:1} 50%,100%{opacity:.25} }
#booking-game-overlay.frame-ready .bgame-loading{ opacity:0; }

/* ── iframe del game ── */
.bgame-frame{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  border:0; background:transparent; opacity:0;
  transform:scale(1.04); transition:opacity .6s ease .15s, transform .8s cubic-bezier(.16,.84,.24,1) .15s;
}
#booking-game-overlay.frame-ready .bgame-frame{ opacity:1; transform:none; }

/* ── Botón salir ── */
.bgame-close{
  position:absolute; top:max(12px, env(safe-area-inset-top)); right:14px; z-index:5;
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Press Start 2P','Inter',monospace; font-size:8px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--g-blue-hi); background:rgba(8,12,24,.7); border:1px solid rgba(99,150,255,.5);
  border-radius:8px; padding:9px 11px; cursor:pointer; backdrop-filter:blur(6px);
  transition:color .2s, border-color .2s, background .2s;
}
.bgame-close:hover{ color:#fff; border-color:var(--g-blue-hi); background:rgba(59,130,246,.2); }

@media (prefers-reduced-motion: reduce){
  .bgame-warp span, .bgame-grid{ animation:none !important; opacity:0 !important; }
  .bgame-frame{ transition:opacity .2s ease; transform:none; }
}