.battle-area {
    background: #d0f0ff;
    border: 3px solid #333;
    padding: 20px;
    margin-top: 20px;
    border-radius: 10px;
    position: relative;
}
.battle-sprite {
    width: 96px;
    height: 96px;
    image-rendering: pixelated;
    animation: bounce 1s infinite alternate;
}
.attack-animation {
    animation: shake 0.3s;
}
@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-5px); }
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}