:root{--slot-size:clamp(84px,22vw,140px);--visible-count:4;--slot-gap:16px;--bg:#0b1220;--fg:#e8ecf1;--accent:#ffcc00;--accent2:#ff5e5e;--panel:#121a2b}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 600px at 20% 20%,#151c2f,#0b1220);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.app{max-width:900px;margin:40px auto;padding:0 20px;display:flex;flex-direction:column;gap:24px;align-items:center;min-height:100vh}
h1{font-size:28px;letter-spacing:.1em;color:var(--accent)}
.user-tag{font-size:14px;margin-left:12px;color:#ffd66e;opacity:.9}
.win-banner{position:fixed;top:12px;left:50%;transform:translateX(-50%) translateY(-20px) scale(.92);background:linear-gradient(180deg,#1b2338,#11182a);color:var(--accent);padding:10px 16px;border-radius:12px;box-shadow:0 14px 28px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.08);opacity:0;pointer-events:none;z-index:1000}
.win-banner.show{animation:elasticIn .9s;opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
@keyframes elasticIn{0%{opacity:0;transform:translateX(-50%) translateY(-28px) scale(.8)}50%{opacity:1;transform:translateX(-50%) translateY(6px) scale(1.12)}80%{transform:translateX(-50%) translateY(-2px) scale(.98)}100%{transform:translateX(-50%) translateY(0) scale(1)}}
.machine{position:relative;padding:24px;border-radius:20px;background:linear-gradient(180deg,#1b2338,#11182a);box-shadow:0 12px 30px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.06)}
.reels{display:flex;gap:var(--slot-gap)}
.reel{width:calc(var(--slot-size) + 4px);height:calc(var(--slot-size) * var(--visible-count) + 4px);border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#0c1323,#0d1425);box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
.strip{position:relative;will-change:transform;transform:translate3d(0,0,0)}
.symbol{width:var(--slot-size);height:var(--slot-size);display:grid;place-items:center}
.symbol img{width:calc(var(--slot-size)*.86);height:calc(var(--slot-size)*.86);filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.mask{pointer-events:none;position:absolute;inset:0;border-radius:20px;background:
  linear-gradient(180deg,rgba(0,0,0,.6),transparent 30%,transparent 70%,rgba(0,0,0,.6)),
  radial-gradient(600px 200px at 50% 0%,rgba(255,255,255,.12),transparent 60%)
}
.panel{width:100%;display:flex;gap:16px;align-items:center;justify-content:center}
.gate{width:100%;display:flex;gap:12px;align-items:center;justify-content:center;margin-top:8px}
.guest-info{background:var(--panel);padding:8px 12px;border-radius:10px;color:var(--fg);opacity:.8}
.stats{display:flex;gap:24px;background:var(--panel);padding:10px 16px;border-radius:10px}
.stats span{color:var(--accent)}
button{appearance:none;border:0;background:linear-gradient(180deg,#ffd66e,#ffb300);color:#222;padding:12px 22px;border-radius:10px;font-weight:700;letter-spacing:.08em;box-shadow:0 8px 16px rgba(255,179,0,.3), inset 0 -2px 0 rgba(0,0,0,.2);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{filter:grayscale(1);opacity:.7;cursor:not-allowed}
.result{min-height:28px}
.result.win{color:var(--accent)}
.result.lose{color:var(--accent2)}
.machine.win .reel{box-shadow:0 0 0 2px #ffe37a,inset 0 0 0 2px rgba(255,255,255,.08)}
.pulse{animation:pulse .9s ease-in-out 2}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

@media (max-width:480px){
  .app{margin:20px auto;padding:0 12px;gap:18px}
  .reels{gap:12px}
  button{padding:12px 18px}
}
/* overrides */
.result{display:none !important}
.win-banner{display:none !important}
/* speed overrides */
.pulse{animation:pulse .6s ease-in-out 1 !important}
.toast.show{animation:elasticIn .6s !important}
/* toast for no win */
.toast{position:fixed;top:12px;left:50%;transform:translateX(-50%) translateY(-20px) scale(.92);background:linear-gradient(180deg,#1b2338,#11182a);color:var(--fg);padding:10px 16px;border-radius:12px;box-shadow:0 14px 28px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.08);opacity:0;pointer-events:none;z-index:1000}
.toast.show{animation:elasticIn .9s;opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.toast.success{color:var(--accent)}
.toast.error{color:var(--accent2)}