*{box-sizing:border-box}
 :root{font-family:Arial,Helvetica,sans-serif;color:#fff1fa;background:#060209;color-scheme:dark}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 60%,#300c3d,transparent 70%),#060209}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default}
button:focus-visible{outline:3px solid #fff!important;outline-offset:3px}
button{touch-action:manipulation}
button,select{-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
#game{position:relative;width:min(100vw,calc((100dvh - 30px)*1672/941));aspect-ratio:1672/941;isolation:isolate;overflow:hidden;container-type:inline-size}
.cabinet{position:absolute;inset:0;width:100%;height:100%;user-select:none}
.reels{position:absolute;left:17.224880%;top:18.490967%;width:65.490431%;height:64.293305%;z-index:2}
.line-overlay{position:absolute;left:17.224880%;top:18.490967%;width:65.490431%;height:64.293305%;z-index:6;pointer-events:none;filter:drop-shadow(0 0 5px #ff18c2)}
.line-overlay polyline{stroke:#ffe494;stroke-width:2;fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;animation:line-in .4s ease}
.payline-markers{position:absolute;inset:0;z-index:7;pointer-events:none}
.payline-marker{position:absolute;display:grid;place-items:center;padding:0;border:0;border-radius:28%;background:transparent;pointer-events:auto;filter:drop-shadow(0 1px 2px #130418)}
.payline-marker canvas{width:100%;height:100%;object-fit:contain;pointer-events:none}
.payline-marker.is-winning{filter:brightness(1.35) drop-shadow(0 0 .4cqw #ffdc75)}
.payline-marker.is-previewing{filter:brightness(1.35) drop-shadow(0 0 .5cqw #ff65db)}
.payline-preview{position:absolute;left:17.224880%;top:18.490967%;width:65.490431%;height:64.293305%;z-index:6;pointer-events:none;overflow:hidden;filter:drop-shadow(0 0 5px #ed17b9)}
.payline-preview polyline{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.payline-preview-border{stroke:#530c4e;stroke-width:8}
.payline-preview-line{stroke:#fff0b6;stroke-width:3}
.payline-preview circle{fill:#fff9e0;stroke:#f33bc5;stroke-width:2;vector-effect:non-scaling-stroke}
.ambient{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 8cqw #2c064022;mix-blend-mode:screen}
.hotspot{position:absolute;z-index:7;background:transparent;border:0;border-radius:15%;transition:box-shadow .2s,filter .2s}
.hotspot:not(:disabled):hover{box-shadow:inset 0 0 22px #fff4,0 0 20px #ff46db77}
.menu{left:3.1%;top:86%;width:6.5%;height:12%;border-radius:50%}
.auto{left:84.8%;top:86%;width:6.9%;height:12%;border-radius:50%}
.spin{left:43.959330%;top:79.064825%;width:11.782297%;height:20.722635%;border-radius:50%;padding:0;z-index:10}
#spinArtwork{display:block;width:100%;height:100%;pointer-events:none}
.bet-down{left:27.65%;top:88%;width:4%;height:8%;border-radius:50%}
.bet-up{left:39.6%;top:88%;width:4%;height:8%;border-radius:50%}
.max-bet{left:56%;top:86.2%;width:8.7%;height:11.5%}
.meter{position:absolute;z-index:5;font-weight:900;text-align:center;font-variant-numeric:tabular-nums;line-height:1;color:#fff7fc;text-shadow:0 2px 3px #160719,0 0 12px #de8fff77;pointer-events:none;font-size:2.3cqw;top:91.5%;height:5.1%;display:grid;place-items:center}
.balance{left:11.1%;width:15.3%}
.bet{left:31.7%;width:7.6%}
.win{left:66.5%;width:17.1%}
.stop-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center}
.stop-face canvas{display:block;width:100%;height:100%;pointer-events:none}
/* The white square is centred at (98.5,93) in the 197x195 stop artwork.
   Anchor there, then compensate for the numeral ink sitting below its line box. */
.stop-face b{position:absolute;left:50%;top:47.692308%;transform:translate(-50%,calc(-50% - .06cqw));line-height:normal;color:#510816;font-size:1.7cqw;text-shadow:0 1px #fff;font-weight:900;font-variant-numeric:tabular-nums}
.statusbar{width:min(100vw,calc((100dvh - 30px)*1672/941));height:30px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:1.1px;color:#d2b5cd;padding:0 12px;background:#09040d}
.statusbar span:first-child{font-weight:700}
.statusbar i{font-style:normal;color:#f3b857;padding:0 7px}
.statusbar #status{color:#ffe7a1;text-align:center;font-size:11px;flex:1}
.statusbar button{border:0;background:none;color:#d2b5cd;font-size:10px;white-space:nowrap}
.feature-hud{position:absolute;inset:0;z-index:8;pointer-events:none}
.hud-panel{background:linear-gradient(130deg,#230928f5,#05000bee);border:1.5px solid #fce196;border-radius:1cqw;padding:.6cqw 1.6cqw;min-width:14%;display:grid;text-align:center;box-shadow:0 0 25px #fc328b66}
.hud-panel span{font-size:.85cqw;letter-spacing:.14cqw;font-weight:bold;color:#eacf80}
.hud-panel strong{font-size:2.4cqw;font-variant-numeric:tabular-nums}
.pulse-hud{position:absolute;inset:0;z-index:9;pointer-events:none}
.pulse-side{position:absolute;top:66.125%;width:14.1%;height:16.75%;filter:drop-shadow(0 0 .6cqw #df29a859)}
.panel-content{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5cqw;padding:1.1cqw 1.3cqw}
.pulse-side::before{content:'';position:absolute;inset:0;background:url('../assets/art/pulse-side-panel.png') center/100% 158% no-repeat;z-index:-1}
.pulse-side-left{left:.4%}.pulse-side-right{right:.4%}
.pulse-panel-title{display:flex;width:90%;height:1.35cqw;flex:none;justify-content:center;align-items:center}
.pulse-panel-title canvas{max-width:100%;height:100%;object-fit:contain}
.pulse-side strong{width:94%;height:3.4cqw;flex:none;display:flex;align-items:center;justify-content:center;line-height:1;font-size:3cqw}
.pulse-side strong canvas{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.life-lights{display:flex;width:98%;height:4.5cqw;flex:none;gap:.35cqw;justify-content:center;align-items:center}
.life-lights img{display:block;width:calc((100% - .7cqw)/3);height:100%;object-fit:contain;opacity:.12;filter:grayscale(1) brightness(.55);transition:opacity .5s ease,filter .5s ease}
.life-lights img.lit{opacity:1;filter:drop-shadow(0 0 .2cqw #ffd05b77)}
.pulse-jackpot{position:absolute;right:.4%;top:58.9%;width:14.1%;height:6.6%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.12cqw;border:.12cqw solid #f7d475;border-radius:.65cqw;background:linear-gradient(#3f083c,#130416);box-shadow:inset 0 0 .55cqw #fa35b477,0 0 .45cqw #050009;padding:.25cqw .4cqw}
.pulse-jackpot>span{display:flex;justify-content:center;width:94%;height:.8cqw}
.pulse-jackpot>strong{display:flex;justify-content:center;width:84%;height:1.75cqw}
.pulse-jackpot canvas{max-width:100%;height:100%;object-fit:contain}
.pulse-jackpot small{font-size:.5cqw;letter-spacing:.065cqw;color:#ffe2ae;font-weight:800}
.bitmap-text{display:block;object-fit:contain}
.doors{visibility:hidden;position:absolute;inset:0;z-index:20;pointer-events:none}
.doors.active{visibility:visible}
.door{position:absolute;width:50%;height:100%;background-image:url('../assets/art/transition-doors.png');background-size:200% 100%;transition:transform .8s cubic-bezier(.65,0,.35,1)}
.door.left{left:0;background-position:left;transform:translateX(-102%)}
.door.right{right:0;background-position:right;transform:translateX(102%)}
.doors.closed .door{transform:translateX(0)}
.celebration{position:absolute;inset:0;z-index:22;background:#100319c9;backdrop-filter:blur(5px);display:grid;place-items:center;animation:pop-fade .35s ease}
.celebration-art{width:78%;height:94%;object-fit:contain;mask-image:radial-gradient(ellipse at center,#000 52%,#000d 65%,transparent 77%);filter:drop-shadow(0 0 25px #ec2aab88);pointer-events:none}
.celebration-copy{position:absolute;left:21%;right:21%;top:45%;height:30%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25cqw;text-align:center;text-shadow:0 3px #320415}
.celebration-copy>span{font-size:.9cqw;letter-spacing:.4cqw;color:#f8b9e4;font-weight:bold}
.celebration-copy h1{margin:0;font-size:3.4cqw;font-weight:1000;line-height:1.1;letter-spacing:.06cqw;color:#ffdc77;background:linear-gradient(#fffac0 15%,#fff081 32%,#cc7d1a 55%,#fff295 69%,#ffc239);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 .18cqw #562006) drop-shadow(0 0 .3cqw #e28c2177);text-shadow:none}
.celebration-copy h1{width:100%;height:3.5cqw;display:flex;justify-content:center;align-items:center;background:none;filter:drop-shadow(0 0 .35cqw #ffcf8255)}
.celebration-copy h1 canvas{height:100%;max-width:100%;object-fit:contain}
.celebration-copy>strong{font-size:5cqw;font-weight:900;line-height:1.04;font-variant-numeric:tabular-nums;color:#fff3c6;text-shadow:0 .3cqw #6b173f,0 0 20px #e233a5}
.celebration-copy p{font-size:1cqw;letter-spacing:.09cqw;margin:.25cqw 0;color:#ffdaee}
.celebration-copy button,#startButton,.auto-options button{border:1px solid #ffe999;background:linear-gradient(#e642b5,#92145c);color:#fffbe6;border-radius:30px;padding:.65cqw 2cqw;font-weight:900;font-size:1cqw;letter-spacing:.1cqw;box-shadow:0 0 12px #f6209a66;margin-top:.4cqw}
.celebration-rays{position:absolute;inset:0;background:radial-gradient(ellipse at center,#ffe3741f,transparent 65%);pointer-events:none}
#effects{position:absolute;inset:0;width:100%;height:100%;z-index:25;pointer-events:none}
.toast{position:absolute;left:50%;top:74%;transform:translateX(-50%);padding:.8cqw 2cqw;border:1px solid #f2c974;border-radius:30px;background:#19051bef;color:#ffe79f;z-index:29;font-weight:bold;font-size:1.2cqw;box-shadow:0 0 20px #ff31c154}
.loading{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:radial-gradient(ellipse at 50% 40%,#49153bf2,#08010afc 70%);padding:8%}
.loading h1{font-size:2.8cqw;color:#fff1ba;letter-spacing:.13cqw;margin:2cqw 0 0}
.loading p{font-size:1.3cqw;max-width:70%;line-height:1.6;color:#e9c0df}
.loading small{color:#b190aa;font-size:.8cqw;letter-spacing:.15cqw;margin-top:2cqw}
#startButton{font-size:1.4cqw;padding:1cqw 3cqw}
#retryButton{border:1px solid #f6bf73;padding:12px 30px;background:#621842;border-radius:30px}
.loader-disc{width:8cqw;height:8cqw;border-radius:50%;border:.3cqw solid #ffe8a4;background:repeating-conic-gradient(from 0deg,#ff63ca 0 12deg,#842ea3 12deg 24deg,#fce4ff 24deg 27deg);box-shadow:0 0 5cqw #ed30b55c;animation:disco-turn 7s linear infinite}
.dev-panel{position:absolute;top:2%;right:1.5%;z-index:19;width:min(370px,43%);padding:16px;background:#160a20f7;border:1px solid #e8bd71;border-radius:12px;box-shadow:0 10px 40px #000b;font-size:12px}
.dev-panel header{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#ffe0a0;letter-spacing:1.5px}
.dev-panel header button{background:none;border:0;color:#fff;font-size:24px;line-height:1;padding:0 4px}
.dev-panel p{color:#c6afc7;font-size:12px;line-height:1.45;margin:12px 0}
.dev-panel label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;font-weight:bold;color:#dfbbd7;letter-spacing:1px}
.dev-panel select{flex:1;min-width:0;font-size:13px;background:#321131;border:1px solid #98768b;border-radius:5px;color:white;padding:9px}
.dev-actions{display:flex;gap:8px;margin:14px 0 10px}
.dev-actions button{flex:1;padding:10px 5px;background:#792957;border:1px solid #e8bd71;border-radius:6px;color:#fff1c7;font-size:10px;font-weight:bold;letter-spacing:.4px}
.dev-actions button:last-child{background:#28142c;border-color:#81627b}
.dev-panel button:disabled,.dev-panel select:disabled{opacity:.4;cursor:default}
.dev-panel small{display:block;color:#a78ba6;font-size:10px;line-height:1.4}
.statusbar #devToggle{color:#f4cf8b;border:1px solid #695132;border-radius:4px;padding:3px 8px;letter-spacing:1px}
.statusbar #devToggle.active{background:#6b224a;border-color:#f4cf8b;color:#fff1bb}
@media(max-width:850px){.dev-panel{padding:9px;top:1%;font-size:10px}.dev-panel p{margin:7px 0;font-size:10px}.dev-panel select{padding:5px;font-size:11px}.dev-actions{margin:8px 0 6px;gap:4px}.dev-actions button{font-size:9px;padding:7px 3px}.dev-panel small{font-size:8px}}
.rotate{position:fixed;inset:0;z-index:100;background:radial-gradient(#32102f,#08010b);display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;padding:25px}
.rotate>div{font-size:90px;color:#fbd580}
.rotate h2{color:#ffdf9b}
.rotate p{color:#d0abca}
dialog{border:1px solid #e5b465;border-radius:20px;background:linear-gradient(145deg,#2c0b2e,#0c0414 65%);color:#fbedf7;max-width:850px;width:85vw;max-height:88dvh;padding:24px;box-shadow:0 0 90px #f3189e22}
dialog::backdrop{background:#030008b8;backdrop-filter:blur(6px)}
.dialog-header{display:flex;align-items:center;justify-content:space-between;font-weight:900;font-size:25px;letter-spacing:3px;color:#ffd57b}
.dialog-header button{background:none;border:0;color:white;font-size:32px}
dialog nav{display:flex;gap:8px;margin:20px 0}
dialog nav button{flex:1;padding:10px 6px;background:#351136;border:1px solid #69405c;color:#edd5e3;border-radius:6px;font-size:12px;font-weight:bold}
dialog nav button.selected{border-color:#ffd17f;color:#ffdf9e;background:#681952}
dialog p{font-size:13px;line-height:1.6;color:#d9bcd3}
dialog h2{font-size:20px;color:#ffde91;letter-spacing:1px}
.paytable{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.paytable article{display:flex;align-items:center;gap:12px;padding:8px;background:#180920;border:1px solid #553449;border-radius:10px}
.paytable canvas{width:58px;height:58px;object-fit:contain}
.paytable strong{display:block;font-size:13px;color:#ffe5ae;margin-bottom:5px}
.paytable small{color:#e5cde0;font-size:12px;white-space:pre}
.paylines{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:20px}
.paylines svg{width:100%;border:1px solid #633154;border-radius:6px;background:#190b25}
.paylines polyline{stroke:#ffca76;stroke-width:2;fill:none}
.paylines circle{fill:#5b2f57}
dialog label{display:flex;justify-content:space-between;align-items:center;margin:18px 0}
dialog input{width:22px;height:22px;accent-color:#e923a2}
.secondary{padding:10px 18px;border:1px solid #805266;background:#280a24;color:#ebc7e0;border-radius:6px;font-size:12px}
.auto-options{display:flex;justify-content:center;gap:14px;margin:25px 0}
.auto-options button{font-size:22px;padding:15px 25px}
.history-row{display:flex;justify-content:space-between;border-bottom:1px solid #542343;padding:12px 0;font-size:13px}
.history-row span{color:#c7a4be}
.history-row b{color:#ffdd8d}
.reduced-motion *{animation:none!important;scroll-behavior:auto!important}
.reduced-motion .door{transition-duration:.08s}
@keyframes disco-turn{to{transform:rotate(360deg)}
}
@keyframes pop-fade{from{opacity:0;transform:scale(.96)}
to{opacity:1;transform:scale(1)}
}
@keyframes line-in{from{opacity:0;stroke-dasharray:800;stroke-dashoffset:800}
to{opacity:1;stroke-dashoffset:0}
}
@media(max-width:850px){.statusbar{font-size:8px;padding:0 5px;gap:4px}
.statusbar #status{font-size:8px;letter-spacing:.2px}
.statusbar button{font-size:8px}
dialog{padding:16px;max-height:94dvh}
.dialog-header{font-size:20px}
dialog nav{margin:10px 0}
.paytable canvas{width:42px;height:42px}
.paytable article{gap:5px;padding:5px}
.auto-options button{padding:10px 18px}
.loading p{font-size:1.7cqw}
.loading small{font-size:1.15cqw}
}
