body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 20px;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1 {
    text-align: center;
    color: #333;
}

#game-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#wheel-container {
    width: 300px;
    height: 300px;
    position: relative;
}

#wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        #B22222 0deg 10deg,
        #000000 10deg 20deg,
        #B22222 20deg 30deg,
        #000000 30deg 40deg,
        #008000 40deg 50deg,
        #000000 50deg 60deg,
        #B22222 60deg 70deg,
        #000000 70deg 80deg,
        #B22222 80deg 90deg,
        #000000 90deg 100deg,
        #B22222 100deg 110deg,
        #000000 110deg 120deg,
        #B22222 120deg 130deg,
        #000000 130deg 140deg,
        #B22222 140deg 150deg,
        #000000 150deg 160deg,
        #B22222 160deg 170deg,
        #000000 170deg 180deg,
        #B22222 180deg 190deg,
        #000000 190deg 200deg,
        #B22222 200deg 210deg,
        #000000 210deg 220deg,
        #B22222 220deg 230deg,
        #000000 230deg 240deg,
        #B22222 240deg 250deg,
        #000000 250deg 260deg,
        #B22222 260deg 270deg,
        #000000 270deg 280deg,
        #B22222 280deg 290deg,
        #000000 290deg 300deg,
        #B22222 300deg 310deg,
        #000000 310deg 320deg,
        #B22222 320deg 330deg,
        #000000 330deg 340deg,
        #B22222 340deg 350deg,
        #008000 350deg 360deg
    );
    transition: transform 5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

#betting-area {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#number-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-bottom: 10px;
}

.number-bet {
    width: 40px;
    height: 40px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

#outside-bets {
    display: flex;
    gap: 5px;
}

.outside-bet {
    padding: 5px 10px;
    background-color: #008CBA;
    color: white;
    border: none;
    cursor: pointer;
}

#chips {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.chip {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

#player-info {
    text-align: center;
    margin-top: 20px;
}

#message {
    text-align: center;
    margin-top: 20px;
    font-weight: bold;
}

#spin {
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #f44336;
    color: white;
    border: none;
    cursor: pointer;
}