body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #0e0e23; color: white; overflow: hidden; }

#particles-js { position: absolute; width: 100%; height: 100%; z-index: -1; }

.container { text-align: center; padding: 2rem; position: relative; z-index: 1; }

.glow { text-shadow: 0 0 10px #fff, 0 0 20px #ff00cc, 0 0 30px #ff00cc; }

.wallet { margin-bottom: 1rem; font-size: 1.2rem; }

.controls input { padding: 10px; margin: 5px; width: 150px; font-size: 1rem; border-radius: 8px; border: none; }

#spinButton { padding: 10px 20px; font-size: 1.2rem; background-color: #ff00cc; border: none; border-radius: 10px; color: white; cursor: pointer; transition: transform 0.3s ease; }

#spinButton:hover { transform: scale(1.1); background-color: #ff33dd; }

.roulette-wrapper { margin-top: 2rem; position: relative; width: 300px; height: 300px; margin-left: auto; margin-right: auto; }

.wheel { width: 100%; height: 100%; border: 8px solid #ff00cc; border-radius: 50%; background: repeating-conic-gradient( red 0deg 9.72deg, black 9.72deg 19.45deg ); transition: transform 4s ease-out; position: absolute; top: 0; left: 0; }

.ball { width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 10px; left: 50%; margin-left: -10px; z-index: 2; transition: transform 4s ease-out; }

.status { margin-top: 2rem; font-size: 1.4rem; }

.navigation { margin-top: 2rem; }

.navigation a { margin: 0 10px; color: #00ffff; text-decoration: none; font-size: 1rem; transition: color 0.3s ease; }

.navigation a:hover { color: #ff00cc; }