#wheelgame-spinner 
{
    background-color: #696969;
}

#wheelgame-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* Maintains square aspect ratio */
}

.wheelgame-overlay { 
    position: absolute;
    z-index: 100;
    left: 50%; 
    top: calc(40%);
    width: calc(50% - 1vw);
    background-color:#781e36;
    padding: 1vw;
    border-radius: 2vw;
    box-shadow: #000000 0vw 0vw 2vw;
    display: none; /* Initially hidden */
    justify-content: center;
    align-items: center;
    opacity: 0; /* Fully transparent */
    pointer-events: none; /* Prevent interaction when hidden */
    transition: opacity 0.5s ease; /* Smooth fade effect */
}

.wheelgame-overlay.active {
    display: flex; /* Show as flexbox */
    opacity: 1; /* Fully visible */
    pointer-events: auto; /* Allow interaction */
}

.wheelgame-overlay-content {
    color:white;
    padding: 2vw;
    border-radius: 2vw;
    text-align: center;
    animation: zoomIn 0.5s ease; /* Add a zoom-in effect */
}

.wheelgame-overlay-title {
    font-size: 5vw;
    margin-bottom: 2vw;
}

.wheelgame-overlay-description {
    font-size: 3vw;
}

.wheelgame-close-btn {
    margin-top: 2vw;
    padding: 2vw 4vw;
    font-size: 3vw;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 1vw;
    cursor: pointer;
}

.wheelgame-close-btn:hover {
    background-color: #45a049;
}

@keyframes zoomIn {
    0% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1);
    }
}