/* ==================================================================
   RULETA JACKPOT · Super Cash
   Cuando cae un jackpot de sala: ruleta que gira y se detiene en el
   nivel ganado, y despues la pantalla JACKPOT con contador y monedas.
   Todo dibujado con codigo; fuentes Bungee (Google Fonts, licencia OFL).
   ================================================================== */
@font-face{font-family:'RJ Bungee'; src:url('fonts/Bungee-latin.woff2') format('woff2'); font-display:swap}
@font-face{font-family:'RJ Bungee Shade'; src:url('fonts/BungeeShade-latin.woff2') format('woff2'); font-display:swap}
@font-face{font-family:'RJ Bungee Inline'; src:url('fonts/BungeeInline-latin.woff2') format('woff2'); font-display:swap}
@font-face{font-family:'RJ DSEG7'; src:url('fonts/DSEG7Classic-Bold.woff2') format('woff2'); font-display:swap}

#ruletaJP{
  --rj-oro:#ffd23f; --rj-oro2:#ff9d00; --rj-borde:#e8b73c;
  position:fixed; inset:0; z-index:100020; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(ellipse at 50% 38%,#16407a 0%,#0a1d46 50%,#02050f 100%);
  font-family:'RJ Bungee','Big Shoulders Display',Impact,sans-serif; color:#fff;
  -webkit-user-select:none; user-select:none; animation:rj-entra .45s ease both;
}
#ruletaJP[hidden]{display:none}
@keyframes rj-entra{from{opacity:0}}
#ruletaJP .rj-rayos{position:absolute; inset:-60%; pointer-events:none; opacity:.55;
  background:repeating-conic-gradient(from 0deg,#ffffff14 0 5deg,transparent 5deg 14deg);
  -webkit-mask:radial-gradient(circle,#000 10%,transparent 62%); mask:radial-gradient(circle,#000 10%,transparent 62%);
  animation:rj-gira 40s linear infinite}
#ruletaJP.premio .rj-rayos{opacity:.9; animation-duration:14s;
  background:repeating-conic-gradient(from 0deg,#ffe38a2a 0 6deg,transparent 6deg 15deg)}
@keyframes rj-gira{to{transform:rotate(1turn)}}
#ruletaJP canvas.rj-monedas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5;
  background:transparent !important; border:0 !important; margin:0 !important; max-width:none !important}

/* ---------- escena de la ruleta ---------- */
.rj-escena{position:relative; z-index:2; width:min(1500px,94vw,calc(88vh * 16 / 9)); aspect-ratio:16/9; container-type:inline-size;
  display:grid; grid-template-columns:1.08fr 1fr; grid-template-rows:1fr auto; gap:0 2%;
  padding:2.2% 3% 1.6%; border-radius:26px;
  background:
    repeating-linear-gradient(135deg,#ffffff07 0 2px,transparent 2px 14px),
    radial-gradient(ellipse at 30% 40%,#3aa3ad 0%,#1c6d80 38%,#0d3a58 75%,#0a2745 100%);
  box-shadow:0 0 0 3px #3b2a07, 0 0 0 9px var(--rj-borde), 0 0 0 12px #3b2a07, 0 0 60px #0009, inset 0 0 80px #00000080}
@supports not (aspect-ratio:1){ .rj-escena{height:min(66vw,92vh)} }
.rj-izq{position:relative; display:grid; place-items:center; min-height:0}
.rj-titulo{position:absolute; left:2%; top:-4%; width:56%; z-index:3; pointer-events:none; overflow:visible}
.rj-titulo text{font-family:'RJ Bungee Shade','RJ Bungee',Impact,sans-serif; font-size:40px; letter-spacing:0}
.rj-rueda{position:relative; height:94%; max-height:94%; aspect-ratio:1; min-width:0; margin-top:4%}
.rj-rueda svg{display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 16px 26px #0009)}
.rj-foco{fill:#fff3b0; opacity:.35; transition:opacity .08s}
.rj-rueda .rj-foco.a{animation:rj-foco 1s steps(2) infinite}
.rj-rueda .rj-foco.b{animation:rj-foco 1s steps(2) .5s infinite}
.girando .rj-rueda .rj-foco.a{animation-duration:.24s} .girando .rj-rueda .rj-foco.b{animation:rj-foco .24s steps(2) .12s infinite}
@keyframes rj-foco{0%{opacity:1; filter:drop-shadow(0 0 4px #ffd96a)} 50%{opacity:.3}}
.rj-puntero{transform-box:fill-box; transform-origin:100% 50%; transition:transform .06s}
.rj-puntero.golpe{transform:rotate(-14deg)}
.rj-sector{transition:filter .35s}
.rj-sector.gana{animation:rj-parpadeo .45s steps(2) 8; stroke:#fff8c8; stroke-width:7; paint-order:fill}
.rj-rueda.resuelto .rj-sector:not(.gana){filter:brightness(.45) saturate(.55)}
@keyframes rj-parpadeo{50%{filter:brightness(1.8) saturate(1.3)}}

/* medidores de la derecha */
.rj-der{position:relative; display:flex; flex-direction:column; justify-content:center; gap:4.2%; padding-left:9%; padding-right:2%; min-height:0}
.rj-der::before{content:''; position:absolute; left:2.2%; top:14%; bottom:14%; width:5px; border-radius:4px;
  background:linear-gradient(#f5e2a8,#9c7a2c); box-shadow:0 0 0 2px #0006}
.rj-nudo{position:absolute; left:-2.5%; top:50%; width:34px; height:34px; translate:0 -50%; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 35% 30%,#fff 0 12%,#cfd6e2 30%,#6c7688 75%,#2b3140); box-shadow:0 0 0 3px #0008, 0 4px 10px #000a}
.rj-nudo.luz{box-shadow:0 0 0 3px #0008, 0 0 22px 6px var(--lv,#ffd23f)}
.rj-medidor{--lv:#ffd23f; --lv-hi:#fff0a8; --lv-lo:#b57a10; position:relative; border-radius:16px; padding:3px;
  background:linear-gradient(180deg,var(--lv-hi),var(--lv) 45%,var(--lv-lo)); box-shadow:0 6px 16px #0008;
  transition:filter .3s, opacity .3s, transform .3s}
.rj-medidor::before{content:''; position:absolute; left:-10.5%; top:50%; width:10.5%; height:5px; translate:0 -50%;
  background:linear-gradient(90deg,#9c7a2c,#f5e2a8); box-shadow:0 0 0 2px #0006}
.rj-medidor .caja{border-radius:13px; padding:6% 6% 4%; text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lv) 72%,#2a1400) 0%,color-mix(in srgb,var(--lv-lo) 78%,#000) 100%);
  box-shadow:inset 0 2px 0 #ffffff55, inset 0 -3px 6px #0007}
.rj-medidor .num{display:grid; justify-content:center; font-family:'RJ DSEG7','Courier New',monospace; font-weight:700;
  font-size:clamp(18px,3.6cqw,54px); line-height:1; letter-spacing:.04em; white-space:pre}
.rj-medidor .num span{grid-area:1/1; text-align:right}
.rj-medidor .num .fant{color:#00000038}
.rj-medidor .num .luz{color:#fff; text-shadow:0 0 6px #fff, 0 0 14px var(--lv-hi), 0 0 26px var(--lv)}
.rj-medidor .nom{display:block; margin-top:5px; font-size:clamp(10px,1.25cqw,19px); letter-spacing:.2em; color:#fff;
  text-shadow:0 2px 0 #0008}
.rj-der.resuelto .rj-medidor:not(.gana){opacity:.35; filter:grayscale(.6)}
.rj-medidor.gana{animation:rj-late .5s ease-in-out infinite alternate; z-index:1}
.rj-medidor.gana::before{background:var(--lv-hi); box-shadow:0 0 12px 3px var(--lv)}
@keyframes rj-late{to{transform:scale(1.06); filter:brightness(1.25) drop-shadow(0 0 18px var(--lv))}}

/* barra de abajo */
.rj-pie{grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:18px; padding-top:1%; min-height:clamp(48px,6.4cqw,96px)}
.rj-estado{font-size:clamp(12px,1.45cqw,22px); letter-spacing:.08em; color:#eaf6ff; text-shadow:0 2px 0 #0008;
  padding:8px 22px; border-radius:99px; background:#0008; border:1px solid #ffffff30}
.girando .rj-estado{animation:rj-titila 1s steps(2) infinite}
@keyframes rj-titila{50%{opacity:.55}}
.rj-boton{font-family:'RJ Bungee',Impact,sans-serif; font-size:clamp(18px,2.3cqw,36px); letter-spacing:.08em; cursor:pointer;
  padding:.35em 1.2em; border-radius:999px; border:3px solid #7a4d00; color:#3a1d00;
  background:linear-gradient(180deg,#fff6c4 0%,#ffd23f 45%,#f0a000 55%,#ffc93a 100%);
  box-shadow:0 6px 0 #6b4100, 0 10px 22px #000a, inset 0 2px 0 #fff; animation:rj-llama 1.1s ease-in-out infinite}
.rj-boton:hover{filter:brightness(1.08)} .rj-boton:active{translate:0 4px; box-shadow:0 2px 0 #6b4100, 0 6px 14px #000a}
.rj-boton[hidden]{display:none}
@keyframes rj-llama{50%{box-shadow:0 6px 0 #6b4100, 0 0 26px 6px #ffcf3a99, inset 0 2px 0 #fff}}
.rj-sonido{position:absolute; right:14px; top:12px; z-index:6; width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid #ffffff50; background:#0007; color:#fff; font:700 16px/1 system-ui,sans-serif}

/* ---------- pantalla JACKPOT ---------- */
.rj-premio{position:relative; z-index:3; width:min(1000px,94vw); display:grid; justify-items:center; animation:rj-pop .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes rj-pop{from{transform:scale(.4); opacity:0}}
.rj-marco{position:relative; width:100%; padding:10% 6% 5%; text-align:center; border-radius:48% 48% 18px 18px / 30% 30% 18px 18px;
  background:
    repeating-conic-gradient(from 0deg at 50% 70%,#ffffff0d 0 4deg,transparent 4deg 10deg),
    radial-gradient(ellipse at 50% 30%,#3b8cff 0%,#1747b8 40%,#0a2169 80%);
  box-shadow:0 0 0 4px #4d3200, 0 0 0 12px var(--rj-borde), 0 0 0 15px #4d3200, 0 0 70px #3aa0ff80, inset 0 0 60px #000a}
.rj-marco .luces{position:absolute; inset:-14px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(circle,#fff6c8 0 3px,transparent 4px) 0 0/28px 28px;
  -webkit-mask:linear-gradient(#000,#000) content-box exclude,linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box exclude,linear-gradient(#000,#000); padding:9px;
  animation:rj-corre .5s steps(2) infinite}
@keyframes rj-corre{to{background-position:14px 0}}
.rj-jackpot{margin:0; font-family:'RJ Bungee Shade','RJ Bungee',Impact,sans-serif; font-weight:400;
  font-size:clamp(56px,11vw,150px); line-height:.9; letter-spacing:.02em;
  background:linear-gradient(180deg,#fffbe0 0%,#ffe45c 30%,#ff9d00 55%,#ff3b1f 78%,#ffd23f 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 5px 0 #5a1200) drop-shadow(0 0 22px #ffb30088); animation:rj-brilla 1.2s ease-in-out infinite alternate}
@keyframes rj-brilla{to{filter:drop-shadow(0 5px 0 #5a1200) drop-shadow(0 0 40px #ffd23fcc) brightness(1.12)}}
.rj-nivel{display:inline-block; margin-top:1.4%; padding:.25em .9em; border-radius:999px; font-size:clamp(14px,1.8vw,24px); letter-spacing:.18em;
  color:#1b0f00; background:linear-gradient(180deg,var(--lv-hi,#fff0a8),var(--lv,#ffd23f)); box-shadow:0 3px 0 #0007}
.rj-contador{display:inline-flex; gap:.12em; margin:3% auto 2%; padding:.18em; border-radius:14px; background:#0b1024;
  box-shadow:0 0 0 3px #caa24a, inset 0 0 18px #000; font-family:'RJ DSEG7','Courier New',monospace; font-weight:700;
  font-size:clamp(30px,5.4vw,70px); line-height:1}
.rj-contador span{display:grid; place-items:center; min-width:.82em; padding:.12em .06em; border-radius:6px;
  background:linear-gradient(180deg,#1e2750,#070b1d 60%,#141b3a); color:#fff; text-shadow:0 0 8px #fff, 0 0 18px #7ec4ff}
.rj-contador span.vacio{color:#ffffff14; text-shadow:none}
.rj-contador span.coma{min-width:.3em; background:none; color:#ffe36a}
.rj-contador.listo span:not(.vacio):not(.coma){color:#fff5b0; text-shadow:0 0 8px #fff, 0 0 20px #ffcf3a}
.rj-ganaste{margin:0; font-size:clamp(16px,2.2vw,30px); letter-spacing:.12em; color:#fff; text-shadow:0 3px 0 #0009}
.rj-saldo{margin:.6em 0 0; font:600 clamp(12px,1.2vw,16px)/1.3 'Segoe UI',system-ui,sans-serif; color:#cfe6ff}
.rj-pila{position:relative; width:112%; height:clamp(60px,9vw,120px); margin-top:-3%; pointer-events:none;
  background:
    radial-gradient(ellipse 5% 22% at 12% 70%,#ffe89a 0 40%,#d99a1e 60%,transparent 62%),
    radial-gradient(ellipse 5% 22% at 22% 58%,#ffe89a 0 40%,#d99a1e 60%,transparent 62%),
    radial-gradient(ellipse 5% 22% at 31% 72%,#fff1b8 0 40%,#e0a52a 60%,transparent 62%),
    radial-gradient(ellipse 5% 22% at 43% 55%,#ffe89a 0 40%,#d99a1e 60%,transparent 62%),
    radial-gradient(ellipse 5% 22% at 55% 68%,#fff1b8 0 40%,#e0a52a 60%,transparent 62%),
    radial-gradient(ellipse 5% 22% at 66% 57%,#ffe89a 0 40%,#d99a1e 60%,transparent 62%),
    radial-gradient(ellipse 5% 22% at 77% 71%,#fff1b8 0 40%,#e0a52a 60%,transparent 62%),
    radial-gradient(ellipse 5% 22% at 88% 60%,#ffe89a 0 40%,#d99a1e 60%,transparent 62%),
    radial-gradient(ellipse 55% 60% at 50% 100%,#f7c742 0%,#c98a12 45%,#7a4a00 70%,transparent 72%);
  filter:drop-shadow(0 -4px 12px #ffc93a66)}
.rj-seguir{margin-top:1.2%}
.rj-seguir .rj-boton{font-size:clamp(16px,1.8vw,26px)}
.rj-seguir small{display:block; margin-top:8px; font:600 13px 'Segoe UI',sans-serif; color:#d9e8ff; letter-spacing:.06em; text-align:center}

@media (max-width:760px){
  .rj-escena{grid-template-columns:1fr; grid-template-rows:auto auto auto; aspect-ratio:auto; max-height:none; padding:16px}
  .rj-rueda{width:min(78vw,52vh); height:auto}
  .rj-der{padding-left:0}
  .rj-der::before,.rj-medidor::before,.rj-nudo{display:none}
  .rj-titulo{left:0; top:-10%; width:80%}
}
@media (prefers-reduced-motion:reduce){
  #ruletaJP .rj-rayos,.rj-marco .luces,.rj-boton,.rj-jackpot,.rj-rueda .rj-foco{animation:none !important}
}

/* rotulos de cada grupo de color (nombre y porcentaje) */
#ruletaJP .rj-rot text{font-family:'RJ Bungee','Arial Black',sans-serif; paint-order:stroke; stroke-linejoin:round; pointer-events:none}
#ruletaJP .rj-rot-n{font-size:21px; fill:#fff; stroke:#00000099; stroke-width:5px; letter-spacing:1px}
#ruletaJP .rj-rot-p{font-size:24px; fill:#fff; stroke:#00000099; stroke-width:5px}
#ruletaJP .rj-rot-n.osc,#ruletaJP .rj-rot-p.osc{fill:#2a1a00; stroke:#ffffffb0}
#ruletaJP .rj-medidor .nom i{font-style:normal; opacity:.85; letter-spacing:.04em; margin-left:.3em}

/* ---- Jackpot de SALA: la palabra JACKPOT en dorado (Leo) ---- */
#ruletaJP.jp-sala{background:radial-gradient(ellipse at center,#2a1a00 0%,#0b0700 60%,#000 100%)}
#ruletaJP.jp-sala .jps-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2vh;height:100%}
#ruletaJP.jp-sala .jps-titulo{display:flex;gap:.04em;font-family:'RJ Bungee Shade','RJ Bungee',Impact,sans-serif;font-size:min(19vw,26vh);line-height:1;letter-spacing:.02em}
#ruletaJP.jp-sala .jps-titulo span{display:inline-block;background:linear-gradient(180deg,#fffbe0 0%,#ffe27a 22%,#f5b400 45%,#b77800 62%,#ffdf6b 80%,#fff6c2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #6b4300;
  filter:drop-shadow(0 0 .08em #ffcc33) drop-shadow(0 .05em 0 #4a2c00);
  animation:jpsLetra .7s cubic-bezier(.2,1.6,.4,1) both, jpsBrillo 1.6s ease-in-out infinite alternate;animation-delay:calc(var(--i)*.09s),calc(.8s + var(--i)*.09s)}
#ruletaJP.jp-sala .jps-nivel{font:900 min(7vw,9vh) Impact,Arial Black,sans-serif;letter-spacing:.12em;color:var(--lv-hi);
  text-shadow:0 0 .3em var(--lv),0 .06em 0 #000;animation:jpsNivel 1s .9s both}
#ruletaJP.jp-sala .rj-jackpot{background:linear-gradient(180deg,#fffbe0,#ffd84a 35%,#e8a000 55%,#fff1a8);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1px #6b4300}
@keyframes jpsLetra{0%{transform:translateY(-60%) scale(2.4) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes jpsBrillo{0%{filter:drop-shadow(0 0 .05em #ffcc33) drop-shadow(0 .05em 0 #4a2c00)}100%{filter:drop-shadow(0 0 .25em #ffe680) drop-shadow(0 .05em 0 #4a2c00) brightness(1.18)}}
@keyframes jpsNivel{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#ruletaJP.jp-sala .jps-titulo span,#ruletaJP.jp-sala .jps-nivel{animation:none}}

/* Short phone screens: keep the complete prize and CONTINUAR in view. */
@media (max-height:500px){
 #ruletaJP .rj-premio{width:min(94vw,calc(100dvh * 1.3));animation:none}
 #ruletaJP .rj-marco{padding:20px 28px 12px}
 #ruletaJP .rj-jackpot{font-size:clamp(32px,11vh,58px)}
 #ruletaJP .rj-nivel{font-size:clamp(12px,3.6vh,16px);margin-top:6px}
 #ruletaJP .rj-contador{font-size:clamp(24px,7.5vh,36px);margin:10px auto 8px}
 #ruletaJP .rj-ganaste{font-size:14px}
 #ruletaJP .rj-saldo{font-size:11px;margin-top:6px}
 #ruletaJP .rj-pila{height:30px;margin-top:-5px}
 #ruletaJP .rj-seguir{margin-top:4px}
 #ruletaJP .rj-seguir .rj-boton{font-size:16px}
 #ruletaJP .rj-seguir small{font-size:11px;margin-top:6px}
}