/* Custom Animations and Styles */
@keyframes shake {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    10% { transform: translateX(-10px) rotate(-5deg); }
    20% { transform: translateX(10px) rotate(5deg); }
    30% { transform: translateX(-10px) rotate(-3deg); }
    40% { transform: translateX(10px) rotate(3deg); }
    50% { transform: translateX(-5px) rotate(-2deg); }
    60% { transform: translateX(5px) rotate(2deg); }
    70% { transform: translateX(-3px) rotate(-1deg); }
    80% { transform: translateX(3px) rotate(1deg); }
    90% { transform: translateX(-1px) rotate(0deg); }
}

@keyframes float-up {
    0% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-100px) scale(1.5); opacity: 0; }
}

@keyframes blood-splatter {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}

@keyframes spin-death {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(0.8); }
    100% { transform: rotate(360deg) scale(0); }
}

@keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
    50% { box-shadow: 0 0 20px 10px rgba(255, 0, 0, 0.3); }
}

@keyframes wobble {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

@keyframes recoil {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Classes */
.shaking {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

.damage-number {
    position: absolute;
    font-weight: 900;
    font-size: 2rem;
    pointer-events: none;
    animation: float-up 1s ease-out forwards;
    text-shadow: 2px 2px 0 #000, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000;
    z-index: 50;
}

.blood-particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #ff0000 0%, #8b0000 100%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 40;
}

.crit-text {
    color: #ffd700;
    font-size: 2.5rem;
    animation: float-up 1.2s ease-out forwards;
}

.weapon-btn.selected {
    border-color: #fbbf24 !important;
    background-color: rgba(251, 191, 36, 0.2) !important;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.5);
    transform: scale(1.05);
}

.weapon-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

.weapon-btn.locked:hover {
    transform: none;
    border-color: #4b5563;
}

.dead {
    animation: spin-death 1s ease-in-out forwards;
    filter: grayscale(100%) brightness(0.3);
}

.eye-closed {
    height: 2px !important;
    border-radius: 0 !important;
    background: black !important;
    transform: scaleY(0.1);
}

/* Cursor styles based on weapon */
.cursor-fist { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><text y="20" font-size="20">👊</text></svg>') 16 16, auto; }
.cursor-bat { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><text y="20" font-size="20">🏏</text></svg>') 16 16, auto; }
.cursor-hammer { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><text y="20" font-size="20">🔨</text></svg>') 16 16, auto; }
.cursor-knife { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><text y="20" font-size="20">🔪</text></svg>') 16 16, auto; }
.cursor-chainsaw { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><text y="20" font-size="20">🪚</text></svg>') 16 16, auto; }
.cursor-pistol { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><text y="20" font-size="20">🔫</text></svg>') 16 16, auto; }
.cursor-rocket { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><text y="20" font-size="20">🚀</text></svg>') 16 16, auto; }
.cursor-nuke { cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><text y="20" font-size="20">💣</text></svg>') 16 16, auto; }

/* Hit flash effect */
.hit-flash {
    animation: pulse-red 0.3s ease-out;
}

/* Floating money animation */
.money-float {
    position: absolute;
    color: #fbbf24;
    font-weight: bold;
    font-size: 1.2rem;
    pointer-events: none;
    animation: float-up 1.5s ease-out forwards;
    text-shadow: 1px 1px 0 #000;
    z-index: 45;
}

/* Krusty facial expressions */
.scared .pupil {
    transform: scale(0.8);
    transition: all 0.1s;
}

.scared {
    transform: translateY(5px);
}

/* Particle explosion */
@keyframes explode {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

.explosion-particle {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    pointer-events: none;
    animation: explode 0.8s ease-out forwards;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .damage-number {
        font-size: 1.5rem;
    }
    .crit-text {
        font-size: 2rem;
    }
    #krusty {
        transform: scale(0.8);
    }
}

/* Custom scrollbar for weapon bar */
::-webkit-scrollbar {
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.5);
}