/* ============ 1. VARIABLES, RESET Y TÁCTIL ============ */
:root { --fondo:#141210; --texto:#f3ead8; --suave:#bfae94; --rojo:#b3282d; --oro:#c9a227; }
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body { font-family:'Inter',sans-serif; color:var(--texto); min-height:100dvh;
  background:radial-gradient(circle at 50% 15%, #262019 0%, var(--fondo) 65%);
  display:grid; place-items:center; padding:24px; -webkit-tap-highlight-color:transparent; }
button { -webkit-user-select:none; user-select:none; touch-action:manipulation; cursor:pointer; }
img { -webkit-user-drag:none; user-select:none; }

/* ============ 2. TIPOGRAFÍA ============ */
.btn, .btn-apuesta, .btn-sec, .hud-caja strong, .jp strong, .firma span, .cofres-total {
  font-family:'Shojumaru', system-ui, sans-serif; }

/* ============ 3. GABINETE + FONDO + PÉTALOS ============ */
.maquina { position:relative; border:3px solid var(--oro); outline:2px solid #6b5618;
  outline-offset:5px; border-radius:10px; box-shadow:0 0 45px rgba(201,162,39,.18);
  padding:34px 28px; text-align:center; max-width:720px; width:100%; }
.maquina::before, .maquina::after { content:none; }
.fondo-vivo { position:absolute; inset:0; border-radius:8px; overflow:hidden; z-index:0;
  background:url('../img/fondo.png') center/cover no-repeat; animation:corriente 38s ease-in-out infinite alternate; }
.fondo-vivo::after { content:''; position:absolute; inset:-20%; filter:blur(12px);
  animation:niebla 18s ease-in-out infinite alternate;
  background:radial-gradient(60% 45% at 20% 25%, rgba(255,255,255,.25), transparent 65%),
             radial-gradient(50% 40% at 75% 60%, rgba(255,255,255,.20), transparent 65%),
             radial-gradient(45% 35% at 50% 85%, rgba(255,255,255,.15), transparent 65%); }
@keyframes corriente { from{transform:scale(1) translate(0,0);} to{transform:scale(1.07) translate(-1.5%,1%);} }
@keyframes niebla { from{transform:translateX(-8%) translateY(-2%);} to{transform:translateX(8%) translateY(2%);} }
.maquina > :not(.fondo-vivo) { position:relative; }
.maquina > .petalos { position:absolute; inset:0; }
.petalos { overflow:hidden; pointer-events:none; }
.petalos i { position:absolute; top:-6%; width:16px; height:16px; opacity:.9;
  border-radius:100% 0 100% 0; filter:blur(.4px); animation:caer linear infinite;
  background:radial-gradient(circle at 30% 30%, #ffd7e8, #ff9ec7 60%, #ff7ab0); }
.petalos i:nth-child(1){left:6%;animation-duration:12s;animation-delay:0s;transform:scale(.8);}
.petalos i:nth-child(2){left:18%;animation-duration:10s;animation-delay:2s;transform:scale(1.1);}
.petalos i:nth-child(3){left:33%;animation-duration:14s;animation-delay:5s;transform:scale(.7);}
.petalos i:nth-child(4){left:47%;animation-duration:11s;animation-delay:1s;transform:scale(1);}
.petalos i:nth-child(5){left:60%;animation-duration:13s;animation-delay:4s;transform:scale(.9);}
.petalos i:nth-child(6){left:72%;animation-duration:10s;animation-delay:7s;transform:scale(1.2);}
.petalos i:nth-child(7){left:84%;animation-duration:12s;animation-delay:3s;transform:scale(.8);}
.petalos i:nth-child(8){left:93%;animation-duration:14s;animation-delay:6s;transform:scale(1);}
@keyframes caer { 0%{top:-6%;transform:translateX(0) rotate(0);} 25%{transform:translateX(18px) rotate(90deg);} 50%{transform:translateX(-12px) rotate(180deg);} 75%{transform:translateX(14px) rotate(270deg);} 100%{top:106%;transform:translateX(0) rotate(360deg);} }

/* ============ 4. TOPPER + SERVICIO ============ */
.pantalla-topper { background:none; border:none; box-shadow:none; padding:4px 6px 26px; position:relative; overflow:hidden; }
h1 { background:none; border:none; padding:0; animation:none; width:100%; display:block; margin:0; }
h1 img { display:block; width:100%; height:auto; mix-blend-mode:multiply; }
.topper-servicio { position:absolute; top:6px; right:8px; display:flex; align-items:center; gap:6px; z-index:3; }
.peregrinaje { position:absolute; left:0; right:0; bottom:6px; height:120px; overflow:hidden; pointer-events:none; }
.peregrinaje .fila { position:absolute; bottom:0; display:flex; gap:16px; align-items:flex-end; animation:caminar 26s linear infinite; }
.peregrinaje img { height:92px; width:92px; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.peregrinaje img:nth-child(2) { height:120px; width:120px; filter:saturate(1.35) contrast(1.12) drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
@keyframes caminar { from{left:103%;} to{left:-55%;} }

/* ============ 5. PANTALLAS ============ */
.pantalla { background:rgba(6,4,3,.22); border:5px solid #171310; outline:2px solid rgba(201,162,39,.35);
  border-radius:12px; padding:14px; margin:0 auto 14px;
  box-shadow:inset 0 0 26px rgba(0,0,0,.85), 0 0 12px rgba(201,162,39,.15); }
.pantalla-juego { position:relative; }
.pantalla-juego .tablero { margin-bottom:12px; }

/* ============ 6. JACKPOTS ============ */
.jackpots { display:flex; flex-direction:column; gap:12px; width:100%; margin:0 0 12px; }
.jp-fila { display:flex; gap:12px; } .jp-fila .jp { flex:1; }
.jp { display:flex; flex-direction:column; justify-content:center; gap:3px;
  background-image:var(--marco), linear-gradient(180deg, var(--laca1), var(--laca2));
  background-size:100% 100%, calc(100% - 28px) calc(100% - 28px);
  background-position:center, center; background-repeat:no-repeat, no-repeat; }
.jp-mayor { background-size:100% 100%, calc(100% - 84px) calc(100% - 34px); }
.jp small { display:block; font-family:'Shojumaru', system-ui, sans-serif; font-size:.6rem;
  letter-spacing:4px; text-transform:uppercase; color:var(--suave); }
.jp strong { font-family:'Shojumaru', system-ui, sans-serif;
  background:linear-gradient(180deg, #fff7cc 0%, #ffd76a 35%, #b8860b 60%, #ffd76a 100%);
  background-size:100% 220%; -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.85)) drop-shadow(0 0 10px rgba(255,215,106,.55));
  animation:shimmer 3s linear infinite; }
@keyframes shimmer { 0%{background-position:50% 0;} 50%{background-position:50% 100%;} 100%{background-position:50% 0;} }
.jp-grand { --marco:url('../img/jp_marco_grand.png'); --laca1:#6b1116; --laca2:#3a0a0c; padding:42px 120px 36px; min-height:150px; }
.jp-grand small { color:#ffb3b6; } .jp-grand strong { font-size:2rem; }
.jp-mayor { --marco:url('../img/jp_marco_mayor.png'); --laca1:#4a3410; --laca2:#241a08; padding:32px 100px 26px; min-height:112px; }
.jp-mayor strong { font-size:1.25rem; }
.jp-menor { --marco:url('../img/jp_marco_menor.png'); --laca1:#1d5c31; --laca2:#0d3018; padding:26px 70px 22px; min-height:94px; }
.jp-mini  { --marco:url('../img/jp_marco_mini.png');  --laca1:#20406b; --laca2:#10233c; padding:26px 70px 22px; min-height:94px; }
.jp.flash { animation:flashJP 1.1s ease; }
@keyframes flashJP { 0%{filter:brightness(1) drop-shadow(0 4px 6px rgba(0,0,0,.6)); transform:scale(1);}
  20%{filter:brightness(2.2) drop-shadow(0 0 40px rgba(255,215,106,1)); transform:scale(1.05);}
  100%{filter:brightness(1) drop-shadow(0 4px 6px rgba(0,0,0,.6)); transform:scale(1);} }
.jp-grand.latido{ animation:latidoJP .45s ease; }
@keyframes latidoJP{ 40%{ transform:scale(1.02); box-shadow:0 0 30px rgba(255,215,106,.5); } }

/* ============ 7. RODILLOS Y LÍNEAS ============ */
.tablero { position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:8px;
  margin-bottom:20px; background:rgba(8,6,4,.16); border:1px solid rgba(201,162,39,.14); border-radius:12px; padding:10px; }
.celda { aspect-ratio:1/1; background:transparent; border:none; box-shadow:none; display:grid; place-items:center; overflow:hidden; }
.celda img { width:100%; height:100%; object-fit:contain;
  filter:saturate(1.12) contrast(1.08) brightness(1.06) drop-shadow(0 3px 8px rgba(0,0,0,.55)); }
.celda.premio { animation:parpadeoPremio .5s ease-in-out 3; }
.celda.premio img { filter:saturate(1.2) contrast(1.1) brightness(1.15) drop-shadow(0 0 12px rgba(255,215,106,.95)); }
.celda.girando { animation:vibrar .1s linear infinite; filter:blur(1.5px); }
@keyframes vibrar { 0%{transform:translateY(-4px);} 50%{transform:translateY(4px);} 100%{transform:translateY(-4px);} }
.celda.freno { animation:frenar .3s ease-out; }
@keyframes frenar { 0%{transform:translateY(-10px) scale(1.08);} 60%{transform:translateY(3px) scale(.97);} 100%{transform:translateY(0) scale(1);} }
@keyframes parpadeoPremio { 0%,100%{filter:drop-shadow(0 0 6px rgba(201,162,39,.7));} 50%{filter:drop-shadow(0 0 16px rgba(255,215,106,1));} }
#lineasSvg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5; overflow:visible; }
.linea-pago { fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; opacity:.9;
  filter:drop-shadow(0 0 6px currentColor); animation:trazoLinea .45s ease; }
.linea-borde { stroke:rgba(20,12,6,.9); stroke-width:9; filter:none; }
@keyframes trazoLinea { from{opacity:0;} to{opacity:.9;} }
.tablero.tormenta { border-color:var(--oro); box-shadow:0 0 18px rgba(201,162,39,.55); }

/* ============ 8. TEASE ============ */
.celda.tease-oro, .celda.tease-rosa { position:relative; z-index:6; }
.celda.tease-oro  { box-shadow:inset 0 0 26px 10px rgba(255,215,106,.75), 0 0 34px 10px rgba(255,215,106,.55); }
.celda.tease-rosa { box-shadow:inset 0 0 26px 10px rgba(255,158,199,.8), 0 0 34px 10px rgba(255,158,199,.6); }
.celda.tease-oro::after, .celda.tease-rosa::after { content:''; position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:screen; background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
  background-size:100% 220%; animation:barraLuz .45s linear infinite; }
@keyframes barraLuz { from{background-position:0 -120%;} to{background-position:0 120%;} }
.celda.tease-oro img  { filter:brightness(1.7) drop-shadow(0 0 16px rgba(255,215,106,1)); animation:teasePulso .25s ease infinite alternate; }
.celda.tease-rosa img { filter:brightness(1.7) drop-shadow(0 0 16px rgba(255,158,199,1)); animation:teasePulso .25s ease infinite alternate; }
@keyframes teasePulso { from{transform:scale(1);} to{transform:scale(1.15);} }
.tablero.tease-oro  { animation:teaseOro .35s ease infinite alternate; }
.tablero.tease-rosa { animation:teaseRosa .35s ease infinite alternate; }
@keyframes teaseOro  { from{box-shadow:0 0 14px 4px rgba(255,215,106,.35);} to{box-shadow:0 0 34px 12px rgba(255,215,106,.7);} }
@keyframes teaseRosa { from{box-shadow:0 0 14px 4px rgba(255,158,199,.4);} to{box-shadow:0 0 34px 12px rgba(255,158,199,.75);} }

/* ============ 9. HUD ============ */
.hud-franja { display:flex; justify-content:center; align-items:stretch; gap:10px; flex-wrap:wrap; }
.hud-caja { background:#0d0b09; border:1px solid #4a3a20; border-radius:6px; padding:10px 16px;
  width:172px; box-shadow:inset 0 2px 8px rgba(0,0,0,.8); cursor:pointer; }
.hud-caja small { display:block; font-size:.58rem; color:var(--suave); letter-spacing:2px; text-transform:uppercase; margin-bottom:4px; }
.hud-caja strong { font-size:1rem; color:var(--oro); text-shadow:0 0 10px rgba(201,162,39,.5); white-space:nowrap; transition:transform .15s; }
.hud-caja.contando strong { transform:scale(1.18); color:#fff6c8; text-shadow:0 0 18px rgba(255,215,106,1); }
.hud-caja.brilla { border-color:var(--oro); box-shadow:0 0 18px rgba(201,162,39,.6); }
.hud-win { width:200px; border-color:var(--oro); } .hud-win strong { font-size:1.3rem; }
.hud-storm { width:172px; border-color:#6fe3a5; } .hud-storm small,.hud-storm strong { color:#8fe3a8; }

/* ============ 10. MENSAJE Y DETALLE ============ */
.pantalla-juego .mensaje, .pantalla-juego .detalle { background:rgba(10,8,6,.55); border-radius:6px; margin:4px auto 0; width:auto; }
.pantalla-juego .mensaje { height:34px; display:grid; place-items:center; font-weight:600; color:var(--oro); }
.pantalla-juego .detalle { height:42px; display:grid; place-items:center; font-size:.72rem; color:var(--texto); overflow:hidden; }

/* ============ 11. DECK / FICHAS / BOTONES ============ */
.deck { display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px; width:100%;
  background:linear-gradient(180deg, rgba(58,36,16,.92), rgba(26,14,6,.96));
  border:4px solid #b8860b; outline:2px solid #7a4a00; border-radius:14px; padding:14px;
  box-shadow:inset 0 0 20px rgba(0,0,0,.7), 0 0 16px rgba(255,215,106,.2); }
.deck-label { font-size:.72rem; color:var(--suave); letter-spacing:1px; text-transform:uppercase; }
.apuesta-panel { display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex:1 1 360px; }
.apuestas-rapidas { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; }
.btn-apuesta { width:50px; height:50px; border-radius:50%; position:relative;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(circle, #6b4a20 0%, #3a2410 52%, rgba(36,20,7,0) 62%),
    repeating-conic-gradient(from 0deg, #f5e6c8 0deg 16deg, #8a5a10 16deg 45deg);
  border:3px solid #8a5a10; color:var(--texto); font-family:'Michroma'; font-size:.66rem;
  display:grid; place-items:center; text-shadow:0 1px 2px rgba(0,0,0,.8);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.15), inset 0 -3px 6px rgba(0,0,0,.6), 0 3px 7px rgba(0,0,0,.65);
  transition:transform .15s, box-shadow .15s; }
.btn-apuesta::before { content:''; position:absolute; inset:5px; border-radius:50%; border:2px dashed rgba(255,246,200,.3); pointer-events:none; }
.btn-apuesta:hover:not(:disabled) { transform:scale(1.08); }
.btn-apuesta.activa { background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(circle, #ffe89a 0%, #d9a93f 52%, rgba(217,169,63,0) 62%),
    repeating-conic-gradient(from 0deg, #fff6c8 0deg 16deg, #7a4a00 16deg 45deg);
  color:#3a2410; text-shadow:0 1px 0 rgba(255,246,200,.6); border-color:#ffd76a; transform:scale(1.12);
  box-shadow:0 0 16px rgba(255,215,106,.75), inset 0 2px 4px rgba(255,255,255,.5); }
.btn-apuesta.activa::before { border-color:rgba(122,74,0,.45); }
.btn-apuesta:disabled { opacity:.5; cursor:not-allowed; }
.apuestas-rapidas.dinero .btn-apuesta { font-size:.5rem; }
.deck-total { font-size:.7rem; color:var(--suave); }
.btn-serv { background:transparent; border:1px solid var(--suave); color:var(--suave); border-radius:6px; padding:5px 9px; }
.btn-serv:hover { border-color:var(--oro); color:var(--oro); }
.vol-wrap { display:flex; align-items:center; gap:6px; }
.vol-wrap input[type=range] { width:110px; accent-color:#ffd76a; }
.botones { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-left:auto; }
.btn { background:linear-gradient(180deg,#d13438 0%,#8f1d21 100%); color:#fff; border:none; border-radius:6px;
  padding:14px 34px; box-shadow:0 4px 0 #5c1114, 0 0 18px rgba(209,52,56,.35); }
.btn:hover { filter:brightness(1.12); } .btn:active { transform:translateY(3px); box-shadow:0 1px 0 #5c1114; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-girar { width:104px; height:104px; border-radius:50%; padding:0; font-size:.95rem; letter-spacing:1px;
  background:radial-gradient(circle at 35% 30%, #ff5a5f 0%, #d13438 45%, #8f1d21 100%);
  box-shadow:0 7px 0 #5c1114, 0 0 24px rgba(209,52,56,.55); }
.btn-girar:active { transform:translateY(5px); box-shadow:0 2px 0 #5c1114; }
.btn-girar:not(:disabled) { animation:girarPulso 1.8s ease-in-out infinite; }
@keyframes girarPulso { 50%{ box-shadow:0 7px 0 #5c1114, 0 0 36px rgba(255,90,95,.85); filter:brightness(1.12); } }
.btn-sec { font-size:.68rem; padding:8px 14px; background:linear-gradient(180deg,#4a2c12 0%, #2a1a08 100%);
  border:2px solid #8a5a10; color:#ffd76a; border-radius:8px; box-shadow:0 3px 0 #171310, inset 0 1px 0 rgba(255,246,200,.25); }
.btn-sec:hover { color:#fff6c8; border-color:#ffd76a; box-shadow:0 3px 0 #171310, 0 0 12px rgba(255,215,106,.45); }
.btn-auto.activa { background:linear-gradient(180deg,#25D366 0%,#128C7E 100%); color:#fff; box-shadow:0 4px 0 #0b5d52, 0 0 14px rgba(37,211,102,.4); }
.btn-recarga { margin-top:10px; background:transparent; border:1px solid var(--oro); color:var(--oro);
  padding:8px 14px; font-family:'Michroma'; font-size:.7rem; border-radius:4px; }

/* ============ 12. FIRMA ============ */
.firma { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; gap:10px;
  width:fit-content; margin:14px auto 0; background:linear-gradient(180deg,#3a2410,#241407);
  border:2px solid #8a5a10; border-radius:8px; padding:6px 14px;
  box-shadow:inset 0 1px 0 rgba(255,246,200,.2), 0 2px 6px rgba(0,0,0,.6); }
.firma img { height:26px; filter:invert(1); opacity:.9; }
.firma span { font-size:.6rem; letter-spacing:3px; background:linear-gradient(180deg,#fff6c8,#ffd76a 40%,#b8860b);
  -webkit-background-clip:text; background-clip:text; color:transparent; text-transform:uppercase; }
.firma small { color:var(--suave); font-size:.55rem; letter-spacing:1px; }
.firma::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent); animation:brilloFirma 4s ease-in-out infinite; pointer-events:none; }
@keyframes brilloFirma { 0%,60%{left:-60%;} 100%{left:120%;} }
.firma[hidden] { display:none; }

/* ============ 13. MODALES ============ */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.7); display:grid; place-items:center; z-index:50; padding:20px; }
.modal[hidden] { display:none; }
.modal-caja { background:#1b1613; border:2px solid var(--oro); border-radius:10px; padding:24px;
  max-width:460px; width:100%; max-height:85vh; overflow-y:auto; text-align:center; }
.modal-caja h2 { font-family:'Michroma'; font-size:.95rem; color:var(--oro); margin-bottom:14px; }
.tp-fila { display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:10px; padding:6px 8px;
  border-bottom:1px solid rgba(201,162,39,.15); text-align:left; }
.tp-sym img { width:40px; height:40px; object-fit:contain; border-radius:4px; }
.tp-nom { font-size:.8rem; color:var(--texto); } .tp-val { font-family:'Michroma'; font-size:.7rem; color:var(--oro); }
.tp-nota { font-size:.75rem; color:var(--suave); margin:10px 0 4px; }
.tp-lineas { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.tp-lin { display:grid; grid-template-columns:repeat(5,6px); gap:3px; padding:5px; border:1px solid rgba(201,162,39,.25); border-radius:4px; }
.tp-lin span { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.15); } .tp-lin span.on { background:var(--oro); }
.cfg-fila { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:12px 0; font-size:.8rem; color:var(--texto); text-align:left; }
.cfg-fila select, .cfg-fila input { background:#0d0b09; border:1px solid #4a3a20; color:var(--oro); padding:6px 10px; border-radius:4px; font-family:'Michroma'; font-size:.75rem; }
.ay-p { font-size:.8rem; color:var(--texto); margin:6px 0; text-align:left; line-height:1.45; }
.ay-h { font-family:'Michroma'; font-size:.72rem; color:var(--oro); margin:12px 0 4px; text-align:left; }
.ay-rg { font-size:.72rem; color:#ffb3b6; background:rgba(179,40,45,.15); border:1px solid rgba(179,40,45,.4); border-radius:6px; padding:8px; margin-top:12px; text-align:left; line-height:1.45; }

/* ============ 14. BANQUETE ============ */
.banquete { position:relative; height:300px; margin:0 auto 14px; max-width:640px; }
.comensal { position:absolute; bottom:64px; width:34%; z-index:1; }
.c-wukong { left:35%; } .c-bajie { width:39%; left:5%; } .c-sha { left:61%; }
.comensal img { width:100%; display:block; }
.c-wukong img { filter:saturate(.95) contrast(1.05); }
.c-bajie img { filter:contrast(1.4) saturate(1.08); }
.mesa { position:absolute; bottom:0; left:0; width:100%; z-index:2; pointer-events:none; }
.mesa-sombra { position:absolute; bottom:-14px; left:0; width:100%; z-index:1; filter:brightness(0) blur(9px); opacity:1; transform:scale(1.02); pointer-events:none; }
.plato { position:absolute; bottom:118px; width:20%; height:52px; z-index:3; pointer-events:none; display:grid; place-items:end center; }
.p-wukong { left:40%; bottom:114px; } .p-bajie { left:12%; bottom:103px; } .p-sha { left:68%; }
.pz-madura { width:96px; transform-origin:50% 100%; transform:scale(var(--esc,.5)); transition:transform .3s ease; }
.pz-madura.pop { animation:popPz .3s ease; }
@keyframes popPz { 50%{ transform:scale(calc(var(--esc,.5)*1.25)); } }
.pz-madura.estalla { animation:estallar .7s ease forwards; }
@keyframes estallar { 0%{transform:scale(var(--esc,.5)); opacity:1;} 40%{transform:scale(1.7); opacity:1;} 100%{transform:scale(0); opacity:0;} }
.comensal.hop img { animation:hop .45s ease; }
@keyframes hop { 0%,100%{transform:translateY(0);} 40%{transform:translateY(-9px);} }
.comensal.salto img { animation:saltoGrande .7s ease; }
@keyframes saltoGrande { 0%,100%{transform:translateY(0) scale(1);} 35%{transform:translateY(-22px) scale(1.06);} 60%{transform:translateY(0) scale(.96,.9);} }
.particula { position:fixed; width:30px; z-index:99; pointer-events:none; }
.wukong-vuela { position:absolute; left:-80px; width:92px; z-index:15; pointer-events:none; animation:vuelaIzq linear forwards; filter:drop-shadow(0 4px 8px rgba(0,0,0,.4)); }
.wukong-vuela.rev { left:auto; right:-80px; transform:scaleX(-1); animation-name:vuelaDer; }
@keyframes vuelaIzq { from{left:-80px;} to{left:105%;} }
@keyframes vuelaDer { from{right:-80px;} to{right:105%;} }

/* ============ 15. BIG WIN ============ */
.bigwin { position:fixed; inset:0; z-index:80; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; overflow:hidden;
  background:radial-gradient(ellipse at center, rgba(25,12,5,.55), rgba(0,0,0,.82)); }
.bigwin[hidden] { display:none; }
.bigwin::before { content:''; position:absolute; inset:-45%;
  background:repeating-conic-gradient(rgba(255,215,106,.16) 0deg 7deg, transparent 7deg 16deg); animation:bwRayos 7s linear infinite; pointer-events:none; }
@keyframes bwRayos { to{transform:rotate(360deg);} }
.bw-texto { position:relative; font-family:'Shojumaru', system-ui; font-size:clamp(48px, 11vw, 110px); letter-spacing:4px;
  background:linear-gradient(180deg, #fff6c8 0%, #ffd76a 35%, #b8860b 70%, #ffd76a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 #7a4a00) drop-shadow(0 0 18px rgba(255,215,106,.6)); animation:bwEntrada .7s cubic-bezier(.2,1.8,.4,1); }
.bw-monto { position:relative; font-family:'Michroma', system-ui; font-size:clamp(30px, 6.5vw, 60px); color:#ffd76a; animation:bwPulso .45s ease infinite alternate; }
@keyframes bwPulso { from{transform:scale(1); text-shadow:0 0 10px rgba(255,215,106,.6);} to{transform:scale(1.07); text-shadow:0 0 22px rgba(255,215,106,.95);} }
@keyframes bwEntrada { 0%{transform:scale(.2); opacity:0;} 100%{transform:scale(1); opacity:1;} }
.bw-particula { position:absolute; top:-60px; animation:bwCaer linear forwards; }
@keyframes bwCaer { to{transform:translateY(110vh) rotate(540deg); opacity:.9;} }
.bigwin.cerrar { animation:bwSalir .45s ease forwards; }
@keyframes bwSalir { to{opacity:0;} }

/* ============ 16. ESCENAS BONUS ============ */
.escena-bonus { position:absolute; inset:0; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.escena-bonus[hidden] { display:none; }
.banquete.bonus-bajie-activo > .comensal, .banquete.bonus-bajie-activo > .mesa,
.banquete.bonus-bajie-activo > .mesa-sombra, .banquete.bonus-bajie-activo > .plato {
  opacity:0; transform:translateY(12px) scale(.96); transition:opacity .35s ease, transform .35s ease; pointer-events:none; }
.banquete.bonus-wukong-activo > .comensal, .banquete.bonus-wukong-activo > .mesa,
.banquete.bonus-wukong-activo > .mesa-sombra, .banquete.bonus-wukong-activo > .plato {
  transform:translateX(-115%); opacity:0; transition:transform .6s cubic-bezier(.5,.1,.8,.5), opacity .5s ease; }

/* ============ 17. BA CHIE ============ */
.escena-bajie { background:transparent; overflow:hidden; }
.bajie-fondo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:opacity .7s ease, transform .7s ease; }
.bajie-fondo.abierta { opacity:0; }
.escena-bajie.lista .bajie-fondo.abierta { opacity:1; }
.escena-bajie.lista .bajie-fondo.cerrada { opacity:0; }
.escena-bajie.cerrando .bajie-fondo.abierta { opacity:0; }
.escena-bajie.cerrando .bajie-fondo.cerrada { opacity:1; }
.escena-bajie.alza .bajie-fondo { transform:translateY(-105%); }
.escena-bajie .cofres-escena { position:relative; z-index:22; text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px;
  justify-content:center; height:100%; opacity:0; transform:translateY(18px) scale(.96); transition:opacity .45s ease, transform .45s ease; }
.escena-bajie.lista .cofres-escena { opacity:1; transform:translateY(0) scale(1); }
.escena-bajie.terminando .cofres-escena { opacity:0; transform:translateY(12px) scale(.96); }
.escena-bajie.cerrando .cofres-escena, .escena-bajie.cerrando .cofres-total { opacity:0; transition:opacity .4s; }
.escena-bajie .cofres-titulo { position:absolute; top:10px; left:50%; transform:translateX(-50%); width:fit-content; margin:0; padding:8px 26px; border-radius:10px;
  background:rgba(15,6,3,.8); border:2px solid rgba(255,215,106,.5); box-shadow:0 2px 8px rgba(0,0,0,.6); white-space:nowrap;
  font-family:'Shojumaru', system-ui; font-size:clamp(13px,2.6vw,19px); letter-spacing:1px; color:#ffd76a; text-shadow:0 2px 0 #7a4a00, 0 0 12px rgba(255,215,106,.6); }
.escena-bajie .cofres-info { position:absolute; top:58px; left:50%; transform:translateX(-50%); width:fit-content; margin:0; padding:3px 14px; border-radius:8px;
  background:rgba(15,6,3,.72); color:#fff3b0; white-space:nowrap; font-weight:700; font-size:clamp(10px,2vw,13px); min-height:16px; text-shadow:0 2px 4px rgba(0,0,0,.8); }
.escena-bajie .cofres-total { position:absolute; left:0; right:0; bottom:4px; margin:0; width:auto; transform:none; text-align:center;
  font-family:'Shojumaru', system-ui; font-size:clamp(14px,2.8vw,20px); min-height:24px; color:#ffd76a; text-shadow:0 2px 0 #7a4a00, 0 0 16px rgba(255,215,106,.8); }
.cofres-grid-nuevo { display:grid; grid-template-columns:repeat(3, minmax(70px, 1fr)); gap:10px; width:min(92%, 320px); margin:4px auto 26px; }
.cofre-nuevo { position:relative; border:none; background:transparent; cursor:pointer; padding:0; aspect-ratio:1/.8; display:grid; place-items:center; transform-origin:center bottom; transition:transform .2s; }
.cofre-nuevo img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 8px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(255,215,106,.18)); transition:transform .22s ease, filter .22s ease; }
.cofre-nuevo:not(.abierto):hover img { transform:translateY(-5px) scale(1.08); filter:drop-shadow(0 8px 10px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(255,215,106,.7)) brightness(1.12); }
.cofre-nuevo:not(.abierto)::after { content:''; position:absolute; inset:8% 10%; border-radius:50%; background:radial-gradient(circle, rgba(255,215,106,.22), transparent 65%); opacity:0; transition:opacity .25s ease; pointer-events:none; }
.cofre-nuevo:not(.abierto):hover::after { opacity:1; }
.cofre-nuevo.abierto { pointer-events:none; animation:cofrePop .48s cubic-bezier(.2,1.5,.35,1); }
@keyframes cofrePop { 0%{transform:scale(.85) rotate(-4deg);} 55%{transform:scale(1.16) rotate(3deg);} 100%{transform:scale(1) rotate(0);} }
.cofre-nuevo.abierto img { filter:drop-shadow(0 6px 10px rgba(0,0,0,.58)) drop-shadow(0 0 18px rgba(255,215,106,.65)) brightness(1.08); }
.cofre-nuevo .cofre-premio { position:absolute; left:50%; bottom:-2px; transform:translateX(-50%) scale(.8); min-width:52px; padding:3px 8px; border-radius:999px;
  border:2px solid #b8860b; background:linear-gradient(180deg, #fff3b0, #ffd76a 45%, #b8860b); color:#3a2410; font-family:'Shojumaru', system-ui;
  font-size:clamp(11px, 2.3vw, 15px); text-shadow:0 1px 0 rgba(255,255,255,.45); box-shadow:0 2px 0 #7a4a00, 0 0 14px rgba(255,215,106,.75);
  opacity:0; transition:opacity .25s ease, transform .25s ease; white-space:nowrap; }
.cofre-nuevo.abierto .cofre-premio { opacity:1; transform:translateX(-50%) scale(1); }
.cofre-nuevo.especial .cofre-premio { background:linear-gradient(180deg, #fff6c8, #ff9ec7 45%, #b3286a); border-color:#ffd76a; color:#3a0a16; box-shadow:0 2px 0 #6b1038, 0 0 18px rgba(255,158,199,.85); }
.cofre-nuevo.perdido { opacity:.9; }
.cofre-nuevo.perdido img { filter:grayscale(.25) brightness(.9) drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.cofre-nuevo.perdido .cofre-premio { background:linear-gradient(180deg,#e8eef4,#9fb2c1 45%,#5c6b7a); border-color:#9fb2c1; color:#141c24; box-shadow:0 2px 0 #3a4652; }

/* ============ 18. WUKONG RUEDA ============ */
.escena-wukong { border-radius:16px; background:radial-gradient(circle at 50% 45%, rgba(40,20,8,.55), rgba(8,4,3,.85) 78%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.7); opacity:1; transition:opacity .6s ease; }
.escena-wukong.entrando { animation:entraEscena .5s ease; }
@keyframes entraEscena { from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);} }
.escena-wukong.terminando { opacity:0; }
.rueda-envuelta { position:relative; width:clamp(320px, 92vw, 560px); height:280px; aspect-ratio:16/10; max-width:94vw; margin:0 auto; display:grid; place-items:center; }
.rueda-marco { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; z-index:2; animation:auraMarco 2.2s ease-in-out infinite; }
@keyframes auraMarco { 0%,100%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(255,215,106,.4));}
  50%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)) drop-shadow(0 0 32px rgba(255,215,106,.85));} }
.rueda-envuelta .ticker-marco { position:relative; z-index:1; width:46%; height:180px; }
.rueda-envuelta .ticker-ventana { width:100%; height:180px; overflow:hidden; border:4px solid #7a4a00; border-radius:8px;
  box-shadow:inset 0 0 22px rgba(0,0,0,.85), 0 0 14px rgba(255,215,106,.35); }
.ticker-cinta { display:flex; flex-direction:column; transition:transform 3s cubic-bezier(.15,.6,.25,1); }
.rueda-envuelta .ticker-seg { height:60px; line-height:60px; display:flex; align-items:center; justify-content:center;
  font-family:'Shojumaru', system-ui; font-size:clamp(14px, 2.6vw, 19px); color:#ffd76a; text-shadow:0 1px 0 rgba(255,255,255,.25);
  border-bottom:2px solid rgba(184,134,11,.7); background:linear-gradient(90deg,#3a2410,#78501e 50%,#3a2410); }
.rueda-envuelta .ticker-seg:nth-child(odd) { background:linear-gradient(90deg, rgba(70,44,20,.85), rgba(140,95,40,.9) 50%, rgba(70,44,20,.85)); }
.rueda-envuelta .ticker-seg.ganador { background:linear-gradient(90deg,#b8860b,#ffd76a 50%,#b8860b); color:#3a2410; text-shadow:0 1px 0 rgba(255,255,255,.5); }
.rueda-envuelta img.barra-jingu { position:absolute; left:-6%; right:-6%; width:112%; z-index:3; height:12px; max-height:none; top:50%;
  object-fit:cover; opacity:.92; transform:translateY(-50%) scaleX(0); transition:transform .5s cubic-bezier(.2,1.4,.4,1);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(255,215,106,.55)); }
.rueda-envuelta img.barra-jingu.lanzada { transform:translateY(-50%) scaleX(1); }
.rueda-envuelta img.barra-jingu.arde { filter:drop-shadow(0 3px 5px rgba(0,0,0,.55)) drop-shadow(0 0 28px rgba(255,215,106,1)); }
.rueda-resultado { min-height:28px; color:#ffd76a; font-size:clamp(15px,3vw,22px); text-shadow:0 2px 0 #7a4a00, 0 0 14px rgba(255,215,106,.75);
  margin-top:8px; text-align:center; font-family:'Shojumaru', system-ui; }
.wukong-actor { position:absolute; left:auto; right:12px; bottom:10px; width:clamp(58px,12vw,88px); z-index:4;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.55)); opacity:0; transition:opacity .4s ease; animation:reboteWukong .8s ease-in-out infinite; }
.escena-wukong.lista .wukong-actor { opacity:1; }
.escena-wukong.terminando .wukong-actor { opacity:0; }
@keyframes reboteWukong { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
.wukong-actor.vuela { animation:wukongVuela .8s ease-in forwards; }
@keyframes wukongVuela { 0%{transform:translate(0,0); opacity:1;} 100%{transform:translate(150px,-170px) rotate(12deg); opacity:0;} }

/* ============ 19. WIN POPUP ============ */
.win-pop { position:fixed; inset:0; z-index:75; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; pointer-events:none; }
.win-pop[hidden] { display:none; }
.wp-txt { font-family:'Shojumaru',system-ui; font-size:clamp(30px,7vw,70px); color:#ffd76a; text-shadow:0 3px 0 #7a4a00, 0 0 24px rgba(255,215,106,.9);
  animation:wpEntrada .5s cubic-bezier(.2,1.8,.4,1); }
.wp-monto { font-family:'Michroma',system-ui; font-size:clamp(40px,10vw,100px); color:#fff6c8; text-shadow:0 4px 0 #7a4a00, 0 0 30px rgba(255,215,106,1);
  animation:wpEntrada .6s cubic-bezier(.2,1.8,.4,1), wpPulso .3s ease infinite alternate; }
@keyframes wpEntrada { 0%{transform:scale(.2);opacity:0;} 100%{transform:scale(1);opacity:1;} }
@keyframes wpPulso { from{transform:scale(1);} to{transform:scale(1.08);} }
.win-pop.saliendo { animation:wpSalida .4s ease forwards; }
@keyframes wpSalida { to{opacity:0; transform:scale(1.3);} }

/* ============ 20. RESPONSIVE (tablet → móvil → mini) ============ */
@media (max-width:900px){
  .maquina{ padding:18px 12px; }
  .jp-grand{ padding:26px 60px 22px; min-height:110px; } .jp-grand strong{ font-size:1.5rem; }
  .jp-mayor{ padding:20px 50px 18px; min-height:86px; }
  .jp-menor,.jp-mini{ padding:16px 34px 14px; min-height:70px; }
  .banquete{ height:230px; } .comensal{ bottom:50px; } .plato{ bottom:92px; }
  .p-wukong{ bottom:88px; } .p-bajie{ bottom:80px; } .pz-madura{ width:72px; }
}
@media (max-width:640px){
  /* una sola pantalla, sin scroll */
  body{ padding:0; display:block; }
  .maquina{ width:100%; max-width:100%; height:100dvh; max-height:100dvh; display:flex; flex-direction:column; gap:6px;
    padding:6px; border-width:2px; outline:none; border-radius:0; overflow:hidden; }
  .maquina > *, .pantalla, .jackpots, .jp-fila, .jp, .hud-franja, .hud-caja, .deck, .apuesta-panel, .apuestas-rapidas, .botones{ min-width:0; }
  /* header */
  .pantalla-topper{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:4px 6px; }
  .topper-servicio{ position:static; gap:4px; } .topper-servicio .btn-serv{ padding:4px 7px; font-size:.7rem; }
  .vol-wrap input[type=range]{ width:48px; }
  h1{ flex:0 1 auto; } h1 img{ max-height:30px; width:auto; }
  .peregrinaje{ display:none; }
  /* jackpots placas limpias */
  .pantalla-feature{ flex:0 0 auto; margin-bottom:0; padding:8px; }
  .jackpots{ gap:4px; margin-bottom:6px; }
  .jp{ background-image:none; background:linear-gradient(180deg,var(--laca1),var(--laca2)); border:2px solid #b8860b; border-radius:8px;
    padding:6px 10px; min-height:0; box-shadow:inset 0 0 10px rgba(0,0,0,.6), 0 0 8px rgba(255,215,106,.3); }
  .jp-grand{ padding:10px 14px; } .jp-grand strong{ font-size:1.15rem; } .jp-grand small{ font-size:.5rem; letter-spacing:2px; }
  .jp-mayor{ padding:7px 12px; } .jp-mayor strong{ font-size:.9rem; }
  .jp-menor,.jp-mini{ padding:5px 8px; } .jp-menor strong,.jp-mini strong{ font-size:.7rem; }
  .jp small{ letter-spacing:2px; }
  /* banquete proporcional */
  .banquete{ height:165px; margin-bottom:0; }
  .comensal{ width:34%; bottom:35px; } .c-bajie{ width:39%; }
  .mesa-sombra{ display:none; }
  .plato{ bottom:65px; height:29px; } .p-wukong{ bottom:63px; } .p-bajie{ bottom:57px; } .pz-madura{ width:53px; }
  /* juego */
  .pantalla-juego{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; padding:8px; margin-bottom:0; }
  .tablero{ flex:1 1 auto; min-height:0; margin-bottom:6px; gap:4px; padding:6px; }
  .celda{ aspect-ratio:auto; }
  .hud-franja{ flex:0 0 auto; gap:4px; }
  .hud-caja{ width:auto; flex:1; padding:4px 6px; } .hud-caja small{ font-size:.45rem; letter-spacing:1px; margin-bottom:2px; }
  .hud-caja strong{ font-size:.7rem; } .hud-win strong{ font-size:.8rem; }
  .mensaje{ height:18px; font-size:.7rem; } .detalle{ display:none; }
  /* deck */
  .deck{ flex:0 0 auto; padding:6px; gap:6px; grid-template-columns:1fr auto; }
  .deck-label{ font-size:.55rem; } .deck-total{ display:none; }
  .apuestas-rapidas{ gap:3px; } .btn-apuesta{ width:100%; height:34px; font-size:.5rem; }
  .botones{ flex-direction:column; align-items:center; gap:4px; margin-left:0; }
  #btnAuto{ order:2; font-size:.55rem; padding:4px 10px; }
  #btnGirar{ order:1; width:70px; height:70px; font-size:.8rem; }
  .btn-recarga{ margin-top:6px; font-size:.6rem; padding:6px 10px; }
  .firma{ display:none; }
  /* bonos full-screen */
  .escena-bonus{ position:fixed; inset:0; z-index:40; border-radius:0; }
  .rueda-envuelta{ height:min(52vh,340px); width:min(92vw,420px); }
  .cofres-grid-nuevo{ width:min(92%,320px); }
  .escena-bajie .cofres-titulo{ font-size:clamp(12px,4vw,18px); padding:6px 16px; }
  .escena-bajie .cofres-info{ top:48px; font-size:clamp(9px,3vw,12px); }
}
@media (max-width:400px){
  .btn-apuesta{ height:30px; font-size:.45rem; }
  #btnGirar{ width:60px; height:60px; }
  .banquete{ height:140px; } .pz-madura{ width:44px; }
}

/* ===== CORRECCIÓN: paneles a lo ancho en móvil ===== */
html.movil .pantalla{ width:100%; margin:0 0 6px; align-self:stretch;
  border-width:3px; outline:none; padding:8px; }
html.movil .pantalla-topper{ padding:4px 8px; }
html.movil .banquete{ max-width:100%; }

/* ===== MÓVIL: más espacio y legibilidad para los rodillos ===== */
html.movil .jackpots{ gap:3px; margin-bottom:4px; }
html.movil .jp-grand{ padding:8px 12px; } html.movil .jp-grand strong{ font-size:1.05rem; }
html.movil .jp-mayor{ padding:6px 10px; } html.movil .jp-mayor strong{ font-size:.85rem; }
html.movil .jp-menor, html.movil .jp-mini{ padding:4px 8px; }
html.movil .jp-menor strong, html.movil .jp-mini strong{ font-size:.65rem; }

html.movil .banquete{ height:130px; }
html.movil .comensal{ width:30%; bottom:26px; } html.movil .c-bajie{ width:34%; }
html.movil .plato{ bottom:50px; height:26px; }
html.movil .p-wukong{ bottom:48px; } html.movil .p-bajie{ bottom:45px; }
html.movil .pz-madura{ width:40px; }

html.movil .tablero{ background:rgba(8,6,4,.5); gap:3px; padding:4px; }
html.movil .hud-caja{ padding:3px 4px; }
html.movil .hud-caja small{ font-size:.4rem; }
html.movil .hud-caja strong{ font-size:.65rem; }
html.movil .mensaje{ height:16px; font-size:.65rem; }

/* ===== MÓVIL v7: presupuesto cerrado ===== */
/* Topper: logo brillante + peregrinos que corren tras el logo */
html.movil h1 img{ mix-blend-mode:normal; filter:drop-shadow(0 0 6px rgba(255,215,106,.65)); max-height:34px; }
html.movil .pantalla-topper{ display:flex; align-items:center; gap:6px; padding:4px 8px; }
html.movil h1{ flex:0 0 auto; width:auto; }
html.movil .peregrinaje{ position:relative; display:block; flex:1 1 auto; height:34px; overflow:hidden; }
html.movil .peregrinaje .fila{ bottom:0; }
html.movil .peregrinaje img{ height:30px; width:30px; }
html.movil .peregrinaje img:nth-child(2){ height:38px; width:38px; }
html.movil .topper-servicio{ flex:0 0 auto; position:static; }

/* Jackpots: GRAND rey + fila de 3, con resplandor pulsante */
html.movil .jackpots{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:3px; margin-bottom:4px; }
html.movil .jp-grand{ grid-column:1/-1; padding:8px 12px; animation:grandResplandor 2s ease-in-out infinite; }
html.movil .jp-grand strong{ font-size:1.05rem; }
html.movil .jp-fila{ grid-column:span 2; display:flex; gap:3px; }
html.movil .jp-mayor{ padding:6px 8px; } html.movil .jp-mayor strong{ font-size:.8rem; }
html.movil .jp-menor, html.movil .jp-mini{ padding:5px 6px; }
html.movil .jp-menor strong, html.movil .jp-mini strong{ font-size:.62rem; }
@keyframes grandResplandor{
  0%,100%{ box-shadow:inset 0 0 10px rgba(0,0,0,.6), 0 0 6px rgba(255,215,106,.35); }
  50%{ box-shadow:inset 0 0 10px rgba(0,0,0,.6), 0 0 18px rgba(255,215,106,.75); }
}

/* Banquete con más presencia (usa el espacio ganado) */
html.movil .banquete{ height:170px; }
html.movil .comensal{ width:32%; bottom:34px; } html.movil .c-bajie{ width:36%; }
html.movil .plato{ bottom:64px; height:30px; }
html.movil .p-wukong{ bottom:62px; } html.movil .p-bajie{ bottom:58px; }
html.movil .pz-madura{ width:46px; }

/* Rodillos: se llevan todo el sobrante */
html.movil .tablero{ flex:1 1 auto; min-height:0; gap:4px; padding:6px; background:rgba(8,6,4,.5); }
html.movil .celda{ aspect-ratio:auto; }

/* HUD un poco más respirable */
html.movil .hud-caja{ padding:5px 6px; }
html.movil .hud-caja strong{ font-size:.75rem; }

/* Deck: fichas centradas sin rótulo + AUTO al lado del GIRAR */
html.movil .deck-label{ display:none; }
html.movil .apuesta-panel{ align-items:center; }
html.movil .apuestas-rapidas{ width:100%; justify-content:center; gap:6px; }
html.movil .btn-apuesta{ width:44px; height:44px; font-size:.55rem; }
html.movil .botones{ flex-direction:row; align-items:center; gap:8px; }
html.movil #btnAuto{ order:1; width:44px; height:44px; border-radius:50%; padding:0; font-size:.5rem; }
html.movil #btnGirar{ order:2; width:84px; height:84px; font-size:.85rem; }

/* ===== MÓVIL v8: ajustes finos 360px ===== */
/* peregrinos al trote, no en procesión */
html.movil .peregrinaje .fila{ animation:caminar 10s linear infinite; }

/* el tablero llena TODO su alto: adiós aire bajo el mensaje */
html.movil .tablero{ grid-template-rows:repeat(3,1fr); }

/* fichas que respetan su celda: adiós amontonamiento y solape con AUTO */
html.movil .btn-apuesta{ width:100%; height:40px; }

/* móvil chico: controles un poco menores para dar aire a las fichas */
html.mini #btnGirar{ width:72px; height:72px; }
html.mini #btnAuto{ width:38px; height:38px; font-size:.45rem; }
html.mini .apuestas-rapidas{ gap:4px; }

/* ===== MÓVIL v9: rodillos completos en cualquier teléfono ===== */
/* el detalle de líneas FUERA en móvil: su alto va a los rodillos */
html.movil .pantalla-juego .detalle{ display:none !important; }

/* mini (≤400px): banquete un poco menor para dar más alto al tablero */
html.mini .banquete{ height:150px; }
html.mini .comensal{ bottom:30px; }
html.mini .plato{ bottom:56px; height:26px; }
html.mini .p-wukong{ bottom:54px; } html.mini .p-bajie{ bottom:50px; }
html.mini .pz-madura{ width:40px; }

/* ===== MÓVIL v10: HUD delgado + símbolos completos ===== */
/* HUD más delgado: su alto va a los rodillos */
html.movil .hud-caja{ padding:3px 4px; border-radius:4px; }
html.movil .hud-caja small{ font-size:.38rem; letter-spacing:1px; margin-bottom:1px; }
html.movil .hud-caja strong{ font-size:.62rem; }
html.movil .hud-win strong{ font-size:.7rem; }

/* más ancho útil y un margen interno para que el símbolo no toque el borde */
html.movil .pantalla-juego{ padding:6px; }
html.movil .tablero{ padding:4px; gap:3px; }
html.movil .celda{ padding:2px; }

/* ===== MÓVIL v11: filas juntas en pantallas altas ===== */
/* la celda no se estira más allá de 1.25× su ancho → filas pegadas */
html.movil .celda{ max-height:calc((100vw - 44px)/5 * 1.25); }
html.movil .tablero{ align-content:center; }

/* pantallas altas (≥800px): el sobrante se invierte, no queda como aire */
@media (max-width:640px) and (min-height:800px){
  html.movil .banquete{ height:210px; }
  html.movil .comensal{ width:34%; bottom:42px; } html.movil .c-bajie{ width:38%; }
  html.movil .plato{ bottom:78px; height:34px; }
  html.movil .p-wukong{ bottom:76px; } html.movil .p-bajie{ bottom:72px; }
  html.movil .pz-madura{ width:52px; }
  html.movil #btnGirar{ width:96px; height:96px; }
  html.movil .btn-apuesta{ height:48px; }
}

/* ===== MÓVIL: pantallas bajas (≤700px de alto: SE, gama baja) ===== */
@media (max-width:640px) and (max-height:700px){
  html.movil .pantalla-topper{ padding:2px 6px; }
  html.movil h1 img{ max-height:26px; }
  html.movil .peregrinaje{ height:26px; }
  html.movil .peregrinaje img{ height:22px; width:22px; }
  html.movil .peregrinaje img:nth-child(2){ height:28px; width:28px; }
  html.movil .jp-grand{ padding:6px 10px; } html.movil .jp-grand strong{ font-size:.95rem; }
  html.movil .jp-mayor{ padding:4px 6px; } html.movil .jp-mayor strong{ font-size:.72rem; }
  html.movil .jp-menor, html.movil .jp-mini{ padding:3px 5px; }
  html.movil .jp-menor strong, html.movil .jp-mini strong{ font-size:.56rem; }
  html.movil .banquete{ height:120px; }
  html.movil .comensal{ width:30%; bottom:24px; } html.movil .c-bajie{ width:34%; }
  html.movil .plato{ bottom:46px; height:24px; }
  html.movil .p-wukong{ bottom:44px; } html.movil .p-bajie{ bottom:41px; }
  html.movil .pz-madura{ width:36px; }
  html.movil .hud-caja{ padding:2px 3px; } html.movil .hud-caja strong{ font-size:.56rem; }
  html.movil .mensaje{ height:14px; font-size:.6rem; }
  html.movil #btnGirar{ width:64px; height:64px; font-size:.7rem; }
  html.movil #btnAuto{ width:34px; height:34px; font-size:.42rem; }
  html.movil .btn-apuesta{ height:34px; }
}

/* ===== GABINETE (desktop): devolverle el brillo al título ===== */
.pantalla-topper h1{ position:relative; }
.pantalla-topper h1 img{ filter:saturate(1.25) contrast(1.08) brightness(1.06); }
.pantalla-topper h1::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg, transparent 35%, rgba(255,246,200,.35) 50%, transparent 65%);
  background-size:220% 100%; mix-blend-mode:screen; animation:brilloLogo 4.5s ease-in-out infinite; }
@keyframes brilloLogo{ 0%{background-position:120% 0;} 60%,100%{background-position:-120% 0;} }

/* ===== PANTALLAS BAJAS: 3 ajustes finales ===== */
@media (max-width:640px) and (max-height:700px){
  /* peregrinos bajan un poco (no pegados al tope del topper) */
  html.movil .peregrinaje{ margin-top:2px; }
  /* duraznos suben dentro del plato (ya no asoman por abajo) */
  html.movil .plato{ bottom:54px; height:22px; }
  html.movil .p-wukong{ bottom:52px; } html.movil .p-bajie{ bottom:50px; }
  /* símbolos no recortados: celda centra su contenido vertical */
  html.movil .celda{ display:grid; place-items:center; padding:1px 2px 3px; }
}

/* ===== BRILLO LOGO v2: barrido limpio, sin pausa visible ===== */
.pantalla-topper h1::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,246,200,.35) 50%, transparent);
  mix-blend-mode:screen; animation:brilloLogo 4.5s ease-in-out infinite; }
@keyframes brilloLogo{ 0%{ transform:translateX(-130%); } 55%,100%{ transform:translateX(330%); } }

/* ===== PANTALLAS BAJAS: ajustes finales ===== */
@media (max-width:640px) and (max-height:700px){
  /* peregrinos un poco más abajo */
  html.movil .peregrinaje{ margin-top:6px; }
  /* comensales asoman más sobre la mesa (menos "detrás") */
  html.movil .comensal{ bottom:34px; } html.movil .c-bajie{ bottom:34px; }
  /* duraznos centrados en el plato */
  html.movil .plato{ bottom:62px; height:20px; }
  html.movil .p-wukong{ bottom:60px; } html.movil .p-bajie{ bottom:58px; }
  /* más alto para los símbolos: mensaje fuera y aire bajo el tablero */
  html.movil .mensaje{ display:none; }
  html.movil .tablero{ padding-bottom:6px; }
}

/* el destello se queda DENTRO del título, no invade el servicio */
.pantalla-topper h1{ overflow:hidden; }
html.movil h1{ padding:2px; }   /* margen para que el glow del logo no se recorte */

/* ===== SERVICIO reubicable: gabinete en el deck, móvil en el topper ===== */
.servicio{ display:flex; align-items:center; gap:10px; }
.svc-deck{ margin-top:8px; flex-wrap:wrap; }
.svc-deck .btn-serv{ padding:8px 12px; font-size:.85rem; }
.svc-top{ flex:0 0 auto; gap:4px; }
.svc-top .btn-serv{ padding:4px 7px; font-size:.7rem; }
.svc-top .vol-wrap input[type=range]{ width:48px; }
html.movil .deck-total{ display:none; }

/* ===== LOGO VIVO: oro y rojo encendidos sin perder el fundido ===== */
.pantalla-topper h1 img{
  mix-blend-mode:multiply;
  filter:saturate(1.7) contrast(1.1) brightness(1.1)
         drop-shadow(0 0 10px rgba(255,200,60,.45));
}
html.movil h1 img{
  filter:saturate(1.7) contrast(1.3) brightness(1.15)
         drop-shadow(0 0 8px rgba(255,215,106,.6));
}
/* destello un poco más intenso */
.pantalla-topper h1::after{
  background:linear-gradient(100deg, transparent, rgba(255,246,200,.5) 50%, transparent);
}

.metros-panel{ text-align:left; font-size:.75rem; margin:8px 0; }
.metros-panel .mtr-fila{ display:flex; justify-content:space-between; gap:10px; padding:3px 6px; border-bottom:1px solid rgba(201,162,39,.15); }
.metros-panel .mtr-fila strong{ color:var(--oro); font-family:'Michroma'; font-size:.7rem; }
.metros-panel .mtr-sub{ color:var(--suave); font-size:.62rem; letter-spacing:1px; text-transform:uppercase; margin-top:8px; }

/* ===== TÍTULO: mezcla estable + brillo sin artefactos ===== */
.pantalla-topper{ isolation:isolate; }
.pantalla-topper h1 img{
  mix-blend-mode:multiply;
  filter:saturate(2.25) contrast(2.12) brightness(0.95) drop-shadow(0 0 8px rgba(255,200,60,.35));
}
.pantalla-topper h1::after{ content:none; }   /* adiós mancha rectangular */