:root{--gold:#f5c04a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#12052a;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;user-select:none;-webkit-user-select:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:0;padding:0}
.app{position:fixed;inset:0;display:flex;flex-direction:column;padding:max(4px,env(safe-area-inset-top)) 0 0;max-width:560px;margin:0 auto;overflow:hidden;
  background:radial-gradient(ellipse at 50% 18%,#6b2fc8 0,#3a1380 38%,#170636 85%)}
.app>*{position:relative}
.app.shake{animation:shake .5s}
@keyframes shake{0%,100%{transform:none}20%{transform:translate(-5px,2px)}40%{transform:translate(5px,-2px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(4px,2px)}}

/* ---------- top bars ---------- */
.topbar{flex:none;display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 10px}
.subbar{flex:none;display:flex;align-items:center;height:30px;padding:0 10px;margin-top:-2px}
.subbar .sp{flex:1}
.round{font-size:12px;color:#d8c8ff;font-weight:700;text-shadow:0 1px 2px #000}
.rbtn{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#7ab4ff,#2a5fc8 70%);border:2px solid #cfe2ff;font-size:16px;font-weight:900;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.55),inset 0 -3px 5px rgba(0,0,40,.35);display:flex;align-items:center;justify-content:center}
.rbtn.sm{width:28px;height:28px;font-size:13px}
.rbtn.pw i{display:block;width:12px;height:12px;border:2.5px solid #fff;border-radius:50%;border-top-color:transparent;position:relative}
.rbtn.pw i::after{content:"";position:absolute;left:50%;top:-5px;width:2.5px;height:7px;background:#fff;transform:translateX(-50%)}
.ping{display:flex;align-items:center;gap:4px;margin-left:8px;font-size:9px;color:#9fe8a0;font-weight:700}
.ping i{width:14px;height:10px;border-radius:2px;background:linear-gradient(90deg,#8f8 33%,#8f8 33% 66%,#8f8 66%);opacity:.9;clip-path:polygon(0 100%,35% 100%,35% 55%,65% 55%,65% 25%,100% 25%,100% 100%)}
.ping.slow{color:#ffcf6a}.ping.bad{color:#ff7a7a}

/* ---------- jackpot sign ---------- */
.jp{flex:none;text-align:center;margin-top:-6px;padding-top:2px}
.marq{position:absolute;left:12%;right:12%;top:0;height:clamp(40px,8vh,58px);border-radius:14px 14px 0 0;background:linear-gradient(180deg,#a66bff,#5b2aa8);box-shadow:0 0 0 2px #2a0f60 inset,0 0 18px rgba(170,110,255,.7);display:flex;justify-content:space-around;align-items:flex-start;padding-top:3px}
.marq i{width:6px;height:6px;border-radius:50%;background:#fff3b0;box-shadow:0 0 6px #ffd34d;animation:blink 1s infinite alternate}
.marq i:nth-child(even){animation-delay:.5s}
@keyframes blink{from{opacity:.35}to{opacity:1}}
.jptitle{position:relative;font-size:clamp(28px,6.4vh,46px);line-height:1;font-weight:900;font-style:italic;letter-spacing:1px;background:linear-gradient(180deg,#fffbd0 0,#ffe45a 38%,#ffb000 62%,#ff7a00 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px #8a3a00;filter:drop-shadow(0 3px 0 #6a2a00) drop-shadow(0 4px 6px rgba(0,0,0,.6));animation:glint 3s infinite}
@keyframes glint{0%,100%{filter:drop-shadow(0 3px 0 #6a2a00) drop-shadow(0 4px 6px rgba(0,0,0,.6)) brightness(1)}50%{filter:drop-shadow(0 3px 0 #6a2a00) drop-shadow(0 4px 6px rgba(0,0,0,.6)) brightness(1.25)}}
.ribbon{position:relative;display:flex;align-items:center;justify-content:center;margin-top:2px}
.ribbon::before{content:"";position:absolute;left:12%;right:12%;top:50%;height:clamp(22px,4.4vh,30px);transform:translateY(-50%);background:linear-gradient(180deg,#ff5a52,#b01218);clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%);box-shadow:0 3px 6px rgba(0,0,0,.5)}
.chev{position:relative;font-size:22px;font-weight:900;color:#5fb6ff;text-shadow:0 0 8px #3a86ff;letter-spacing:-3px;animation:blink .8s infinite alternate}
.chev.l{margin-right:6px}.chev.r{margin-left:6px}
.jpbox{position:relative;min-width:56%;padding:2px 12px;border-radius:8px;background:linear-gradient(180deg,#8a3df0,#4a1aa8);border:2px solid #ffe9a0;box-shadow:0 0 0 2px #7a4a00,0 3px 8px rgba(0,0,0,.55)}
.jpbox b{font-size:clamp(17px,3.6vh,24px);font-weight:900;letter-spacing:1px;color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.55);font-variant-numeric:tabular-nums}
.jpbox.up b{animation:pop .4s}
@keyframes pop{50%{transform:scale(1.15);color:#ffe45a}}

/* mini-slot reels (gold coins like the original) */
.reels{display:flex;justify-content:center;gap:6px;margin-top:3px;padding:3px 6px;width:max-content;margin-left:auto;margin-right:auto;border-radius:8px;background:linear-gradient(180deg,#e8e8f0,#9a9ab0);border:2px solid #ffe9a0;box-shadow:0 0 0 2px #7a4a00,0 4px 8px rgba(0,0,0,.5)}
.reel{width:clamp(40px,12vw,54px);height:clamp(24px,4.6vh,34px);border-radius:5px;background:linear-gradient(180deg,#fff,#d9d9e6);overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 6px rgba(0,0,0,.35)}
.rc{width:clamp(22px,4.2vh,30px);height:clamp(22px,4.2vh,30px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3a0,#f0a000 60%,#a45a00);border:2px solid #7a4a00;display:flex;align-items:center;justify-content:center;font-size:clamp(11px,2.2vh,15px);font-weight:900;color:#4a2400;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.reels.spin .rc{animation:rspin .1s linear infinite;filter:blur(.6px)}
@keyframes rspin{0%{transform:translateY(-9px)}100%{transform:translateY(9px)}}
.reel.stop .rc{animation:rstop .35s ease-out}
@keyframes rstop{0%{transform:translateY(-14px)}60%{transform:translateY(3px)}100%{transform:none}}
.reels.hit{animation:hit .5s 3 alternate}
@keyframes hit{to{box-shadow:0 0 0 2px #7a4a00,0 0 18px 6px #ffe45a}}

/* ---------- cabinet ---------- */
.cab{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;margin:4px 8px 0;padding:8px 10px 6px;border-radius:18px 18px 8px 8px;background:linear-gradient(180deg,#a782f0,#6a43c4 30%,#4e2ba4);border:2px solid #cdb6ff;box-shadow:0 6px 18px rgba(0,0,0,.55),inset 0 0 0 3px #3a1a80}
.leds{position:absolute;top:14px;bottom:14px;width:6px;background:radial-gradient(circle,#ffe9a0 0 38%,transparent 42%) 0 0/6px 14px repeat-y;animation:chase .6s linear infinite}
.leds.l{left:1px}.leds.r{right:1px}
@keyframes chase{to{background-position:0 14px}}
.screen{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:10px;background:linear-gradient(180deg,#2a1260,#1a0a3e);box-shadow:inset 0 0 12px rgba(0,0,0,.7)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:clamp(4px,1vh,7px);width:100%;aspect-ratio:1/1}
.cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:9px;background:radial-gradient(circle at 50% 30%,#2b6a64,#0e3230 75%);border:2px solid #1d4f4a;cursor:pointer;overflow:hidden;transition:transform .1s,box-shadow .15s}
.cell::after{content:"";position:absolute;left:6%;right:6%;top:3%;height:28%;border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent);pointer-events:none}
.cell:active{transform:scale(.95)}
.cell .fi{position:relative;z-index:1;width:54%;height:52%;font-size:clamp(24px,6vh,44px);line-height:1;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 3px 3px rgba(0,0,0,.55))}
.cell .fi svg{width:100%;height:100%}
.cell .times{position:relative;z-index:1;font-size:clamp(9px,1.8vh,13px);font-weight:900;color:#fff;-webkit-text-stroke:.6px #000;text-shadow:0 1px 2px #000;margin-top:1px}
.cell .mine{position:absolute;z-index:4;right:2px;top:2px;min-width:20px;padding:0 5px;height:16px;line-height:16px;border-radius:8px;background:linear-gradient(180deg,#ffd45a,#d9951a);color:#3a1a00;font-size:10px;font-weight:900;display:none;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.cell.has .mine{display:block}
.cell.has{border-color:#ffd45a}
.cell.hl{background:radial-gradient(circle at 50% 30%,#3a8ed8,#12448a 80%);border-color:#d6efff;box-shadow:0 0 14px 3px #5fb6ff,inset 0 0 14px rgba(160,220,255,.8);transform:scale(1.03)}
.cell.win{background:radial-gradient(circle at 50% 30%,#ffe27a,#c47d0a 80%);border-color:#fff;animation:winp .45s infinite alternate;z-index:3}
@keyframes winp{from{box-shadow:0 0 8px 1px #fff3b0}to{box-shadow:0 0 22px 6px #ffd34d}}
.cell.win .fi{animation:bounce .5s infinite alternate}
@keyframes bounce{to{transform:translateY(-4px) scale(1.12)}}
.cell.closed{filter:saturate(.85)}
.cell.timer{background:radial-gradient(circle,#6a1020,#26060c 80%);border:2px solid #b0243a;cursor:default}
.cell.timer::after{display:none}
.cell.timer b{font-family:"Courier New",monospace;font-size:clamp(28px,7.4vh,54px);font-weight:900;color:#ffd24a;text-shadow:0 0 10px rgba(255,200,60,.9),0 2px 0 #7a4a00;letter-spacing:2px}
.cell.timer.hot b{color:#ff5a4a;animation:pulse .5s infinite alternate}
.cell.timer .fi{width:80%;height:80%;font-size:clamp(34px,9vh,60px);animation:bounce .5s infinite alternate}
@keyframes pulse{to{transform:scale(1.15)}}

/* coin piles lying on a fruit (everybody's bets) */
.pile{position:absolute;inset:0;z-index:3;pointer-events:none}
.pc{position:absolute;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:6px;font-weight:900;color:#fff;text-shadow:0 1px 1px #000;border:2px dashed rgba(255,255,255,.9);box-shadow:0 2px 3px rgba(0,0,0,.65),inset 0 0 0 1.5px rgba(0,0,0,.25)}
.pc.c100{background:radial-gradient(circle,#ff8a8a,#c4141c)}.pc.c1k{background:radial-gradient(circle,#b891ff,#5a24b8)}.pc.c10k{background:radial-gradient(circle,#ffe27a,#d08a10);color:#3a1a00;text-shadow:none}.pc.c100k{background:radial-gradient(circle,#7ab8ff,#1a4fc8)}
.pc.land{animation:land .25s ease-out}
@keyframes land{0%{transform:scale(1.6);opacity:.4}100%{transform:none;opacity:1}}
.mchip{position:fixed;width:19px;height:19px;border-radius:50%;pointer-events:none;border:2px dashed #fff;z-index:40;box-shadow:0 2px 4px rgba(0,0,0,.6)}
.mchip.c100{background:radial-gradient(circle,#ff8a8a,#c4141c)}.mchip.c1k{background:radial-gradient(circle,#b891ff,#5a24b8)}.mchip.c10k{background:radial-gradient(circle,#ffe27a,#d08a10)}.mchip.c100k{background:radial-gradient(circle,#7ab8ff,#1a4fc8)}
.coinfx{position:fixed;pointer-events:none;z-index:45;font-size:20px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}

/* result strip */
.resrow{flex:none;display:flex;align-items:center;gap:6px;height:clamp(24px,4vh,30px);margin-top:5px;padding:0 8px;border-radius:7px;background:linear-gradient(180deg,#3a1a80,#2a1062);box-shadow:inset 0 0 6px rgba(0,0,0,.6)}
.resrow .rl{font-size:10px;font-weight:700;color:#cbb6f5}
#resstrip{display:flex;gap:5px;align-items:center;overflow:hidden;position:relative}
#resstrip .fi{position:relative;width:21px;height:21px;font-size:16px;line-height:21px;text-align:center;display:inline-block}
#resstrip .fi svg{width:100%;height:100%}
#resstrip .fi.new::after{content:"NEW";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font-size:6px;font-weight:900;color:#fff;background:#e0243a;border-radius:3px;padding:0 2px;line-height:9px}

/* bet buttons: a pill with a coin + a 3D arcade knob under it */
.chips{flex:none;display:flex;justify-content:space-around;align-items:flex-end;margin-top:6px}
.cw{display:flex;flex-direction:column;align-items:center}
.chip{position:relative;width:clamp(58px,17vw,74px);height:clamp(22px,3.8vh,28px);border-radius:14px;font-weight:900;font-size:clamp(11px,2vh,14px);color:#fff;text-shadow:0 1px 2px #000;border:2px solid rgba(255,255,255,.7);padding-left:12px;display:flex;align-items:center;justify-content:center;transition:transform .12s}
.chip .cd{position:absolute;left:-4px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;border:2px dashed #fff;background:inherit;filter:brightness(1.2)}
.c100{background:linear-gradient(180deg,#ff6a6a,#b50f18)}.c1k{background:linear-gradient(180deg,#a77cff,#4a1aa8)}.c10k{background:linear-gradient(180deg,#ffd45a,#c47a08);color:#3a1a00;text-shadow:none}.c100k{background:linear-gradient(180deg,#5aa8ff,#1a46b8)}
.chip.on{transform:translateY(-3px) scale(1.08);box-shadow:0 0 0 3px #fff3b0,0 0 14px 4px #ffd34d}
.knob{display:block;width:clamp(34px,10vw,46px);height:12px;margin-top:3px;border-radius:50%;background:radial-gradient(ellipse at 50% 30%,#7ab8ff,#1a5ad0);box-shadow:0 3px 0 #0a2a78,0 0 6px rgba(80,160,255,.6)}
.knob.k100,.cw:has(.chip.on) .knob{background:radial-gradient(ellipse at 50% 30%,#ff8a8a,#d01a22);box-shadow:0 3px 0 #7a0a10,0 0 10px rgba(255,80,80,.9)}

/* bottom dock */
.dock{flex:none;display:flex;gap:7px;margin:0 8px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));border-radius:0 0 14px 14px;background:linear-gradient(180deg,#6a43c4,#3a1a80);border:2px solid #cdb6ff;border-top:0}
.pill{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:clamp(36px,6vh,44px);border-radius:12px;background:linear-gradient(180deg,#8a62d8,#5a2fa8);border:1.5px solid #d8c4ff;font-size:10px;color:#efe6ff;box-shadow:inset 0 -3px 5px rgba(0,0,40,.3)}
.pill b{font-size:clamp(12px,2.2vh,15px);color:#fff;display:flex;align-items:center;gap:3px}
.pill em{font-style:normal}
.coin{display:inline-block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe27a,#d08a10);border:1.5px solid #fff3b0}
.pill.auto{font-size:clamp(14px,2.6vh,18px);font-weight:900;background:linear-gradient(180deg,#9a7ae8,#6a43c4);color:#fff;text-shadow:0 1px 2px #000}
.pill.auto.on{background:linear-gradient(180deg,#ff8a5a,#c4301c);border-color:#ffd0c0}

/* ---------- popups ---------- */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(5,0,20,.55)}
.overlay[hidden]{display:none}
.card{width:min(90vw,380px);max-height:84vh;overflow:auto;border-radius:12px;border:3px solid #c98a1e;background:#4a1a82;box-shadow:0 0 0 2px #2a0a40,0 0 24px rgba(0,0,0,.6);padding:12px 14px 14px;position:relative;animation:popin .25s ease-out}
@keyframes popin{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
.card.sumcard{background:rgba(52,36,110,.94);border:2px solid #a898e8;box-shadow:0 0 18px rgba(120,90,230,.6)}
.card h2{margin:0 0 8px;text-align:center;font-size:20px;font-weight:600;color:#fff}
.card p,.card li{font-size:12.5px;line-height:1.5;color:#efe6ff}
.card ol{margin:0;padding-left:20px}
.card .btn{display:block;margin:10px auto 0;min-width:90px;padding:7px 18px;border-radius:18px;font-weight:900;color:#3a1a00;background:linear-gradient(180deg,#ffe28a,#e0a020);border:2px solid #fff3b0}
.card .x{position:absolute;right:6px;top:4px;width:26px;height:26px;border-radius:50%;background:#2a0a40;color:#fff;font-size:16px}
.card table{width:100%;border-collapse:collapse;font-size:11px;text-align:center}
.card th{color:#cbb6f5;font-weight:600;padding:3px}
.card td{padding:5px 3px;border-top:1px solid rgba(255,255,255,.12)}
.sum{text-align:center}
.sum .line{display:flex;justify-content:center;align-items:center;gap:6px;font-size:13px;margin:7px 0}
.sum .line.res b{display:inline-flex;align-items:center}
.sum .line.res .fi{width:34px;height:34px;font-size:28px;display:inline-flex;align-items:center;justify-content:center}
.sum .line.res .fi svg{width:100%;height:100%}
.sum .line b{color:#fff}
.sum .rk{margin-top:10px;color:#ffe08a;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px}
.sum .rk::before,.sum .rk::after{content:"";width:34px;border-top:1.5px dashed #ffb84a}
.sum .rank{display:flex;justify-content:space-around;margin-top:8px}
.sum .rank div{display:flex;flex-direction:column;align-items:center;font-size:10px;gap:2px;max-width:32%}
.sum .rank img{width:44px;height:44px;border-radius:50%;border:2px solid #cfc2ff;object-fit:cover;background:#2a1260}
.sum .rank .cr{font-size:16px;margin-bottom:-6px;z-index:1}
.sum .tm{position:absolute;right:10px;top:6px;font-size:11px;font-weight:900;color:#ffe08a}
.sum .jpwin{margin:6px 0;padding:6px;border-radius:8px;background:linear-gradient(180deg,#ffe28a,#e0a020);color:#3a1a00;font-weight:900;font-size:14px}
.toast{position:fixed;left:50%;bottom:30%;transform:translateX(-50%);max-width:80vw;padding:8px 16px;border-radius:18px;background:rgba(0,0,0,.85);border:1px solid var(--gold);font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s;z-index:30;text-align:center}
.toast.show{opacity:1}
#fx{position:fixed;inset:0;pointer-events:none;z-index:35}
.jpbanner{position:fixed;left:0;right:0;top:34%;z-index:44;text-align:center;font-size:clamp(30px,8vh,56px);font-weight:900;font-style:italic;background:linear-gradient(180deg,#fffbd0,#ffe45a 40%,#ff9a00);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #8a3a00;filter:drop-shadow(0 4px 0 #6a2a00) drop-shadow(0 0 14px rgba(255,210,70,.9));animation:jpb 2.6s ease-out forwards;pointer-events:none}
.jpbanner small{display:block;font-size:.4em;-webkit-text-stroke:0;color:#fff;background:none;-webkit-background-clip:initial;font-style:normal;text-shadow:0 2px 3px #000}
@keyframes jpb{0%{transform:scale(.3);opacity:0}15%{transform:scale(1.15);opacity:1}25%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:scale(1.1)}}

/* ---------- splash ---------- */
.splash{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 35%,#6a2cb8 0,#2a0e5c 45%,#0e0422 90%);transition:opacity .45s}
.splash.hide{opacity:0;pointer-events:none}
.spl-logo{position:relative;text-align:center;font-weight:900;font-style:italic;line-height:.95;animation:logoin 1s ease-out both}
.spl-logo span{display:block;background:linear-gradient(180deg,#fffbd0 0,#ffe45a 36%,#ffb000 62%,#ff6a00);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #7a2a00;filter:drop-shadow(0 5px 0 #5a1f00) drop-shadow(0 8px 10px rgba(0,0,0,.6))}
.spl-logo .fr{font-size:clamp(56px,16vw,92px)}.spl-logo .pa{font-size:clamp(46px,13vw,76px);margin-top:-4px}
.spl-logo em{position:absolute;font-style:normal;font-size:clamp(28px,8vw,46px);animation:floaty 2s ease-in-out infinite alternate}
.f1{left:-2%;top:6%}.f2{right:-4%;top:-6%;animation-delay:.3s}.f3{left:6%;bottom:-8%;animation-delay:.6s}.f4{right:2%;bottom:-4%;animation-delay:.9s}
@keyframes floaty{to{transform:translateY(-8px) rotate(8deg)}}
@keyframes logoin{from{transform:scale(.4) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
.spl-coins i{position:absolute;font-style:normal;font-size:26px;left:calc(var(--x,10%));top:-30px;animation:fall 2.6s linear infinite}
.spl-coins i:nth-child(1){--x:12%}.spl-coins i:nth-child(2){--x:28%;animation-delay:.5s}.spl-coins i:nth-child(3){--x:46%;animation-delay:1s}.spl-coins i:nth-child(4){--x:62%;animation-delay:.3s}.spl-coins i:nth-child(5){--x:78%;animation-delay:.8s}.spl-coins i:nth-child(6){--x:90%;animation-delay:1.4s}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.spl-bar{position:absolute;left:12%;right:12%;bottom:12%;height:12px;border-radius:7px;background:rgba(0,0,0,.45);border:2px solid #c9a8ff;overflow:hidden}
.spl-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(135deg,#b07aff 0 8px,#7a4ad8 8px 16px);transition:width .2s}
@media (max-height:600px){.topbar{height:30px}.subbar{height:26px}.rbtn{width:28px;height:28px}.cab{padding:6px 8px 4px;margin-top:2px}.resrow{margin-top:3px}.chips{margin-top:4px}.knob{height:9px}}