.maze_container {
  position: relative;
  display: block;
  margin-left: 30vw;
}

.maze {
  position: relative;
  background-color: rgb(237, 210, 135);

  background-image: radial-gradient(circle at 0% 0%, transparent 20%, rgba(0,0,0,0.1) 50%), radial-gradient(circle at center, rgba(0,0,0,0.1) 50%, transparent 50%), radial-gradient(circle at 100% 100%, transparent 50%, rgba(0,100,0,0.1) 50%), radial-gradient(circle at 0% 100%, transparent 50%, rgba(0,0,100,0.1) 50%), radial-gradient(circle at 100% 0%, transparent 50%, rgba(100,0,0,0.1) 50%);  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.door.exit::after {
  content: "\1F6AA";
}
.maze div div.nubbin::after {
  content: "\1F33C";
}
.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 div.hero::after {
  content: "\1F6B6" !important;
}
.maze.face-right div.hero::after {
  transform: scale(-1, 1);
}
.maze div div.wall, .maze div div.nubbin.wall, .maze div div.door.exit {
  background-color: #000000;
  background-image: linear-gradient(45deg, rgba(255,255,255,.15) 45%, transparent 55%), linear-gradient(to bottom, rgba(0,0,0,0.2) 45%, transparent 55%);
  background-size: 0.5em 0.5em;
}
.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.key::after {
  content: "\1F511";
}

.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;
}

.maze_output {
  display: flex;
  margin: 0.5em auto;
}
.maze_score, .maze_message {
  font-family: fantasy;
  font-weight: bold;
  font-size: 1em;
}
.maze_score {
  flex: 1;
  white-space: nowrap;
  text-align: left;
}
.maze_score::before {
  content: "Score: ";
}
.maze_score.has-key::after {
  content: "\00a0\1F511";
}
.maze_message {
  flex: 3;
  text-align: right;
}