/* Ice cube visual styles */
.ice-cube-visual {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #e0f7ff 0%, #b3e5fc 50%, #81d4fa 100%);
    border-radius: 8px;
    position: relative;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.1),
        inset -2px -2px 8px rgba(0, 0, 0, 0.1),
        inset 2px 2px 8px rgba(255, 255, 255, 0.8);
    border: 2px solid #b3e5fc;
    transition: all 0.5s ease;
}

.ice-shine {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    filter: blur(8px);
}

.water-droplet {
    position: absolute;
    width: 8px;
    height: 10px;
    background: linear-gradient(to bottom, rgba(3, 169, 244, 0.8), rgba(3, 169, 244, 1));
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: none;
}

.water-droplet.active {
    display: block;
}

.d1 {
    top: 60%;
    left: 10%;
    animation: drip 2s infinite;
}

.d2 {
    top: 70%;
    right: 20%;
    animation: drip 2.5s infinite 0.5s;
}

.d3 {
    top: 65%;
    right: 10%;
    animation: drip 2.2s infinite 1s;
}

@keyframes drip {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(30px);
        opacity: 0;
    }
}

.ice-puddle {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 8px;
    background: radial-gradient(ellipse, rgba(3, 169, 244, 0.4) 0%, rgba(3, 169, 244, 0) 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}