.grid {
  display: grid;
  grid-template-columns: repeat(12, auto);
}
.tile {
  width: 63px;
  height: 63px;
  border: 1px solid rgb(85, 85, 85);
  margin: 0;
  padding: 5px;
  background-color: rgb(71, 71, 71);
}
.overlay {
  position: absolute;
  background-color: rgba(0, 0, 0); /* fallback color */
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  z-index: 10;
  left: 0;
  top: 0;
  overflow-x: hidden;
}
.hide {
  display: none;
}

.attacker {
  background-color: rgb(119, 119, 119);
}
.defender {
  background-color: red;
}

.character_health {
  position: absolute;
  border: 1px solid rgb(85, 85, 85);
  background-color: rgb(15, 15, 15);
  color: rgb(255, 210, 210);
  right: -10px;
  top: -10px;
  padding: 2px;
  z-index: 2;
}

.hero {
  position: relative;
}
.hero .up {
  position: absolute;
  top: -26px;
  left: 28px;
  z-index: 3;
}
.hero .down {
  position: absolute;
  top: 76px;
  left: 28px;
  z-index: 3;
}
.hero .down img {
  transform: rotate(180deg);
}
.hero .left {
  position: absolute;
  top: 26px;
  left: -24px;
  z-index: 3;
}
.hero .left img {
  transform: rotate(-90deg);
}
.hero .right {
  position: absolute;
  top: 27px;
  left: 77px;
  z-index: 3;
}
.hero .right img {
  transform: rotate(90deg);
}

.monster {
  position: relative;
}

.dice_container {
  position: absolute;
  top: 30%;
  left: 45%;
  width: 200px;
  height: 90px;
  border: 4px solid rgb(85, 85, 85);
  background-color: rgb(15, 15, 15);
}
.dice {
  position: absolute;
  top: 17%;
  left: 34%;
  width: 64px;
  height: 64px;
}
.dice span {
  position: relative;
  top: -53px;
  left: 23px;
  font-size: 30px;
}
.diceanimation {
  background: transparent url("../images/diceroll.png") 0 0 no-repeat;
  animation: rolldie 500ms steps(3) infinite;
}
@keyframes rolldie {
  100% {
    background-position: -192px 0;
  }
}

.hit {
  position: absolute;
  top: -5px;
  left: 5px;
  width: 72px;
  height: 87px;
}
.hit_animation {
  background: transparent url("../images/attack.png") 0 0 no-repeat;
  animation: hit_keyframes 1000ms steps(6) infinite;
}
@keyframes hit_keyframes {
  100% {
    background-position: -432px 0;
  }
}