.maze {
  position: relative;
  background-color: #343434;
  background-size: 8em 8em;
}
.maze div {
  display: flex;
}
.maze div div {
  position: relative;
  width: 1em;
  height: 1em;
}
.maze div div::after {
  position: absolute;
  left: -3px;
  top: -4px;
  text-align: center;
  text-shadow: 0 0 1px black;
  font-size: 1.2em;
  z-index: 10;
}

.maze div div.nubbin::after {
  content: "\25CB";
  #filter: drop-shadow(1px 1px 0 lime) drop-shadow(-1px -1px 0 lime)
  #drop-shadow(1px -1px 0 lime) drop-shadow(-1px 1px 0 lime);

  filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px -1px 0 black)
  #drop-shadow(1px -1px 0 black) drop-shadow(-1px 1px 0 black);


}
.maze div.nubbin:nth-of-type(3n)::after {
  /*content: "\1F344";*/
}
.maze div.nubbin:nth-of-type(5n)::after {
  /*content: "\1F33B";*/
}
.maze div.nubbin:nth-of-type(7n)::after {
  /*content: "\1F48E";*/
}
.maze div.nubbin:nth-of-type(13n)::after {
  /*content: "\1F381";*/
}
.maze.face-right div.hero::after {
  transform: scale(-1, 1);
}
.maze div div.wall:not(.invis), .maze div div.nubbin.wall:not(.invis), .maze div div.door.exit:not(.invis) {
  background-image: url('/imgs/patrol/wall4.png');
}

.maze div div.nubbin.wall::after {
  content: "";
}
.maze div div.sentinel.wall {
  background: transparent;
}
.maze div div.sentinel.wall::after {
  content: "\1F40A";
}
.maze div.sentinel.wall:nth-of-type(3n)::after {
  content: "\1F40D";
}
.maze div div.ev_nub::after {
  content: "\1F511";
}
.maze div div.npc::after {
  content: "\1F464";
}
.maze div div.skill::after {
  content: "\1F3E2";
}

.maze div div:nth-child(odd) {
  width: 1em;
}
.maze div:nth-child(odd) div {
  height: 1em;
}

.maze.finished::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  content: "Game Over";
  background: rgba(0,0,0,0.4);
  text-transform: uppercase;
  font-family: monospace;
  font-size: 5em;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.8);
  color: #fff;
  z-index: 10;
}

/* My additions */
.maze div.hero::after {
  background-size: 32px 48px;
  content: " ";
  width: 32px;
  height: 48px;
  margin-left: -8px;
  margin-top: -24px;
}
.maze_container {
  position: relative;
  display: inline-block;
  margin-top: 100px;
}

@keyframes wiggle {
  25% {  transform: rotate(1deg); }
  75% {  transform: rotate(-1deg); }
  100% {  transform: rotate(0deg); }
}
@keyframes wiggle_right {
  0% { transform: scale(-1, 1)}
  25% {  transform: scale(-1, 1) rotate(1deg); }
  75% {  transform: scale(-1, 1) rotate(-1deg); }
  100% {  transform: scale(-1, 1) rotate(0deg); }
}

.maze div.hero.move_down::after {
  animation: move_down 1s 1, wiggle 1s 1;
}
.maze div.hero.move_up::after {
  animation: move_up 1s 1, wiggle 1s 1;
}
.maze div.hero.move_right::after {
  animation: move_right 1s 1, wiggle 1s 1;
}
.maze div.hero.move_left::after {
  animation: move_left 1s 1, wiggle 1s 1;
}

.maze.face-right div.hero.move_down::after {
  animation: move_down 1s 1, wiggle_right 1s 1;
}
.maze.face-right div.hero.move_up::after {
  animation: move_up 1s 1, wiggle_right 1s 1;
}
.maze.face-right div.hero.move_right::after {
  animation: move_right 1s 1, wiggle_right 1s 1;
}
.maze.face-right div.hero.move_left::after {
  animation: move_left 1s 1, wiggle_right 1s 1;
}

@keyframes move_left {
  100% {  left:-0.85em; }
}

@keyframes move_right {
  100% {  left:0.5em; }
}

@keyframes move_up {
  100% {  top:-1em; }
}

@keyframes move_down {
  100% {  top:0.7em; }
}

@media screen and (max-width: 500px) {
  @keyframes move_left {
    100% {  left:-0.85rem; }
  }

  @keyframes move_right {
    100% {  left:0.5rem; }
  }

  @keyframes move_up {
    100% {  top:-1.5rem; }
  }

  @keyframes move_down {
    100% {  top:0.7rem; }
  }
}