.roulette { position: absolute; z-index: 2; width: 300px; height: 300px; left: 50%; top: 40%; transform: translate(-50%,-50%) rotate(-12deg); border: 13px solid #f6b841; border-radius: 50%; background: repeating-conic-gradient(#d62f49 0deg 22.5deg,#17111f 22.5deg 45deg); box-shadow: inset 0 0 0 8px #6d3514, inset 0 0 0 35px #f4d58b, inset 0 0 0 42px #6d3514, 25px 40px 80px rgba(0,0,0,.5); }
.roulette::before { content: ""; position: absolute; inset: 60px; border: 8px solid #e2a52f; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #9e5a29, #471c17 70%); box-shadow: inset 0 0 22px rgba(0,0,0,.65); }
.roulette-ring { position: absolute; inset: 0; }
.roulette-ring span { position: absolute; left: 50%; top: 50%; color: white; font-size: 10px; font-weight: 900; transform-origin: 0 0; }
.roulette-ring span:nth-child(1) { transform: rotate(0deg) translateY(-127px) rotate(12deg); }
.roulette-ring span:nth-child(2) { transform: rotate(45deg) translateY(-127px) rotate(-33deg); }
.roulette-ring span:nth-child(3) { transform: rotate(90deg) translateY(-127px) rotate(-78deg); }
.roulette-ring span:nth-child(4) { transform: rotate(135deg) translateY(-127px) rotate(-123deg); }
.roulette-ring span:nth-child(5) { transform: rotate(180deg) translateY(-127px) rotate(-168deg); }
.roulette-ring span:nth-child(6) { transform: rotate(225deg) translateY(-127px) rotate(-213deg); }
.roulette-ring span:nth-child(7) { transform: rotate(270deg) translateY(-127px) rotate(-258deg); }
.roulette-ring span:nth-child(8) { transform: rotate(315deg) translateY(-127px) rotate(-303deg); color: #baff3c; }
.roulette-center { position: absolute; z-index: 3; inset: 105px; display: grid; place-items: center; border: 3px solid #ffe9a7; border-radius: 50%; color: #ffec45; background: linear-gradient(145deg,#a84f24,#401018); font-size: 38px; box-shadow: 0 5px 15px rgba(0,0,0,.5); }
.slot-card { width: 360px; }
.reels { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); }
.reels span { height: 63px; display: grid; place-items: center; border: 2px solid rgba(255,236,69,.55); border-radius: 8px; color: #ffd83e; background: linear-gradient(180deg,#471058,#21082f); font-size: 34px; font-weight: 900; text-shadow: 0 0 16px rgba(255,122,26,.7); }
.reels span:nth-child(2) { color: #ff5eb9; }
.jackpot-strip { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 7px; background: linear-gradient(90deg,var(--yellow),var(--lime)); color: #1a0a21; }
.jackpot-strip small { font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.jackpot-strip strong { font-size: 13px; font-weight: 900; }
.burst { cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.burst:hover { transform: rotate(4deg) scale(1.08); filter: brightness(1.08); }
@media (max-width:520px) { .roulette { width: 230px; height: 230px; top: 36%; } .roulette::before { inset: 45px; } .roulette-center { inset: 80px; font-size: 28px; } .roulette-ring span { display: none; } .slot-card { width: 330px; } }