.Battle {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: url(/images/maps/streetBattle.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/people/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);
}

.Battle_enemy {
    top: 42px;
    right: 58px;
}

/* Animations on blinker  */
@keyframes battle-damage-blink {
    to {
        visibility: hidden;
    }
}

.battle-damage-blink {
    animation: battle-damage-blink .3s steps(2, start) infinite;
}

@keyframes battle-spin-right {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(2) }
    25% { transform: translate3d(100%, -25%, 0) rotate(45deg) scale(2) }
    100% { transform: translate3d(0, 0, 0) scale(2) }
}

.battle-spin-right {
    animation: battle-spin-right .8s;
}

@keyframes battle-spin-left {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(2) }
    25% { transform: translate3d(-100%, 25%, 0) rotate(45deg) scale(2) }
    100% { transform: translate3d(0, 0, 0) scale(2) }
}

.battle-spin-left {
    animation: battle-spin-left .8s;
}

.glob-orb {
    position: absolute;
    width: 32px;
    height: 32px;
}

@keyframes battle-glob-right {
    0% { 
        transform: translate3d(0, 0, 0) scale(.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(.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-right {
    left: 227px;
    top: 56px;
    animation: battle-glob-left 1s forwards;
}