/* ==================================================================
   JACKPOT DE SALA — medidores, festejo, aviso y panel de encargado.
   ================================================================== */
@import url('supercash-fonts.css');
@font-face{font-family:'DSEG7'; src:url('fonts/DSEG7Classic-Bold.woff2') format('woff2'); font-weight:700; font-display:swap}

.jpb{
  --jp-disp:'Big Shoulders Display','Arial Narrow',sans-serif;
  display:flex; align-items:center; gap:clamp(6px,1.2vw,16px); flex-wrap:nowrap; overflow-x:auto;
  scrollbar-width:none;
}
.jpb::-webkit-scrollbar{display:none}
/* aire para que el brillo no se corte en los bordes */
.jpb:not(.escenario){padding:8px 6px; margin:-8px -6px}
.jpb-titulo{
  animation:jpb-bombillas 1.1s steps(2) infinite;
  flex:0 0 auto; font:900 clamp(22px,2.6vw,38px)/.9 var(--jp-disp); letter-spacing:.06em;
  color:#ffd23f; text-shadow:0 0 12px #ff9d0066, 0 2px 0 #7a3a00;
  /* bombillas de marquesina */
  padding:4px 10px; border-radius:6px;
  background:radial-gradient(circle,#ffe79a 1.3px,transparent 2.1px) 0 0/9px 9px, #2a0c06;
  box-shadow:inset 0 0 0 2px #ffb20055, 0 0 14px #ff7a0033;
  -webkit-background-clip:border-box;
}
@keyframes jpb-bombillas{to{background-position:4.5px 0,0 0}}
.jpb-titulo span{background:linear-gradient(180deg,#fff4b8,#ffc21a 50%,#ff7a00);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-stroke:1px #6b2600}
.jpb-nivel{flex:0 0 auto; display:flex; align-items:stretch; border-radius:6px; overflow:hidden;
  box-shadow:0 0 0 1px #0008, 0 4px 12px #0007}
.jpb-nom{
  display:flex; align-items:center; padding:0 10px;
  font:900 clamp(12px,1.25vw,17px)/1 var(--jp-disp); letter-spacing:.12em; text-transform:uppercase;
  color:color-mix(in srgb,var(--lv-lo) 70%,#000); text-shadow:0 1px 0 #ffffffa0, 0 -1px 0 #0003;
  background:linear-gradient(180deg,var(--lv-hi) 0%,var(--lv) 48%,var(--lv-lo) 52%,var(--lv) 100%);
  border:2px solid #000; border-right:1px solid #0008;
  box-shadow:inset 0 1px 0 #ffffffb0, inset 0 -2px 3px #0005;
}
.jpb-num{
  position:relative; display:flex; align-items:center; justify-content:flex-end;
  padding:5px 10px 5px 12px; border:2px solid #000; border-left:0;
  background:
    linear-gradient(180deg,#ffffff12 0%,transparent 45%),
    linear-gradient(180deg,#07080b,#111319);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lv) 35%,transparent), inset 0 6px 14px #000c;
  font:700 clamp(17px,1.9vw,28px)/1 'DSEG7','Big Shoulders Display',monospace; letter-spacing:.06em;
  font-variant-numeric:tabular-nums; white-space:pre;
  display:grid; justify-content:end; overflow:hidden;
}
.jpb-fant,.jpb-luz{grid-area:1/1; text-align:right}
/* reflejo que cruza el vidrio del marcador */
.jpb-num::after{content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,#ffffff1c 50%,transparent 58%) no-repeat;
  background-size:250% 100%; background-position:160% 0; animation:jpb-reflejo 5s ease-in-out infinite}
@keyframes jpb-reflejo{0%,55%{background-position:160% 0} 100%{background-position:-60% 0}}
/* los segmentos apagados se ven apenas, como en un marcador de verdad */
.jpb-fant{color:color-mix(in srgb,var(--lv) 11%,transparent)}
/* digitos encendidos: nucleo casi blanco y halo del color del nivel */
.jpb-luz{color:color-mix(in srgb,var(--lv-hi) 70%,#fff);
  text-shadow:0 0 1px #fff, 0 0 5px var(--lv-hi), 0 0 12px var(--lv), 0 0 24px var(--lv),
              0 0 44px color-mix(in srgb,var(--lv) 55%,transparent);
  animation:jpb-brillo 2.6s ease-in-out infinite alternate}
@keyframes jpb-brillo{from{filter:brightness(1)} to{filter:brightness(1.28) saturate(1.15)}}
.jpb-nivel{box-shadow:0 0 0 1px #0008, 0 4px 12px #0007, 0 0 18px color-mix(in srgb,var(--lv) 38%,transparent)}
.jpb-num{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lv) 45%,transparent), inset 0 6px 14px #000c,
  inset 0 0 22px color-mix(in srgb,var(--lv) 16%,transparent)}
.jpb-nivel.cayo .jpb-num{animation:jpb-flash .5s steps(2,end) 6}
@keyframes jpb-flash{50%{filter:brightness(1.9) saturate(1.4)}}
.jpb.apagado{opacity:.5}
.jpb.apagado .jpb-num{color:#ffffff66}

/* colores de cada nivel */
[data-nivel="bronce"]{--lv:#cd7f32; --lv-hi:#f3b27a; --lv-lo:#8a4a17}
[data-nivel="plata"]{--lv:#c3cad6; --lv-hi:#f4f6fa; --lv-lo:#7c8594}
[data-nivel="oro"]{--lv:#f2c14e; --lv-hi:#fff0a8; --lv-lo:#b57a10}
[data-nivel="diamante"]{--lv:#7fd6ff; --lv-hi:#e6f8ff; --lv-lo:#2d7fb5}
.jp-lv1{--lv:#cd7f32; --lv-hi:#f3b27a; --lv-lo:#8a4a17}
.jp-lv2{--lv:#c3cad6; --lv-hi:#f4f6fa; --lv-lo:#7c8594}
.jp-lv3{--lv:#f2c14e; --lv-hi:#fff0a8; --lv-lo:#b57a10}
.jp-lv4{--lv:#7fd6ff; --lv-hi:#e6f8ff; --lv-lo:#2d7fb5}
.jp-lv5{--lv:#ff6fae; --lv-hi:#ffd0e5; --lv-lo:#a8285f}
.jp-lv6{--lv:#8dff9a; --lv-hi:#e3ffe6; --lv-lo:#2a9a3a}

/* tira compacta en la cabecera del panel */
.jpb.compacta{gap:6px}
.jpb.compacta .jpb-titulo{display:none}
.jpb.compacta .jpb-nom{padding:0 6px; font-size:11px; letter-spacing:.08em}
.jpb.compacta .jpb-num{padding:3px 7px; font-size:15px; border-width:1px}
header .jpb.compacta{margin-right:12px; max-width:52vw}
header .jp-box.jp-reemplazado{display:none}

/* ---------- festejo ---------- */
#jpWin{position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb,var(--lv) 38%,transparent), #000d 65%);
  animation:jpw-in .35s ease both}
#jpWin[hidden]{display:none}
@keyframes jpw-in{from{opacity:0}}
.jpw-rayos{position:absolute; inset:-40%; pointer-events:none; opacity:.22;
  background:repeating-conic-gradient(from 0deg, var(--lv) 0 6deg, transparent 6deg 18deg);
  animation:jpw-gira 14s linear infinite}
@keyframes jpw-gira{to{transform:rotate(1turn)}}
.jpw-card{position:relative; text-align:center; padding:28px clamp(22px,5vw,60px) 26px; border-radius:22px;
  background:linear-gradient(180deg,#1a1d27,#0b0d12); border:3px solid var(--lv);
  box-shadow:0 0 0 6px #0008, 0 0 80px color-mix(in srgb,var(--lv) 60%,transparent);
  animation:jpw-pop .6s cubic-bezier(.2,1.5,.4,1) both; max-width:92vw}
@keyframes jpw-pop{from{transform:scale(.6); opacity:0}}
.jpw-card small{display:block; font:800 14px/1 'Big Shoulders Display',sans-serif; letter-spacing:.3em; color:#ffffffaa}
.jpw-card h2{margin:6px 0 4px; font:900 clamp(54px,11vw,120px)/.9 'Big Shoulders Display',sans-serif; letter-spacing:.04em;
  text-transform:uppercase; background:linear-gradient(180deg,var(--lv-hi),var(--lv) 55%,var(--lv-lo));
  -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 0 #0009)}
.jpw-num{display:block; font:800 clamp(38px,7vw,74px)/1 'Big Shoulders Display',sans-serif; letter-spacing:.06em;
  color:#fff; font-variant-numeric:tabular-nums; text-shadow:0 0 22px var(--lv)}
.jpw-card p{margin:10px 0 18px; color:#c9cfdc; font:14px/1.4 "Segoe UI",sans-serif}
.jpw-card button{height:46px; padding:0 34px; border:0; border-radius:12px; cursor:pointer;
  font:900 18px/1 'Big Shoulders Display',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:#1b1206; background:linear-gradient(180deg,var(--lv-hi),var(--lv))}
.jpw-moneda{position:absolute; top:-8%; width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff6c4,#f2c14e 45%,#a86c05); box-shadow:0 0 6px #0006;
  animation:jpw-cae var(--d,2.6s) linear var(--r,0s) infinite}
@keyframes jpw-cae{to{transform:translateY(120vh) rotate(540deg)}}

/* ---------- aviso cuando cae en otra maquina ---------- */
#jpAviso{position:fixed; top:14px; left:50%; translate:-50% 0; z-index:80; display:flex; align-items:center; gap:10px;
  padding:9px 16px 9px 10px; border-radius:12px; background:#12151d; border:2px solid var(--lv,#f2c14e);
  box-shadow:0 12px 30px #000a; color:#e8ecf5; font:14px/1.3 "Segoe UI",sans-serif;
  transition:opacity .25s, translate .25s}
#jpAviso[hidden]{display:flex; opacity:0; translate:-50% -16px; pointer-events:none}
#jpAviso b.lv{font:900 15px/1 'Big Shoulders Display',sans-serif; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 8px; border-radius:6px; color:#1b1206; background:linear-gradient(180deg,var(--lv-hi),var(--lv))}

/* ---------- tarjeta del encargado (pestana ADMIN) ---------- */
.jpa h3{display:flex; align-items:center; gap:10px}
.jpa .jpa-est{font:700 11px/1 "Segoe UI",sans-serif; padding:4px 8px; border-radius:99px; background:#2a3145; color:#8b94ad}
.jpa .jpa-est.on{background:#123d27; color:#3ddc84}
.jpa table{width:100%; border-collapse:collapse; font-size:12px; margin:8px 0}
.jpa th{color:#8b94ad; font-weight:600; text-align:left; padding:4px 3px}
.jpa td{padding:3px}
.jpa td input{width:100%; min-width:0; height:30px}
.jpa .jpa-fila{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0}
.jpa .jpa-fila label{display:flex; align-items:center; gap:6px; font-size:13px}
.jpa .jpa-fila input[type=number]{width:80px; height:30px}
.jpa .jpa-cuenta{font:12px/1.55 ui-monospace,Consolas,monospace; color:#c6ccdc; background:#0e1119;
  border:1px solid #2a3145; border-radius:8px; padding:8px 10px; margin-top:8px; white-space:pre-wrap}
.jpa .jpa-msg{font-size:12px; margin-top:6px; min-height:1.2em}
.jpa .jpa-msg.err{color:#ff8a8a} .jpa .jpa-msg.ok{color:#3ddc84}

@media (prefers-reduced-motion: reduce){
  .jpw-rayos, .jpw-moneda{animation:none; display:none}
  .jpb-nivel.cayo .jpb-num{animation:none}
}

/* el puente viejo no tiene jackpot: decirlo en vez de dejar la barra vacia */
.jpb-falta{display:flex; align-items:center; gap:10px; font:700 13px/1.3 "Segoe UI",sans-serif; color:#ffd9a0}
.jpb-falta code{font:700 12px/1 ui-monospace,Consolas,monospace; padding:3px 6px; border-radius:4px; background:#2a1a05; color:#ffc92e}
.jpb.compacta .jpb-falta{font-size:11px}
.jpb-tag{flex:0 0 auto; font:900 11px/1 'Big Shoulders Display',sans-serif; letter-spacing:.14em; padding:4px 7px;
  border-radius:4px; background:#3a0d0d; color:#ff9a9a; border:1px solid #ff5d5d55}
@media (prefers-reduced-motion: reduce){ .jpb-titulo{animation:none} }

/* ---------- marquesina grande encima del juego ---------- */
.jpb.escenario{
  container-type:inline-size;
  position:relative; overflow:visible; gap:10px; align-items:stretch;
  margin:6px 0 8px; padding:13px 12px;
  border-radius:12px; border:2px solid #ffb300;
  background:radial-gradient(130% 160% at 50% 0%,#3d1405 0%,#16070b 55%,#07050a 100%);
  box-shadow:0 0 0 2px #000, 0 0 26px #ff9d0070, inset 0 0 30px #ff7a0030;
}
.jpb.escenario:empty,.jpb.escenario.apagado{display:none}
/* hileras de focos arriba y abajo que corren */
.jpb.escenario::before,.jpb.escenario::after{content:''; position:absolute; left:12px; right:12px; height:7px; pointer-events:none;
  background:radial-gradient(circle,#fffbe0 0 1.5px,#ffc21a 2.2px,transparent 3.5px) 0 50%/13px 100% repeat-x;
  filter:drop-shadow(0 0 3px #ffb300); animation:jpe-focos .5s steps(2) infinite}
.jpb.escenario::before{top:2px}
.jpb.escenario::after{bottom:2px; animation-direction:reverse}
@keyframes jpe-focos{to{background-position:6.5px 50%}}
.jpb.escenario .jpb-titulo{align-self:center; font-size:clamp(18px,2.5cqi,34px); padding:8px 10px; line-height:.85; text-align:center}
.jpb.escenario .jpb-nivel{flex:1 1 0; min-width:0; flex-direction:column; border-radius:9px}
.jpb.escenario .jpb-nom{justify-content:center; padding:4px 0; font-size:clamp(11px,1.35cqi,17px);
  border:2px solid #000; border-bottom:1px solid #0008; border-radius:9px 9px 0 0}
.jpb.escenario .jpb-num{justify-content:center; padding:8px 6px 9px; border:2px solid #000; border-top:0; border-radius:0 0 9px 9px;
  font-size:clamp(15px,calc(10.5cqi / var(--n,4)),42px)}
.jpb.escenario .jpb-tag{display:none}
.jpb.escenario .jpb-falta{justify-content:center; width:100%}
@media (max-width:700px){
  .jpb.escenario{padding:11px 6px; gap:5px}
  .jpb.escenario .jpb-titulo{display:none}
}
@media (prefers-reduced-motion: reduce){
  .jpb.escenario::before,.jpb.escenario::after,.jpb-luz,.jpb-num::after{animation:none}
}