.army-gathering {
  position: absolute;
  bottom: 22px;
  left: 22px;
  right: 22px;
}
.person {
  position: absolute;
  width: 80px;
  height: 80px;
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  transform-origin: bottom center;
}
.tavern_keeper {
  background-image: url("/roles/tavern-keeper.svg");
}
.alchemist {
  background-image: url("/roles/alchemist.svg");
}
.archer {
  background-image: url("/roles/archer.svg");
}
.cleric {
  background-image: url("/roles/cleric.svg");
}
.druid {
  background-image: url("/roles/druid.svg");
}
.dwarf {
  background-image: url("/roles/dwarf.svg");
}
.monk {
  background-image: url("/roles/monk.svg");
}
.necromancer {
  background-image: url("/roles/necromancer.svg");
}
.paladin {
  background-image: url("/roles/paladin.svg");
}
.ranger {
  background-image: url("/roles/ranger.svg");
}
.rogue {
  background-image: url("/roles/rogue.svg");
}
.scribe {
  background-image: url("/roles/scribe.svg");
}
.warrior {
  background-image: url("/roles/warrior.svg");
}
.wizard {
  background-image: url("/roles/wizard.svg");
}
.healer {
  background-image: url("/roles/healer.svg");
}
.hunter {
  background-image: url("/roles/hunter.svg");
}
.static {
  width: 110px;
  height: 110px;
  transition: all 100ms cubic-bezier(0.265, 1.4, 0.68, 1.65);
  &:not(.locked) {
    cursor: pointer;
  }
  &:hover {
    transform: scale(1.08, 1.08);
  }
  &:active {
    transform: scale(1.2, 1.2);
  }
}
.static.tavern_keeper {
  right: 130px;
  bottom: 160px;
  width: 90px;
  height: 90px;
}
.static.moloch_denier {
  left: calc(20% - 60px);
  bottom: 70px;
  background-image: url("/roles/scribe2.png");
}
.static.apprentice {
  left: calc(36% - 60px);
  background-image: url("/roles/druid2.png");
  bottom: 72px;
}
.static.anointed {
  left: calc(50% - 60px);
  bottom: 64px;
  background-image: url("/roles/ranger2.png");
}
.static.champion {
  left: calc(64% - 60px);
  bottom: 66px;
  background-image: url("/roles/warrior2.png");
}

.moloch_denier {
  filter: sepia(0.1);
}
.apprentice {
}
.anointed {
  filter: saturate(1.1);
}
.champion {
  filter: saturate(2);
}

.supply {
  position: absolute;
  bottom: -40px;
  background: rgba(0, 0, 0, 0.89);
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  user-select: none;
}