*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#17051e;color:#fff;font-family:Arial,Helvetica,sans-serif}
button{font:inherit}
.viewport{width:100%;height:100%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(#24102d 0 36px,#120019 36px 100%)}
.scale-box{position:relative;width:1006px;height:613px;flex:none}
.game{position:absolute;left:0;top:0;width:1006px;height:613px;transform-origin:0 0;overflow:hidden;background:#120019;user-select:none;-webkit-user-select:none}
.cabinet{position:absolute;inset:0;width:1006px;height:613px;display:block;pointer-events:none;z-index:1}

/* Ventana de rodillos medida sobre la referencia 1006x613. */
.reels{position:absolute;left:257px;top:146px;width:531px;height:365px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);overflow:hidden;z-index:3;background:#170526}
.reel-cell{position:relative;overflow:hidden;background-color:#170526;background-repeat:no-repeat;background-size:1006px 613px;will-change:background-position,filter,transform;transition:filter .1s ease,transform .1s ease}
.reel-cell.spinning{filter:blur(1.35px) brightness(1.16) saturate(1.12);transform:translateY(1px)}
.reel-cell.win{filter:brightness(1.25) saturate(1.2);box-shadow:inset 0 0 18px rgba(255,250,78,.85),0 0 12px rgba(255,83,255,.8);z-index:2}

.hotspot{position:absolute;border:0;padding:0;margin:0;background:transparent;z-index:8;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.hotspot:focus-visible{outline:2px solid rgba(255,255,255,.85);outline-offset:2px;border-radius:50%}
.buy-hot{left:104px;top:217px;width:137px;height:111px;border-radius:8px}
.ante-hot{left:104px;top:347px;width:137px;height:84px;border-radius:8px}
.info-hot{left:164px;top:525px;width:38px;height:42px;border-radius:50%}
.minus-hot{left:682px;top:515px;width:43px;height:44px;border-radius:50%}
.spin-hot{left:726px;top:498px;width:94px;height:88px;border-radius:50%}
.plus-hot{left:827px;top:515px;width:44px;height:44px;border-radius:50%}

.hud-value{position:absolute;z-index:7;height:22px;display:flex;align-items:center;opacity:0;color:#fff;font-weight:800;line-height:1;text-shadow:0 1px 2px #000,0 0 3px #000;background:linear-gradient(90deg,rgba(16,20,43,.98) 0%,rgba(16,20,43,.93) 82%,rgba(16,20,43,0) 100%);pointer-events:none;white-space:nowrap;transition:opacity .08s ease}
.hud-value.active{opacity:1}
.credit-value{left:265px;top:531px;width:111px;font-size:15px}
.bet-value{left:264px;top:550px;width:78px;font-size:15px}

.win-banner{position:absolute;z-index:9;left:406px;top:474px;width:235px;height:31px;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.92);transition:opacity .15s ease,transform .15s ease;border:2px solid #ff47fb;border-radius:4px;background:linear-gradient(180deg,rgba(69,8,93,.96),rgba(21,1,35,.96));color:#ffe63b;font-size:17px;font-weight:900;text-shadow:0 2px 1px #000,0 0 5px #ff28e7;pointer-events:none}
.win-banner.show{opacity:1;transform:scale(1)}

.rules-dialog{width:min(746px,calc(100vw - 20px));max-height:min(570px,calc(100vh - 20px));padding:0;border:1px solid #2f2136;background:#050508;color:#fff;box-shadow:0 25px 100px rgba(0,0,0,.85)}
.rules-dialog::backdrop{background:rgba(0,0,0,.8)}
.rules-shell{padding:12px 18px 18px;background:radial-gradient(circle at 50% 0,rgba(53,10,63,.35),transparent 45%),#050508}
.rules-head{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;text-align:center}
.rules-head>div{flex:1}
.rules-head h1{font:400 20px Georgia,serif;margin:0 0 2px}
.rules-head p{margin:0;font-size:13px}
.rules-close{border:0;background:transparent;color:#ddd;font-size:44px;line-height:.8;cursor:pointer;font-weight:200}
.paytable{display:grid;grid-template-columns:repeat(5,1fr);gap:8px 10px;margin-top:14px}
.pay-item{min-width:0;text-align:center;padding:7px 3px;border:1px solid rgba(255,255,255,.07);background:rgba(12,8,16,.68)}
.pay-symbol{width:78px;height:70px;margin:0 auto 4px;background-repeat:no-repeat;background-size:1006px 613px;box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
.pay-name{font-size:11px;color:#ddd;text-transform:uppercase;margin-bottom:3px}
.pay-values{font:700 12px/1.3 Arial,sans-serif;white-space:pre-line}
.rules-note{text-align:center;color:#9d939f;font-size:11px;margin:12px 0 0}

@media(max-width:720px){
  .rules-dialog{width:calc(100vw - 10px)}
  .paytable{grid-template-columns:repeat(3,1fr)}
  .pay-symbol{width:68px;height:62px}
}