body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(to right, #141e30, #243b55); color: white; display: flex; justify-content: center; align-items: center; height: 100vh; } .screen { display: none; text-align: center; background: rgba(255, 255, 255, 0.05); padding: 30px; border-radius: 15px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); width: 300px; } .screen.active { display: block; } input[type="text"], input[type="number"] { padding: 8px; width: 80%; margin-bottom: 10px; border: none; border-radius: 5px; outline: none; } button { padding: 10px 20px; margin: 5px; border: none; border-radius: 5px; background-color: #4CAF50; color: white; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #45a049; } #xp-bar { background: rgba(255, 255, 255, 0.2); border-radius: 5px; overflow: hidden; height: 20px; margin-bottom: 15px; } #xp-progress { background: #4CAF50; height: 100%; width: 0%; transition: width 0.3s ease; } .hidden { display: none; } /* Slots Animation */ @keyframes spinReel { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } .reel { display: inline-block; width: 30px; height: 30px; margin: 0 5px; overflow: hidden; position: relative; text-align: center; } .reel span { display: block; animation: spinReel 0.5s ease-out; font-size: 24px; } /* Roulette Animation */ @keyframes spinRoulette { 0% { transform: rotate(0deg); } 100% { transform: rotate(720deg); } } #roulette-animation { width: 80px; height: 80px; margin: 10px auto; border: 5px solid #fff; border-top: 5px solid red; border-radius: 50%; animation: none; } /* Crash Animation */ #crash-animation { width: 100%; height: 10px; background: linear-gradient(to right, #4CAF50, #f44336); transform-origin: left; transform: scaleX(0); transition: transform 1s ease-out; margin-bottom: 10px; }