/* Sound toggle styles */
.sound-toggle:hover {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.05);
}

.sound-toggle:active {
    transform: scale(0.95);
}

.sound-toggle svg {
    width: 20px;
    height: 20px;
    color: #333;
    transition: transform 0.2s ease;
}

.sound-toggle.sound-on svg {
    transform: scale(1.1);
}

/* Heart animations */
.heart {
    transition: transform 0.2s ease;
}

.heart.pulse {
    animation: heartPulse 0.4s ease-out;
}

@keyframes heartPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

/* High pixel density displays (Retina, etc) */
/* Override pixelated rendering for smoother visuals on 2x/3x displays */
@media (min-resolution: 2dppx) {
    #game-canvas {
        /* ID selector with !important - intentionally high specificity */
        /* This overrides canvas { image-rendering: pixelated } from main.css */
        /* Pixel art looks better smooth on Retina displays */
        image-rendering: auto !important;
    }
}