.Battle {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url('../images/maps/battleground.png');
    background-size: cover;
    image-rendering: pixelated;
}

.Battle_hero, .Battle_enemy {
    position: absolute;
    transform: scale(2);
    width: 32px;
    height: 32px;
    overflow: hidden;
    background: url('../images/characters/shadow.png') no-repeat no-repeat;
}
.Battle_hero img, .Battle_enemy img {
    pointer-events: none;
}

.Battle_hero {
    bottom: 57px;
    left: 1px;
}

.Battle_hero img {
    transform: translateY(-64px); /* to nudge hero spritesheet */
}

.Battle_enemy {
    top: 42px;
    right: -1px;
}

/* Animations */
@keyframes battle-damage-blink {
    to {
        visibility: hidden;
    }
}
.battle-damage-blink { /* toggle visibility on and off sequence*/
    animation: battle-damage-blink 0.3s steps(2, start) infinite;
}

@keyframes battle-spin-right {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(2)}
    25% { transform: translate3d(150px,-25%,0) rotate(45deg) scale(2)}
    100% { transform: translate3d(0,0,0) scale(2)}
}
.battle-spin-right {
    animation: battle-spin-right 0.8s;
}
@keyframes battle-spin-left {
    0% { transform: translate3d(0,0,0) rotate(0deg) scale(2)}
    25% { transform: translate3d(-150px,25%,0) rotate(45deg) scale(2)}
    100% { transform: translate3d(0,0,0) scale(2)}
}
.battle-spin-left {
    animation: battle-spin-left 0.8s;
} 

.glob-orb {
    position: absolute;
    width: 32px;
    height: 32px;
}
@keyframes battle-glob-right {
    0% { transform: translate3d(0,0,0) scale(0.5); opacity: 1;}
    50% { transform: translate3d(10px,-80px,0) scale(1); opacity: 1;}
    80% { transform: translate3d(149px,-47px,0) scale(1); opacity: 1;}
    100% { transform: translate3d(149px,-47px,0) scale(3); opacity: 0;}
}
.battle-glob-right {
    left: 70px;
    top: 104px;
    animation: battle-glob-right 1s forwards;
}
@keyframes battle-glob-left {
    0% { transform: translate3d(0,0,0) scale(0.5); opacity: 1;}
    50% { transform: translate3d(-10px,-50px,0) scale(1); opacity: 1;}
    80% { transform: translate3d(-174px,47px,0) scale(1); opacity: 1;}
    100% { transform: translate3d(-174px,47px,0) scale(3); opacity: 0;}
}
.battle-glob-left {
    left: 227px;
    top: 56px;
    animation: battle-glob-left 1s forwards;
}