.troop-flow.single {
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  background: transparent;
  background-image: none;
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .58));
  transform-origin: 50% 50%;
  overflow: hidden;
  will-change: transform;
}

.troop-flow.single::before,
.troop-flow.single::after {
  content: none;
  display: none;
}

.troop-sprite-img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 400%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

.troop-sprite-img.base {
  z-index: 1;
  animation: troopUnitFrames .52s infinite;
}

.troop-sprite-img.skill {
  z-index: 2;
  opacity: .82;
  animation: troopSkillFrames .7s infinite;
}

.troop-flow.single.incoming {
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .6)) drop-shadow(0 0 9px rgba(229, 80, 67, .5));
}

.troop-flow.single.outgoing {
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .58)) drop-shadow(0 0 8px rgba(115, 207, 255, .4));
}

.troop-flow.single.support {
  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, .58)) drop-shadow(0 0 9px rgba(99, 236, 142, .5));
}

.troop-flow.single.tier-2 {
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
}

.troop-flow.single.tier-3 {
  width: 18px;
  height: 18px;
  margin-left: -9px;
  margin-top: -9px;
}

.troop-flow.single.directional {
  width: 28px;
  height: 14px;
  margin-left: -14px;
  margin-top: -7px;
}

.troop-flow.single.directional.tier-2 {
  width: 32px;
  height: 16px;
  margin-left: -16px;
  margin-top: -8px;
}

.troop-flow.single.directional.tier-3 {
  width: 36px;
  height: 18px;
  margin-left: -18px;
  margin-top: -9px;
}

.troop-flow.single.hero-unit {
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .62)) drop-shadow(0 0 8px rgba(244, 210, 96, .45));
}

.troop-flow.single.hero-unit.tier-2 {
  width: 31px;
  height: 31px;
  margin-left: -15.5px;
  margin-top: -15.5px;
}

.troop-flow.single.hero-unit.tier-3 {
  width: 34px;
  height: 34px;
  margin-left: -17px;
  margin-top: -17px;
}

.troop-flow.single.directional .troop-sprite-img.base {
  width: 200%;
  height: 800%;
  animation: troopDirectionalFrames .42s infinite;
}

.troop-flow.single.directional .troop-sprite-img.skill {
  display: none;
}

.troop-flow.single.hero-unit.directional .troop-sprite-img.base {
  width: 100%;
  height: 400%;
  animation: heroWorldFrames .56s infinite;
}

.troop-flow.single.hero-unit .troop-sprite-img.hero-strike {
  z-index: 3;
  width: 600%;
  height: 100%;
  opacity: .86;
  mix-blend-mode: screen;
  animation: heroStrikeFrames .56s infinite;
}

@keyframes troopUnitFrames {
  0%, 24.99% { transform: translateX(0); }
  25%, 49.99% { transform: translateX(-25%); }
  50%, 74.99% { transform: translateX(-50%); }
  75%, 100% { transform: translateX(-75%); }
}

@keyframes troopSkillFrames {
  0%, 24.99% { transform: translateX(0); }
  25%, 49.99% { transform: translateX(-25%); }
  50%, 74.99% { transform: translateX(-50%); }
  75%, 100% { transform: translateX(-75%); }
}

@keyframes troopDirectionalFrames {
  0%, 49.99% { transform: translate(0, var(--troop-dir-y)); }
  50%, 100% { transform: translate(-50%, var(--troop-dir-y)); }
}

@keyframes heroWorldFrames {
  0%, 24.99% { transform: translateY(0); }
  25%, 49.99% { transform: translateY(-25%); }
  50%, 74.99% { transform: translateY(-50%); }
  75%, 100% { transform: translateY(-75%); }
}

@keyframes heroStrikeFrames {
  0%, 16.66% { transform: translateX(0); }
  16.67%, 33.32% { transform: translateX(-16.666%); }
  33.33%, 49.99% { transform: translateX(-33.333%); }
  50%, 66.65% { transform: translateX(-50%); }
  66.66%, 83.32% { transform: translateX(-66.666%); }
  83.33%, 100% { transform: translateX(-83.333%); }
}