body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
}

canvas {
    display: block;
    cursor: crosshair;
    touch-action: manipulation;
}

.glow {
    filter: drop-shadow(0 0 10px white);
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-animation {
    animation: pulse 2s infinite ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.shake-animation {
    animation: shake 0.2s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes bounce-in {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); opacity: 1; }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.bounce-in {
    animation: bounce-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.pop-animation {
    animation: pop 0.3s ease-out;
}

@keyframes flash-red {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(255, 0, 0, 0.3); }
}

.flash-red {
    animation: flash-red 0.3s ease-in-out;
}

@keyframes fade-out-up {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-50px); opacity: 0; }
}

.animate-fade-out-up {
    animation: fade-out-up 1s ease-out forwards;
}