.item_roundwhell {
    padding: 3px;
    /* cursor: pointer; */
    position: relative;
    display: inline-block;
    transition: filter 0.3s ease;
}

.item_roundwhell img{
    background: linear-gradient(to right, #ff8c00, #ff69b4);
}

.selected_roundwhell {
    border: 5px solid;
    border-image: linear-gradient(45deg, #f3b52f, #ff6b6b) 1;
    box-shadow: 0 0 20px 5px rgba(252, 211, 77, 0.8),
                0 0 30px 10px rgba(252, 196, 25, 0.5);
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 20px 5px rgba(252, 211, 77, 0.8),
                    0 0 30px 10px rgba(252, 196, 25, 0.5);
    }
    50% {
        box-shadow: 0 0 30px 10px rgba(255, 193, 7, 1),
                    0 0 40px 20px rgba(252, 196, 25, 0.8);
    }
    100% {
        box-shadow: 0 0 20px 5px rgba(252, 211, 77, 0.8),
                    0 0 30px 10px rgba(252, 196, 25, 0.5);
    }
}


.selected_roundwhell:hover {
    box-shadow: 0 0 30px rgba(255, 165, 0, 1);
}

.selected_roundwhell.effect {
    animation: glow 1.5s ease-in-out infinite;
}

@keyframes glow {
    0% {
        box-shadow: 0 0 15px rgba(255, 165, 0, 0.7), 
                    0 0 30px rgba(255, 140, 0, 0.6), 
                    0 0 45px rgba(255, 69, 0, 0.5), 
                    0 0 60px rgba(255, 0, 0, 0.4);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 165, 0, 1), 
                    0 0 60px rgba(255, 140, 0, 0.9), 
                    0 0 90px rgba(255, 69, 0, 0.8), 
                    0 0 120px rgba(255, 0, 0, 0.7);
    }

    100% {
        box-shadow: 0 0 15px rgba(255, 165, 0, 0.7), 
                    0 0 30px rgba(255, 140, 0, 0.6), 
                    0 0 45px rgba(255, 69, 0, 0.5), 
                    0 0 60px rgba(255, 0, 0, 0.4);
    }
}
.btn-play{
    cursor: pointer;
    width: 100%;
}