.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.green-kitchen {
  background-image: url(/images/maps/GreenKitchenBattle.png);
}
.Battle.dining-room {
  background-image: url(/images/maps/DiningRoomBattle.png);
}

.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: 8px;
  scale: 0.8;
}
.Battle_hero img {
  transform: translateY(-64px); /* Nudge hero spritesheet */
}
.Battle_enemy {
  top: 42px;
  right: -1px;
}

/* Animations */
@keyframes battle-damage-blink {
  to {
    visibility: hidden;
  }
}
.battle-damage-blink {
  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(155px, -30px, 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(-100%, 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;
}