/* Disc Animation */
.disc-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
}

.disc-wrapper.playing .disc {
    animation: spin 3s linear infinite;
}

.disc-wrapper.playing .disc-glow {
    opacity: 1;
}

.disc {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #333 0%, #1a1a1a 50%, #333 100%);
    position: relative;
    box-shadow: var(--shadow-md);
}

.disc::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-pink) 0%, var(--primary-deep) 100%);
}

.disc::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.2);
}

.disc-glow {
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 143, 175, 0.4) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}