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

#wheelgame-container {
    position: relative;
    width: 1000px;
    height: 1000px;
}

.wheelgame-overlay { 
    position: absolute;
    z-index:100;
    left: calc(50% + 10px);
    top: calc(50% - 100px);
    background-color:#781e36;
    padding: 10px;
    border-radius: 10px;
    box-shadow: #000000 0px 0px 10px;
    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: 20px;
    border-radius: 10px;
    text-align: center;
    animation: zoomIn 0.5s ease; /* Add a zoom-in effect */
}

.wheelgame-overlay-title {
    font-size: 2em;
    margin-bottom: 10px;
}

.wheelgame-overlay-description {
    font-size: 1.2em;
}

.wheelgame-close-btn {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1em;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

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

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