.roulette-heading{position:relative}.roulette-sound{margin-left:auto;padding:7px 11px;border:1px solid rgba(132,166,255,.25);border-radius:10px;background:rgba(63,91,160,.12);color:#bfcaff;font:600 10px Inter,sans-serif;cursor:pointer}.roulette-sound.off{color:#686d78;border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.03)}
.roulette-shell{position:relative;margin-top:14px;padding:18px;border:1px solid rgba(112,142,255,.2);border-radius:22px;background:linear-gradient(145deg,rgba(12,20,40,.86),rgba(20,9,39,.82));box-shadow:inset 0 1px rgba(255,255,255,.035),0 24px 70px rgba(0,0,0,.3);overflow:hidden}.roulette-shell:before{content:"";position:absolute;width:320px;height:180px;left:50%;top:-125px;transform:translateX(-50%);background:#674cff;filter:blur(85px);opacity:.25;pointer-events:none}.roulette-status{position:relative;display:flex;justify-content:space-between;gap:12px;margin-bottom:13px;color:#8d97ae;font-size:10px}.roulette-status strong{color:#c5cdff;letter-spacing:.4px}
.roulette-window{position:relative;height:194px;border:1px solid rgba(136,172,255,.22);border-radius:18px;background:rgba(2,7,18,.62);overflow:hidden;box-shadow:inset 0 0 45px rgba(0,0,0,.64)}.roulette-window:before,.roulette-window:after{content:"";position:absolute;z-index:3;top:0;bottom:0;width:18%;pointer-events:none}.roulette-window:before{left:0;background:linear-gradient(90deg,#060b18,transparent)}.roulette-window:after{right:0;background:linear-gradient(-90deg,#0b0717,transparent)}.roulette-track{position:absolute;left:0;top:14px;display:flex;gap:12px;will-change:transform}.roulette-card{width:158px;height:164px;flex:0 0 158px;padding:7px;border:1px solid rgba(255,255,255,.13);border-radius:15px;background:rgba(12,17,31,.88);box-shadow:0 9px 24px rgba(0,0,0,.4);overflow:hidden}.roulette-card .reward-art{height:127px;border-radius:11px}.roulette-card b{display:block;padding:7px 3px 0;overflow:hidden;color:#dce6ff;font-size:10px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.roulette-card.rare{border-color:rgba(192,92,255,.45);box-shadow:0 0 25px rgba(139,54,255,.2)}
.reward-art{background-position:center;background-size:cover;background-repeat:no-repeat}.reward-art.art-balance-5{background-image:url('../assets/roulette/balance-5.png')}.reward-art.art-balance-10{background-image:url('../assets/roulette/balance-10.png')}.reward-art.art-sheet{background-image:url('../assets/roulette/rewards-sheet.png');background-size:300% 200%}.reward-art.art-key-7d{background-position:0 0}.reward-art.art-key-14d{background-position:50% 0}.reward-art.art-balance-30{background-position:100% 0}.reward-art.art-balance-40{background-position:0 100%}.reward-art.art-cosmetics{background-position:50% 100%}.reward-art.art-cfg{background-position:100% 100%}
.roulette-pointer{position:absolute;z-index:5;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(transparent,#82eaff 16%,#b65cff 50%,#82eaff 84%,transparent);box-shadow:0 0 12px #6fcfff}.roulette-pointer:before,.roulette-pointer:after{content:"";position:absolute;left:50%;width:0;height:0;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent}.roulette-pointer:before{top:0;border-top:11px solid #8ae9ff}.roulette-pointer:after{bottom:0;border-bottom:11px solid #b66aff}.roulette-spin{position:relative;display:block;min-width:205px;height:43px;margin:15px auto 0;border:1px solid rgba(126,180,255,.5);border-radius:13px;background:linear-gradient(110deg,#1775ef,#8f3cff);color:white;font:800 12px Manrope,sans-serif;letter-spacing:1.2px;cursor:pointer;box-shadow:0 10px 28px rgba(57,82,255,.28)}.roulette-spin:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}.roulette-spin:disabled{cursor:not-allowed;filter:saturate(.3);opacity:.58}.roulette-note{position:relative;margin:9px 0 0;color:#59627a;font-size:9px;text-align:center}
.roulette-history-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}.roulette-history-grid>article{padding:15px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(8,12,21,.72);backdrop-filter:blur(15px)}.roulette-history-grid h3{margin:0 0 9px;color:#bec9ec;font:700 11px Manrope,sans-serif}.roulette-history{display:grid;gap:5px}.roulette-history p{display:flex;justify-content:space-between;margin:0;padding:7px 9px;border-radius:8px;background:rgba(255,255,255,.025);color:#717b92;font-size:9px}.roulette-history strong{color:#c7d3f4;font-weight:650}.roulette-history time{color:#505a70}
.roulette-win{position:fixed;z-index:300;inset:0;display:grid;place-items:center;background:rgba(2,5,13,.72);backdrop-filter:blur(12px)}.roulette-win[hidden]{display:none}.roulette-win-card{position:relative;z-index:2;width:min(330px,calc(100vw - 36px));padding:22px;border:1px solid rgba(115,203,255,.5);border-radius:24px;background:linear-gradient(150deg,#111d37,#160d2d);text-align:center;box-shadow:0 0 80px rgba(69,145,255,.35);animation:rouletteWinIn .55s cubic-bezier(.16,1,.3,1)}.roulette-win.rare .roulette-win-card{border-color:#d46dff;box-shadow:0 0 100px rgba(174,56,255,.48)}.roulette-win-card small{color:#80dfff;font-weight:800;letter-spacing:2px}.roulette-win-card .reward-art{width:180px;height:180px;margin:14px auto;border-radius:20px;box-shadow:0 12px 42px rgba(0,0,0,.48)}.roulette-win-card h2{margin:0;color:#f3f6ff;font:800 19px Manrope,sans-serif}.roulette-win-card button{height:38px;margin-top:16px;padding:0 30px;border:0;border-radius:12px;background:linear-gradient(110deg,#38a9ff,#9c53ff);color:white;font-weight:800;cursor:pointer}.roulette-win-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}.roulette-particle{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:2px;background:#69deff;box-shadow:0 0 12px currentColor;animation:rouletteParticle 1.25s ease-out forwards}.roulette-win.rare .roulette-particle{background:#da6dff}@keyframes rouletteWinIn{from{opacity:0;transform:scale(.65) translateY(35px)}to{opacity:1;transform:none}}@keyframes rouletteParticle{to{opacity:0;transform:translate(var(--px),var(--py)) rotate(var(--pr)) scale(.2)}}
@media(max-width:680px){.roulette-heading{display:flex!important;flex-wrap:wrap}.roulette-sound{position:absolute;right:0;top:16px}.roulette-shell{padding:11px}.roulette-window{height:164px}.roulette-track{top:12px;gap:9px}.roulette-card{width:128px;height:140px;flex-basis:128px}.roulette-card .reward-art{height:105px}.roulette-history-grid{grid-template-columns:1fr}}