/* Slots Royal: salón moderno oscuro con luces, gabinetes dorado / vino / zafiro, rodillos, palanca y planas que caen. Móvil vertical primero (~390 px). */
.rs-pantalla{background:var(--rp-fondo,none) center/cover no-repeat,
  radial-gradient(520px 340px at 18% 12%,#3a1f6e66 0,#0000 70%),radial-gradient(560px 360px at 85% 30%,#0f5a7a55 0,#0000 70%),
  linear-gradient(180deg,#0a0b14,#10101c 55%,#07070d)}
.rs-pantalla:not(.con-fondo)::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(100deg,#0000 0 46px,#ffffff08 46px 47px),linear-gradient(180deg,#0000 62%,#e2b53a14 100%)}
.rs-scroll{position:relative;z-index:2;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:.5rem .4rem 1rem}
.rs-sala{display:flex;justify-content:center;padding:.3rem 0 .2rem}
.rs-res{text-align:center;min-height:3.2rem;margin:.5rem 0;font:600 .92rem Georgia,serif;color:#ffe9a8}
.rs-res .grande{font-size:1.15rem;color:#ffd24a;text-shadow:0 0 14px #ffb30088}
.rs-res .mas{color:#7dff9a}
.rs-mando{position:relative;z-index:6;background:linear-gradient(180deg,#000a,#000e);border-top:1px solid #b8860b66;padding:.3rem .4rem calc(.4rem + env(safe-area-inset-bottom))}
.rs-acc{display:flex;gap:.45rem;justify-content:center;padding:.15rem 0}
.rs-acc .rp-boton{flex:1;max-width:340px;font-size:1rem;padding:.7rem}
.rs-sello{display:flex;width:100%;height:100%;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 50% 38%,#2a4f9a,#0a1534 75%);box-shadow:0 0 0 3px #e2b53a,0 0 0 4px #5a3d06,0 2px 6px #000a;overflow:hidden}
.rs-sello img{width:112%;height:112%;object-fit:contain;filter:drop-shadow(0 1px 2px #000a)}
.rs-svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 3px #0008);object-fit:contain}
.rs-pie{margin:.5rem .3rem;color:#cdbf98;font-size:.78rem}.rs-pie summary{cursor:pointer;color:#ffd24a}
.rs-pie table{width:100%;border-collapse:collapse;margin-top:.4rem}.rs-pie td{padding:.15rem .3rem;border-bottom:1px solid #ffffff14}
.rs-ico{width:34px}.rs-ico .rs-svg{width:30px;height:30px}.rs-pago{text-align:right;color:#ffe9a8}

/* luces LED */
.rs-leds{display:flex;justify-content:space-between;padding:0 .25rem;gap:2px}
.rs-leds span{width:7px;height:7px;border-radius:50%;background:#ffd24a;box-shadow:0 0 6px 1px #ffb300,inset 0 0 2px #fff;animation:rs-led 1.4s infinite steps(2,jump-none);animation-delay:calc(var(--i)*-.1s)}
.rs-leds span:nth-child(3n+1){background:#ff5a4a;box-shadow:0 0 6px 1px #ff2a1a,inset 0 0 2px #fff}
.rs-leds span:nth-child(3n+2){background:#5ad7ff;box-shadow:0 0 6px 1px #1ab0ff,inset 0 0 2px #fff}
.rs-leds.fiesta span{animation-duration:.28s}
@keyframes rs-led{0%{opacity:1}50%{opacity:.22}100%{opacity:1}}

/* rodillos */
.rs-reles{display:flex;gap:3px;justify-content:center}
.rs-rodillo{position:relative;width:var(--c);height:calc(var(--c)*3);overflow:hidden;background:linear-gradient(180deg,#d9d2bf,#fbf6e8 30%,#fbf6e8 70%,#cfc8b4)}
.rs-tira{position:absolute;left:0;right:0;top:0;will-change:transform}
.rs-sim{height:var(--c);display:flex;align-items:center;justify-content:center;padding:calc(var(--c)*.1)}
.rs-rodillo.gira .rs-tira{filter:blur(1.6px)}
.rs-sim.gana{animation:rs-gana .55s ease-in-out infinite alternate;position:relative;z-index:2}
@keyframes rs-gana{from{transform:scale(1);filter:drop-shadow(0 0 3px #ffd24a)}to{transform:scale(1.14);filter:drop-shadow(0 0 12px #ffb300) brightness(1.2)}}

/* ---------- retro: 3 rodillos y palanca ---------- */
.rs-retro{--c:min(24vw,92px);position:relative;padding-right:34px}
.rs-retro-cab{position:relative;border-radius:22px 22px 14px 14px;padding:10px 12px 12px;
  background:linear-gradient(145deg,var(--g1),var(--g2) 45%,var(--g3));border:3px solid var(--g4);box-shadow:0 18px 36px #000c,inset 0 2px 0 #fff6,inset 0 -6px 12px #0006}
.rs-retro.dorado{--g1:#ffe58a;--g2:#d4a62a;--g3:#8a6212;--g4:#5a3d06;--l:#3a2606}
.rs-retro.vino{--g1:#a3213a;--g2:#6e1020;--g3:#3d0812;--g4:#e2b53a;--l:#ffe9a8}
.rs-letrero{border-radius:12px;background:linear-gradient(180deg,#14090a,#2a1210);border:2px solid var(--g4,#e2b53a);padding:4px 6px 6px;margin-bottom:8px;box-shadow:inset 0 0 14px #000}
.rs-letrero-c{display:flex;align-items:center;justify-content:center;gap:8px;color:#ffe9a8;font:700 1.02rem Georgia,serif;letter-spacing:.06em;text-shadow:0 0 10px #ffb30099;margin-top:2px}
.rs-marca{width:30px;height:30px;flex:none;animation:rs-flota 3s ease-in-out infinite}
@keyframes rs-flota{50%{transform:translateY(-2px) rotate(4deg)}}
.rs-ventana{position:relative;border-radius:12px;padding:8px;background:linear-gradient(180deg,#0b0b0e,#1c1c22);border:3px solid var(--g4);box-shadow:inset 0 0 18px #000,0 1px 0 #fff5}
.rs-retro .rs-rodillo{border-radius:6px;box-shadow:inset 0 14px 14px -8px #0008,inset 0 -14px 14px -8px #0008}
.rs-linea{position:absolute;left:2px;right:2px;top:calc(8px + var(--c)*1.5);height:0;border-top:2px solid #ff2a2a;box-shadow:0 0 8px #ff2a2a;pointer-events:none;z-index:3}
.rs-linea i{position:absolute;top:-7px;width:0;height:0;border:6px solid transparent}
.rs-linea i:first-child{left:-1px;border-left-color:#ff2a2a;border-left-width:9px}.rs-linea i:last-child{right:-1px;border-right-color:#ff2a2a;border-right-width:9px}
.rs-sombra{position:absolute;inset:8px;border-radius:6px;pointer-events:none;z-index:3;background:linear-gradient(105deg,#fff3 0,#fff0 28%,#fff0 70%,#fff2 100%)}
.rs-base{display:flex;align-items:center;justify-content:space-between;margin-top:10px;color:var(--l);font-size:1.1rem}
.rs-ranura{flex:1;height:10px;margin:0 10px;border-radius:5px;background:#0c0c10;box-shadow:inset 0 2px 4px #000,0 1px 0 #fff5}
.rs-palanca{position:absolute;right:-30px;top:70px;width:44px;height:170px;cursor:pointer;touch-action:manipulation}
.rs-eje{position:absolute;left:0;top:74px;width:16px;height:34px;border-radius:0 8px 8px 0;background:linear-gradient(90deg,#555,#ddd 50%,#666);box-shadow:0 2px 6px #000a}
.rs-brazo{position:absolute;left:21px;top:91px;width:10px;height:62px;margin-left:-5px;transform-origin:50% 0;transform:rotate(-165deg);background:linear-gradient(90deg,#777,#f2f2f2 50%,#6a6a6a);border-radius:5px;box-shadow:0 3px 6px #0009}
.rs-bola{position:absolute;left:50%;bottom:-18px;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9a8a,#d11f27 55%,#6a0a10);box-shadow:0 3px 8px #000b}

/* ---------- rodillos 5x3 con aspecto de máquina real ---------- */
.rs-rod{--c:min(16.4vw,72px);position:relative}
.rs-rod-cab{border-radius:20px;padding:10px;background:linear-gradient(145deg,var(--g1),var(--g2) 45%,var(--g3));border:3px solid var(--g4);box-shadow:0 18px 36px #000c,inset 0 2px 0 #fff6,inset 0 -6px 12px #0006}
.rs-rod.dorado{--g1:#ffe58a;--g2:#d4a62a;--g3:#8a6212;--g4:#5a3d06}
.rs-rod.zafiro{--g1:#5f8dff;--g2:#1b3fa8;--g3:#0a1c55;--g4:#c9d6ff}
.rs-rod-ventana{position:relative;border-radius:12px;padding:6px 6px 4px;background:#08080c;border:3px solid #1b1b22;box-shadow:inset 0 0 20px #000}
.rs-cil{gap:4px;padding:4px 0;position:relative}
.rs-cil .rs-rodillo{border-radius:10px;background:linear-gradient(90deg,#b9b19a,#f7f2e2 22%,#fffdf4 50%,#f1ecdb 78%,#aaa28a);box-shadow:0 0 0 2px #2c2c34,0 0 0 3px #8e8e9a}
.rs-brillo{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:10px;
  background:linear-gradient(180deg,#000e 0,#0007 12%,#0000 30%,#fff2 46%,#0000 55%,#0000 70%,#0007 88%,#000e 100%),linear-gradient(90deg,#0006 0,#0000 18%,#fff3 30%,#0000 42%,#0000 80%,#0005 100%)}
.rs-cil .rs-sim{transform:scaleX(.96)}
.rs-cil .rs-rodillo.gira .rs-tira{filter:blur(2.4px) brightness(.95)}

/* ---------- plana que cae ---------- */
.rs-cae{--c:min(24vw,90px);padding:0}
.rs-cae-cab{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px;color:#ffe9a8;font:700 1.1rem Georgia,serif;letter-spacing:.06em;text-shadow:0 0 12px #ffb300aa}
.rs-cae-marco{border-radius:18px;padding:8px 8px 6px;background:linear-gradient(145deg,#2a2d4a,#14162a 55%,#0a0b18);border:3px solid #e2b53a;box-shadow:0 18px 36px #000c,0 0 24px #e2b53a33,inset 0 0 18px #000}
.rs-cae-tablero{position:relative;margin:6px 0;border-radius:10px;overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#1a2a5a,#0a1230)}
.rs-cae-grid{display:grid;grid-template-columns:repeat(var(--cols),var(--c));grid-template-rows:repeat(var(--filas),var(--c));gap:2px;justify-content:center}
.rs-tile{display:flex;align-items:center;justify-content:center;padding:calc(var(--c)*.1);background:linear-gradient(180deg,#ffffff1c,#ffffff06);border-radius:8px;box-shadow:inset 0 0 0 1px #ffffff1c}
.rs-cae-medio{position:absolute;left:0;right:0;top:calc(var(--c) + 2px);height:calc(var(--c)*2 + 2px);border:2px solid #ffd24a;border-left:0;border-right:0;pointer-events:none;box-shadow:0 0 14px #ffb30077,inset 0 0 14px #ffb30033;animation:rs-medio 1.8s ease-in-out infinite alternate}
@keyframes rs-medio{from{opacity:.55}to{opacity:1}}
.rs-tile.gana{animation:rs-gana .55s ease-in-out infinite alternate;background:linear-gradient(180deg,#ffd24a55,#ffd24a11);box-shadow:0 0 14px #ffd24a;position:relative;z-index:2}

/* ---------- premio mayor ---------- */
.rs-mayor{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:#000c;animation:rs-ent .35s ease-out}
.rs-mayor.sale{opacity:0;transition:opacity .6s}
.rs-mayor b{font:800 1.7rem Georgia,serif;color:#ffd24a;text-shadow:0 0 18px #ffb300,0 2px 0 #5a3d06;letter-spacing:.06em;animation:rs-latido .6s ease-in-out infinite alternate}
.rs-mayor-sello{width:min(58vw,240px);height:min(58vw,240px);animation:rs-sube 1s cubic-bezier(.2,1.3,.4,1)}
.rs-rayos{position:absolute;width:140vmax;height:140vmax;left:50%;top:50%;margin:-70vmax 0 0 -70vmax;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,#ffd24a33 0 6deg,#0000 6deg 18deg);animation:rs-gira 14s linear infinite;-webkit-mask:radial-gradient(circle,#000 8%,#0000 50%);mask:radial-gradient(circle,#000 8%,#0000 50%)}
@keyframes rs-gira{to{transform:rotate(360deg)}}
@keyframes rs-sube{from{transform:scale(.1) rotate(-200deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes rs-latido{to{transform:scale(1.07)}}
@keyframes rs-ent{from{opacity:0}}
@media (prefers-reduced-motion:reduce){.rs-leds span,.rs-marca,.rs-cae-medio{animation:none}}
@media(min-width:700px){.rs-retro{--c:96px}.rs-rod{--c:80px}.rs-cae{--c:96px}}

/* ---------- móvil vertical: rejilla + Girar + fichas en UNA pantalla (probado a 390x664, la barra de Safari ya descontada) ---------- */
.rs-pantalla{inset:var(--ctl-top,28px) 0 auto 0;height:calc(100vh - var(--ctl-top,28px));height:calc(var(--rs-h,100vh) - var(--ctl-top,28px))}
.rs-cae{--c:min(23vw,90px,max(44px,calc((var(--rs-h,844px) - var(--ctl-top,28px) - 312px)/4)))}
.rs-ui-cae .rs-scroll{padding:.3rem .4rem .5rem}
.rs-ui-cae .rs-sala{padding:0}
.rs-ui-cae .rs-cae-cab{margin-bottom:4px;font-size:1rem}
.rs-ui-cae .rs-marca{width:24px;height:24px}
.rs-ui-cae .rs-cae-marco{padding:5px 6px 4px}
.rs-ui-cae .rs-cae-tablero{margin:3px 0}
.rs-ui-cae .rs-leds span{width:6px;height:6px}
.rs-ui-cae .rs-res{min-height:0;margin:.3rem 0 .2rem}
.rs-ui-cae .rs-res .grande{font-size:1rem}
.rs-ui-cae .rj-res{margin-top:.2rem}
.rs-ui-cae .rj-c{padding:.15rem .2rem}
.rs-ui-cae .rs-mando{padding-top:.2rem}
.rs-ui-cae .rs-mando .rp-ficha{--t:38px!important}
.rs-ui-cae .rs-mando .rp-bandeja{padding:0;gap:.3rem}
.rs-ui-cae .rs-acc .rp-boton{padding:.55rem}