:root {
    --bg: #0a0a0a;
    --accent: #ff00ff;
    --accent2: #00eaff;
    --text: #ffffff;
    --red: #ff0033;
    --black: #111;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Trebuchet MS', sans-serif;
    text-align: center;
    padding: 20px;
}

/* Header */
.roulette-header {
    margin-bottom: 20px;
    text-shadow: 0 0 10px var(--accent2);
}

.back-btn {
    display: inline-block;
    margin-top: 10px;
    color: var(--accent2);
    text-decoration: none;
    font-weight: bold;
}

.back-btn:hover {
    color: var(--accent);
}

/* Betting */
.betting {
    margin: 20px auto;
}

button {
    padding: 10px 20px;
    margin: 10px;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: black;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 10px var(--accent);
    transition: 0.2s ease;
}

button:hover {
    background: var(--accent2);
    box-shadow: 0 0 15px var(--accent2);
}
.wheel {
    width: 260px;
    height: 260px;
    margin: auto;
    border-radius: 50%;
    border: 6px solid var(--accent2);
    box-shadow: 
        0 0 20px var(--accent2),
        inset 0 0 20px #000;
    background: conic-gradient(
        var(--red) 0deg 18deg,
        var(--black) 18deg 36deg,
        var(--red) 36deg 54deg,
        var(--black) 54deg 72deg,
        var(--red) 72deg 90deg,
        var(--black) 90deg 108deg,
        var(--red) 108deg 126deg,
        var(--black) 126deg 144deg,
        var(--red) 144deg 162deg,
        var(--black) 162deg 180deg,
        var(--red) 180deg 198deg,
        var(--black) 198deg 216deg,
        var(--red) 216deg 234deg,
        var(--black) 234deg 252deg,
        var(--red) 252deg 270deg,
        var(--black) 270deg 288deg,
        var(--red) 288deg 306deg,
        var(--black) 306deg 324deg,
        var(--red) 324deg 342deg,
        var(--black) 342deg 360deg
    );
    position: relative;
    transition: transform 2s ease-out;
}

/* Pointer */
.wheel::after {
    content: "";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 18px solid var(--accent2);
    filter: drop-shadow(0 0 6px var(--accent2));
}
#ball {
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px white;
}

/* Wheel */