.roulette-table-grid {
    display: grid;
    grid-template-columns: auto 1fr; /* Two columns: one for 0/00, one for the rest */
    align-items: center;
    gap: 10px; /* Fixed spacing between sections */
    max-width: calc(100% - 40px); /* Ensure the grid fits within the screen width with a 20px buffer on each side */
    margin: 0 auto; /* Center the grid on the page */
    padding: 0; /* No additional internal padding */
    box-sizing: border-box; /* Include border and padding in total width */
}

.roulette-vertical-numbers {
    display: flex;
    flex-direction: column; /* Stack the 0 and 00 vertically */
    gap: 17px; /* Fixed spacing between the 0 and 00 */
}

.roulette-horizontal-numbers {
    display: grid;
    grid-template-columns: repeat(12, minmax(40px, 1fr)); /* Flexible button size with fixed spacing */
    gap: 1px; /* Fixed spacing between buttons */
    justify-content: start; /* Align to the left */
}
.roulette-grid-number-0 {
    width: 100%; /* Allow the button to grow/shrink with its grid cell */
    height: auto; /* Maintain aspect ratio */
    text-align: center;
    font-size: 2rem; /* Adjust font size to grow/shrink with button size */
    border: 1px solid white;
    border-radius: 5px; /* Optional: rounded corners */
    color: white;
}
.roulette-grid-number-0:hover {
    transform: scale(1.2); /* Enlarge the button */
    font-size: 2rem; /* Increase font size */
}

.roulette-grid-number {
    width: 100%; /* Allow the button to grow/shrink with its grid cell */
    height: auto; /* Maintain aspect ratio */
    text-align: center;
    font-size: 1.5rem; /* Adjust font size to grow/shrink with button size */
    border: 1px solid white;
    border-radius: 5px; /* Optional: rounded corners */
    color: white;
}
.roulette-grid-number:hover {
    transform: scale(1.2); /* Enlarge the button */
    /*font-size: 2rem; /* Increase font size */
}
.roulette-grid-number-0.green {
    background-color: rgb(146, 196, 150);
}

.roulette-grid-number.red {
    background-color: rgb(221, 82, 82);
}

.roulette-grid-number.black {
    background-color: rgb(68, 60, 60);
}
