.icon_wrap {
  position: relative;
}

.icon {
  display: inline-block;
  height: 64px;
  width: 64px;
  background-size: cover;
  position: relative;

  &.bomb {
    background-image: url("/assets/icons/bomb-8fa54216.png");
  }

  &.castle {
    background-image: url("/assets/icons/castle-13838bea.png");
  }

  &.elite {
    background-image: url("/assets/icons/elite-ef2765cf.png");
  }

  &.fortress {
    background-image: url("/assets/icons/fortress-83ef1cf3.png");
  }

  &.gamble {
    background-image: url("/assets/icons/gamble-c7c1374a.png");
  }

  &.ghost {
    background-image: url("/assets/icons/ghost-27d1ccef.png");
  }

  &.hidden {
    background-image: url("/assets/icons/hidden-b4c8e731.png");
  }

  &.random {
    background-image: url("/assets/icons/random-6cd89e5c.png");
  }

  &.scatter {
    background-image: url("/assets/icons/scatter-c3686866.png");
  }

  &.timed {
    background-image: url("/assets/icons/timed-7542f612.png");
  }

  &.icon_16 {
    transform: scale(0.25);
    margin: -26px -24px -26px -24px;
  }

  &.icon_24 {
    transform: scale(0.375);
    margin: -20px;
  }

  &.icon_36 {
    transform: scale(0.5625);
    margin: -14px;
  }

  &.icon_48 {
    transform: scale(0.72);
    margin: -18px;
  }
}

.fa-chain {
  color: gold;
  text-shadow: 1px 1px 2px #333;

  &.breaking {
    color: orangered;
  }
}

.size_16 {
  font-size: 16px;
  text-align: center;
  width: 16px;
  height: 16px;
}

.size_24 {
  font-size: 24px;
  text-align: center;
  width: 24px;
  height: 24px;
}

.size_36 {
  font-size: 36px;
  text-align: center;
  width: 36px;
  height: 36px;
}

.size_48 {
  font-size:48px;
  text-align: center;
  width: 48px;
  height: 48px;
}

.css_icon {
  position: relative;
  display: inline-block;
}
.css_icon::before,
.css_icon::after {
  content: "";
  position: absolute;
}

.icon_hamburger {
  width: 1.625em;
  height: .313em;
  background: #fff;
  border-radius: 2px;
}

.icon_hamburger::before, .icon_hamburger::after {
  width: 1.625em;
  height: .313em;
  background: inherit;
  border-radius: 2px;
  left: 0;
  right: 0;
}

.icon_hamburger::before {
  top: -.625em;
}

.icon_hamburger::after {
  bottom: -.625em;
}
