@font-face { font-family: "Calligrapher"; src: url("../assets/panda/fuentes/calligrapher.ttf?v=5dd6071650") format("truetype"); font-display: block; }
@font-face { font-family: "Fjalla One"; src: url("../assets/panda/fuentes/fjalla-one.ttf?v=ffb1b28b28") format("truetype"); font-display: swap; }

:root {
  --letra: Arial, Helvetica, sans-serif;
  --letra-panda: "Calligrapher", "Fjalla One", Georgia, serif;
  --crema: #f7e7b0;
  --azul-oscuro: #0b2556;
  --oro: linear-gradient(180deg, #fff6c0 0%, #ffd84a 45%, #c88a10 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #071226; color: #fff; font-family: var(--letra); -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 3px solid #ffd84a; outline-offset: 2px; }
[hidden] { display: none !important; }

body::before {
  content: ""; position: fixed; inset: 0; z-index: 0;
  background: #0b1442 url("../assets/fondo/fondo-menu.jpg?v=e12daa3feb") center / cover no-repeat;
}
.capa-ventana { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }

.preloader {
  position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh;
  background: #000; overflow: hidden; transition: opacity .6s ease;
}
.preloader[data-visible="false"] { opacity: 0; pointer-events: none; }
.preloader__logo { position: relative; width: min(560px, 70vw); margin-top: -8vh; filter: drop-shadow(0 0 22px rgba(255, 166, 0, .5)); }

.preloader, .carga { container-type: size; }
.fondo-carga {
  position: absolute; left: 50%; top: 50%; width: max(100cqw, 200cqh); height: max(50cqw, 100cqh); transform: translate(-50%, -50%);
  background: url("../assets/panda/img/carga.webp?v=41f9d0ef5e") center / 100% 100% no-repeat; pointer-events: none;
}
.faroles i {
  position: absolute; top: 83%; width: 8.5%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 236, 170, .95), rgba(255, 150, 60, .6) 40%, rgba(255, 70, 0, 0) 100%);
  mix-blend-mode: screen; opacity: .15; animation: farol 2.6s ease-in-out infinite;
}
.faroles i:nth-child(1) { left: 13.6%; animation-delay: 0s; }
.faroles i:nth-child(2) { left: 28.2%; animation-delay: .25s; }
.faroles i:nth-child(3) { left: 42.7%; animation-delay: .5s; }
.faroles i:nth-child(4) { left: 57.3%; animation-delay: .75s; }
.faroles i:nth-child(5) { left: 72%; animation-delay: 1s; }
.faroles i:nth-child(6) { left: 86.6%; animation-delay: 1.25s; }
@keyframes farol { 0%, 100% { opacity: .15; } 25%, 55% { opacity: 1; } }

.escena { position: absolute; left: 0; top: 0; width: 1536px; height: 1152px; transform-origin: 0 0; z-index: 1; overflow: hidden; direction: ltr; }
.capa { position: absolute; left: 0; top: 0; width: 1536px; height: 1152px; pointer-events: none; }
.capa--frente { z-index: 3; }
.menu { position: absolute; inset: 0; z-index: 2; }
.jp-lobby, .bono-html { display: none; } /* los muestra un diseño con --sin-escena: 1 */

.pestanas { position: absolute; left: 0; right: 0; top: 152px; height: 70px; display: flex; gap: 5px; padding: 0 3px; align-items: flex-end; }
.pestanas::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 5px; background: linear-gradient(180deg, #ffe69a, #c8901c 60%, #7a4e08);
}
.pestana {
  flex: 1 1 0; height: 63px; min-width: 0; padding: 4px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: clip;
  background: url("../assets/panda/img/pestana.webp?v=04d279187b") center / 100% 100% no-repeat;
  font: 25px/1 var(--letra-panda); color: var(--crema); text-shadow: 0 2px 2px #000;
  display: flex; align-items: center; justify-content: center;
}
.pestana:hover { filter: brightness(1.15); }
.pestana[aria-selected="true"] {
  height: 74px; background-image: url("../assets/panda/img/pestana-activa.webp?v=103ec435c7");
}
html[dir="rtl"] .pestana, .pestana:lang(he) { font-family: Arial, sans-serif; font-weight: bold; }

.rejilla { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.juego {
  position: absolute; width: 378px; height: 227px; transform: translate(-50%, -50%); pointer-events: auto;
  transition: transform .12s ease;
}
.juego:active { transform: translate(-50%, -50%) scale(.97); }
.juego__portada { position: absolute; left: 14px; top: 13px; right: 14px; bottom: 13px; overflow: hidden; background: #0b2556; }
.juego__portada img { position: absolute; inset: 0; width: 100%; height: 100%; }
.juego__fondo { object-fit: cover; filter: blur(10px) brightness(.75); transform: scale(1.15); }
.juego__img { object-fit: contain; }
.juego__marco { position: absolute; inset: 0; background: url("../assets/panda/img/marco.webp?v=23d8b1dd9d") center / 100% 100% no-repeat; }
.juego__activo { position: absolute; left: -8px; top: -8px; right: -7px; bottom: -7px; background: url("../assets/panda/img/marco-activo.webp?v=f19ee50c38") center / 100% 100% no-repeat; opacity: 0; }
.juego:hover .juego__activo, .juego:focus-visible .juego__activo, .juego[data-marcado="true"] .juego__activo { opacity: 1; }
.juego:focus-visible { outline: none; }
.juego__nuevo { position: absolute; right: 2px; top: -6px; width: 78px; height: 45px; background: url("../assets/panda/img/nuevo.webp?v=6e794eed39") center / contain no-repeat; }
.juego__espere {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  font: 44px/1 var(--letra-panda); color: #fff; text-shadow: 0 0 6px #000, 0 3px 4px #000; opacity: 0; transition: opacity .2s;
}
.juego[data-abriendo="true"] .juego__espere { opacity: 1; }
.juego[data-apagado="true"] .juego__portada { filter: grayscale(1) brightness(.5); }
.juego__apagado { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; font: bold 26px/1.2 var(--letra); color: #ffd84a; text-shadow: 0 2px 3px #000; }
.juego__apagado small { font-size: 16px; color: #fff; }
.juego[data-apagado="true"] .juego__apagado { display: flex; }
.sin-juegos { position: absolute; left: 0; right: 0; top: 560px; margin: 0; text-align: center; font: 40px/1 var(--letra-panda); color: var(--crema); text-shadow: 0 3px 4px #000; }

.flecha { position: absolute; top: 496px; width: 151px; height: 165px; background: url("../assets/panda/img/flecha.webp?v=b4d9194a5c") center / contain no-repeat; }
.flecha--izq { left: 3px; }
.flecha--der { right: 3px; transform: scaleX(-1); }
.flecha:hover { background-image: url("../assets/panda/img/flecha-marcada.webp?v=7b512f618a"); }
.flecha:active { background-image: url("../assets/panda/img/flecha-luz.webp?v=7faeaf45fb"); }
.flecha[data-apagada="true"] { background-image: url("../assets/panda/img/flecha-apagada.webp?v=fe779ab776"); pointer-events: none; }

.pagina { position: absolute; left: 215px; top: 974px; width: 230px; margin: 0; text-align: center; font: bold 33px/1 var(--letra); color: #fff; text-shadow: 0 2px 3px #000, 0 0 2px #000; }
.ayuda { position: absolute; left: 216px; margin: 0; font: bold 21px/1 var(--letra); color: #fff; text-shadow: 0 2px 2px #000; white-space: nowrap; }
.ayuda b { display: inline-block; min-width: 92px; }
.ayuda--1 { top: 1022px; }
.ayuda--2 { top: 1050px; }
.caja-info {
  position: absolute; left: 28px; top: 1078px; width: 545px; height: 66px; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  border: 18px solid transparent; border-width: 16px 17px 14px 18px; border-image: url("../assets/panda/img/caja-info.webp?v=07564928b2") 16 17 14 18 fill / 16px 17px 14px 18px stretch;
  padding: 0;
}
.caja-info__logo { height: 50px; margin: -8px 0; filter: drop-shadow(0 0 4px rgba(255, 166, 0, .5)); }
.caja-info__datos { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 3px 18px; margin: -6px 0; font: 17px/1 var(--letra); color: #e9e9e9; }
.caja-info__datos dt { margin: 0; }
.caja-info__datos dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.controles { display: flex; gap: 8px; margin: -8px 0; }
.ctl { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.ctl:hover { background: rgba(255, 216, 74, .25); }
.ctl img { width: 26px; height: 26px; }
.ctl[data-on="false"] img { opacity: .35; }

.credito { position: absolute; left: 593px; top: 958px; width: 350px; height: 175px; background: url("../assets/panda/img/credito.webp?v=64378f657c") center / 100% 100% no-repeat; }
.credito__valor {
  position: absolute; left: 30px; right: 30px; top: 74px; text-align: center; font: bold 58px/1 var(--letra); letter-spacing: 1px;
  color: #fff32c; -webkit-text-stroke: 2px #4a1400; paint-order: stroke fill; text-shadow: 0 3px 3px rgba(0, 0, 0, .6);
}
.credito__moneda { position: absolute; left: 0; right: 0; top: 134px; text-align: center; font: 22px/1 var(--letra); color: #fff; text-shadow: 0 1px 2px #000; }
.credito:hover { filter: brightness(1.08); }

.toque { position: absolute; z-index: 4; }
.toque--jackpots { left: 30px; top: 22px; width: 1100px; height: 140px; }
.toque--bono { left: 1170px; top: 6px; width: 212px; height: 160px; }
.toque--bono.cobrando { border-radius: 50%; animation: bono-brilla .45s ease-in-out infinite alternate; }
@keyframes bono-brilla { from { box-shadow: 0 0 20px 6px rgba(255, 216, 74, .35); } to { box-shadow: 0 0 46px 18px rgba(255, 216, 74, .75); } }
.credito.cobrando { animation: credito-late .3s ease-in-out infinite alternate; }
@keyframes credito-late { from { transform: scale(1); filter: brightness(1); } to { transform: scale(1.05); filter: brightness(1.3) drop-shadow(0 0 18px rgba(255, 216, 74, .9)); } }
.moneda-cashback {
  position: absolute; z-index: 6; width: 40px; height: 40px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff8c4 0 12%, #ffd84a 30%, #e0a10a 62%, #8a5400 100%);
  box-shadow: 0 0 10px rgba(255, 216, 74, .9), inset 0 -3px 4px rgba(0, 0, 0, .35);
  animation: moneda-vuela 1.15s cubic-bezier(.45, 0, .7, 1) forwards;
}
.moneda-cashback::after { content: "$"; position: absolute; inset: 0; display: grid; place-items: center; font: bold 22px/1 Arial, sans-serif; color: #8a5400; }
@keyframes moneda-vuela {
  0% { opacity: 0; transform: translate(0, 0) scale(.5) rotate(0deg); }
  10% { opacity: 1; }
  50% { transform: translate(calc(var(--x) * .45 + var(--curva) * .3), calc(var(--y) * .3)) scale(1.15) rotate(220deg); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.7) rotate(480deg); }
}
.cashback-etiqueta {
  position: absolute; z-index: 7; left: 468px; top: 868px; width: 600px; text-align: center; white-space: nowrap; pointer-events: none;
  font: bold 40px/1 var(--letra); color: #fff32c; -webkit-text-stroke: 2px #4a1400; paint-order: stroke fill; text-shadow: 0 3px 6px rgba(0, 0, 0, .7);
  animation: etiqueta-sube 4s ease-out forwards;
}
@keyframes etiqueta-sube { 0% { opacity: 0; transform: translateY(30px) scale(.7); } 12% { opacity: 1; transform: translateY(0) scale(1.1); } 20% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-60px); } }
.cerrar-menu { position: absolute; z-index: 4; left: 1452px; top: 36px; width: 50px; height: 49px; background: url("../assets/panda/img/cerrar.webp?v=c7f005a021") center / contain no-repeat; }
.cerrar-menu:hover { filter: brightness(1.15); }

.game-frame { position: fixed; inset: 0; z-index: 50; background: #000; display: flex; flex-direction: column; }
.barra-juego {
  flex: none; height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 8px;
  background: linear-gradient(180deg, #8c1010, #4a0606); border-bottom: 3px solid #c8901c; box-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.volver-lobby {
  flex: none; height: 32px; padding: 0 16px; border-radius: 8px; font: 22px/1 var(--letra-panda); color: var(--crema); text-shadow: 0 2px 2px #000;
  background: url("../assets/panda/img/pestana-activa.webp?v=103ec435c7") center / 100% 100% no-repeat;
}
.barra-juego__jackpots { flex: 1; display: flex; justify-content: space-around; gap: 6px; min-width: 0; overflow: hidden; }
.mini-jp { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font: bold 15px/1 var(--letra); }
.mini-jp small { font-size: 12px; color: var(--crema); text-transform: uppercase; }
.mini-jp b { font-size: 18px; }
.mini-jp[data-id="diamond"] b { color: #8fd3ff; }
.mini-jp[data-id="platinum"] b { color: #e4e0f6; }
.mini-jp[data-id="gold"] b { color: #ffd84a; }
.mini-jp[data-id="silver"] b { color: #d6d6d6; }
.mini-jp[data-id="bronze"] b { color: #f0a080; }
.mini-jp[data-id="iron"] b { color: #9aa2ae; }
.mini-jp b { -webkit-text-stroke: 1px rgba(0, 0, 0, .6); paint-order: stroke fill; }
@media (max-width: 760px) { .mini-jp small { display: none; } .mini-jp b { font-size: 14px; } }
.game-frame iframe { flex: 1; width: 100%; border: 0; background: #000; }

.carga {
  position: absolute; left: 0; right: 0; bottom: 0; top: 47px; z-index: 2; display: flex; align-items: center; justify-content: center;
  background: #000; overflow: hidden; transition: opacity .5s ease;
}
.carga.saliendo { opacity: 0; }
.carga { flex-direction: column; gap: 14px; }
.carga__texto { position: relative; z-index: 1; margin: -10vh 0 0; font: clamp(34px, 5vw, 72px)/1 var(--letra-panda); color: #fff; text-shadow: 0 0 10px #000, 0 4px 6px #000; }
/* barra con el avance real de la carga del juego (lobby.js pone --avance de 0 a 1 y el porcentaje) */
.carga__barra { position: relative; z-index: 1; width: min(50vw, 420px); height: 12px; border-radius: 99px; overflow: hidden; background: rgba(0, 0, 0, .55); border: 2px solid #c8901c; }
.carga__barra i { display: block; height: 100%; width: calc(var(--avance, 0) * 100%); background: var(--oro); transition: width .3s ease; }
.carga__porcentaje { position: relative; z-index: 1; font: bold 18px/1 var(--letra); color: var(--crema); text-shadow: 0 2px 3px #000; }
.portada-inicio { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; animation: entra .5s ease; }
@keyframes entra { from { opacity: 0; transform: scale(1.04); } }

.popup { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .72); padding: 16px; }
.ventana {
  width: min(760px, 100%); max-height: 92vh; display: flex; flex-direction: column; padding: 22px 26px; border-radius: 22px;
  background: linear-gradient(180deg, #123a7a 0%, #0b2556 55%, #071735 100%); border: 3px solid #c8901c;
  box-shadow: 0 0 0 2px #ffe69a inset, 0 18px 50px rgba(0, 0, 0, .8);
}
.ventana__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ventana__cabeza h2 { margin: 0; font: 40px/1 var(--letra-panda); background: var(--oro); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 1px #000); }
.ventana__cerrar { width: 48px; height: 47px; flex: none; background: url("../assets/panda/img/cerrar.webp?v=c7f005a021") center / contain no-repeat; }
.ventana__cerrar:hover { filter: brightness(1.15); }
.ventana__saldo { display: flex; gap: 40px; margin: 18px 0 10px; }
.ventana__saldo small { display: block; font: bold 14px/1 var(--letra); color: #ffd84a; letter-spacing: 1px; }
.ventana__saldo b { font: bold 32px/1.3 var(--letra); color: #fff; }
.ventana__error { color: #ff8a7a; margin: 6px 0; }
.ventana__tabla { overflow: auto; margin: 8px 0; border-radius: 14px; background: rgba(0, 0, 0, .3); user-select: text; }
.ventana__tabla::-webkit-scrollbar { width: 10px; }
.ventana__tabla::-webkit-scrollbar-thumb { background: #c8901c; border-radius: 5px; }
.ventana table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ventana th { position: sticky; top: 0; background: #0b2556; color: #ffd84a; font: bold 13px/1 var(--letra); letter-spacing: 1px; padding: 12px 10px; text-align: left; }
.ventana td { padding: 9px 10px; border-top: 1px solid rgba(200, 144, 28, .25); color: #e8eef8; }
.ventana td.mas { color: #6fdc6f; }
.ventana td.menos { color: #ff8a7a; }
.ventana__pie { display: flex; justify-content: flex-end; padding-top: 10px; }
.reglas-nivel { font: bold 15px/1 var(--letra); text-transform: uppercase; }
.reglas-texto { margin: 6px 0 0; padding-left: 20px; color: #dfe6f2; font-size: 15px; line-height: 1.5; }
.reglas-texto b { color: #ffd84a; }

.boton-oro {
  min-width: 220px; height: 58px; padding: 0 28px; border-radius: 14px; font: 28px/1 var(--letra-panda); color: var(--crema); text-shadow: 0 2px 2px #000;
  background: url("../assets/panda/img/pestana-activa.webp?v=103ec435c7") center / 100% 100% no-repeat; box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.boton-oro:hover { filter: brightness(1.1); }
.boton-oro[data-disabled="true"] { opacity: .6; pointer-events: none; }

.jp-premio { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .7); opacity: 0; transition: opacity .4s ease; }
.jp-premio.activa { opacity: 1; }
.jp-premio__caja { position: relative; width: min(100vw, 150vh); aspect-ratio: 1616 / 1077; }
.jp-premio__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; }
.jp-premio__cerrar { position: absolute; right: 9%; top: 12%; width: 5%; aspect-ratio: 48 / 47; background: url("../assets/panda/img/cerrar.webp?v=c7f005a021") center / contain no-repeat; }

.Auth { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 16px; background: #000 url("../assets/panda/img/carga.webp?v=41f9d0ef5e") center / cover no-repeat; }
.acceso {
  width: min(460px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 26px 30px; border-radius: 22px; text-align: center;
  background: linear-gradient(180deg, rgba(18, 58, 122, .94), rgba(7, 23, 53, .96)); border: 3px solid #c8901c; box-shadow: 0 0 0 2px #ffe69a inset, 0 18px 50px rgba(0, 0, 0, .8);
}
.acceso__logo { width: 92%; margin: 0 auto; filter: drop-shadow(0 0 14px rgba(255, 166, 0, .4)); }
.acceso__titulo { margin: 4px 0; font: 40px/1 var(--letra-panda); background: var(--oro); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.acceso__campo { width: 100%; height: 54px; padding: 0 18px; border-radius: 12px; border: 2px solid #c8901c; background: rgba(0, 0, 0, .45); color: #fff; font: 20px var(--letra); outline: none; user-select: text; }
.acceso__campo:focus { border-color: #ffe69a; box-shadow: 0 0 12px rgba(255, 200, 80, .6); }
.acceso__campo::placeholder { color: #9fb0cf; }
.acceso__clave { position: relative; }
.acceso__clave .acceso__campo { padding-right: 60px; }
.acceso__ver { position: absolute; right: 12px; top: 50%; width: 40px; height: 40px; transform: translateY(-50%); display: grid; place-items: center; }
.acceso__ver img { width: 26px; filter: invert(1); opacity: .5; }
.acceso__ver[data-active="true"] img { opacity: 1; }
.acceso .boton-oro { align-self: center; margin-top: 6px; }
.acceso__error { margin: 0; color: #ff9a8a; font-size: 16px; }
.acceso__info { margin: 0; color: #c9d4ea; font-size: 15px; line-height: 1.4; }

.aviso-lobby {
  position: fixed; left: 50%; top: 18%; z-index: 300; max-width: min(560px, 90vw); padding: 18px 26px; border-radius: 16px;
  background: rgba(7, 23, 53, .96); color: var(--crema); font: 600 18px/1.4 var(--letra); text-align: center;
  box-shadow: 0 0 0 2px #c8901c, 0 10px 40px rgba(0, 0, 0, .7); opacity: 0; transform: translate(-50%, -16px);
  pointer-events: none; transition: opacity .3s ease, transform .3s ease;
}
.aviso-lobby.visible { opacity: 1; transform: translate(-50%, 0); }

.vista-jp { position: fixed; inset: 0; z-index: 140; overflow: hidden; background: #000; animation: jp-capa .3s ease-out; font-family: var(--letra);
  --alto: 100vh; --arte: min(100vw, calc(var(--alto) * 1320 / 741)); }
@supports (height: 100dvh) { .vista-jp { --alto: 100dvh; } }
.vista-jp[hidden] { display: none !important; }
@keyframes jp-capa { from { opacity: 0; } }
.vista-jp__fondo { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(24px) brightness(.6); pointer-events: none; }
.vista-jp__caja { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.vista-jp__arte { position: relative; width: var(--arte); aspect-ratio: 1320 / 741; container-type: inline-size; }
.vista-jp__arte img { display: block; width: 100%; height: 100%; }
.vista-jp__monto { position: absolute; left: 50%; transform: translate(-50%, -50%); white-space: nowrap; font: 900 6.4cqw/1 "Times New Roman", Times, serif; letter-spacing: .1cqw; font-variant-numeric: lining-nums;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  --borde: #3d1206; filter: drop-shadow(.12cqw 0 0 var(--borde)) drop-shadow(-.12cqw 0 0 var(--borde)) drop-shadow(0 .12cqw 0 var(--borde)) drop-shadow(0 -.12cqw 0 var(--borde)) drop-shadow(0 .35cqw .25cqw rgba(0, 0, 0, .65)); }
.vista-jp__monto[data-id="gold"] { top: 39.8%; background-image: linear-gradient(#fffbd0 8%, #ffe34d 38%, #f2a90f 62%, #c9760a 80%, #ffe37a); animation: jp-brillo 3s ease-in-out infinite; }
.vista-jp__monto[data-id="silver"] { top: 59.8%; font-size: 5.9cqw; --borde: #26262e; background-image: linear-gradient(#ffffff 8%, #f4f6fa 40%, #b9c0cc 62%, #8e96a4 80%, #ffffff); }
.vista-jp__monto[data-id="bronze"] { top: 78.7%; font-size: 5.9cqw; --borde: #3d1206; background-image: linear-gradient(#ffe9cf 8%, #ffbf73 38%, #f08a2c 62%, #b5541a 80%, #ffd3a0); }
@keyframes jp-brillo { 50% { filter: drop-shadow(.12cqw 0 0 var(--borde)) drop-shadow(-.12cqw 0 0 var(--borde)) drop-shadow(0 .12cqw 0 var(--borde)) drop-shadow(0 -.12cqw 0 var(--borde)) drop-shadow(0 .35cqw .25cqw rgba(0, 0, 0, .65)) drop-shadow(0 0 1cqw rgba(255, 210, 80, .55)); } }
.vista-jp__cerrar { position: absolute; top: max(1.4vmin, env(safe-area-inset-top, 0px)); right: max(1.4vmin, env(safe-area-inset-right, 0px)); z-index: 1;
  width: max(40px, 4.4vmin); height: max(40px, 4.4vmin); padding: 0; border-radius: 50%; cursor: pointer;
  border: 2px solid #e2b04a; background: rgba(92, 13, 16, .9); color: #ffd84a; font: bold max(24px, 2.8vmin)/1 Arial, sans-serif; box-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.vista-jp__cerrar:hover { filter: brightness(1.25); }
.girar { position: fixed; inset: 0; z-index: 1000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px max(24px, env(safe-area-inset-right, 0px)) 24px max(24px, env(safe-area-inset-left, 0px)); text-align: center; cursor: pointer;
  background: radial-gradient(ellipse at 50% 40%, #1b2f66, #071226 70%); color: #fff; }
.girar__tel { position: relative; width: 64px; height: 108px; border: 5px solid #ffd84a; border-radius: 14px; margin-bottom: 18px;
  box-shadow: 0 0 24px rgba(255, 216, 74, .35); animation: girar-tel 2.4s ease-in-out infinite; }
.girar__tel i { position: absolute; left: 50%; bottom: 7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 3px solid #ffd84a; }
@keyframes girar-tel { 0%, 20% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.girar__titulo { margin: 0; font: 30px/1.1 var(--letra-panda); letter-spacing: .04em; color: #ffd84a; text-shadow: 0 3px 3px rgba(0, 0, 0, .6); }
.girar__nota { margin: 0; max-width: 260px; font-size: 16px; line-height: 1.4; color: #f3e6c4; }
.girar__ios { margin: 8px 0 0; max-width: 280px; padding: 10px 14px; border: 1px solid rgba(255, 216, 74, .5); border-radius: 10px;
  font-size: 14px; line-height: 1.4; color: #ffd84a; background: rgba(0, 0, 0, .25); }
.girar__ios[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .girar__tel { animation: none; transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 600px) and (pointer: coarse) {
  .girar { display: flex; }
  body:has(#acceso:not([hidden])) .girar { display: none; }
}

@media (max-height: 500px) {
  .Auth { padding: 8px; overflow-y: auto; }
  .acceso { gap: 8px; padding: 12px 22px; margin: auto; }
  .acceso__logo { width: 50%; }
  .acceso__titulo { font-size: 28px; }
  .acceso__campo { height: 42px; font-size: 17px; }
  .acceso .boton-oro { margin-top: 0; transform: scale(.85); }
  .acceso__info { font-size: 13px; }
}
@media (hover: none), (pointer: coarse) { .ayuda { display: none; } }
@media (max-height: 500px) {
  .barra-juego { height: 30px; border-bottom-width: 2px; padding: 0 6px; }
  .volver-lobby { height: 24px; padding: 0 12px; font-size: 16px; }
  .mini-jp b { font-size: 14px; }
  .mini-jp small { font-size: 10px; }
}