:root{
  --ink:#0a0a14; --navy:#070c26; --navy2:#111c4a; --glass:rgba(10,16,44,.88); --line:rgba(255,210,100,.55);
  --gold:#ffcf4a; --gold2:#e08c10; --red:#e8264f; --text:#fff4dc; --hud-h:clamp(92px,14vh,124px);
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#04061a;color:var(--text);font-family:"Rajdhani","Segoe UI",system-ui,sans-serif;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#stage{position:fixed;inset:0}#stage canvas{display:block;width:100%;height:100%}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.lilita{font-family:"Lilita One","Rajdhani",sans-serif}

/* ---------- loading ---------- */
#loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:0 4vw;background:radial-gradient(80vmax 60vmax at 50% 40%,rgba(10,20,70,.25),rgba(2,4,18,.88)),linear-gradient(rgba(4,6,26,.45),rgba(4,6,26,.6)),#050816 url(assets/bg/hall.jpg) center/cover;transition:opacity .7s}
#loader.done{opacity:0;pointer-events:none}
.ld-center{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(86vw,560px)}
#ld-logo{width:min(80vw,520px);height:auto;filter:drop-shadow(0 12px 30px #000c)}
.ld-bar{width:100%;height:20px;border-radius:99px;background:#000a;border:3px solid #ffd24a;overflow:hidden;box-shadow:0 0 0 3px #0a0a14}
.ld-bar i{display:block;height:100%;width:0;background:linear-gradient(180deg,#ff6a5a,#e8264f 55%,#a0102a);transition:width .3s}
.ld-msg{font:700 14px "Rajdhani";letter-spacing:.3em;color:#ffe9b0;text-transform:uppercase;text-shadow:0 2px 6px #000}

/* ---------- feature intro ---------- */
#intro{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:2vh 2vw;
  background:radial-gradient(80vmax 60vmax at 50% 40%,rgba(10,20,70,.25),rgba(2,4,18,.88)),linear-gradient(rgba(4,6,26,.45),rgba(4,6,26,.6)),#050816 url(assets/bg/hall.jpg) center/cover;animation:fade .5s both}
#intro-thief{position:absolute;left:clamp(0px,2vw,40px);bottom:0;height:min(60vh,620px);width:auto;filter:drop-shadow(0 14px 30px #000c);pointer-events:none}
.intro-main{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.6vh,28px);width:min(74vw,940px);margin-left:clamp(0px,22vw,330px)}
#intro-logo{width:min(46vw,440px);height:auto;filter:drop-shadow(0 10px 24px #000b)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.8vw,24px);width:100%}
.card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:clamp(14px,2.4vh,24px) clamp(12px,1.4vw,20px) clamp(16px,2.8vh,26px);border-radius:20px;
  border:3px solid #f0b92a;background:var(--bg);box-shadow:0 0 0 3px #0a0a14,0 16px 34px #000a,inset 0 0 40px #0006}
.card.green{--bg:radial-gradient(circle at 50% 30%,#23983f,#0a3a1a 75%)}
.card.blue{--bg:radial-gradient(circle at 50% 30%,#2f4fc8,#0c1a52 75%)}
.card.red{--bg:radial-gradient(circle at 50% 30%,#c4243f,#400714 75%)}
.card canvas{height:clamp(70px,13vh,130px);width:auto;filter:drop-shadow(0 6px 10px #000a)}
.card h3{font:400 clamp(17px,3vh,28px)/1.05 "Lilita One";letter-spacing:.02em;color:#ffd24a;text-shadow:0 3px 0 #3a1a04;margin:2px 0 0;min-height:2.1em;display:flex;align-items:center;justify-content:center;text-wrap:balance}
.card p{font:600 clamp(13px,2.1vh,18px)/1.3 "Rajdhani";color:#fff4dc;text-wrap:balance;max-width:24ch}
.card p b{color:#ffe27a;font-weight:700}
.go-btn{margin-top:clamp(2px,1vh,10px);font:400 clamp(20px,3.8vh,32px) "Lilita One";letter-spacing:.1em;color:#3a1304;padding:clamp(10px,1.8vh,16px) clamp(38px,5vw,76px);border-radius:999px;
  background:linear-gradient(#ffe88a,#f0a416);border:3px solid #fff1b8;box-shadow:0 5px 0 #7a3a10,0 0 30px #ffb62e88;animation:gopulse 1.6s ease-in-out infinite}
.go-btn:hover{filter:brightness(1.08)}.go-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #7a3a10,0 0 30px #ffb62e88}
.intro-sub{font:700 clamp(11px,1.8vh,15px) "Rajdhani";letter-spacing:.3em;color:#aebbe8;text-shadow:0 2px 4px #000}
@keyframes gopulse{50%{transform:scale(1.04);box-shadow:0 5px 0 #7a3a10,0 0 46px #ffb62ecc}}
@media (max-width:1000px){#intro-thief{display:none}.intro-main{margin-left:0}}
@media (max-width:640px){.cards{grid-template-columns:1fr}.card{display:grid;grid-template-columns:64px 1fr;column-gap:12px;text-align:left;padding:10px 14px}.card canvas{grid-row:1/3;height:60px}.card h3{justify-content:flex-start;min-height:0}.card p{max-width:none}}
@keyframes blink{50%{opacity:.5}}
@keyframes fade{from{opacity:0}}

/* ---------- HUD ---------- */
#hud{position:fixed;left:0;right:0;bottom:0;height:var(--hud-h);z-index:20;display:flex;align-items:center;gap:clamp(8px,1.6vw,26px);padding:0 clamp(10px,2vw,36px) env(safe-area-inset-bottom) clamp(10px,1.6vw,26px);
  background:linear-gradient(180deg,rgba(6,10,34,0),rgba(6,10,34,.9) 24%,rgba(4,6,22,.97));border-top:2px solid rgba(255,210,100,.45)}
.stat{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.lbl{font:700 clamp(10px,1.5vh,13px) "Rajdhani";letter-spacing:.2em;color:#a9b8ee}
.val{font:700 clamp(22px,3.8vh,36px) "Rajdhani";font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.val.gold{color:var(--gold);text-shadow:0 0 18px #ffb30066}
.buy{flex:none;width:clamp(70px,12vh,104px);height:clamp(70px,12vh,104px);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  font:400 clamp(13px,2.3vh,20px) "Lilita One";color:#3a1304;letter-spacing:.04em;margin-top:calc(var(--hud-h) * -.28);
  background:radial-gradient(circle at 35% 28%,#fff6c0,#ffd24a 42%,#e08c10 80%,#a85a0a);border:4px solid #fff0b0;box-shadow:0 0 0 4px #0a0a14,0 8px 0 #7a3a10,0 14px 30px #ffb30088,inset 0 -6px 12px #a85a0a99;transition:transform .08s,filter .2s}
.buy:hover{filter:brightness(1.1) saturate(1.1)}.buy:active{transform:translateY(4px)}.buy:disabled{filter:grayscale(.8) brightness(.7);cursor:not-allowed}
.menu{flex:none;width:44px;height:44px;border-radius:12px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.menu i{display:block;width:24px;height:3.5px;border-radius:3px;background:#e8ecff}.menu:hover i{background:var(--gold)}
.stat.win{margin-left:auto;min-width:clamp(90px,10vw,160px);text-align:right}
.msg{position:absolute;left:50%;top:-24px;transform:translateX(-50%);white-space:nowrap;font:700 12px "Rajdhani";letter-spacing:.32em;color:#fff1c8;text-shadow:0 2px 8px #000;pointer-events:none}
.betbox{display:flex;align-items:center;gap:8px;margin-left:clamp(6px,2vw,40px);padding:6px 10px;border-radius:12px;background:#ffffff0d;border:1px solid #ffffff1c}
.arrows{display:flex;flex-direction:column;gap:2px}
.arrows button{width:30px;height:24px;border-radius:6px;font-size:13px;color:#ffe9b0;background:#ffffff14}.arrows button:hover{background:#ffd24a33}.arrows button:disabled,.menu:disabled{opacity:.4}
.spin{position:relative;flex:none;width:clamp(76px,13.5vh,112px);height:clamp(76px,13.5vh,112px);border-radius:50%;color:#ffe9a0;display:grid;place-items:center;margin-top:calc(var(--hud-h) * -.22);
  background:radial-gradient(circle,#14183a 55%,#0a0e28);border:5px solid var(--gold);box-shadow:0 0 0 4px #0a0a14,0 0 26px #ffcf4acc,inset 0 0 22px #ffcf4a55;transition:transform .08s,filter .2s}
.spin svg{width:56%;height:56%;filter:drop-shadow(0 0 8px #ffcf4a)}
.spin:hover{filter:brightness(1.15)}.spin:active{transform:translateY(4px) scale(.97)}
.spin.busy svg{animation:rot 1s linear infinite}.spin.skip svg{animation:none}
.spin:disabled{opacity:.5;cursor:default}
@keyframes rot{to{transform:rotate(360deg)}}
.fs-left{position:absolute;inset:0;display:none;place-items:center;font:400 clamp(24px,4.4vh,40px) "Lilita One";color:#ffe9a0;text-shadow:0 3px 0 #3a1a04}
.spin.free .fs-left{display:grid}.spin.free svg{display:none}
.auto{flex:none;width:clamp(48px,7.5vh,62px);height:clamp(48px,7.5vh,62px);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#d8e0ff;background:radial-gradient(circle,#1a2250,#0c1030);border:3px solid #ffffff44}
.auto svg{width:46%;height:46%}.auto small{font:700 9px "Rajdhani";letter-spacing:.1em}
.auto[aria-pressed="true"]{color:var(--gold);border-color:var(--gold);box-shadow:0 0 14px #ffcf4a88}
.auto:hover{filter:brightness(1.25)}

#menu{position:fixed;left:clamp(90px,14vh,150px);bottom:calc(var(--hud-h) + 4px);z-index:40;display:flex;flex-direction:column;min-width:230px;border-radius:14px;overflow:hidden;background:var(--glass);border:2px solid var(--line);backdrop-filter:blur(8px);box-shadow:0 20px 50px #000a;animation:pop .18s both}
#menu button{text-align:left;padding:12px 18px;font:600 16px "Rajdhani";letter-spacing:.06em;border-bottom:1px solid #ffffff14}
#menu button:last-child{border:0}#menu button:hover{background:#ffd24a1f}
#menu button[aria-checked="true"]{color:var(--gold)}

/* ---------- big win ---------- */
#bigwin{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;background:radial-gradient(ellipse at 55% 50%,rgba(10,16,50,0),rgba(2,4,16,.38))}
.bw-title{font:400 clamp(48px,14vmin,170px)/1 "Lilita One";letter-spacing:.03em;color:transparent;background:linear-gradient(#fff6b0,#ffd24a 45%,#e0780c);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:3px #2a1204;
  filter:drop-shadow(0 8px 0 #1a0a02) drop-shadow(0 0 40px #ffb300);animation:bwin .8s cubic-bezier(.2,1.6,.4,1) both}
.bw-amount{font:400 clamp(36px,10vmin,120px)/1.1 "Lilita One";color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 5px 0 #6a0a1c,0 0 36px #ff5a5a;animation:bwin .9s .1s cubic-bezier(.2,1.6,.4,1) both}
.bw-hint{margin-top:16px;font:600 12px "Rajdhani";letter-spacing:.3em;color:#c9d4ff;opacity:.7}
@keyframes bwin{from{transform:scale(.2) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}

/* ---------- modals ---------- */
#modal-root .scrim{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(2,4,16,.74);backdrop-filter:blur(4px);animation:fade .2s both;padding:12px}
.modal{width:min(94vw,880px);max-height:88vh;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:linear-gradient(180deg,#162460,#0a1030);border:3px solid var(--gold);box-shadow:0 0 0 3px #0a0a14,0 30px 80px #000c;animation:pop .28s cubic-bezier(.2,1.4,.4,1) both}
.modal.narrow{width:min(92vw,540px)}
.modal header{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid #ffffff1a;background:linear-gradient(90deg,#e8264f55,#ffd24a33)}
.modal h2{font:400 clamp(20px,3vh,28px) "Lilita One";letter-spacing:.06em;color:var(--gold);text-shadow:0 2px 0 #3a1a04}
.modal .x{width:36px;height:36px;border-radius:50%;font-size:20px;background:#ffffff14}.modal .x:hover{background:#ffffff2a}
.modal .body{padding:18px 22px;overflow:auto;display:flex;flex-direction:column;gap:18px;font-size:15px;line-height:1.5;color:#e8ecff}
.modal footer{padding:14px 22px;border-top:1px solid #ffffff1a;display:flex;gap:12px;justify-content:flex-end}
.btn{padding:11px 26px;border-radius:12px;font:400 17px "Lilita One";letter-spacing:.08em;background:linear-gradient(#4a5cc8,#26308a);border:2px solid var(--line);box-shadow:0 4px 0 #0a0e30;color:#fff}
.btn:hover{filter:brightness(1.15)}.btn:active{transform:translateY(2px)}
.btn.primary{background:linear-gradient(#ffe27a,#e08c10);color:#3a1304;border-color:#fff0b0;box-shadow:0 4px 0 #7a3a10}.btn.primary:disabled{opacity:.5}
.pt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.pt-card{display:flex;gap:10px;align-items:center;background:#ffffff0d;border:1px solid #ffffff18;border-radius:14px;padding:8px 12px}
.pt-card canvas{width:64px;height:64px;flex:none}
.pt-card .rows{display:grid;grid-template-columns:auto 1fr;gap:0 10px;font:600 14px "Rajdhani";font-variant-numeric:tabular-nums}
.pt-card .rows b{color:var(--gold)}
.rules h3{font:400 17px "Lilita One";letter-spacing:.06em;color:#ff7a8a;margin-bottom:4px}.rules p{margin-bottom:8px}
.kv{display:grid;grid-template-columns:1fr auto;gap:6px 18px;font-weight:600}.kv span:nth-child(odd){color:#a9b8ee}
.slider{display:flex;align-items:center;gap:14px}.slider input{flex:1;accent-color:var(--red)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.opt{padding:12px;border-radius:12px;background:#ffffff10;border:2px solid #ffffff22;font:400 20px "Lilita One";text-align:center}
.opt:hover{background:#ffd24a22}.opt.on{border-color:var(--gold);background:#ffd24a30;color:var(--gold)}
.hist{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-weight:600}
.hist td,.hist th{padding:6px 8px;text-align:right;border-bottom:1px solid #ffffff14}.hist th{color:#a9b8ee;font-size:12px;letter-spacing:.14em}
.hist td:first-child,.hist th:first-child{text-align:left}
@keyframes pop{from{transform:scale(.85);opacity:0}}
#toast{position:fixed;left:50%;top:18px;transform:translate(-50%,-80px);z-index:90;padding:12px 22px;border-radius:12px;background:#12206a;border:2px solid var(--gold);font-weight:700;letter-spacing:.06em;transition:transform .35s cubic-bezier(.2,1.4,.4,1);max-width:90vw;text-align:center}
#toast.show{transform:translate(-50%,0)}

@media (max-aspect-ratio:1/1){
  #hud{flex-wrap:wrap;justify-content:center;height:auto;padding:30px 10px calc(8px + env(safe-area-inset-bottom));row-gap:6px}
  .buy{margin-top:-52px}.spin{margin-top:-40px}.stat.win{margin-left:0}.betbox{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important}}

/* ---- feature splash (Bonus / Super Bonus) ---- */
.splash{position:fixed;inset:0;z-index:61;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 55% 50%,rgba(8,12,40,.12),rgba(2,4,16,.55));animation:fade .3s both}
.splash .rays{position:absolute;left:50%;top:50%;width:260vmax;height:260vmax;margin:-130vmax 0 0 -130vmax;background:repeating-conic-gradient(rgba(255,214,90,.20) 0 6deg,transparent 6deg 18deg);animation:rot 46s linear infinite;-webkit-mask-image:radial-gradient(circle,#000 0,transparent 42%);mask-image:radial-gradient(circle,#000 0,transparent 42%)}
.splash.super .rays{background:repeating-conic-gradient(rgba(255,80,100,.22) 0 6deg,transparent 6deg 18deg)}
.sp-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px 28px;text-align:center;animation:pop .55s cubic-bezier(.2,1.5,.4,1) .15s both}
.splash.super .sp-card{animation-delay:1.0s}
.sp-kicker{font:700 clamp(12px,2.2vmin,18px) Rajdhani;letter-spacing:.34em;color:#c9d4ff;text-transform:uppercase}
.sp-title{font:400 clamp(44px,13vmin,150px)/.95 "Lilita One";color:transparent;background:linear-gradient(#fff6b0,#ffd24a 45%,#e0780c);-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:3px #2a1204;filter:drop-shadow(0 6px 0 #3a1204) drop-shadow(0 0 28px #ffb02e99)}
.splash.super .sp-title{background:linear-gradient(#fff,#ffb0b8 40%,#e8264f);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 6px 0 #4a0414) drop-shadow(0 0 34px #ff4a6aaa)}
.sp-num{font:400 clamp(60px,18vmin,190px)/1 "Lilita One";color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 6px 0 #6a0a1c,0 0 40px #ff5a5a}
.sp-label{font:400 clamp(18px,4vmin,34px) "Lilita One";letter-spacing:.06em;color:#ffe27a;text-shadow:0 3px 0 #3a1204}
.sp-note{font:600 clamp(12px,2.2vmin,18px) Rajdhani;color:#ffb0c0;min-height:1.2em;max-width:34ch}
.sp-btn{margin-top:14px;font-size:clamp(18px,3.4vmin,28px);padding:12px 44px;animation:blink 1.6s infinite}
.splash.out{animation:splashout .48s both}.splash.out .sp-card{transform:scale(1.25);transition:transform .45s,opacity .45s;opacity:0}
@keyframes splashout{to{opacity:0}}
/* vault doors: two steel halves that swing apart */
.vdoor{position:absolute;top:0;bottom:0;width:50.5%;background:radial-gradient(circle at 100% 50%,#b9c3d8,#6d7893 38%,#2c3550 78%);border:0 solid #0a0a14;box-shadow:inset 0 0 0 6px #1a2038,inset 0 0 90px #000a;animation:vopen 1s cubic-bezier(.6,0,.2,1) .35s both;z-index:3}
.vdoor::after{content:"";position:absolute;top:8%;bottom:8%;width:3px;background:repeating-linear-gradient(#0003 0 14px,#fff3 14px 28px)}
.vdoor.l{left:0;border-right:5px solid #0a0a14}.vdoor.l::after{right:14%}
.vdoor.r{right:0;border-left:5px solid #0a0a14;background:radial-gradient(circle at 0% 50%,#b9c3d8,#6d7893 38%,#2c3550 78%)}.vdoor.r::after{left:14%}
@keyframes vopen{to{transform:translateX(var(--vx))}}
.vdoor.l{--vx:-102%}.vdoor.r{--vx:102%}
.vlock{position:absolute;left:50%;top:50%;width:min(34vmin,300px);height:min(34vmin,300px);margin:calc(min(34vmin,300px)/-2) 0 0 calc(min(34vmin,300px)/-2);border-radius:50%;z-index:4;background:radial-gradient(circle at 35% 30%,#ffe9a0,#d9981c 55%,#7a4a06);border:8px solid #2a1204;box-shadow:0 0 0 10px #0a0a14,0 0 70px #ffcf4a99;animation:vlockout .7s ease-in .15s both}
.vlock::before{content:"";position:absolute;inset:14%;border-radius:50%;border:6px solid #2a1204;background:conic-gradient(#fff3 0 12deg,transparent 12deg 60deg,#fff3 60deg 72deg,transparent 72deg 120deg,#fff3 120deg 132deg,transparent 132deg 180deg,#fff3 180deg 192deg,transparent 192deg 240deg,#fff3 240deg 252deg,transparent 252deg 300deg,#fff3 300deg 312deg,transparent 312deg)}
@keyframes vlockout{0%{transform:rotate(0)}70%{transform:rotate(540deg);opacity:1}100%{transform:rotate(720deg) scale(.3);opacity:0}}
.splash.super{animation:none}

.sp-title.long{font-size:clamp(34px,9.5vmin,112px);max-width:min(92vw,900px)}
.sp-card{gap:8px}
.sp-num{font-size:clamp(52px,14vmin,170px);margin:2px 0}
.sp-note{margin-top:2px;line-height:1.25}
.sp-btn{margin-top:20px}
.sp-note,.sp-kicker{text-shadow:0 2px 4px #000,0 0 12px #000}


/* ================= THEME: cartoon heist — midnight navy / warm gold / ruby red (matches the mascot art) ================= */
:root{--red:#e8263c;--gold:#ffcf4a}
#hud{background:linear-gradient(180deg,rgba(14,16,48,0),rgba(14,16,48,.88) 22%,#0c0e2c);border-top:3px solid #f0b92a;box-shadow:0 -2px 0 #3a1a04}
.val.gold{color:var(--gold);text-shadow:0 0 18px #ffb30066}
/* glossy ruby spin button with a gold rim */
.spin{color:#fff;border:6px solid #ffd24a;background:radial-gradient(circle at 38% 28%,#ff8a8a,#e8263c 42%,#8a0a1e 92%);
  box-shadow:0 0 0 4px #3a1a04,0 7px 0 #5a0a14,0 0 30px #ff405088,inset 0 -8px 16px #5a0a1499,inset 0 6px 10px #ffffff55}
.spin svg{filter:drop-shadow(0 2px 0 #5a0a14)}
.fs-left{color:#fff;text-shadow:0 3px 0 #5a0a14}
/* gold coin "BUY BONUS" with ruby text accent */
.buy span:first-child{color:#8a0a1e}
.splash .rays{background:repeating-conic-gradient(rgba(255,214,90,.22) 0 6deg,transparent 6deg 18deg)}

/* portrait / phone: two clean rows — stats on top, buttons below */
@media (max-aspect-ratio:1/1){
  #hud{display:grid;grid-template-columns:repeat(6,1fr);grid-template-areas:"bal bal win win bet bet" "menu buy spin spin auto speed";
    align-items:center;justify-items:center;row-gap:10px;column-gap:6px;padding:26px 12px calc(10px + env(safe-area-inset-bottom))}
  #hud>.stat:not(.win){grid-area:bal;justify-self:start}
  .stat.win{grid-area:win;text-align:center;min-width:0}
  .betbox{grid-area:bet;justify-self:end;padding:4px 6px}
  #b-menu{grid-area:menu}#b-buy{grid-area:buy}#b-spin{grid-area:spin}#b-auto{grid-area:auto}#b-speed{grid-area:speed}
  .buy,.spin{margin-top:0}
  .buy{width:70px;height:70px;font-size:14px}
  .spin{width:92px;height:92px}
  .val{font-size:clamp(17px,5vw,24px)}
  .msg{top:4px}
}
/* the rotating rays layer must always render BEHIND the splash card (it was covering the bonus-end summary) */
.splash .rays{z-index:0}
.splash .sp-card{z-index:1}

/* ================= GAME PANELS: bonus buy · autoplay · bet menu (one dark-card system, navy/gold) ================= */
.xs-scrim{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:12px;background:rgba(4,6,22,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:fade .2s both}
.xs-panel{position:relative;width:min(94vw,520px);max-height:92vh;overflow:auto;border-radius:18px;padding:16px 18px 18px;
  background:linear-gradient(180deg,#151b45,#0b0f2a);border:1px solid rgba(255,210,100,.35);box-shadow:0 0 0 1px #000,0 30px 80px #000c,inset 0 1px 0 #ffffff12;animation:pop .25s cubic-bezier(.2,1.4,.4,1) both}
.xs-panel.wide{width:min(96vw,900px)}
.xs-head{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:12px}
.xs-head h2{font:400 clamp(22px,3.2vh,30px) "Lilita One";letter-spacing:.06em;color:#ffd24a;text-shadow:0 3px 0 #3a1204}
.xs-x{position:absolute;right:0;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#e8ecff;background:#ffffff12;border:1px solid #ffffff22}
.xs-x svg{width:18px;height:18px}.xs-x:hover{background:#ffffff26}
.xs-body{display:flex;flex-direction:column;gap:14px}
/* bet stepper */
.xs-bet{align-self:center;display:flex;align-items:center;gap:10px;padding:6px;border-radius:999px;background:#0a0d24;border:1px solid #ffffff1c}
.xs-step{width:40px;height:40px;border-radius:50%;font:700 24px/1 Rajdhani;color:#fff;background:linear-gradient(#2a3470,#1a2150);border:1px solid #ffffff26}
.xs-step:hover{border-color:#ffd24a}.xs-step:disabled{opacity:.35;cursor:default}
.xs-betv{min-width:110px;text-align:center;line-height:1.05}.xs-betv small{display:block;font:700 11px Rajdhani;letter-spacing:.2em;color:#a9b8ee}.xs-betv b{font:700 24px Rajdhani;color:#fff;font-variant-numeric:tabular-nums}
/* cards */
.xs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.xs-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 14px 16px;border-radius:14px;
  background:radial-gradient(120% 80% at 50% 0%,#26306e,#141a42 70%);border:1px solid #ffffff1f;box-shadow:inset 0 1px 0 #ffffff14}
.xs-card.mode{background:radial-gradient(120% 80% at 50% 0%,#3a2a78,#1a1542 70%)}
.xs-card.active{border-color:#b89cff;box-shadow:0 0 0 2px #8a6cff66,0 0 26px #8a6cff55}
.xs-tag{position:absolute;top:10px;left:10px;font:700 10px Rajdhani;letter-spacing:.18em;color:#cfd8ff;background:#ffffff14;border-radius:6px;padding:3px 7px}
.xs-card.active .xs-tag{color:#1a1036;background:#c9b6ff}
.xs-card h3,.xs-confirm h3{font:400 22px "Lilita One";letter-spacing:.04em;color:#fff;text-shadow:0 2px 0 #000a;margin-top:6px}
.xs-card h3{margin-top:18px}
.xs-art{width:100%;max-width:240px;height:auto;filter:drop-shadow(0 8px 12px #0009)}
.xs-desc{font:600 14px/1.3 Rajdhani;color:#d6ddff;min-height:3.9em;max-width:30ch}
.xs-meta{font:600 12px Rajdhani;letter-spacing:.04em;color:#8f9bd0}
.xs-price{font:700 26px Rajdhani;color:#ffd24a;font-variant-numeric:tabular-nums;text-shadow:0 0 14px #ffb30044}
.xs-price small{font-size:13px;color:#cfd8ff;font-weight:600}
.xs-price.big{font-size:36px}
.xs-btn{min-height:44px;padding:0 22px;border-radius:12px;font:400 18px "Lilita One";letter-spacing:.08em;transition:filter .15s,transform .08s}
.xs-card .xs-btn{align-self:stretch;margin-top:4px}
.xs-btn.gold{color:#3a1304;background:linear-gradient(#ffe88a,#f0a416);box-shadow:0 4px 0 #7a3a10,inset 0 1px 0 #fff8}
.xs-btn.purple{color:#fff;background:linear-gradient(#9b7bff,#6440e0);box-shadow:0 4px 0 #2e1a7a,inset 0 1px 0 #fff5}
.xs-btn.ghost{color:#e8ecff;background:#ffffff12;border:1px solid #ffffff2a}
.xs-btn:hover:not(:disabled){filter:brightness(1.1)}.xs-btn:active:not(:disabled){transform:translateY(2px)}
.xs-btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.6)}
.xs-btn.wide{align-self:stretch}
.xs-foot{text-align:center;font:600 13px Rajdhani;color:#8f9bd0}
/* confirm */
.xs-confirm{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:6px 6px 2px}
.xs-confirm .xs-art{max-width:280px}
.xs-note{font:600 13px/1.35 Rajdhani;color:#a9b8ee;text-align:center}
.xs-row{display:flex;gap:12px;width:100%;margin-top:6px}.xs-row .xs-btn{flex:1}
/* chips, toggles, sections */
.xs-sec{display:flex;flex-direction:column;gap:8px}
.xs-label{font:700 12px Rajdhani;letter-spacing:.2em;color:#ffd24a}
.xs-chips{display:flex;flex-wrap:wrap;gap:8px}
.xs-chips.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.xs-chip{min-width:60px;min-height:40px;padding:0 12px;border-radius:10px;font:700 15px Rajdhani;letter-spacing:.04em;color:#e8ecff;background:#1c2458;border:1px solid #ffffff1c;font-variant-numeric:tabular-nums}
.xs-chip:hover{border-color:#ffd24a88}
.xs-chip.on{color:#ffd24a;border-color:#ffd24a;background:#2a2a52;box-shadow:inset 0 0 0 1px #ffd24a}
.xs-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;background:#1c2458;border:1px solid #ffffff1c;font:700 15px Rajdhani;color:#e8ecff;cursor:pointer}
.xs-toggle input{position:absolute;opacity:0;pointer-events:none}
.xs-toggle i{flex:none;position:relative;width:46px;height:26px;border-radius:99px;background:#0a0d24;border:1px solid #ffffff2a;transition:background .2s}
.xs-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#cfd8ff;transition:transform .2s,background .2s}
.xs-toggle input:checked+i{background:#f0a416;border-color:#ffd24a}.xs-toggle input:checked+i::after{transform:translateX(20px);background:#fff}
.xs-toggle input:focus-visible+i{outline:2px solid var(--gold);outline-offset:2px}
/* HUD: bet is tappable; Bonus Hunt indicator */
#v-bet{cursor:pointer;border-bottom:1px dashed #ffffff40}
#hud.hunt .betbox{border-color:#b89cff;box-shadow:0 0 0 1px #8a6cff88,0 0 18px #8a6cff55}
#hud.hunt #v-betlabel{color:#c9b6ff}
#hud.hunt .buy{box-shadow:0 0 0 4px #0a0a14,0 0 0 7px #9b7bff,0 8px 0 #7a3a10,0 0 30px #9b7bffaa}
@media (max-width:640px){.xs-grid{grid-template-columns:1fr}.xs-card{display:grid;grid-template-columns:110px 1fr;text-align:left;align-items:center;column-gap:12px}
  .xs-card .xs-art{grid-row:2/6;max-width:110px}.xs-card h3,.xs-card .xs-desc,.xs-card .xs-meta,.xs-card .xs-price{grid-column:2}.xs-card .xs-btn{grid-column:1/3}.xs-desc{min-height:0}}

/* TUMBLE WIN counter — gold pill centred over the top edge of the reels */
.tumblewin{position:fixed;z-index:25;transform:translate(-50%,-50%);display:flex;align-items:baseline;gap:10px;padding:6px 18px;border-radius:999px;pointer-events:none;
  background:linear-gradient(180deg,#1c2560,#0c1030);border:2px solid #ffd24a;box-shadow:0 0 0 3px #0a0a14,0 8px 20px #000a,0 0 22px #ffb30055}
.tumblewin small{font:700 12px Rajdhani;letter-spacing:.22em;color:#ffe9a0}
.tumblewin b{font:400 clamp(20px,3.2vh,30px) "Lilita One";color:#fff;font-variant-numeric:tabular-nums;text-shadow:0 2px 0 #3a1204}
.tumblewin.bump b{animation:twbump .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes twbump{from{transform:scale(1.35)}}

/* spin-speed button: off = white, turbo = gold, super turbo = gold + glow + double bolt */
.speed[data-speed="1"]{color:var(--gold);border-color:var(--gold);box-shadow:0 0 12px #ffcf4a77}
.speed[data-speed="2"]{color:#fff6c0;border-color:#ffd24a;background:radial-gradient(circle,#5a3a08,#2a1a04);box-shadow:0 0 0 2px #ffd24a55,0 0 20px #ffcf4acc}
.speed[data-speed="2"] svg{filter:drop-shadow(5px 0 0 currentColor)}
.speed small{font-size:8px}
#menu button[role="menuitemradio"][aria-checked="true"]{color:var(--gold)}
#menu button[role="menuitemradio"][aria-checked="true"]::after{content:" ✓"}

/* ================= FEATURE SPLASH as a solid panel (Bonus / Super intro + outro) =================
   The board must not show through the text: dark blurred backdrop + an opaque navy/gold vault plaque. */
.splash{background:rgba(4,6,22,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.splash .rays{opacity:.55}
.splash .sp-card{width:min(92vw,560px);padding:clamp(22px,4vh,36px) clamp(18px,4vw,40px) clamp(20px,3.6vh,32px);border-radius:22px;gap:6px;
  background:radial-gradient(120% 90% at 50% 0%,#2a3680 0%,#141a48 55%,#0a0e2c 100%);
  border:3px solid #ffd24a;box-shadow:0 0 0 4px #3a2406,0 0 0 7px #c8901c,0 26px 70px #000d,inset 0 2px 0 #ffffff26,inset 0 0 60px #00000080}
/* gold rivets in the four corners, like the reel frame */
.splash .sp-card::before,.splash .sp-card::after{content:"";position:absolute;top:12px;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff3b0,#e0a020 60%,#7a4a06);box-shadow:0 1px 2px #000a}
.splash .sp-card::before{left:12px}.splash .sp-card::after{right:12px}
.splash .sp-kicker{color:#ffe9a0;letter-spacing:.32em;text-shadow:none}
.splash .sp-title{-webkit-text-stroke:2px #2a1204}
.splash .sp-num{text-shadow:0 5px 0 #3a1204,0 0 30px #ffb02e88}
.splash .sp-label{color:#ffd24a}
.splash .sp-note{color:#cfd8ff;text-shadow:none;font-size:clamp(13px,2.2vmin,17px);max-width:38ch}
.splash .sp-btn{margin-top:16px;min-width:200px}
.splash.super .sp-card{border-color:#ff6a7a;box-shadow:0 0 0 4px #3a0612,0 0 0 7px #c81c3c,0 26px 70px #000d,inset 0 2px 0 #ffffff26,inset 0 0 60px #00000080;
  background:radial-gradient(120% 90% at 50% 0%,#5a1e4a 0%,#2a0e2c 55%,#12061a 100%)}

/* ================= COMPACT HUD: narrow desktop windows / tablets (squarish, ≥500px wide) — one slim row instead of the two-row phone bar ================= */
@media (max-aspect-ratio:1/1) and (min-width:500px){
  #hud{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto auto auto auto auto;grid-template-areas:"menu bal win bet buy spin auto speed";
    column-gap:clamp(6px,1.4vw,12px);row-gap:0;padding:18px 12px calc(8px + env(safe-area-inset-bottom))}
  #hud>.stat:not(.win){justify-self:start}
  .stat.win{justify-self:center}
  .betbox{justify-self:end;gap:4px}
  .menu{width:36px;height:36px}.menu i{width:20px;height:3px}
  .lbl{font-size:10px;letter-spacing:.14em}
  .val{font-size:clamp(15px,2.8vw,20px)}
  .arrows button{width:24px;height:18px;font-size:10px}
  .buy{width:54px;height:54px;font-size:11px;border-width:3px}
  .spin{width:66px;height:66px;border-width:4px}
  .auto{width:42px;height:42px;border-width:2px}.auto small{font-size:7px}
  .msg{top:2px;font-size:10px;letter-spacing:.24em}
  #menu{left:12px}
}
/* phones: tighten the two-row bar so the reels get more of the screen */
@media (max-aspect-ratio:1/1) and (max-width:499px){
  #hud{row-gap:6px;padding-top:22px}
  .buy{width:60px;height:60px;font-size:12px}
  .spin{width:78px;height:78px}
  .auto{width:46px;height:46px}
}
/* game sound / music switches in the menu show their state */
#menu button[role="menuitemcheckbox"]{display:flex;justify-content:space-between;gap:16px}
#menu button[role="menuitemcheckbox"]::after{content:"ON";font-size:12px;letter-spacing:.14em;color:var(--gold)}
#menu button[role="menuitemcheckbox"][aria-checked="false"]{color:#8a93b8}
#menu button[role="menuitemcheckbox"][aria-checked="false"]::after{content:"OFF";color:#8a93b8}