/* style.css */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: radial-gradient(circle at center, #1e1e2f 0%, #0f0c29 100%);
    color: white;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.container { text-align: center; width: 95%; max-width: 450px; }
.logo { color: #ffd700; font-size: 32px; font-weight: 700; margin-bottom: 20px; letter-spacing: 2px; }
.card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(15px);
    padding: 30px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.wheel-wrapper { position: relative; width: 300px; height: 300px; margin: 0 auto 30px auto; }
.pointer {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 15px solid transparent;
    border-right: 15px solid transparent; border-top: 30px solid #ffd700; z-index: 10;
}
#wheelCanvas { border-radius: 50%; transition: transform 4s cubic-bezier(0.15, 0, 0.15, 1); }
input {
    width: 80%; padding: 12px; margin-bottom: 15px; border-radius: 10px;
    border: 2px solid #ffd700; background: rgba(0,0,0,0.5); color: white;
    text-align: center; font-size: 20px; font-weight: bold; outline: none;
}
button {
    width: 100%; padding: 16px; background: linear-gradient(45deg, #ffd700, #ffa500);
    border: none; border-radius: 15px; font-weight: bold; font-size: 18px;
    cursor: pointer; text-transform: uppercase;
}
.success { color: #00ff88; margin-top: 20px; font-weight: bold; }
.hidden { display: none !important; }
.footer-text { font-size: 12px; color: #888; margin-top: 25px; }
.online-dot { height: 8px; width: 8px; background: #00ff88; border-radius: 50%; display: inline-block; margin-right: 5px; }