:root{--bg:#0a0e1a;--panel:#101a33b8;--cyan:#22d3ee;--pink:#ff2d95;--gold:#ffd24a;--font:"Orbitron", system-ui, sans-serif}*{box-sizing:border-box;margin:0}html,body{height:100%;overflow:hidden}body{font-family:var(--font);color:#fff;background:radial-gradient(ellipse at 50% 18%, #16204a 0%, var(--bg) 68%);justify-content:center;align-items:center;display:flex}#wrap{width:430px;height:880px;position:relative}#stage{border-radius:14px;height:656px;position:absolute;top:108px;left:10px;right:10px;overflow:hidden;box-shadow:0 0 0 1px #22d3ee2e,0 12px 40px #0009}#stage canvas{margin:-96px auto 0;display:block}#hud{pointer-events:none;letter-spacing:.08em;font-variant-numeric:tabular-nums;justify-content:space-between;font-size:12px;font-weight:800;display:flex;position:absolute;top:14px;left:18px;right:18px}#hud span[hidden]{display:none}.hudside{align-items:center;gap:8px;display:flex}#hud span{background:var(--panel);border:1px solid #22d3ee4d;border-radius:999px;padding:5px 12px;display:inline-block;box-shadow:0 0 12px #22d3ee26}#score.pop{animation:.25s scorepop}@keyframes scorepop{50%{filter:brightness(1.5);transform:scale(1.18)}}#score{color:var(--gold);text-shadow:0 0 8px #ffd24a80}#balls{color:var(--cyan);text-shadow:0 0 8px #22d3ee80}#form{color:var(--gold);text-shadow:0 0 8px #ffd24a80}#reels{pointer-events:none;gap:10px;display:flex;position:absolute;top:50px;left:50%;transform:translate(-50%)}.reel{background:var(--panel);border:1px solid #22d3ee59;border-radius:12px;justify-content:center;align-items:center;width:54px;height:54px;font-family:system-ui,sans-serif;font-size:34px;display:flex;box-shadow:inset 0 2px 8px #0000008c,0 0 10px #22d3ee1f}.reel.spin{border-color:var(--gold);animation:.28s infinite alternate reelpulse}@keyframes reelpulse{0%{box-shadow:0 0 6px #ffd24a4d,inset 0 2px 8px #0000008c}to{box-shadow:0 0 22px #ffd24acc,inset 0 2px 8px #0000008c}}#msg{text-align:center;letter-spacing:.08em;color:var(--gold);pointer-events:none;text-shadow:0 0 10px #ffd24a73,0 1px 3px #000;min-height:18px;font-size:13px;font-weight:800;transition:opacity .15s;position:absolute;bottom:94px;left:0;right:0}#charge{background:var(--panel);pointer-events:none;border:1px solid #22d3ee80;border-radius:4px;height:6px;position:absolute;bottom:84px;left:10px;right:10px;overflow:hidden}#chargefill{background:linear-gradient(90deg, var(--cyan), var(--gold));width:0;box-shadow:0 0 10px var(--cyan);position:absolute;top:0;bottom:0;left:0}.pad{background:var(--panel);width:110px;height:64px;color:var(--cyan);font-size:22px;font-family:var(--font);text-shadow:0 0 10px #22d3ee99;touch-action:none;border:1px solid #22d3ee73;border-radius:12px;position:absolute;bottom:16px;box-shadow:0 0 14px #22d3ee2e,inset 0 1px #ffffff0f}.pad:active{background:#22d3ee38;transform:scale(.97);box-shadow:0 0 24px #22d3ee8c}.pad-l{left:10px}.pad-r{right:10px}#btnGo{color:#fff;letter-spacing:.1em;width:130px;height:64px;font-size:15px;font-weight:800;font-family:var(--font);touch-action:none;background:linear-gradient(160deg,#1d7a4a,#0f4d2e);border:1px solid #ffd24a8c;border-radius:12px;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 0 16px #ffd24a40}#btnGo:active{transform:translate(-50%)scale(.97);box-shadow:0 0 26px #ffd24a8c}#overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:5;background:#050812a8;border-radius:14px;justify-content:center;align-items:center;height:664px;display:flex;position:absolute;top:100px;left:10px;right:10px}#overlay[hidden]{display:none}.opanel{background:var(--panel);text-align:center;border:1px solid #ffd24a80;border-radius:16px;padding:26px 34px;box-shadow:0 0 30px #ffd24a40}.otitle{letter-spacing:.18em;color:var(--gold);text-shadow:0 0 14px #ffd24a99;font-size:22px;font-weight:800}#finalscore{color:#fff;font-variant-numeric:tabular-nums;margin:6px 0 2px;font-size:44px;font-weight:800}.osub{letter-spacing:.3em;color:#8fa1cc;margin-bottom:16px;font-size:11px}#btnRestart{border:1px solid var(--gold);color:var(--gold);letter-spacing:.1em;font-size:15px;font-weight:800;font-family:var(--font);background:0 0;border-radius:12px;padding:12px 26px;box-shadow:0 0 14px #ffd24a4d}#btnRestart:active{background:#ffd24a26}#btnMute{background:var(--panel);color:#cfe9ff;font:inherit;cursor:pointer;pointer-events:auto;border:1px solid #22d3ee4d;border-radius:999px;padding:5px 10px;font-size:11px;box-shadow:0 0 12px #22d3ee26}#foot{text-align:center;color:#54628c;letter-spacing:.05em;font-family:system-ui,sans-serif;font-size:10px;position:absolute;bottom:3px;left:0;right:0}body.flash #wrap{animation:.5s flash}@keyframes flash{0%,to{filter:none}50%{filter:brightness(1.6)}}