:root{--gold:#ffbd21;--pink:#ff2ba8;--violet:#5a0f73;--deep:#21072f;--white:#fff}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#242426;color:#fff}
body.modal-open{overflow:hidden}
.page-shell{min-height:100vh;padding:14px;display:flex;justify-content:center;align-items:flex-start}
.game-screen{position:relative;width:min(100%,390px);min-height:720px;border-radius:26px;overflow:hidden;padding:20px 18px 16px;background:
radial-gradient(circle at 50% 20%,rgba(255,0,199,.12),transparent 26%),
repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 30px,rgba(0,0,0,.08) 30px 60px),
linear-gradient(180deg,#3a0a50 0%,#5c0c6f 48%,#30073e 100%);box-shadow:0 20px 50px rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.06)}
.logo-wrap{text-align:center;margin:14px 0 26px;position:relative;z-index:2}
.logo-script{font-family:Georgia,serif;font-style:italic;font-weight:900;font-size:37px;letter-spacing:-2px;color:#fff;text-shadow:0 3px 0 #5a0b65,0 0 8px #ff25a8}
.logo-script span{color:#ffd530;text-shadow:0 3px 0 #7a3a00,0 0 8px #ffec7b}
.demo-pill{display:inline-block;margin-top:8px;padding:5px 9px;border-radius:999px;background:rgba(25,6,38,.55);font-size:9px;letter-spacing:.8px;color:#eddcf3;border:1px solid rgba(255,255,255,.1)}
.confetti::before,.confetti::after{content:'';position:absolute;inset:0;background-image:
radial-gradient(circle,#ffdc2e 0 2px,transparent 3px),radial-gradient(circle,#ff2da9 0 2px,transparent 3px),radial-gradient(circle,#6cc5ff 0 2px,transparent 3px),radial-gradient(circle,#a8d300 0 2px,transparent 3px);background-size:60px 70px,75px 85px,95px 75px,80px 95px;background-position:0 0,20px 10px,8px 32px,34px 48px;opacity:.75;pointer-events:none;animation:drift 8s linear infinite}
.confetti::after{transform:rotate(180deg);opacity:.5;animation-duration:11s}
.play-store-float{position:absolute;top:10px;right:10px;z-index:10;display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:13px;background:#fff;color:#1b1b1b;text-decoration:none;box-shadow:0 8px 18px rgba(0,0,0,.25);font-size:11px}
.play-store-float span:last-child{display:flex;flex-direction:column;line-height:1}
.play-store-float small{font-size:8px;color:#656565}
.play-store-float strong{font-size:12px}
.play-icon{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,#34a853 0 25%,#4285f4 25% 50%,#fbbc04 50% 75%,#ea4335 75%);color:white;font-size:11px}
.slot-box{position:relative;z-index:2;margin:0 auto;padding:7px;border:4px solid #ffb91e;background:#9f0c77;box-shadow:0 0 0 3px #6d0b61,0 8px 20px rgba(0,0,0,.3),inset 0 0 18px rgba(255,210,0,.25)}
.reels{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:#9c0e78}
.reel{display:grid;grid-template-rows:repeat(3,92px);gap:4px;background:linear-gradient(135deg,#a60e8c,#d21a9e);border:2px solid #ffb91e;overflow:hidden}
.reel.spinning .symbol{filter:blur(1.4px);transform:translateY(3px)}
.reel.stop{animation:reelStop .35s ease}
.symbol{display:flex;align-items:center;justify-content:center;font-size:48px;background:linear-gradient(135deg,#bc14a5,#7a0a76);text-shadow:0 3px 0 rgba(0,0,0,.25);transition:.18s;position:relative;overflow:hidden}
.symbol::after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,rgba(255,255,255,.15),transparent 45%)}
.symbol.land{animation:land .3s ease}
.symbol.win{outline:3px solid #fff06d;box-shadow:inset 0 0 20px #ffec55,0 0 18px #ffd83a;animation:pulse .6s ease-in-out 3}
.symbol.mega{animation:mega .75s ease-in-out infinite}
.payline{position:absolute;left:8px;right:8px;top:50%;height:3px;background:linear-gradient(90deg,transparent,#fff16a,transparent);opacity:.8;pointer-events:none}
.energy-flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.7),rgba(255,200,0,.2) 30%,transparent 65%);opacity:0;pointer-events:none}
.energy-flash.active{animation:flash .7s ease}
.coin-burst{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.coin-burst span{position:absolute;bottom:20%;font-size:24px;opacity:0}
.coin-burst.active span{animation:coin 1.2s ease-out forwards}
.mini-stats{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 12px}
.mini-stats div{padding:9px 10px;border-radius:14px;background:rgba(27,5,38,.55);border:1px solid rgba(255,255,255,.1);text-align:center}
.mini-stats span{display:block;font-size:9px;color:#d9c6df}
.mini-stats strong{display:block;margin-top:2px;font-size:18px;color:#ffe36b}
.spin-button{position:relative;z-index:2;display:block;width:62%;margin:4px auto 0;padding:15px 18px;border:6px solid #ffab20;background:linear-gradient(180deg,#ef42c2,#b40075);box-shadow:0 4px 0 #8d3b00,0 0 18px rgba(255,167,0,.25);color:#fff;font-size:22px;font-weight:900;cursor:pointer}
.spin-button:disabled{opacity:.78}
.hint{text-align:center;position:relative;z-index:2;margin:12px 0 24px;font-size:12px;color:#f0def4}
footer{position:relative;z-index:2;display:flex;gap:9px;align-items:center;margin-top:22px;font-size:9px;color:#d6c6dc}
footer span{display:grid;place-items:center;min-width:34px;height:34px;border:2px solid #f06;border-radius:50%;font-weight:800}
footer p{margin:0}
.bonus-modal[hidden]{display:none}
.bonus-modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:18px}
.bonus-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
.bonus-dialog{position:relative;width:min(100%,390px);padding:24px 18px 18px;border-radius:24px;text-align:center;background:linear-gradient(180deg,#4c0b66,#1d062b);border:2px solid #ffd033;box-shadow:0 0 35px rgba(255,43,168,.35);animation:modal .35s ease}
.modal-close{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:22px}
.modal-joker{font-size:72px;filter:drop-shadow(0 0 15px #ff3ab3)}
.modal-kicker{font-size:11px;letter-spacing:1.6px;color:#ffd95b}
.bonus-dialog h2{font-size:28px;margin:8px 0;color:#fff4b3}
.bonus-dialog p{margin:0 0 16px;color:#eadcf0}
.modal-cta,.modal-secondary{width:100%;border:0;border-radius:14px;padding:14px;font-weight:900;cursor:pointer}
.modal-cta{background:linear-gradient(180deg,#55df4b,#0c8d1d);color:#fff;box-shadow:0 5px 0 #075d15}
.modal-secondary{margin-top:10px;background:rgba(255,255,255,.08);color:#fff}
@keyframes drift{to{background-position:0 80px,20px 95px,8px 112px,34px 128px}}
@keyframes reelStop{0%{transform:translateY(-9px)}100%{transform:translateY(0)}}
@keyframes land{0%{transform:translateY(-15px)}100%{transform:translateY(0)}}
@keyframes pulse{50%{transform:scale(1.08)}}
@keyframes mega{50%{transform:scale(1.11);filter:brightness(1.25)}}
@keyframes flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
@keyframes coin{0%{transform:translate(0,0) scale(.6) rotate(0);opacity:0}15%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1.2) rotate(540deg);opacity:0}}
@keyframes modal{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}
@media(max-width:380px){.page-shell{padding:0}.game-screen{border-radius:0;min-height:100vh}.reel{grid-template-rows:repeat(3,82px)}.symbol{font-size:42px}.logo-script{font-size:32px}.play-store-float{transform:scale(.9);transform-origin:top right}}