@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Creepster&display=swap");
* {
  box-sizing: border-box;
}

.game-form {
  background-color: #000000;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
}

.view {
  background-color: #000000;
  width: 144px;
  height: 144px;
  margin: auto;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.map {
  --repeat-x: 0;
  --repeat-y: 0;
  display: grid;
  grid-template-columns: repeat(10, 48px);
  grid-template-rows: repeat(10, 48px);
  position: absolute;
  top: 48px;
  left: 48px;
  transition: transform 1024ms ease-out;
}

.grid {
  background-image: url("https://assets.codepen.io/430361/css-maze-floor.png");
  background-size: 48px 48px;
  display: block;
  position: relative;
  pointer-events: none;
}
.grid.wall {
  background-image: url("https://assets.codepen.io/430361/css-maze-wall.png");
}
.grid.tree {
  background-image: url("https://assets.codepen.io/430361/css-maze-tree.png");
}
.grid.finish {
  background-image: url("https://assets.codepen.io/430361/css-maze-exit.png");
  pointer-events: auto;
}
.grid.barrel {
  background-image: url("https://assets.codepen.io/430361/css-maze-barrel.png");
}
.grid .object {
  background-size: 48px 48px;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 128ms ease-out;
}
.grid .object.key {
  background-image: url("https://assets.codepen.io/430361/css-maze-key.png");
  pointer-events: auto;
}
.grid .object.lock {
  background-image: url("https://assets.codepen.io/430361/css-maze-door.png");
}
.grid .object.monster {
  background-image: url("https://assets.codepen.io/430361/css-maze-monster.png");
}

.map-check {
  display: none;
}

#grid_0_0:checked ~ .view .map {
  transform: translateX(0px) translateY(0px);
}
#grid_0_0:checked ~ .view .map .grid[for=grid_1_0],
#grid_0_0:checked ~ .view .map .grid[for=grid_-1_0],
#grid_0_0:checked ~ .view .map .grid[for=grid_0_1],
#grid_0_0:checked ~ .view .map .grid[for=grid_0_-1] {
  pointer-events: auto;
}
#grid_0_0:checked ~ .view .map .grid.wall, #grid_0_0:checked ~ .view .map .grid.tree, #grid_0_0:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_0_0:checked ~ .view .map .grid [for=key_0_0] {
  opacity: 0;
  pointer-events: none;
}
#key_0_0:checked ~ .view .map .grid [data-key="0_0"] {
  display: none;
}

#lock_0_0:checked ~ .view .map .grid [for=lock_0_0] {
  opacity: 0;
  pointer-events: none;
}

#grid_0_0:checked ~ .view .character {
  animation: animate-character_0_0 1024ms step-end;
}

@keyframes animate-character_0_0 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_0_1:checked ~ .view .map {
  transform: translateX(0px) translateY(-48px);
}
#grid_0_1:checked ~ .view .map .grid[for=grid_1_1],
#grid_0_1:checked ~ .view .map .grid[for=grid_-1_1],
#grid_0_1:checked ~ .view .map .grid[for=grid_0_2],
#grid_0_1:checked ~ .view .map .grid[for=grid_0_0] {
  pointer-events: auto;
}
#grid_0_1:checked ~ .view .map .grid.wall, #grid_0_1:checked ~ .view .map .grid.tree, #grid_0_1:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_0_1:checked ~ .view .map .grid [for=key_0_1] {
  opacity: 0;
  pointer-events: none;
}
#key_0_1:checked ~ .view .map .grid [data-key="0_1"] {
  display: none;
}

#lock_0_1:checked ~ .view .map .grid [for=lock_0_1] {
  opacity: 0;
  pointer-events: none;
}

#grid_0_1:checked ~ .view .character {
  animation: animate-character_0_1 1024ms step-end;
}

@keyframes animate-character_0_1 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_0_2:checked ~ .view .map {
  transform: translateX(0px) translateY(-96px);
}
#grid_0_2:checked ~ .view .map .grid[for=grid_1_2],
#grid_0_2:checked ~ .view .map .grid[for=grid_-1_2],
#grid_0_2:checked ~ .view .map .grid[for=grid_0_3],
#grid_0_2:checked ~ .view .map .grid[for=grid_0_1] {
  pointer-events: auto;
}
#grid_0_2:checked ~ .view .map .grid.wall, #grid_0_2:checked ~ .view .map .grid.tree, #grid_0_2:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_0_2:checked ~ .view .map .grid [for=key_0_2] {
  opacity: 0;
  pointer-events: none;
}
#key_0_2:checked ~ .view .map .grid [data-key="0_2"] {
  display: none;
}

#lock_0_2:checked ~ .view .map .grid [for=lock_0_2] {
  opacity: 0;
  pointer-events: none;
}

#grid_0_2:checked ~ .view .character {
  animation: animate-character_0_2 1024ms step-end;
}

@keyframes animate-character_0_2 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_0_3:checked ~ .view .map {
  transform: translateX(0px) translateY(-144px);
}
#grid_0_3:checked ~ .view .map .grid[for=grid_1_3],
#grid_0_3:checked ~ .view .map .grid[for=grid_-1_3],
#grid_0_3:checked ~ .view .map .grid[for=grid_0_4],
#grid_0_3:checked ~ .view .map .grid[for=grid_0_2] {
  pointer-events: auto;
}
#grid_0_3:checked ~ .view .map .grid.wall, #grid_0_3:checked ~ .view .map .grid.tree, #grid_0_3:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_0_3:checked ~ .view .map .grid [for=key_0_3] {
  opacity: 0;
  pointer-events: none;
}
#key_0_3:checked ~ .view .map .grid [data-key="0_3"] {
  display: none;
}

#lock_0_3:checked ~ .view .map .grid [for=lock_0_3] {
  opacity: 0;
  pointer-events: none;
}

#grid_0_3:checked ~ .view .character {
  animation: animate-character_0_3 1024ms step-end;
}

@keyframes animate-character_0_3 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_0_4:checked ~ .view .map {
  transform: translateX(0px) translateY(-192px);
}
#grid_0_4:checked ~ .view .map .grid[for=grid_1_4],
#grid_0_4:checked ~ .view .map .grid[for=grid_-1_4],
#grid_0_4:checked ~ .view .map .grid[for=grid_0_5],
#grid_0_4:checked ~ .view .map .grid[for=grid_0_3] {
  pointer-events: auto;
}
#grid_0_4:checked ~ .view .map .grid.wall, #grid_0_4:checked ~ .view .map .grid.tree, #grid_0_4:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_0_4:checked ~ .view .map .grid [for=key_0_4] {
  opacity: 0;
  pointer-events: none;
}
#key_0_4:checked ~ .view .map .grid [data-key="0_4"] {
  display: none;
}

#lock_0_4:checked ~ .view .map .grid [for=lock_0_4] {
  opacity: 0;
  pointer-events: none;
}

#grid_0_4:checked ~ .view .character {
  animation: animate-character_0_4 1024ms step-end;
}

@keyframes animate-character_0_4 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_0_5:checked ~ .view .map {
  transform: translateX(0px) translateY(-240px);
}
#grid_0_5:checked ~ .view .map .grid[for=grid_1_5],
#grid_0_5:checked ~ .view .map .grid[for=grid_-1_5],
#grid_0_5:checked ~ .view .map .grid[for=grid_0_6],
#grid_0_5:checked ~ .view .map .grid[for=grid_0_4] {
  pointer-events: auto;
}
#grid_0_5:checked ~ .view .map .grid.wall, #grid_0_5:checked ~ .view .map .grid.tree, #grid_0_5:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_0_5:checked ~ .view .map .grid [for=key_0_5] {
  opacity: 0;
  pointer-events: none;
}
#key_0_5:checked ~ .view .map .grid [data-key="0_5"] {
  display: none;
}

#lock_0_5:checked ~ .view .map .grid [for=lock_0_5] {
  opacity: 0;
  pointer-events: none;
}

#grid_0_5:checked ~ .view .character {
  animation: animate-character_0_5 1024ms step-end;
}

@keyframes animate-character_0_5 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_0_6:checked ~ .view .map {
  transform: translateX(0px) translateY(-288px);
}
#grid_0_6:checked ~ .view .map .grid[for=grid_1_6],
#grid_0_6:checked ~ .view .map .grid[for=grid_-1_6],
#grid_0_6:checked ~ .view .map .grid[for=grid_0_7],
#grid_0_6:checked ~ .view .map .grid[for=grid_0_5] {
  pointer-events: auto;
}
#grid_0_6:checked ~ .view .map .grid.wall, #grid_0_6:checked ~ .view .map .grid.tree, #grid_0_6:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_0_6:checked ~ .view .map .grid [for=key_0_6] {
  opacity: 0;
  pointer-events: none;
}
#key_0_6:checked ~ .view .map .grid [data-key="0_6"] {
  display: none;
}

#lock_0_6:checked ~ .view .map .grid [for=lock_0_6] {
  opacity: 0;
  pointer-events: none;
}

#grid_0_6:checked ~ .view .character {
  animation: animate-character_0_6 1024ms step-end;
}

@keyframes animate-character_0_6 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_0_7:checked ~ .view .map {
  transform: translateX(0px) translateY(-336px);
}
#grid_0_7:checked ~ .view .map .grid[for=grid_1_7],
#grid_0_7:checked ~ .view .map .grid[for=grid_-1_7],
#grid_0_7:checked ~ .view .map .grid[for=grid_0_8],
#grid_0_7:checked ~ .view .map .grid[for=grid_0_6] {
  pointer-events: auto;
}
#grid_0_7:checked ~ .view .map .grid.wall, #grid_0_7:checked ~ .view .map .grid.tree, #grid_0_7:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_0_7:checked ~ .view .map .grid [for=key_0_7] {
  opacity: 0;
  pointer-events: none;
}
#key_0_7:checked ~ .view .map .grid [data-key="0_7"] {
  display: none;
}

#lock_0_7:checked ~ .view .map .grid [for=lock_0_7] {
  opacity: 0;
  pointer-events: none;
}

#grid_0_7:checked ~ .view .character {
  animation: animate-character_0_7 1024ms step-end;
}

@keyframes animate-character_0_7 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_0_8:checked ~ .view .map {
  transform: translateX(0px) translateY(-384px);
}
#grid_0_8:checked ~ .view .map .grid[for=grid_1_8],
#grid_0_8:checked ~ .view .map .grid[for=grid_-1_8],
#grid_0_8:checked ~ .view .map .grid[for=grid_0_9],
#grid_0_8:checked ~ .view .map .grid[for=grid_0_7] {
  pointer-events: auto;
}
#grid_0_8:checked ~ .view .map .grid.wall, #grid_0_8:checked ~ .view .map .grid.tree, #grid_0_8:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_0_8:checked ~ .view .map .grid [for=key_0_8] {
  opacity: 0;
  pointer-events: none;
}
#key_0_8:checked ~ .view .map .grid [data-key="0_8"] {
  display: none;
}

#lock_0_8:checked ~ .view .map .grid [for=lock_0_8] {
  opacity: 0;
  pointer-events: none;
}

#grid_0_8:checked ~ .view .character {
  animation: animate-character_0_8 1024ms step-end;
}

@keyframes animate-character_0_8 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_0_9:checked ~ .view .map {
  transform: translateX(0px) translateY(-432px);
}
#grid_0_9:checked ~ .view .map .grid[for=grid_1_9],
#grid_0_9:checked ~ .view .map .grid[for=grid_-1_9],
#grid_0_9:checked ~ .view .map .grid[for=grid_0_10],
#grid_0_9:checked ~ .view .map .grid[for=grid_0_8] {
  pointer-events: auto;
}
#grid_0_9:checked ~ .view .map .grid.wall, #grid_0_9:checked ~ .view .map .grid.tree, #grid_0_9:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_0_9:checked ~ .view .map .grid [for=key_0_9] {
  opacity: 0;
  pointer-events: none;
}
#key_0_9:checked ~ .view .map .grid [data-key="0_9"] {
  display: none;
}

#lock_0_9:checked ~ .view .map .grid [for=lock_0_9] {
  opacity: 0;
  pointer-events: none;
}

#grid_0_9:checked ~ .view .character {
  animation: animate-character_0_9 1024ms step-end;
}

@keyframes animate-character_0_9 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_1_0:checked ~ .view .map {
  transform: translateX(-48px) translateY(0px);
}
#grid_1_0:checked ~ .view .map .grid[for=grid_2_0],
#grid_1_0:checked ~ .view .map .grid[for=grid_0_0],
#grid_1_0:checked ~ .view .map .grid[for=grid_1_1],
#grid_1_0:checked ~ .view .map .grid[for=grid_1_-1] {
  pointer-events: auto;
}
#grid_1_0:checked ~ .view .map .grid.wall, #grid_1_0:checked ~ .view .map .grid.tree, #grid_1_0:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_1_0:checked ~ .view .map .grid [for=key_1_0] {
  opacity: 0;
  pointer-events: none;
}
#key_1_0:checked ~ .view .map .grid [data-key="1_0"] {
  display: none;
}

#lock_1_0:checked ~ .view .map .grid [for=lock_1_0] {
  opacity: 0;
  pointer-events: none;
}

#grid_1_0:checked ~ .view .character {
  animation: animate-character_1_0 1024ms step-end;
}

@keyframes animate-character_1_0 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_1_1:checked ~ .view .map {
  transform: translateX(-48px) translateY(-48px);
}
#grid_1_1:checked ~ .view .map .grid[for=grid_2_1],
#grid_1_1:checked ~ .view .map .grid[for=grid_0_1],
#grid_1_1:checked ~ .view .map .grid[for=grid_1_2],
#grid_1_1:checked ~ .view .map .grid[for=grid_1_0] {
  pointer-events: auto;
}
#grid_1_1:checked ~ .view .map .grid.wall, #grid_1_1:checked ~ .view .map .grid.tree, #grid_1_1:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_1_1:checked ~ .view .map .grid [for=key_1_1] {
  opacity: 0;
  pointer-events: none;
}
#key_1_1:checked ~ .view .map .grid [data-key="1_1"] {
  display: none;
}

#lock_1_1:checked ~ .view .map .grid [for=lock_1_1] {
  opacity: 0;
  pointer-events: none;
}

#grid_1_1:checked ~ .view .character {
  animation: animate-character_1_1 1024ms step-end;
}

@keyframes animate-character_1_1 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_1_2:checked ~ .view .map {
  transform: translateX(-48px) translateY(-96px);
}
#grid_1_2:checked ~ .view .map .grid[for=grid_2_2],
#grid_1_2:checked ~ .view .map .grid[for=grid_0_2],
#grid_1_2:checked ~ .view .map .grid[for=grid_1_3],
#grid_1_2:checked ~ .view .map .grid[for=grid_1_1] {
  pointer-events: auto;
}
#grid_1_2:checked ~ .view .map .grid.wall, #grid_1_2:checked ~ .view .map .grid.tree, #grid_1_2:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_1_2:checked ~ .view .map .grid [for=key_1_2] {
  opacity: 0;
  pointer-events: none;
}
#key_1_2:checked ~ .view .map .grid [data-key="1_2"] {
  display: none;
}

#lock_1_2:checked ~ .view .map .grid [for=lock_1_2] {
  opacity: 0;
  pointer-events: none;
}

#grid_1_2:checked ~ .view .character {
  animation: animate-character_1_2 1024ms step-end;
}

@keyframes animate-character_1_2 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_1_3:checked ~ .view .map {
  transform: translateX(-48px) translateY(-144px);
}
#grid_1_3:checked ~ .view .map .grid[for=grid_2_3],
#grid_1_3:checked ~ .view .map .grid[for=grid_0_3],
#grid_1_3:checked ~ .view .map .grid[for=grid_1_4],
#grid_1_3:checked ~ .view .map .grid[for=grid_1_2] {
  pointer-events: auto;
}
#grid_1_3:checked ~ .view .map .grid.wall, #grid_1_3:checked ~ .view .map .grid.tree, #grid_1_3:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_1_3:checked ~ .view .map .grid [for=key_1_3] {
  opacity: 0;
  pointer-events: none;
}
#key_1_3:checked ~ .view .map .grid [data-key="1_3"] {
  display: none;
}

#lock_1_3:checked ~ .view .map .grid [for=lock_1_3] {
  opacity: 0;
  pointer-events: none;
}

#grid_1_3:checked ~ .view .character {
  animation: animate-character_1_3 1024ms step-end;
}

@keyframes animate-character_1_3 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_1_4:checked ~ .view .map {
  transform: translateX(-48px) translateY(-192px);
}
#grid_1_4:checked ~ .view .map .grid[for=grid_2_4],
#grid_1_4:checked ~ .view .map .grid[for=grid_0_4],
#grid_1_4:checked ~ .view .map .grid[for=grid_1_5],
#grid_1_4:checked ~ .view .map .grid[for=grid_1_3] {
  pointer-events: auto;
}
#grid_1_4:checked ~ .view .map .grid.wall, #grid_1_4:checked ~ .view .map .grid.tree, #grid_1_4:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_1_4:checked ~ .view .map .grid [for=key_1_4] {
  opacity: 0;
  pointer-events: none;
}
#key_1_4:checked ~ .view .map .grid [data-key="1_4"] {
  display: none;
}

#lock_1_4:checked ~ .view .map .grid [for=lock_1_4] {
  opacity: 0;
  pointer-events: none;
}

#grid_1_4:checked ~ .view .character {
  animation: animate-character_1_4 1024ms step-end;
}

@keyframes animate-character_1_4 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_1_5:checked ~ .view .map {
  transform: translateX(-48px) translateY(-240px);
}
#grid_1_5:checked ~ .view .map .grid[for=grid_2_5],
#grid_1_5:checked ~ .view .map .grid[for=grid_0_5],
#grid_1_5:checked ~ .view .map .grid[for=grid_1_6],
#grid_1_5:checked ~ .view .map .grid[for=grid_1_4] {
  pointer-events: auto;
}
#grid_1_5:checked ~ .view .map .grid.wall, #grid_1_5:checked ~ .view .map .grid.tree, #grid_1_5:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_1_5:checked ~ .view .map .grid [for=key_1_5] {
  opacity: 0;
  pointer-events: none;
}
#key_1_5:checked ~ .view .map .grid [data-key="1_5"] {
  display: none;
}

#lock_1_5:checked ~ .view .map .grid [for=lock_1_5] {
  opacity: 0;
  pointer-events: none;
}

#grid_1_5:checked ~ .view .character {
  animation: animate-character_1_5 1024ms step-end;
}

@keyframes animate-character_1_5 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_1_6:checked ~ .view .map {
  transform: translateX(-48px) translateY(-288px);
}
#grid_1_6:checked ~ .view .map .grid[for=grid_2_6],
#grid_1_6:checked ~ .view .map .grid[for=grid_0_6],
#grid_1_6:checked ~ .view .map .grid[for=grid_1_7],
#grid_1_6:checked ~ .view .map .grid[for=grid_1_5] {
  pointer-events: auto;
}
#grid_1_6:checked ~ .view .map .grid.wall, #grid_1_6:checked ~ .view .map .grid.tree, #grid_1_6:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_1_6:checked ~ .view .map .grid [for=key_1_6] {
  opacity: 0;
  pointer-events: none;
}
#key_1_6:checked ~ .view .map .grid [data-key="1_6"] {
  display: none;
}

#lock_1_6:checked ~ .view .map .grid [for=lock_1_6] {
  opacity: 0;
  pointer-events: none;
}

#grid_1_6:checked ~ .view .character {
  animation: animate-character_1_6 1024ms step-end;
}

@keyframes animate-character_1_6 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_1_7:checked ~ .view .map {
  transform: translateX(-48px) translateY(-336px);
}
#grid_1_7:checked ~ .view .map .grid[for=grid_2_7],
#grid_1_7:checked ~ .view .map .grid[for=grid_0_7],
#grid_1_7:checked ~ .view .map .grid[for=grid_1_8],
#grid_1_7:checked ~ .view .map .grid[for=grid_1_6] {
  pointer-events: auto;
}
#grid_1_7:checked ~ .view .map .grid.wall, #grid_1_7:checked ~ .view .map .grid.tree, #grid_1_7:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_1_7:checked ~ .view .map .grid [for=key_1_7] {
  opacity: 0;
  pointer-events: none;
}
#key_1_7:checked ~ .view .map .grid [data-key="1_7"] {
  display: none;
}

#lock_1_7:checked ~ .view .map .grid [for=lock_1_7] {
  opacity: 0;
  pointer-events: none;
}

#grid_1_7:checked ~ .view .character {
  animation: animate-character_1_7 1024ms step-end;
}

@keyframes animate-character_1_7 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_1_8:checked ~ .view .map {
  transform: translateX(-48px) translateY(-384px);
}
#grid_1_8:checked ~ .view .map .grid[for=grid_2_8],
#grid_1_8:checked ~ .view .map .grid[for=grid_0_8],
#grid_1_8:checked ~ .view .map .grid[for=grid_1_9],
#grid_1_8:checked ~ .view .map .grid[for=grid_1_7] {
  pointer-events: auto;
}
#grid_1_8:checked ~ .view .map .grid.wall, #grid_1_8:checked ~ .view .map .grid.tree, #grid_1_8:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_1_8:checked ~ .view .map .grid [for=key_1_8] {
  opacity: 0;
  pointer-events: none;
}
#key_1_8:checked ~ .view .map .grid [data-key="1_8"] {
  display: none;
}

#lock_1_8:checked ~ .view .map .grid [for=lock_1_8] {
  opacity: 0;
  pointer-events: none;
}

#grid_1_8:checked ~ .view .character {
  animation: animate-character_1_8 1024ms step-end;
}

@keyframes animate-character_1_8 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_1_9:checked ~ .view .map {
  transform: translateX(-48px) translateY(-432px);
}
#grid_1_9:checked ~ .view .map .grid[for=grid_2_9],
#grid_1_9:checked ~ .view .map .grid[for=grid_0_9],
#grid_1_9:checked ~ .view .map .grid[for=grid_1_10],
#grid_1_9:checked ~ .view .map .grid[for=grid_1_8] {
  pointer-events: auto;
}
#grid_1_9:checked ~ .view .map .grid.wall, #grid_1_9:checked ~ .view .map .grid.tree, #grid_1_9:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_1_9:checked ~ .view .map .grid [for=key_1_9] {
  opacity: 0;
  pointer-events: none;
}
#key_1_9:checked ~ .view .map .grid [data-key="1_9"] {
  display: none;
}

#lock_1_9:checked ~ .view .map .grid [for=lock_1_9] {
  opacity: 0;
  pointer-events: none;
}

#grid_1_9:checked ~ .view .character {
  animation: animate-character_1_9 1024ms step-end;
}

@keyframes animate-character_1_9 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_2_0:checked ~ .view .map {
  transform: translateX(-96px) translateY(0px);
}
#grid_2_0:checked ~ .view .map .grid[for=grid_3_0],
#grid_2_0:checked ~ .view .map .grid[for=grid_1_0],
#grid_2_0:checked ~ .view .map .grid[for=grid_2_1],
#grid_2_0:checked ~ .view .map .grid[for=grid_2_-1] {
  pointer-events: auto;
}
#grid_2_0:checked ~ .view .map .grid.wall, #grid_2_0:checked ~ .view .map .grid.tree, #grid_2_0:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_2_0:checked ~ .view .map .grid [for=key_2_0] {
  opacity: 0;
  pointer-events: none;
}
#key_2_0:checked ~ .view .map .grid [data-key="2_0"] {
  display: none;
}

#lock_2_0:checked ~ .view .map .grid [for=lock_2_0] {
  opacity: 0;
  pointer-events: none;
}

#grid_2_0:checked ~ .view .character {
  animation: animate-character_2_0 1024ms step-end;
}

@keyframes animate-character_2_0 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_2_1:checked ~ .view .map {
  transform: translateX(-96px) translateY(-48px);
}
#grid_2_1:checked ~ .view .map .grid[for=grid_3_1],
#grid_2_1:checked ~ .view .map .grid[for=grid_1_1],
#grid_2_1:checked ~ .view .map .grid[for=grid_2_2],
#grid_2_1:checked ~ .view .map .grid[for=grid_2_0] {
  pointer-events: auto;
}
#grid_2_1:checked ~ .view .map .grid.wall, #grid_2_1:checked ~ .view .map .grid.tree, #grid_2_1:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_2_1:checked ~ .view .map .grid [for=key_2_1] {
  opacity: 0;
  pointer-events: none;
}
#key_2_1:checked ~ .view .map .grid [data-key="2_1"] {
  display: none;
}

#lock_2_1:checked ~ .view .map .grid [for=lock_2_1] {
  opacity: 0;
  pointer-events: none;
}

#grid_2_1:checked ~ .view .character {
  animation: animate-character_2_1 1024ms step-end;
}

@keyframes animate-character_2_1 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_2_2:checked ~ .view .map {
  transform: translateX(-96px) translateY(-96px);
}
#grid_2_2:checked ~ .view .map .grid[for=grid_3_2],
#grid_2_2:checked ~ .view .map .grid[for=grid_1_2],
#grid_2_2:checked ~ .view .map .grid[for=grid_2_3],
#grid_2_2:checked ~ .view .map .grid[for=grid_2_1] {
  pointer-events: auto;
}
#grid_2_2:checked ~ .view .map .grid.wall, #grid_2_2:checked ~ .view .map .grid.tree, #grid_2_2:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_2_2:checked ~ .view .map .grid [for=key_2_2] {
  opacity: 0;
  pointer-events: none;
}
#key_2_2:checked ~ .view .map .grid [data-key="2_2"] {
  display: none;
}

#lock_2_2:checked ~ .view .map .grid [for=lock_2_2] {
  opacity: 0;
  pointer-events: none;
}

#grid_2_2:checked ~ .view .character {
  animation: animate-character_2_2 1024ms step-end;
}

@keyframes animate-character_2_2 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_2_3:checked ~ .view .map {
  transform: translateX(-96px) translateY(-144px);
}
#grid_2_3:checked ~ .view .map .grid[for=grid_3_3],
#grid_2_3:checked ~ .view .map .grid[for=grid_1_3],
#grid_2_3:checked ~ .view .map .grid[for=grid_2_4],
#grid_2_3:checked ~ .view .map .grid[for=grid_2_2] {
  pointer-events: auto;
}
#grid_2_3:checked ~ .view .map .grid.wall, #grid_2_3:checked ~ .view .map .grid.tree, #grid_2_3:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_2_3:checked ~ .view .map .grid [for=key_2_3] {
  opacity: 0;
  pointer-events: none;
}
#key_2_3:checked ~ .view .map .grid [data-key="2_3"] {
  display: none;
}

#lock_2_3:checked ~ .view .map .grid [for=lock_2_3] {
  opacity: 0;
  pointer-events: none;
}

#grid_2_3:checked ~ .view .character {
  animation: animate-character_2_3 1024ms step-end;
}

@keyframes animate-character_2_3 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_2_4:checked ~ .view .map {
  transform: translateX(-96px) translateY(-192px);
}
#grid_2_4:checked ~ .view .map .grid[for=grid_3_4],
#grid_2_4:checked ~ .view .map .grid[for=grid_1_4],
#grid_2_4:checked ~ .view .map .grid[for=grid_2_5],
#grid_2_4:checked ~ .view .map .grid[for=grid_2_3] {
  pointer-events: auto;
}
#grid_2_4:checked ~ .view .map .grid.wall, #grid_2_4:checked ~ .view .map .grid.tree, #grid_2_4:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_2_4:checked ~ .view .map .grid [for=key_2_4] {
  opacity: 0;
  pointer-events: none;
}
#key_2_4:checked ~ .view .map .grid [data-key="2_4"] {
  display: none;
}

#lock_2_4:checked ~ .view .map .grid [for=lock_2_4] {
  opacity: 0;
  pointer-events: none;
}

#grid_2_4:checked ~ .view .character {
  animation: animate-character_2_4 1024ms step-end;
}

@keyframes animate-character_2_4 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_2_5:checked ~ .view .map {
  transform: translateX(-96px) translateY(-240px);
}
#grid_2_5:checked ~ .view .map .grid[for=grid_3_5],
#grid_2_5:checked ~ .view .map .grid[for=grid_1_5],
#grid_2_5:checked ~ .view .map .grid[for=grid_2_6],
#grid_2_5:checked ~ .view .map .grid[for=grid_2_4] {
  pointer-events: auto;
}
#grid_2_5:checked ~ .view .map .grid.wall, #grid_2_5:checked ~ .view .map .grid.tree, #grid_2_5:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_2_5:checked ~ .view .map .grid [for=key_2_5] {
  opacity: 0;
  pointer-events: none;
}
#key_2_5:checked ~ .view .map .grid [data-key="2_5"] {
  display: none;
}

#lock_2_5:checked ~ .view .map .grid [for=lock_2_5] {
  opacity: 0;
  pointer-events: none;
}

#grid_2_5:checked ~ .view .character {
  animation: animate-character_2_5 1024ms step-end;
}

@keyframes animate-character_2_5 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_2_6:checked ~ .view .map {
  transform: translateX(-96px) translateY(-288px);
}
#grid_2_6:checked ~ .view .map .grid[for=grid_3_6],
#grid_2_6:checked ~ .view .map .grid[for=grid_1_6],
#grid_2_6:checked ~ .view .map .grid[for=grid_2_7],
#grid_2_6:checked ~ .view .map .grid[for=grid_2_5] {
  pointer-events: auto;
}
#grid_2_6:checked ~ .view .map .grid.wall, #grid_2_6:checked ~ .view .map .grid.tree, #grid_2_6:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_2_6:checked ~ .view .map .grid [for=key_2_6] {
  opacity: 0;
  pointer-events: none;
}
#key_2_6:checked ~ .view .map .grid [data-key="2_6"] {
  display: none;
}

#lock_2_6:checked ~ .view .map .grid [for=lock_2_6] {
  opacity: 0;
  pointer-events: none;
}

#grid_2_6:checked ~ .view .character {
  animation: animate-character_2_6 1024ms step-end;
}

@keyframes animate-character_2_6 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_2_7:checked ~ .view .map {
  transform: translateX(-96px) translateY(-336px);
}
#grid_2_7:checked ~ .view .map .grid[for=grid_3_7],
#grid_2_7:checked ~ .view .map .grid[for=grid_1_7],
#grid_2_7:checked ~ .view .map .grid[for=grid_2_8],
#grid_2_7:checked ~ .view .map .grid[for=grid_2_6] {
  pointer-events: auto;
}
#grid_2_7:checked ~ .view .map .grid.wall, #grid_2_7:checked ~ .view .map .grid.tree, #grid_2_7:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_2_7:checked ~ .view .map .grid [for=key_2_7] {
  opacity: 0;
  pointer-events: none;
}
#key_2_7:checked ~ .view .map .grid [data-key="2_7"] {
  display: none;
}

#lock_2_7:checked ~ .view .map .grid [for=lock_2_7] {
  opacity: 0;
  pointer-events: none;
}

#grid_2_7:checked ~ .view .character {
  animation: animate-character_2_7 1024ms step-end;
}

@keyframes animate-character_2_7 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_2_8:checked ~ .view .map {
  transform: translateX(-96px) translateY(-384px);
}
#grid_2_8:checked ~ .view .map .grid[for=grid_3_8],
#grid_2_8:checked ~ .view .map .grid[for=grid_1_8],
#grid_2_8:checked ~ .view .map .grid[for=grid_2_9],
#grid_2_8:checked ~ .view .map .grid[for=grid_2_7] {
  pointer-events: auto;
}
#grid_2_8:checked ~ .view .map .grid.wall, #grid_2_8:checked ~ .view .map .grid.tree, #grid_2_8:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_2_8:checked ~ .view .map .grid [for=key_2_8] {
  opacity: 0;
  pointer-events: none;
}
#key_2_8:checked ~ .view .map .grid [data-key="2_8"] {
  display: none;
}

#lock_2_8:checked ~ .view .map .grid [for=lock_2_8] {
  opacity: 0;
  pointer-events: none;
}

#grid_2_8:checked ~ .view .character {
  animation: animate-character_2_8 1024ms step-end;
}

@keyframes animate-character_2_8 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_2_9:checked ~ .view .map {
  transform: translateX(-96px) translateY(-432px);
}
#grid_2_9:checked ~ .view .map .grid[for=grid_3_9],
#grid_2_9:checked ~ .view .map .grid[for=grid_1_9],
#grid_2_9:checked ~ .view .map .grid[for=grid_2_10],
#grid_2_9:checked ~ .view .map .grid[for=grid_2_8] {
  pointer-events: auto;
}
#grid_2_9:checked ~ .view .map .grid.wall, #grid_2_9:checked ~ .view .map .grid.tree, #grid_2_9:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_2_9:checked ~ .view .map .grid [for=key_2_9] {
  opacity: 0;
  pointer-events: none;
}
#key_2_9:checked ~ .view .map .grid [data-key="2_9"] {
  display: none;
}

#lock_2_9:checked ~ .view .map .grid [for=lock_2_9] {
  opacity: 0;
  pointer-events: none;
}

#grid_2_9:checked ~ .view .character {
  animation: animate-character_2_9 1024ms step-end;
}

@keyframes animate-character_2_9 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_3_0:checked ~ .view .map {
  transform: translateX(-144px) translateY(0px);
}
#grid_3_0:checked ~ .view .map .grid[for=grid_4_0],
#grid_3_0:checked ~ .view .map .grid[for=grid_2_0],
#grid_3_0:checked ~ .view .map .grid[for=grid_3_1],
#grid_3_0:checked ~ .view .map .grid[for=grid_3_-1] {
  pointer-events: auto;
}
#grid_3_0:checked ~ .view .map .grid.wall, #grid_3_0:checked ~ .view .map .grid.tree, #grid_3_0:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_3_0:checked ~ .view .map .grid [for=key_3_0] {
  opacity: 0;
  pointer-events: none;
}
#key_3_0:checked ~ .view .map .grid [data-key="3_0"] {
  display: none;
}

#lock_3_0:checked ~ .view .map .grid [for=lock_3_0] {
  opacity: 0;
  pointer-events: none;
}

#grid_3_0:checked ~ .view .character {
  animation: animate-character_3_0 1024ms step-end;
}

@keyframes animate-character_3_0 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_3_1:checked ~ .view .map {
  transform: translateX(-144px) translateY(-48px);
}
#grid_3_1:checked ~ .view .map .grid[for=grid_4_1],
#grid_3_1:checked ~ .view .map .grid[for=grid_2_1],
#grid_3_1:checked ~ .view .map .grid[for=grid_3_2],
#grid_3_1:checked ~ .view .map .grid[for=grid_3_0] {
  pointer-events: auto;
}
#grid_3_1:checked ~ .view .map .grid.wall, #grid_3_1:checked ~ .view .map .grid.tree, #grid_3_1:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_3_1:checked ~ .view .map .grid [for=key_3_1] {
  opacity: 0;
  pointer-events: none;
}
#key_3_1:checked ~ .view .map .grid [data-key="3_1"] {
  display: none;
}

#lock_3_1:checked ~ .view .map .grid [for=lock_3_1] {
  opacity: 0;
  pointer-events: none;
}

#grid_3_1:checked ~ .view .character {
  animation: animate-character_3_1 1024ms step-end;
}

@keyframes animate-character_3_1 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_3_2:checked ~ .view .map {
  transform: translateX(-144px) translateY(-96px);
}
#grid_3_2:checked ~ .view .map .grid[for=grid_4_2],
#grid_3_2:checked ~ .view .map .grid[for=grid_2_2],
#grid_3_2:checked ~ .view .map .grid[for=grid_3_3],
#grid_3_2:checked ~ .view .map .grid[for=grid_3_1] {
  pointer-events: auto;
}
#grid_3_2:checked ~ .view .map .grid.wall, #grid_3_2:checked ~ .view .map .grid.tree, #grid_3_2:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_3_2:checked ~ .view .map .grid [for=key_3_2] {
  opacity: 0;
  pointer-events: none;
}
#key_3_2:checked ~ .view .map .grid [data-key="3_2"] {
  display: none;
}

#lock_3_2:checked ~ .view .map .grid [for=lock_3_2] {
  opacity: 0;
  pointer-events: none;
}

#grid_3_2:checked ~ .view .character {
  animation: animate-character_3_2 1024ms step-end;
}

@keyframes animate-character_3_2 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_3_3:checked ~ .view .map {
  transform: translateX(-144px) translateY(-144px);
}
#grid_3_3:checked ~ .view .map .grid[for=grid_4_3],
#grid_3_3:checked ~ .view .map .grid[for=grid_2_3],
#grid_3_3:checked ~ .view .map .grid[for=grid_3_4],
#grid_3_3:checked ~ .view .map .grid[for=grid_3_2] {
  pointer-events: auto;
}
#grid_3_3:checked ~ .view .map .grid.wall, #grid_3_3:checked ~ .view .map .grid.tree, #grid_3_3:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_3_3:checked ~ .view .map .grid [for=key_3_3] {
  opacity: 0;
  pointer-events: none;
}
#key_3_3:checked ~ .view .map .grid [data-key="3_3"] {
  display: none;
}

#lock_3_3:checked ~ .view .map .grid [for=lock_3_3] {
  opacity: 0;
  pointer-events: none;
}

#grid_3_3:checked ~ .view .character {
  animation: animate-character_3_3 1024ms step-end;
}

@keyframes animate-character_3_3 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_3_4:checked ~ .view .map {
  transform: translateX(-144px) translateY(-192px);
}
#grid_3_4:checked ~ .view .map .grid[for=grid_4_4],
#grid_3_4:checked ~ .view .map .grid[for=grid_2_4],
#grid_3_4:checked ~ .view .map .grid[for=grid_3_5],
#grid_3_4:checked ~ .view .map .grid[for=grid_3_3] {
  pointer-events: auto;
}
#grid_3_4:checked ~ .view .map .grid.wall, #grid_3_4:checked ~ .view .map .grid.tree, #grid_3_4:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_3_4:checked ~ .view .map .grid [for=key_3_4] {
  opacity: 0;
  pointer-events: none;
}
#key_3_4:checked ~ .view .map .grid [data-key="3_4"] {
  display: none;
}

#lock_3_4:checked ~ .view .map .grid [for=lock_3_4] {
  opacity: 0;
  pointer-events: none;
}

#grid_3_4:checked ~ .view .character {
  animation: animate-character_3_4 1024ms step-end;
}

@keyframes animate-character_3_4 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_3_5:checked ~ .view .map {
  transform: translateX(-144px) translateY(-240px);
}
#grid_3_5:checked ~ .view .map .grid[for=grid_4_5],
#grid_3_5:checked ~ .view .map .grid[for=grid_2_5],
#grid_3_5:checked ~ .view .map .grid[for=grid_3_6],
#grid_3_5:checked ~ .view .map .grid[for=grid_3_4] {
  pointer-events: auto;
}
#grid_3_5:checked ~ .view .map .grid.wall, #grid_3_5:checked ~ .view .map .grid.tree, #grid_3_5:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_3_5:checked ~ .view .map .grid [for=key_3_5] {
  opacity: 0;
  pointer-events: none;
}
#key_3_5:checked ~ .view .map .grid [data-key="3_5"] {
  display: none;
}

#lock_3_5:checked ~ .view .map .grid [for=lock_3_5] {
  opacity: 0;
  pointer-events: none;
}

#grid_3_5:checked ~ .view .character {
  animation: animate-character_3_5 1024ms step-end;
}

@keyframes animate-character_3_5 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_3_6:checked ~ .view .map {
  transform: translateX(-144px) translateY(-288px);
}
#grid_3_6:checked ~ .view .map .grid[for=grid_4_6],
#grid_3_6:checked ~ .view .map .grid[for=grid_2_6],
#grid_3_6:checked ~ .view .map .grid[for=grid_3_7],
#grid_3_6:checked ~ .view .map .grid[for=grid_3_5] {
  pointer-events: auto;
}
#grid_3_6:checked ~ .view .map .grid.wall, #grid_3_6:checked ~ .view .map .grid.tree, #grid_3_6:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_3_6:checked ~ .view .map .grid [for=key_3_6] {
  opacity: 0;
  pointer-events: none;
}
#key_3_6:checked ~ .view .map .grid [data-key="3_6"] {
  display: none;
}

#lock_3_6:checked ~ .view .map .grid [for=lock_3_6] {
  opacity: 0;
  pointer-events: none;
}

#grid_3_6:checked ~ .view .character {
  animation: animate-character_3_6 1024ms step-end;
}

@keyframes animate-character_3_6 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_3_7:checked ~ .view .map {
  transform: translateX(-144px) translateY(-336px);
}
#grid_3_7:checked ~ .view .map .grid[for=grid_4_7],
#grid_3_7:checked ~ .view .map .grid[for=grid_2_7],
#grid_3_7:checked ~ .view .map .grid[for=grid_3_8],
#grid_3_7:checked ~ .view .map .grid[for=grid_3_6] {
  pointer-events: auto;
}
#grid_3_7:checked ~ .view .map .grid.wall, #grid_3_7:checked ~ .view .map .grid.tree, #grid_3_7:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_3_7:checked ~ .view .map .grid [for=key_3_7] {
  opacity: 0;
  pointer-events: none;
}
#key_3_7:checked ~ .view .map .grid [data-key="3_7"] {
  display: none;
}

#lock_3_7:checked ~ .view .map .grid [for=lock_3_7] {
  opacity: 0;
  pointer-events: none;
}

#grid_3_7:checked ~ .view .character {
  animation: animate-character_3_7 1024ms step-end;
}

@keyframes animate-character_3_7 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_3_8:checked ~ .view .map {
  transform: translateX(-144px) translateY(-384px);
}
#grid_3_8:checked ~ .view .map .grid[for=grid_4_8],
#grid_3_8:checked ~ .view .map .grid[for=grid_2_8],
#grid_3_8:checked ~ .view .map .grid[for=grid_3_9],
#grid_3_8:checked ~ .view .map .grid[for=grid_3_7] {
  pointer-events: auto;
}
#grid_3_8:checked ~ .view .map .grid.wall, #grid_3_8:checked ~ .view .map .grid.tree, #grid_3_8:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_3_8:checked ~ .view .map .grid [for=key_3_8] {
  opacity: 0;
  pointer-events: none;
}
#key_3_8:checked ~ .view .map .grid [data-key="3_8"] {
  display: none;
}

#lock_3_8:checked ~ .view .map .grid [for=lock_3_8] {
  opacity: 0;
  pointer-events: none;
}

#grid_3_8:checked ~ .view .character {
  animation: animate-character_3_8 1024ms step-end;
}

@keyframes animate-character_3_8 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_3_9:checked ~ .view .map {
  transform: translateX(-144px) translateY(-432px);
}
#grid_3_9:checked ~ .view .map .grid[for=grid_4_9],
#grid_3_9:checked ~ .view .map .grid[for=grid_2_9],
#grid_3_9:checked ~ .view .map .grid[for=grid_3_10],
#grid_3_9:checked ~ .view .map .grid[for=grid_3_8] {
  pointer-events: auto;
}
#grid_3_9:checked ~ .view .map .grid.wall, #grid_3_9:checked ~ .view .map .grid.tree, #grid_3_9:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_3_9:checked ~ .view .map .grid [for=key_3_9] {
  opacity: 0;
  pointer-events: none;
}
#key_3_9:checked ~ .view .map .grid [data-key="3_9"] {
  display: none;
}

#lock_3_9:checked ~ .view .map .grid [for=lock_3_9] {
  opacity: 0;
  pointer-events: none;
}

#grid_3_9:checked ~ .view .character {
  animation: animate-character_3_9 1024ms step-end;
}

@keyframes animate-character_3_9 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_4_0:checked ~ .view .map {
  transform: translateX(-192px) translateY(0px);
}
#grid_4_0:checked ~ .view .map .grid[for=grid_5_0],
#grid_4_0:checked ~ .view .map .grid[for=grid_3_0],
#grid_4_0:checked ~ .view .map .grid[for=grid_4_1],
#grid_4_0:checked ~ .view .map .grid[for=grid_4_-1] {
  pointer-events: auto;
}
#grid_4_0:checked ~ .view .map .grid.wall, #grid_4_0:checked ~ .view .map .grid.tree, #grid_4_0:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_4_0:checked ~ .view .map .grid [for=key_4_0] {
  opacity: 0;
  pointer-events: none;
}
#key_4_0:checked ~ .view .map .grid [data-key="4_0"] {
  display: none;
}

#lock_4_0:checked ~ .view .map .grid [for=lock_4_0] {
  opacity: 0;
  pointer-events: none;
}

#grid_4_0:checked ~ .view .character {
  animation: animate-character_4_0 1024ms step-end;
}

@keyframes animate-character_4_0 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_4_1:checked ~ .view .map {
  transform: translateX(-192px) translateY(-48px);
}
#grid_4_1:checked ~ .view .map .grid[for=grid_5_1],
#grid_4_1:checked ~ .view .map .grid[for=grid_3_1],
#grid_4_1:checked ~ .view .map .grid[for=grid_4_2],
#grid_4_1:checked ~ .view .map .grid[for=grid_4_0] {
  pointer-events: auto;
}
#grid_4_1:checked ~ .view .map .grid.wall, #grid_4_1:checked ~ .view .map .grid.tree, #grid_4_1:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_4_1:checked ~ .view .map .grid [for=key_4_1] {
  opacity: 0;
  pointer-events: none;
}
#key_4_1:checked ~ .view .map .grid [data-key="4_1"] {
  display: none;
}

#lock_4_1:checked ~ .view .map .grid [for=lock_4_1] {
  opacity: 0;
  pointer-events: none;
}

#grid_4_1:checked ~ .view .character {
  animation: animate-character_4_1 1024ms step-end;
}

@keyframes animate-character_4_1 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_4_2:checked ~ .view .map {
  transform: translateX(-192px) translateY(-96px);
}
#grid_4_2:checked ~ .view .map .grid[for=grid_5_2],
#grid_4_2:checked ~ .view .map .grid[for=grid_3_2],
#grid_4_2:checked ~ .view .map .grid[for=grid_4_3],
#grid_4_2:checked ~ .view .map .grid[for=grid_4_1] {
  pointer-events: auto;
}
#grid_4_2:checked ~ .view .map .grid.wall, #grid_4_2:checked ~ .view .map .grid.tree, #grid_4_2:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_4_2:checked ~ .view .map .grid [for=key_4_2] {
  opacity: 0;
  pointer-events: none;
}
#key_4_2:checked ~ .view .map .grid [data-key="4_2"] {
  display: none;
}

#lock_4_2:checked ~ .view .map .grid [for=lock_4_2] {
  opacity: 0;
  pointer-events: none;
}

#grid_4_2:checked ~ .view .character {
  animation: animate-character_4_2 1024ms step-end;
}

@keyframes animate-character_4_2 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_4_3:checked ~ .view .map {
  transform: translateX(-192px) translateY(-144px);
}
#grid_4_3:checked ~ .view .map .grid[for=grid_5_3],
#grid_4_3:checked ~ .view .map .grid[for=grid_3_3],
#grid_4_3:checked ~ .view .map .grid[for=grid_4_4],
#grid_4_3:checked ~ .view .map .grid[for=grid_4_2] {
  pointer-events: auto;
}
#grid_4_3:checked ~ .view .map .grid.wall, #grid_4_3:checked ~ .view .map .grid.tree, #grid_4_3:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_4_3:checked ~ .view .map .grid [for=key_4_3] {
  opacity: 0;
  pointer-events: none;
}
#key_4_3:checked ~ .view .map .grid [data-key="4_3"] {
  display: none;
}

#lock_4_3:checked ~ .view .map .grid [for=lock_4_3] {
  opacity: 0;
  pointer-events: none;
}

#grid_4_3:checked ~ .view .character {
  animation: animate-character_4_3 1024ms step-end;
}

@keyframes animate-character_4_3 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_4_4:checked ~ .view .map {
  transform: translateX(-192px) translateY(-192px);
}
#grid_4_4:checked ~ .view .map .grid[for=grid_5_4],
#grid_4_4:checked ~ .view .map .grid[for=grid_3_4],
#grid_4_4:checked ~ .view .map .grid[for=grid_4_5],
#grid_4_4:checked ~ .view .map .grid[for=grid_4_3] {
  pointer-events: auto;
}
#grid_4_4:checked ~ .view .map .grid.wall, #grid_4_4:checked ~ .view .map .grid.tree, #grid_4_4:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_4_4:checked ~ .view .map .grid [for=key_4_4] {
  opacity: 0;
  pointer-events: none;
}
#key_4_4:checked ~ .view .map .grid [data-key="4_4"] {
  display: none;
}

#lock_4_4:checked ~ .view .map .grid [for=lock_4_4] {
  opacity: 0;
  pointer-events: none;
}

#grid_4_4:checked ~ .view .character {
  animation: animate-character_4_4 1024ms step-end;
}

@keyframes animate-character_4_4 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_4_5:checked ~ .view .map {
  transform: translateX(-192px) translateY(-240px);
}
#grid_4_5:checked ~ .view .map .grid[for=grid_5_5],
#grid_4_5:checked ~ .view .map .grid[for=grid_3_5],
#grid_4_5:checked ~ .view .map .grid[for=grid_4_6],
#grid_4_5:checked ~ .view .map .grid[for=grid_4_4] {
  pointer-events: auto;
}
#grid_4_5:checked ~ .view .map .grid.wall, #grid_4_5:checked ~ .view .map .grid.tree, #grid_4_5:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_4_5:checked ~ .view .map .grid [for=key_4_5] {
  opacity: 0;
  pointer-events: none;
}
#key_4_5:checked ~ .view .map .grid [data-key="4_5"] {
  display: none;
}

#lock_4_5:checked ~ .view .map .grid [for=lock_4_5] {
  opacity: 0;
  pointer-events: none;
}

#grid_4_5:checked ~ .view .character {
  animation: animate-character_4_5 1024ms step-end;
}

@keyframes animate-character_4_5 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_4_6:checked ~ .view .map {
  transform: translateX(-192px) translateY(-288px);
}
#grid_4_6:checked ~ .view .map .grid[for=grid_5_6],
#grid_4_6:checked ~ .view .map .grid[for=grid_3_6],
#grid_4_6:checked ~ .view .map .grid[for=grid_4_7],
#grid_4_6:checked ~ .view .map .grid[for=grid_4_5] {
  pointer-events: auto;
}
#grid_4_6:checked ~ .view .map .grid.wall, #grid_4_6:checked ~ .view .map .grid.tree, #grid_4_6:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_4_6:checked ~ .view .map .grid [for=key_4_6] {
  opacity: 0;
  pointer-events: none;
}
#key_4_6:checked ~ .view .map .grid [data-key="4_6"] {
  display: none;
}

#lock_4_6:checked ~ .view .map .grid [for=lock_4_6] {
  opacity: 0;
  pointer-events: none;
}

#grid_4_6:checked ~ .view .character {
  animation: animate-character_4_6 1024ms step-end;
}

@keyframes animate-character_4_6 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_4_7:checked ~ .view .map {
  transform: translateX(-192px) translateY(-336px);
}
#grid_4_7:checked ~ .view .map .grid[for=grid_5_7],
#grid_4_7:checked ~ .view .map .grid[for=grid_3_7],
#grid_4_7:checked ~ .view .map .grid[for=grid_4_8],
#grid_4_7:checked ~ .view .map .grid[for=grid_4_6] {
  pointer-events: auto;
}
#grid_4_7:checked ~ .view .map .grid.wall, #grid_4_7:checked ~ .view .map .grid.tree, #grid_4_7:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_4_7:checked ~ .view .map .grid [for=key_4_7] {
  opacity: 0;
  pointer-events: none;
}
#key_4_7:checked ~ .view .map .grid [data-key="4_7"] {
  display: none;
}

#lock_4_7:checked ~ .view .map .grid [for=lock_4_7] {
  opacity: 0;
  pointer-events: none;
}

#grid_4_7:checked ~ .view .character {
  animation: animate-character_4_7 1024ms step-end;
}

@keyframes animate-character_4_7 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_4_8:checked ~ .view .map {
  transform: translateX(-192px) translateY(-384px);
}
#grid_4_8:checked ~ .view .map .grid[for=grid_5_8],
#grid_4_8:checked ~ .view .map .grid[for=grid_3_8],
#grid_4_8:checked ~ .view .map .grid[for=grid_4_9],
#grid_4_8:checked ~ .view .map .grid[for=grid_4_7] {
  pointer-events: auto;
}
#grid_4_8:checked ~ .view .map .grid.wall, #grid_4_8:checked ~ .view .map .grid.tree, #grid_4_8:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_4_8:checked ~ .view .map .grid [for=key_4_8] {
  opacity: 0;
  pointer-events: none;
}
#key_4_8:checked ~ .view .map .grid [data-key="4_8"] {
  display: none;
}

#lock_4_8:checked ~ .view .map .grid [for=lock_4_8] {
  opacity: 0;
  pointer-events: none;
}

#grid_4_8:checked ~ .view .character {
  animation: animate-character_4_8 1024ms step-end;
}

@keyframes animate-character_4_8 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_4_9:checked ~ .view .map {
  transform: translateX(-192px) translateY(-432px);
}
#grid_4_9:checked ~ .view .map .grid[for=grid_5_9],
#grid_4_9:checked ~ .view .map .grid[for=grid_3_9],
#grid_4_9:checked ~ .view .map .grid[for=grid_4_10],
#grid_4_9:checked ~ .view .map .grid[for=grid_4_8] {
  pointer-events: auto;
}
#grid_4_9:checked ~ .view .map .grid.wall, #grid_4_9:checked ~ .view .map .grid.tree, #grid_4_9:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_4_9:checked ~ .view .map .grid [for=key_4_9] {
  opacity: 0;
  pointer-events: none;
}
#key_4_9:checked ~ .view .map .grid [data-key="4_9"] {
  display: none;
}

#lock_4_9:checked ~ .view .map .grid [for=lock_4_9] {
  opacity: 0;
  pointer-events: none;
}

#grid_4_9:checked ~ .view .character {
  animation: animate-character_4_9 1024ms step-end;
}

@keyframes animate-character_4_9 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_5_0:checked ~ .view .map {
  transform: translateX(-240px) translateY(0px);
}
#grid_5_0:checked ~ .view .map .grid[for=grid_6_0],
#grid_5_0:checked ~ .view .map .grid[for=grid_4_0],
#grid_5_0:checked ~ .view .map .grid[for=grid_5_1],
#grid_5_0:checked ~ .view .map .grid[for=grid_5_-1] {
  pointer-events: auto;
}
#grid_5_0:checked ~ .view .map .grid.wall, #grid_5_0:checked ~ .view .map .grid.tree, #grid_5_0:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_5_0:checked ~ .view .map .grid [for=key_5_0] {
  opacity: 0;
  pointer-events: none;
}
#key_5_0:checked ~ .view .map .grid [data-key="5_0"] {
  display: none;
}

#lock_5_0:checked ~ .view .map .grid [for=lock_5_0] {
  opacity: 0;
  pointer-events: none;
}

#grid_5_0:checked ~ .view .character {
  animation: animate-character_5_0 1024ms step-end;
}

@keyframes animate-character_5_0 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_5_1:checked ~ .view .map {
  transform: translateX(-240px) translateY(-48px);
}
#grid_5_1:checked ~ .view .map .grid[for=grid_6_1],
#grid_5_1:checked ~ .view .map .grid[for=grid_4_1],
#grid_5_1:checked ~ .view .map .grid[for=grid_5_2],
#grid_5_1:checked ~ .view .map .grid[for=grid_5_0] {
  pointer-events: auto;
}
#grid_5_1:checked ~ .view .map .grid.wall, #grid_5_1:checked ~ .view .map .grid.tree, #grid_5_1:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_5_1:checked ~ .view .map .grid [for=key_5_1] {
  opacity: 0;
  pointer-events: none;
}
#key_5_1:checked ~ .view .map .grid [data-key="5_1"] {
  display: none;
}

#lock_5_1:checked ~ .view .map .grid [for=lock_5_1] {
  opacity: 0;
  pointer-events: none;
}

#grid_5_1:checked ~ .view .character {
  animation: animate-character_5_1 1024ms step-end;
}

@keyframes animate-character_5_1 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_5_2:checked ~ .view .map {
  transform: translateX(-240px) translateY(-96px);
}
#grid_5_2:checked ~ .view .map .grid[for=grid_6_2],
#grid_5_2:checked ~ .view .map .grid[for=grid_4_2],
#grid_5_2:checked ~ .view .map .grid[for=grid_5_3],
#grid_5_2:checked ~ .view .map .grid[for=grid_5_1] {
  pointer-events: auto;
}
#grid_5_2:checked ~ .view .map .grid.wall, #grid_5_2:checked ~ .view .map .grid.tree, #grid_5_2:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_5_2:checked ~ .view .map .grid [for=key_5_2] {
  opacity: 0;
  pointer-events: none;
}
#key_5_2:checked ~ .view .map .grid [data-key="5_2"] {
  display: none;
}

#lock_5_2:checked ~ .view .map .grid [for=lock_5_2] {
  opacity: 0;
  pointer-events: none;
}

#grid_5_2:checked ~ .view .character {
  animation: animate-character_5_2 1024ms step-end;
}

@keyframes animate-character_5_2 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_5_3:checked ~ .view .map {
  transform: translateX(-240px) translateY(-144px);
}
#grid_5_3:checked ~ .view .map .grid[for=grid_6_3],
#grid_5_3:checked ~ .view .map .grid[for=grid_4_3],
#grid_5_3:checked ~ .view .map .grid[for=grid_5_4],
#grid_5_3:checked ~ .view .map .grid[for=grid_5_2] {
  pointer-events: auto;
}
#grid_5_3:checked ~ .view .map .grid.wall, #grid_5_3:checked ~ .view .map .grid.tree, #grid_5_3:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_5_3:checked ~ .view .map .grid [for=key_5_3] {
  opacity: 0;
  pointer-events: none;
}
#key_5_3:checked ~ .view .map .grid [data-key="5_3"] {
  display: none;
}

#lock_5_3:checked ~ .view .map .grid [for=lock_5_3] {
  opacity: 0;
  pointer-events: none;
}

#grid_5_3:checked ~ .view .character {
  animation: animate-character_5_3 1024ms step-end;
}

@keyframes animate-character_5_3 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_5_4:checked ~ .view .map {
  transform: translateX(-240px) translateY(-192px);
}
#grid_5_4:checked ~ .view .map .grid[for=grid_6_4],
#grid_5_4:checked ~ .view .map .grid[for=grid_4_4],
#grid_5_4:checked ~ .view .map .grid[for=grid_5_5],
#grid_5_4:checked ~ .view .map .grid[for=grid_5_3] {
  pointer-events: auto;
}
#grid_5_4:checked ~ .view .map .grid.wall, #grid_5_4:checked ~ .view .map .grid.tree, #grid_5_4:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_5_4:checked ~ .view .map .grid [for=key_5_4] {
  opacity: 0;
  pointer-events: none;
}
#key_5_4:checked ~ .view .map .grid [data-key="5_4"] {
  display: none;
}

#lock_5_4:checked ~ .view .map .grid [for=lock_5_4] {
  opacity: 0;
  pointer-events: none;
}

#grid_5_4:checked ~ .view .character {
  animation: animate-character_5_4 1024ms step-end;
}

@keyframes animate-character_5_4 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_5_5:checked ~ .view .map {
  transform: translateX(-240px) translateY(-240px);
}
#grid_5_5:checked ~ .view .map .grid[for=grid_6_5],
#grid_5_5:checked ~ .view .map .grid[for=grid_4_5],
#grid_5_5:checked ~ .view .map .grid[for=grid_5_6],
#grid_5_5:checked ~ .view .map .grid[for=grid_5_4] {
  pointer-events: auto;
}
#grid_5_5:checked ~ .view .map .grid.wall, #grid_5_5:checked ~ .view .map .grid.tree, #grid_5_5:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_5_5:checked ~ .view .map .grid [for=key_5_5] {
  opacity: 0;
  pointer-events: none;
}
#key_5_5:checked ~ .view .map .grid [data-key="5_5"] {
  display: none;
}

#lock_5_5:checked ~ .view .map .grid [for=lock_5_5] {
  opacity: 0;
  pointer-events: none;
}

#grid_5_5:checked ~ .view .character {
  animation: animate-character_5_5 1024ms step-end;
}

@keyframes animate-character_5_5 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_5_6:checked ~ .view .map {
  transform: translateX(-240px) translateY(-288px);
}
#grid_5_6:checked ~ .view .map .grid[for=grid_6_6],
#grid_5_6:checked ~ .view .map .grid[for=grid_4_6],
#grid_5_6:checked ~ .view .map .grid[for=grid_5_7],
#grid_5_6:checked ~ .view .map .grid[for=grid_5_5] {
  pointer-events: auto;
}
#grid_5_6:checked ~ .view .map .grid.wall, #grid_5_6:checked ~ .view .map .grid.tree, #grid_5_6:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_5_6:checked ~ .view .map .grid [for=key_5_6] {
  opacity: 0;
  pointer-events: none;
}
#key_5_6:checked ~ .view .map .grid [data-key="5_6"] {
  display: none;
}

#lock_5_6:checked ~ .view .map .grid [for=lock_5_6] {
  opacity: 0;
  pointer-events: none;
}

#grid_5_6:checked ~ .view .character {
  animation: animate-character_5_6 1024ms step-end;
}

@keyframes animate-character_5_6 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_5_7:checked ~ .view .map {
  transform: translateX(-240px) translateY(-336px);
}
#grid_5_7:checked ~ .view .map .grid[for=grid_6_7],
#grid_5_7:checked ~ .view .map .grid[for=grid_4_7],
#grid_5_7:checked ~ .view .map .grid[for=grid_5_8],
#grid_5_7:checked ~ .view .map .grid[for=grid_5_6] {
  pointer-events: auto;
}
#grid_5_7:checked ~ .view .map .grid.wall, #grid_5_7:checked ~ .view .map .grid.tree, #grid_5_7:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_5_7:checked ~ .view .map .grid [for=key_5_7] {
  opacity: 0;
  pointer-events: none;
}
#key_5_7:checked ~ .view .map .grid [data-key="5_7"] {
  display: none;
}

#lock_5_7:checked ~ .view .map .grid [for=lock_5_7] {
  opacity: 0;
  pointer-events: none;
}

#grid_5_7:checked ~ .view .character {
  animation: animate-character_5_7 1024ms step-end;
}

@keyframes animate-character_5_7 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_5_8:checked ~ .view .map {
  transform: translateX(-240px) translateY(-384px);
}
#grid_5_8:checked ~ .view .map .grid[for=grid_6_8],
#grid_5_8:checked ~ .view .map .grid[for=grid_4_8],
#grid_5_8:checked ~ .view .map .grid[for=grid_5_9],
#grid_5_8:checked ~ .view .map .grid[for=grid_5_7] {
  pointer-events: auto;
}
#grid_5_8:checked ~ .view .map .grid.wall, #grid_5_8:checked ~ .view .map .grid.tree, #grid_5_8:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_5_8:checked ~ .view .map .grid [for=key_5_8] {
  opacity: 0;
  pointer-events: none;
}
#key_5_8:checked ~ .view .map .grid [data-key="5_8"] {
  display: none;
}

#lock_5_8:checked ~ .view .map .grid [for=lock_5_8] {
  opacity: 0;
  pointer-events: none;
}

#grid_5_8:checked ~ .view .character {
  animation: animate-character_5_8 1024ms step-end;
}

@keyframes animate-character_5_8 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_5_9:checked ~ .view .map {
  transform: translateX(-240px) translateY(-432px);
}
#grid_5_9:checked ~ .view .map .grid[for=grid_6_9],
#grid_5_9:checked ~ .view .map .grid[for=grid_4_9],
#grid_5_9:checked ~ .view .map .grid[for=grid_5_10],
#grid_5_9:checked ~ .view .map .grid[for=grid_5_8] {
  pointer-events: auto;
}
#grid_5_9:checked ~ .view .map .grid.wall, #grid_5_9:checked ~ .view .map .grid.tree, #grid_5_9:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_5_9:checked ~ .view .map .grid [for=key_5_9] {
  opacity: 0;
  pointer-events: none;
}
#key_5_9:checked ~ .view .map .grid [data-key="5_9"] {
  display: none;
}

#lock_5_9:checked ~ .view .map .grid [for=lock_5_9] {
  opacity: 0;
  pointer-events: none;
}

#grid_5_9:checked ~ .view .character {
  animation: animate-character_5_9 1024ms step-end;
}

@keyframes animate-character_5_9 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_6_0:checked ~ .view .map {
  transform: translateX(-288px) translateY(0px);
}
#grid_6_0:checked ~ .view .map .grid[for=grid_7_0],
#grid_6_0:checked ~ .view .map .grid[for=grid_5_0],
#grid_6_0:checked ~ .view .map .grid[for=grid_6_1],
#grid_6_0:checked ~ .view .map .grid[for=grid_6_-1] {
  pointer-events: auto;
}
#grid_6_0:checked ~ .view .map .grid.wall, #grid_6_0:checked ~ .view .map .grid.tree, #grid_6_0:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_6_0:checked ~ .view .map .grid [for=key_6_0] {
  opacity: 0;
  pointer-events: none;
}
#key_6_0:checked ~ .view .map .grid [data-key="6_0"] {
  display: none;
}

#lock_6_0:checked ~ .view .map .grid [for=lock_6_0] {
  opacity: 0;
  pointer-events: none;
}

#grid_6_0:checked ~ .view .character {
  animation: animate-character_6_0 1024ms step-end;
}

@keyframes animate-character_6_0 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_6_1:checked ~ .view .map {
  transform: translateX(-288px) translateY(-48px);
}
#grid_6_1:checked ~ .view .map .grid[for=grid_7_1],
#grid_6_1:checked ~ .view .map .grid[for=grid_5_1],
#grid_6_1:checked ~ .view .map .grid[for=grid_6_2],
#grid_6_1:checked ~ .view .map .grid[for=grid_6_0] {
  pointer-events: auto;
}
#grid_6_1:checked ~ .view .map .grid.wall, #grid_6_1:checked ~ .view .map .grid.tree, #grid_6_1:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_6_1:checked ~ .view .map .grid [for=key_6_1] {
  opacity: 0;
  pointer-events: none;
}
#key_6_1:checked ~ .view .map .grid [data-key="6_1"] {
  display: none;
}

#lock_6_1:checked ~ .view .map .grid [for=lock_6_1] {
  opacity: 0;
  pointer-events: none;
}

#grid_6_1:checked ~ .view .character {
  animation: animate-character_6_1 1024ms step-end;
}

@keyframes animate-character_6_1 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_6_2:checked ~ .view .map {
  transform: translateX(-288px) translateY(-96px);
}
#grid_6_2:checked ~ .view .map .grid[for=grid_7_2],
#grid_6_2:checked ~ .view .map .grid[for=grid_5_2],
#grid_6_2:checked ~ .view .map .grid[for=grid_6_3],
#grid_6_2:checked ~ .view .map .grid[for=grid_6_1] {
  pointer-events: auto;
}
#grid_6_2:checked ~ .view .map .grid.wall, #grid_6_2:checked ~ .view .map .grid.tree, #grid_6_2:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_6_2:checked ~ .view .map .grid [for=key_6_2] {
  opacity: 0;
  pointer-events: none;
}
#key_6_2:checked ~ .view .map .grid [data-key="6_2"] {
  display: none;
}

#lock_6_2:checked ~ .view .map .grid [for=lock_6_2] {
  opacity: 0;
  pointer-events: none;
}

#grid_6_2:checked ~ .view .character {
  animation: animate-character_6_2 1024ms step-end;
}

@keyframes animate-character_6_2 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_6_3:checked ~ .view .map {
  transform: translateX(-288px) translateY(-144px);
}
#grid_6_3:checked ~ .view .map .grid[for=grid_7_3],
#grid_6_3:checked ~ .view .map .grid[for=grid_5_3],
#grid_6_3:checked ~ .view .map .grid[for=grid_6_4],
#grid_6_3:checked ~ .view .map .grid[for=grid_6_2] {
  pointer-events: auto;
}
#grid_6_3:checked ~ .view .map .grid.wall, #grid_6_3:checked ~ .view .map .grid.tree, #grid_6_3:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_6_3:checked ~ .view .map .grid [for=key_6_3] {
  opacity: 0;
  pointer-events: none;
}
#key_6_3:checked ~ .view .map .grid [data-key="6_3"] {
  display: none;
}

#lock_6_3:checked ~ .view .map .grid [for=lock_6_3] {
  opacity: 0;
  pointer-events: none;
}

#grid_6_3:checked ~ .view .character {
  animation: animate-character_6_3 1024ms step-end;
}

@keyframes animate-character_6_3 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_6_4:checked ~ .view .map {
  transform: translateX(-288px) translateY(-192px);
}
#grid_6_4:checked ~ .view .map .grid[for=grid_7_4],
#grid_6_4:checked ~ .view .map .grid[for=grid_5_4],
#grid_6_4:checked ~ .view .map .grid[for=grid_6_5],
#grid_6_4:checked ~ .view .map .grid[for=grid_6_3] {
  pointer-events: auto;
}
#grid_6_4:checked ~ .view .map .grid.wall, #grid_6_4:checked ~ .view .map .grid.tree, #grid_6_4:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_6_4:checked ~ .view .map .grid [for=key_6_4] {
  opacity: 0;
  pointer-events: none;
}
#key_6_4:checked ~ .view .map .grid [data-key="6_4"] {
  display: none;
}

#lock_6_4:checked ~ .view .map .grid [for=lock_6_4] {
  opacity: 0;
  pointer-events: none;
}

#grid_6_4:checked ~ .view .character {
  animation: animate-character_6_4 1024ms step-end;
}

@keyframes animate-character_6_4 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_6_5:checked ~ .view .map {
  transform: translateX(-288px) translateY(-240px);
}
#grid_6_5:checked ~ .view .map .grid[for=grid_7_5],
#grid_6_5:checked ~ .view .map .grid[for=grid_5_5],
#grid_6_5:checked ~ .view .map .grid[for=grid_6_6],
#grid_6_5:checked ~ .view .map .grid[for=grid_6_4] {
  pointer-events: auto;
}
#grid_6_5:checked ~ .view .map .grid.wall, #grid_6_5:checked ~ .view .map .grid.tree, #grid_6_5:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_6_5:checked ~ .view .map .grid [for=key_6_5] {
  opacity: 0;
  pointer-events: none;
}
#key_6_5:checked ~ .view .map .grid [data-key="6_5"] {
  display: none;
}

#lock_6_5:checked ~ .view .map .grid [for=lock_6_5] {
  opacity: 0;
  pointer-events: none;
}

#grid_6_5:checked ~ .view .character {
  animation: animate-character_6_5 1024ms step-end;
}

@keyframes animate-character_6_5 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_6_6:checked ~ .view .map {
  transform: translateX(-288px) translateY(-288px);
}
#grid_6_6:checked ~ .view .map .grid[for=grid_7_6],
#grid_6_6:checked ~ .view .map .grid[for=grid_5_6],
#grid_6_6:checked ~ .view .map .grid[for=grid_6_7],
#grid_6_6:checked ~ .view .map .grid[for=grid_6_5] {
  pointer-events: auto;
}
#grid_6_6:checked ~ .view .map .grid.wall, #grid_6_6:checked ~ .view .map .grid.tree, #grid_6_6:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_6_6:checked ~ .view .map .grid [for=key_6_6] {
  opacity: 0;
  pointer-events: none;
}
#key_6_6:checked ~ .view .map .grid [data-key="6_6"] {
  display: none;
}

#lock_6_6:checked ~ .view .map .grid [for=lock_6_6] {
  opacity: 0;
  pointer-events: none;
}

#grid_6_6:checked ~ .view .character {
  animation: animate-character_6_6 1024ms step-end;
}

@keyframes animate-character_6_6 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_6_7:checked ~ .view .map {
  transform: translateX(-288px) translateY(-336px);
}
#grid_6_7:checked ~ .view .map .grid[for=grid_7_7],
#grid_6_7:checked ~ .view .map .grid[for=grid_5_7],
#grid_6_7:checked ~ .view .map .grid[for=grid_6_8],
#grid_6_7:checked ~ .view .map .grid[for=grid_6_6] {
  pointer-events: auto;
}
#grid_6_7:checked ~ .view .map .grid.wall, #grid_6_7:checked ~ .view .map .grid.tree, #grid_6_7:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_6_7:checked ~ .view .map .grid [for=key_6_7] {
  opacity: 0;
  pointer-events: none;
}
#key_6_7:checked ~ .view .map .grid [data-key="6_7"] {
  display: none;
}

#lock_6_7:checked ~ .view .map .grid [for=lock_6_7] {
  opacity: 0;
  pointer-events: none;
}

#grid_6_7:checked ~ .view .character {
  animation: animate-character_6_7 1024ms step-end;
}

@keyframes animate-character_6_7 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_6_8:checked ~ .view .map {
  transform: translateX(-288px) translateY(-384px);
}
#grid_6_8:checked ~ .view .map .grid[for=grid_7_8],
#grid_6_8:checked ~ .view .map .grid[for=grid_5_8],
#grid_6_8:checked ~ .view .map .grid[for=grid_6_9],
#grid_6_8:checked ~ .view .map .grid[for=grid_6_7] {
  pointer-events: auto;
}
#grid_6_8:checked ~ .view .map .grid.wall, #grid_6_8:checked ~ .view .map .grid.tree, #grid_6_8:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_6_8:checked ~ .view .map .grid [for=key_6_8] {
  opacity: 0;
  pointer-events: none;
}
#key_6_8:checked ~ .view .map .grid [data-key="6_8"] {
  display: none;
}

#lock_6_8:checked ~ .view .map .grid [for=lock_6_8] {
  opacity: 0;
  pointer-events: none;
}

#grid_6_8:checked ~ .view .character {
  animation: animate-character_6_8 1024ms step-end;
}

@keyframes animate-character_6_8 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_6_9:checked ~ .view .map {
  transform: translateX(-288px) translateY(-432px);
}
#grid_6_9:checked ~ .view .map .grid[for=grid_7_9],
#grid_6_9:checked ~ .view .map .grid[for=grid_5_9],
#grid_6_9:checked ~ .view .map .grid[for=grid_6_10],
#grid_6_9:checked ~ .view .map .grid[for=grid_6_8] {
  pointer-events: auto;
}
#grid_6_9:checked ~ .view .map .grid.wall, #grid_6_9:checked ~ .view .map .grid.tree, #grid_6_9:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_6_9:checked ~ .view .map .grid [for=key_6_9] {
  opacity: 0;
  pointer-events: none;
}
#key_6_9:checked ~ .view .map .grid [data-key="6_9"] {
  display: none;
}

#lock_6_9:checked ~ .view .map .grid [for=lock_6_9] {
  opacity: 0;
  pointer-events: none;
}

#grid_6_9:checked ~ .view .character {
  animation: animate-character_6_9 1024ms step-end;
}

@keyframes animate-character_6_9 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_7_0:checked ~ .view .map {
  transform: translateX(-336px) translateY(0px);
}
#grid_7_0:checked ~ .view .map .grid[for=grid_8_0],
#grid_7_0:checked ~ .view .map .grid[for=grid_6_0],
#grid_7_0:checked ~ .view .map .grid[for=grid_7_1],
#grid_7_0:checked ~ .view .map .grid[for=grid_7_-1] {
  pointer-events: auto;
}
#grid_7_0:checked ~ .view .map .grid.wall, #grid_7_0:checked ~ .view .map .grid.tree, #grid_7_0:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_7_0:checked ~ .view .map .grid [for=key_7_0] {
  opacity: 0;
  pointer-events: none;
}
#key_7_0:checked ~ .view .map .grid [data-key="7_0"] {
  display: none;
}

#lock_7_0:checked ~ .view .map .grid [for=lock_7_0] {
  opacity: 0;
  pointer-events: none;
}

#grid_7_0:checked ~ .view .character {
  animation: animate-character_7_0 1024ms step-end;
}

@keyframes animate-character_7_0 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_7_1:checked ~ .view .map {
  transform: translateX(-336px) translateY(-48px);
}
#grid_7_1:checked ~ .view .map .grid[for=grid_8_1],
#grid_7_1:checked ~ .view .map .grid[for=grid_6_1],
#grid_7_1:checked ~ .view .map .grid[for=grid_7_2],
#grid_7_1:checked ~ .view .map .grid[for=grid_7_0] {
  pointer-events: auto;
}
#grid_7_1:checked ~ .view .map .grid.wall, #grid_7_1:checked ~ .view .map .grid.tree, #grid_7_1:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_7_1:checked ~ .view .map .grid [for=key_7_1] {
  opacity: 0;
  pointer-events: none;
}
#key_7_1:checked ~ .view .map .grid [data-key="7_1"] {
  display: none;
}

#lock_7_1:checked ~ .view .map .grid [for=lock_7_1] {
  opacity: 0;
  pointer-events: none;
}

#grid_7_1:checked ~ .view .character {
  animation: animate-character_7_1 1024ms step-end;
}

@keyframes animate-character_7_1 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_7_2:checked ~ .view .map {
  transform: translateX(-336px) translateY(-96px);
}
#grid_7_2:checked ~ .view .map .grid[for=grid_8_2],
#grid_7_2:checked ~ .view .map .grid[for=grid_6_2],
#grid_7_2:checked ~ .view .map .grid[for=grid_7_3],
#grid_7_2:checked ~ .view .map .grid[for=grid_7_1] {
  pointer-events: auto;
}
#grid_7_2:checked ~ .view .map .grid.wall, #grid_7_2:checked ~ .view .map .grid.tree, #grid_7_2:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_7_2:checked ~ .view .map .grid [for=key_7_2] {
  opacity: 0;
  pointer-events: none;
}
#key_7_2:checked ~ .view .map .grid [data-key="7_2"] {
  display: none;
}

#lock_7_2:checked ~ .view .map .grid [for=lock_7_2] {
  opacity: 0;
  pointer-events: none;
}

#grid_7_2:checked ~ .view .character {
  animation: animate-character_7_2 1024ms step-end;
}

@keyframes animate-character_7_2 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_7_3:checked ~ .view .map {
  transform: translateX(-336px) translateY(-144px);
}
#grid_7_3:checked ~ .view .map .grid[for=grid_8_3],
#grid_7_3:checked ~ .view .map .grid[for=grid_6_3],
#grid_7_3:checked ~ .view .map .grid[for=grid_7_4],
#grid_7_3:checked ~ .view .map .grid[for=grid_7_2] {
  pointer-events: auto;
}
#grid_7_3:checked ~ .view .map .grid.wall, #grid_7_3:checked ~ .view .map .grid.tree, #grid_7_3:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_7_3:checked ~ .view .map .grid [for=key_7_3] {
  opacity: 0;
  pointer-events: none;
}
#key_7_3:checked ~ .view .map .grid [data-key="7_3"] {
  display: none;
}

#lock_7_3:checked ~ .view .map .grid [for=lock_7_3] {
  opacity: 0;
  pointer-events: none;
}

#grid_7_3:checked ~ .view .character {
  animation: animate-character_7_3 1024ms step-end;
}

@keyframes animate-character_7_3 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_7_4:checked ~ .view .map {
  transform: translateX(-336px) translateY(-192px);
}
#grid_7_4:checked ~ .view .map .grid[for=grid_8_4],
#grid_7_4:checked ~ .view .map .grid[for=grid_6_4],
#grid_7_4:checked ~ .view .map .grid[for=grid_7_5],
#grid_7_4:checked ~ .view .map .grid[for=grid_7_3] {
  pointer-events: auto;
}
#grid_7_4:checked ~ .view .map .grid.wall, #grid_7_4:checked ~ .view .map .grid.tree, #grid_7_4:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_7_4:checked ~ .view .map .grid [for=key_7_4] {
  opacity: 0;
  pointer-events: none;
}
#key_7_4:checked ~ .view .map .grid [data-key="7_4"] {
  display: none;
}

#lock_7_4:checked ~ .view .map .grid [for=lock_7_4] {
  opacity: 0;
  pointer-events: none;
}

#grid_7_4:checked ~ .view .character {
  animation: animate-character_7_4 1024ms step-end;
}

@keyframes animate-character_7_4 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_7_5:checked ~ .view .map {
  transform: translateX(-336px) translateY(-240px);
}
#grid_7_5:checked ~ .view .map .grid[for=grid_8_5],
#grid_7_5:checked ~ .view .map .grid[for=grid_6_5],
#grid_7_5:checked ~ .view .map .grid[for=grid_7_6],
#grid_7_5:checked ~ .view .map .grid[for=grid_7_4] {
  pointer-events: auto;
}
#grid_7_5:checked ~ .view .map .grid.wall, #grid_7_5:checked ~ .view .map .grid.tree, #grid_7_5:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_7_5:checked ~ .view .map .grid [for=key_7_5] {
  opacity: 0;
  pointer-events: none;
}
#key_7_5:checked ~ .view .map .grid [data-key="7_5"] {
  display: none;
}

#lock_7_5:checked ~ .view .map .grid [for=lock_7_5] {
  opacity: 0;
  pointer-events: none;
}

#grid_7_5:checked ~ .view .character {
  animation: animate-character_7_5 1024ms step-end;
}

@keyframes animate-character_7_5 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_7_6:checked ~ .view .map {
  transform: translateX(-336px) translateY(-288px);
}
#grid_7_6:checked ~ .view .map .grid[for=grid_8_6],
#grid_7_6:checked ~ .view .map .grid[for=grid_6_6],
#grid_7_6:checked ~ .view .map .grid[for=grid_7_7],
#grid_7_6:checked ~ .view .map .grid[for=grid_7_5] {
  pointer-events: auto;
}
#grid_7_6:checked ~ .view .map .grid.wall, #grid_7_6:checked ~ .view .map .grid.tree, #grid_7_6:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_7_6:checked ~ .view .map .grid [for=key_7_6] {
  opacity: 0;
  pointer-events: none;
}
#key_7_6:checked ~ .view .map .grid [data-key="7_6"] {
  display: none;
}

#lock_7_6:checked ~ .view .map .grid [for=lock_7_6] {
  opacity: 0;
  pointer-events: none;
}

#grid_7_6:checked ~ .view .character {
  animation: animate-character_7_6 1024ms step-end;
}

@keyframes animate-character_7_6 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_7_7:checked ~ .view .map {
  transform: translateX(-336px) translateY(-336px);
}
#grid_7_7:checked ~ .view .map .grid[for=grid_8_7],
#grid_7_7:checked ~ .view .map .grid[for=grid_6_7],
#grid_7_7:checked ~ .view .map .grid[for=grid_7_8],
#grid_7_7:checked ~ .view .map .grid[for=grid_7_6] {
  pointer-events: auto;
}
#grid_7_7:checked ~ .view .map .grid.wall, #grid_7_7:checked ~ .view .map .grid.tree, #grid_7_7:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_7_7:checked ~ .view .map .grid [for=key_7_7] {
  opacity: 0;
  pointer-events: none;
}
#key_7_7:checked ~ .view .map .grid [data-key="7_7"] {
  display: none;
}

#lock_7_7:checked ~ .view .map .grid [for=lock_7_7] {
  opacity: 0;
  pointer-events: none;
}

#grid_7_7:checked ~ .view .character {
  animation: animate-character_7_7 1024ms step-end;
}

@keyframes animate-character_7_7 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_7_8:checked ~ .view .map {
  transform: translateX(-336px) translateY(-384px);
}
#grid_7_8:checked ~ .view .map .grid[for=grid_8_8],
#grid_7_8:checked ~ .view .map .grid[for=grid_6_8],
#grid_7_8:checked ~ .view .map .grid[for=grid_7_9],
#grid_7_8:checked ~ .view .map .grid[for=grid_7_7] {
  pointer-events: auto;
}
#grid_7_8:checked ~ .view .map .grid.wall, #grid_7_8:checked ~ .view .map .grid.tree, #grid_7_8:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_7_8:checked ~ .view .map .grid [for=key_7_8] {
  opacity: 0;
  pointer-events: none;
}
#key_7_8:checked ~ .view .map .grid [data-key="7_8"] {
  display: none;
}

#lock_7_8:checked ~ .view .map .grid [for=lock_7_8] {
  opacity: 0;
  pointer-events: none;
}

#grid_7_8:checked ~ .view .character {
  animation: animate-character_7_8 1024ms step-end;
}

@keyframes animate-character_7_8 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_7_9:checked ~ .view .map {
  transform: translateX(-336px) translateY(-432px);
}
#grid_7_9:checked ~ .view .map .grid[for=grid_8_9],
#grid_7_9:checked ~ .view .map .grid[for=grid_6_9],
#grid_7_9:checked ~ .view .map .grid[for=grid_7_10],
#grid_7_9:checked ~ .view .map .grid[for=grid_7_8] {
  pointer-events: auto;
}
#grid_7_9:checked ~ .view .map .grid.wall, #grid_7_9:checked ~ .view .map .grid.tree, #grid_7_9:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_7_9:checked ~ .view .map .grid [for=key_7_9] {
  opacity: 0;
  pointer-events: none;
}
#key_7_9:checked ~ .view .map .grid [data-key="7_9"] {
  display: none;
}

#lock_7_9:checked ~ .view .map .grid [for=lock_7_9] {
  opacity: 0;
  pointer-events: none;
}

#grid_7_9:checked ~ .view .character {
  animation: animate-character_7_9 1024ms step-end;
}

@keyframes animate-character_7_9 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_8_0:checked ~ .view .map {
  transform: translateX(-384px) translateY(0px);
}
#grid_8_0:checked ~ .view .map .grid[for=grid_9_0],
#grid_8_0:checked ~ .view .map .grid[for=grid_7_0],
#grid_8_0:checked ~ .view .map .grid[for=grid_8_1],
#grid_8_0:checked ~ .view .map .grid[for=grid_8_-1] {
  pointer-events: auto;
}
#grid_8_0:checked ~ .view .map .grid.wall, #grid_8_0:checked ~ .view .map .grid.tree, #grid_8_0:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_8_0:checked ~ .view .map .grid [for=key_8_0] {
  opacity: 0;
  pointer-events: none;
}
#key_8_0:checked ~ .view .map .grid [data-key="8_0"] {
  display: none;
}

#lock_8_0:checked ~ .view .map .grid [for=lock_8_0] {
  opacity: 0;
  pointer-events: none;
}

#grid_8_0:checked ~ .view .character {
  animation: animate-character_8_0 1024ms step-end;
}

@keyframes animate-character_8_0 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_8_1:checked ~ .view .map {
  transform: translateX(-384px) translateY(-48px);
}
#grid_8_1:checked ~ .view .map .grid[for=grid_9_1],
#grid_8_1:checked ~ .view .map .grid[for=grid_7_1],
#grid_8_1:checked ~ .view .map .grid[for=grid_8_2],
#grid_8_1:checked ~ .view .map .grid[for=grid_8_0] {
  pointer-events: auto;
}
#grid_8_1:checked ~ .view .map .grid.wall, #grid_8_1:checked ~ .view .map .grid.tree, #grid_8_1:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_8_1:checked ~ .view .map .grid [for=key_8_1] {
  opacity: 0;
  pointer-events: none;
}
#key_8_1:checked ~ .view .map .grid [data-key="8_1"] {
  display: none;
}

#lock_8_1:checked ~ .view .map .grid [for=lock_8_1] {
  opacity: 0;
  pointer-events: none;
}

#grid_8_1:checked ~ .view .character {
  animation: animate-character_8_1 1024ms step-end;
}

@keyframes animate-character_8_1 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_8_2:checked ~ .view .map {
  transform: translateX(-384px) translateY(-96px);
}
#grid_8_2:checked ~ .view .map .grid[for=grid_9_2],
#grid_8_2:checked ~ .view .map .grid[for=grid_7_2],
#grid_8_2:checked ~ .view .map .grid[for=grid_8_3],
#grid_8_2:checked ~ .view .map .grid[for=grid_8_1] {
  pointer-events: auto;
}
#grid_8_2:checked ~ .view .map .grid.wall, #grid_8_2:checked ~ .view .map .grid.tree, #grid_8_2:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_8_2:checked ~ .view .map .grid [for=key_8_2] {
  opacity: 0;
  pointer-events: none;
}
#key_8_2:checked ~ .view .map .grid [data-key="8_2"] {
  display: none;
}

#lock_8_2:checked ~ .view .map .grid [for=lock_8_2] {
  opacity: 0;
  pointer-events: none;
}

#grid_8_2:checked ~ .view .character {
  animation: animate-character_8_2 1024ms step-end;
}

@keyframes animate-character_8_2 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_8_3:checked ~ .view .map {
  transform: translateX(-384px) translateY(-144px);
}
#grid_8_3:checked ~ .view .map .grid[for=grid_9_3],
#grid_8_3:checked ~ .view .map .grid[for=grid_7_3],
#grid_8_3:checked ~ .view .map .grid[for=grid_8_4],
#grid_8_3:checked ~ .view .map .grid[for=grid_8_2] {
  pointer-events: auto;
}
#grid_8_3:checked ~ .view .map .grid.wall, #grid_8_3:checked ~ .view .map .grid.tree, #grid_8_3:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_8_3:checked ~ .view .map .grid [for=key_8_3] {
  opacity: 0;
  pointer-events: none;
}
#key_8_3:checked ~ .view .map .grid [data-key="8_3"] {
  display: none;
}

#lock_8_3:checked ~ .view .map .grid [for=lock_8_3] {
  opacity: 0;
  pointer-events: none;
}

#grid_8_3:checked ~ .view .character {
  animation: animate-character_8_3 1024ms step-end;
}

@keyframes animate-character_8_3 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_8_4:checked ~ .view .map {
  transform: translateX(-384px) translateY(-192px);
}
#grid_8_4:checked ~ .view .map .grid[for=grid_9_4],
#grid_8_4:checked ~ .view .map .grid[for=grid_7_4],
#grid_8_4:checked ~ .view .map .grid[for=grid_8_5],
#grid_8_4:checked ~ .view .map .grid[for=grid_8_3] {
  pointer-events: auto;
}
#grid_8_4:checked ~ .view .map .grid.wall, #grid_8_4:checked ~ .view .map .grid.tree, #grid_8_4:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_8_4:checked ~ .view .map .grid [for=key_8_4] {
  opacity: 0;
  pointer-events: none;
}
#key_8_4:checked ~ .view .map .grid [data-key="8_4"] {
  display: none;
}

#lock_8_4:checked ~ .view .map .grid [for=lock_8_4] {
  opacity: 0;
  pointer-events: none;
}

#grid_8_4:checked ~ .view .character {
  animation: animate-character_8_4 1024ms step-end;
}

@keyframes animate-character_8_4 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_8_5:checked ~ .view .map {
  transform: translateX(-384px) translateY(-240px);
}
#grid_8_5:checked ~ .view .map .grid[for=grid_9_5],
#grid_8_5:checked ~ .view .map .grid[for=grid_7_5],
#grid_8_5:checked ~ .view .map .grid[for=grid_8_6],
#grid_8_5:checked ~ .view .map .grid[for=grid_8_4] {
  pointer-events: auto;
}
#grid_8_5:checked ~ .view .map .grid.wall, #grid_8_5:checked ~ .view .map .grid.tree, #grid_8_5:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_8_5:checked ~ .view .map .grid [for=key_8_5] {
  opacity: 0;
  pointer-events: none;
}
#key_8_5:checked ~ .view .map .grid [data-key="8_5"] {
  display: none;
}

#lock_8_5:checked ~ .view .map .grid [for=lock_8_5] {
  opacity: 0;
  pointer-events: none;
}

#grid_8_5:checked ~ .view .character {
  animation: animate-character_8_5 1024ms step-end;
}

@keyframes animate-character_8_5 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_8_6:checked ~ .view .map {
  transform: translateX(-384px) translateY(-288px);
}
#grid_8_6:checked ~ .view .map .grid[for=grid_9_6],
#grid_8_6:checked ~ .view .map .grid[for=grid_7_6],
#grid_8_6:checked ~ .view .map .grid[for=grid_8_7],
#grid_8_6:checked ~ .view .map .grid[for=grid_8_5] {
  pointer-events: auto;
}
#grid_8_6:checked ~ .view .map .grid.wall, #grid_8_6:checked ~ .view .map .grid.tree, #grid_8_6:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_8_6:checked ~ .view .map .grid [for=key_8_6] {
  opacity: 0;
  pointer-events: none;
}
#key_8_6:checked ~ .view .map .grid [data-key="8_6"] {
  display: none;
}

#lock_8_6:checked ~ .view .map .grid [for=lock_8_6] {
  opacity: 0;
  pointer-events: none;
}

#grid_8_6:checked ~ .view .character {
  animation: animate-character_8_6 1024ms step-end;
}

@keyframes animate-character_8_6 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_8_7:checked ~ .view .map {
  transform: translateX(-384px) translateY(-336px);
}
#grid_8_7:checked ~ .view .map .grid[for=grid_9_7],
#grid_8_7:checked ~ .view .map .grid[for=grid_7_7],
#grid_8_7:checked ~ .view .map .grid[for=grid_8_8],
#grid_8_7:checked ~ .view .map .grid[for=grid_8_6] {
  pointer-events: auto;
}
#grid_8_7:checked ~ .view .map .grid.wall, #grid_8_7:checked ~ .view .map .grid.tree, #grid_8_7:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_8_7:checked ~ .view .map .grid [for=key_8_7] {
  opacity: 0;
  pointer-events: none;
}
#key_8_7:checked ~ .view .map .grid [data-key="8_7"] {
  display: none;
}

#lock_8_7:checked ~ .view .map .grid [for=lock_8_7] {
  opacity: 0;
  pointer-events: none;
}

#grid_8_7:checked ~ .view .character {
  animation: animate-character_8_7 1024ms step-end;
}

@keyframes animate-character_8_7 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_8_8:checked ~ .view .map {
  transform: translateX(-384px) translateY(-384px);
}
#grid_8_8:checked ~ .view .map .grid[for=grid_9_8],
#grid_8_8:checked ~ .view .map .grid[for=grid_7_8],
#grid_8_8:checked ~ .view .map .grid[for=grid_8_9],
#grid_8_8:checked ~ .view .map .grid[for=grid_8_7] {
  pointer-events: auto;
}
#grid_8_8:checked ~ .view .map .grid.wall, #grid_8_8:checked ~ .view .map .grid.tree, #grid_8_8:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_8_8:checked ~ .view .map .grid [for=key_8_8] {
  opacity: 0;
  pointer-events: none;
}
#key_8_8:checked ~ .view .map .grid [data-key="8_8"] {
  display: none;
}

#lock_8_8:checked ~ .view .map .grid [for=lock_8_8] {
  opacity: 0;
  pointer-events: none;
}

#grid_8_8:checked ~ .view .character {
  animation: animate-character_8_8 1024ms step-end;
}

@keyframes animate-character_8_8 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_8_9:checked ~ .view .map {
  transform: translateX(-384px) translateY(-432px);
}
#grid_8_9:checked ~ .view .map .grid[for=grid_9_9],
#grid_8_9:checked ~ .view .map .grid[for=grid_7_9],
#grid_8_9:checked ~ .view .map .grid[for=grid_8_10],
#grid_8_9:checked ~ .view .map .grid[for=grid_8_8] {
  pointer-events: auto;
}
#grid_8_9:checked ~ .view .map .grid.wall, #grid_8_9:checked ~ .view .map .grid.tree, #grid_8_9:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_8_9:checked ~ .view .map .grid [for=key_8_9] {
  opacity: 0;
  pointer-events: none;
}
#key_8_9:checked ~ .view .map .grid [data-key="8_9"] {
  display: none;
}

#lock_8_9:checked ~ .view .map .grid [for=lock_8_9] {
  opacity: 0;
  pointer-events: none;
}

#grid_8_9:checked ~ .view .character {
  animation: animate-character_8_9 1024ms step-end;
}

@keyframes animate-character_8_9 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_9_0:checked ~ .view .map {
  transform: translateX(-432px) translateY(0px);
}
#grid_9_0:checked ~ .view .map .grid[for=grid_10_0],
#grid_9_0:checked ~ .view .map .grid[for=grid_8_0],
#grid_9_0:checked ~ .view .map .grid[for=grid_9_1],
#grid_9_0:checked ~ .view .map .grid[for=grid_9_-1] {
  pointer-events: auto;
}
#grid_9_0:checked ~ .view .map .grid.wall, #grid_9_0:checked ~ .view .map .grid.tree, #grid_9_0:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_9_0:checked ~ .view .map .grid [for=key_9_0] {
  opacity: 0;
  pointer-events: none;
}
#key_9_0:checked ~ .view .map .grid [data-key="9_0"] {
  display: none;
}

#lock_9_0:checked ~ .view .map .grid [for=lock_9_0] {
  opacity: 0;
  pointer-events: none;
}

#grid_9_0:checked ~ .view .character {
  animation: animate-character_9_0 1024ms step-end;
}

@keyframes animate-character_9_0 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_9_1:checked ~ .view .map {
  transform: translateX(-432px) translateY(-48px);
}
#grid_9_1:checked ~ .view .map .grid[for=grid_10_1],
#grid_9_1:checked ~ .view .map .grid[for=grid_8_1],
#grid_9_1:checked ~ .view .map .grid[for=grid_9_2],
#grid_9_1:checked ~ .view .map .grid[for=grid_9_0] {
  pointer-events: auto;
}
#grid_9_1:checked ~ .view .map .grid.wall, #grid_9_1:checked ~ .view .map .grid.tree, #grid_9_1:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_9_1:checked ~ .view .map .grid [for=key_9_1] {
  opacity: 0;
  pointer-events: none;
}
#key_9_1:checked ~ .view .map .grid [data-key="9_1"] {
  display: none;
}

#lock_9_1:checked ~ .view .map .grid [for=lock_9_1] {
  opacity: 0;
  pointer-events: none;
}

#grid_9_1:checked ~ .view .character {
  animation: animate-character_9_1 1024ms step-end;
}

@keyframes animate-character_9_1 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_9_2:checked ~ .view .map {
  transform: translateX(-432px) translateY(-96px);
}
#grid_9_2:checked ~ .view .map .grid[for=grid_10_2],
#grid_9_2:checked ~ .view .map .grid[for=grid_8_2],
#grid_9_2:checked ~ .view .map .grid[for=grid_9_3],
#grid_9_2:checked ~ .view .map .grid[for=grid_9_1] {
  pointer-events: auto;
}
#grid_9_2:checked ~ .view .map .grid.wall, #grid_9_2:checked ~ .view .map .grid.tree, #grid_9_2:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_9_2:checked ~ .view .map .grid [for=key_9_2] {
  opacity: 0;
  pointer-events: none;
}
#key_9_2:checked ~ .view .map .grid [data-key="9_2"] {
  display: none;
}

#lock_9_2:checked ~ .view .map .grid [for=lock_9_2] {
  opacity: 0;
  pointer-events: none;
}

#grid_9_2:checked ~ .view .character {
  animation: animate-character_9_2 1024ms step-end;
}

@keyframes animate-character_9_2 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_9_3:checked ~ .view .map {
  transform: translateX(-432px) translateY(-144px);
}
#grid_9_3:checked ~ .view .map .grid[for=grid_10_3],
#grid_9_3:checked ~ .view .map .grid[for=grid_8_3],
#grid_9_3:checked ~ .view .map .grid[for=grid_9_4],
#grid_9_3:checked ~ .view .map .grid[for=grid_9_2] {
  pointer-events: auto;
}
#grid_9_3:checked ~ .view .map .grid.wall, #grid_9_3:checked ~ .view .map .grid.tree, #grid_9_3:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_9_3:checked ~ .view .map .grid [for=key_9_3] {
  opacity: 0;
  pointer-events: none;
}
#key_9_3:checked ~ .view .map .grid [data-key="9_3"] {
  display: none;
}

#lock_9_3:checked ~ .view .map .grid [for=lock_9_3] {
  opacity: 0;
  pointer-events: none;
}

#grid_9_3:checked ~ .view .character {
  animation: animate-character_9_3 1024ms step-end;
}

@keyframes animate-character_9_3 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_9_4:checked ~ .view .map {
  transform: translateX(-432px) translateY(-192px);
}
#grid_9_4:checked ~ .view .map .grid[for=grid_10_4],
#grid_9_4:checked ~ .view .map .grid[for=grid_8_4],
#grid_9_4:checked ~ .view .map .grid[for=grid_9_5],
#grid_9_4:checked ~ .view .map .grid[for=grid_9_3] {
  pointer-events: auto;
}
#grid_9_4:checked ~ .view .map .grid.wall, #grid_9_4:checked ~ .view .map .grid.tree, #grid_9_4:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_9_4:checked ~ .view .map .grid [for=key_9_4] {
  opacity: 0;
  pointer-events: none;
}
#key_9_4:checked ~ .view .map .grid [data-key="9_4"] {
  display: none;
}

#lock_9_4:checked ~ .view .map .grid [for=lock_9_4] {
  opacity: 0;
  pointer-events: none;
}

#grid_9_4:checked ~ .view .character {
  animation: animate-character_9_4 1024ms step-end;
}

@keyframes animate-character_9_4 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_9_5:checked ~ .view .map {
  transform: translateX(-432px) translateY(-240px);
}
#grid_9_5:checked ~ .view .map .grid[for=grid_10_5],
#grid_9_5:checked ~ .view .map .grid[for=grid_8_5],
#grid_9_5:checked ~ .view .map .grid[for=grid_9_6],
#grid_9_5:checked ~ .view .map .grid[for=grid_9_4] {
  pointer-events: auto;
}
#grid_9_5:checked ~ .view .map .grid.wall, #grid_9_5:checked ~ .view .map .grid.tree, #grid_9_5:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_9_5:checked ~ .view .map .grid [for=key_9_5] {
  opacity: 0;
  pointer-events: none;
}
#key_9_5:checked ~ .view .map .grid [data-key="9_5"] {
  display: none;
}

#lock_9_5:checked ~ .view .map .grid [for=lock_9_5] {
  opacity: 0;
  pointer-events: none;
}

#grid_9_5:checked ~ .view .character {
  animation: animate-character_9_5 1024ms step-end;
}

@keyframes animate-character_9_5 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_9_6:checked ~ .view .map {
  transform: translateX(-432px) translateY(-288px);
}
#grid_9_6:checked ~ .view .map .grid[for=grid_10_6],
#grid_9_6:checked ~ .view .map .grid[for=grid_8_6],
#grid_9_6:checked ~ .view .map .grid[for=grid_9_7],
#grid_9_6:checked ~ .view .map .grid[for=grid_9_5] {
  pointer-events: auto;
}
#grid_9_6:checked ~ .view .map .grid.wall, #grid_9_6:checked ~ .view .map .grid.tree, #grid_9_6:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_9_6:checked ~ .view .map .grid [for=key_9_6] {
  opacity: 0;
  pointer-events: none;
}
#key_9_6:checked ~ .view .map .grid [data-key="9_6"] {
  display: none;
}

#lock_9_6:checked ~ .view .map .grid [for=lock_9_6] {
  opacity: 0;
  pointer-events: none;
}

#grid_9_6:checked ~ .view .character {
  animation: animate-character_9_6 1024ms step-end;
}

@keyframes animate-character_9_6 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_9_7:checked ~ .view .map {
  transform: translateX(-432px) translateY(-336px);
}
#grid_9_7:checked ~ .view .map .grid[for=grid_10_7],
#grid_9_7:checked ~ .view .map .grid[for=grid_8_7],
#grid_9_7:checked ~ .view .map .grid[for=grid_9_8],
#grid_9_7:checked ~ .view .map .grid[for=grid_9_6] {
  pointer-events: auto;
}
#grid_9_7:checked ~ .view .map .grid.wall, #grid_9_7:checked ~ .view .map .grid.tree, #grid_9_7:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_9_7:checked ~ .view .map .grid [for=key_9_7] {
  opacity: 0;
  pointer-events: none;
}
#key_9_7:checked ~ .view .map .grid [data-key="9_7"] {
  display: none;
}

#lock_9_7:checked ~ .view .map .grid [for=lock_9_7] {
  opacity: 0;
  pointer-events: none;
}

#grid_9_7:checked ~ .view .character {
  animation: animate-character_9_7 1024ms step-end;
}

@keyframes animate-character_9_7 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_9_8:checked ~ .view .map {
  transform: translateX(-432px) translateY(-384px);
}
#grid_9_8:checked ~ .view .map .grid[for=grid_10_8],
#grid_9_8:checked ~ .view .map .grid[for=grid_8_8],
#grid_9_8:checked ~ .view .map .grid[for=grid_9_9],
#grid_9_8:checked ~ .view .map .grid[for=grid_9_7] {
  pointer-events: auto;
}
#grid_9_8:checked ~ .view .map .grid.wall, #grid_9_8:checked ~ .view .map .grid.tree, #grid_9_8:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_9_8:checked ~ .view .map .grid [for=key_9_8] {
  opacity: 0;
  pointer-events: none;
}
#key_9_8:checked ~ .view .map .grid [data-key="9_8"] {
  display: none;
}

#lock_9_8:checked ~ .view .map .grid [for=lock_9_8] {
  opacity: 0;
  pointer-events: none;
}

#grid_9_8:checked ~ .view .character {
  animation: animate-character_9_8 1024ms step-end;
}

@keyframes animate-character_9_8 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
#grid_9_9:checked ~ .view .map {
  transform: translateX(-432px) translateY(-432px);
}
#grid_9_9:checked ~ .view .map .grid[for=grid_10_9],
#grid_9_9:checked ~ .view .map .grid[for=grid_8_9],
#grid_9_9:checked ~ .view .map .grid[for=grid_9_10],
#grid_9_9:checked ~ .view .map .grid[for=grid_9_8] {
  pointer-events: auto;
}
#grid_9_9:checked ~ .view .map .grid.wall, #grid_9_9:checked ~ .view .map .grid.tree, #grid_9_9:checked ~ .view .map .grid.barrel {
  pointer-events: none;
}

#key_9_9:checked ~ .view .map .grid [for=key_9_9] {
  opacity: 0;
  pointer-events: none;
}
#key_9_9:checked ~ .view .map .grid [data-key="9_9"] {
  display: none;
}

#lock_9_9:checked ~ .view .map .grid [for=lock_9_9] {
  opacity: 0;
  pointer-events: none;
}

#grid_9_9:checked ~ .view .character {
  animation: animate-character_9_9 1024ms step-end;
}

@keyframes animate-character_9_9 {
  0% {
    background-position: -48px 0;
  }
  25% {
    background-position: -96px 0;
  }
  50% {
    background-position: -48px 0;
  }
  75% {
    background-position: -96px 0;
  }
}
.character {
  background-image: url("https://assets.codepen.io/430361/css-maze-character.png");
  background-size: 144px 48px;
  background-position: 0 0;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.fog {
  background-image: radial-gradient(circle at center, transparent 0 24px, #000000 72px);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.pre-dialog, .post-dialog, .lose-dialog {
  font-family: Creepster, cursive;
  font-size: 16px;
  text-align: center;
  width: 100%;
  height: 100%;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 512ms ease-out;
  transform: scale(0);
}
.pre-dialog::after, .post-dialog::after, .lose-dialog::after {
  content: "▼";
  position: absolute;
  bottom: 8px;
  right: 8px;
  animation: blink 1024ms ease-out infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.pre-dialog, .lose-dialog {
  color: #ffffff;
  background-color: #000000;
}

#pre_dialog_0:checked ~ .view [id=pre_dialog_trigger_0] {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

#pre_dialog_1:checked ~ .view [id=pre_dialog_trigger_1] {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

#pre_dialog_2:checked ~ .view [id=pre_dialog_trigger_2] {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.post-dialog {
  background-color: #ffffff;
  color: #000000;
}

#post_dialog_0:checked ~ #show_post_dialog:checked ~ .view [id=post_dialog_trigger_0] {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

#post_dialog_1:checked ~ #show_post_dialog:checked ~ .view [id=post_dialog_trigger_1] {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.lose-dialog {
  flex-direction: column;
  justify-content: space-evenly;
  transition: opacity 512ms ease-out 1024ms;
}

.reset {
  color: #000000;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: bold;
  background-color: transparent;
  background-image: url("https://assets.codepen.io/430361/css-maze-reset.png");
  background-size: 144px 48px;
  width: 144px;
  height: 48px;
  border: 0;
  outline: 0;
}

.monster-check:checked ~ .view .map .grid {
  pointer-events: none !important;
}

.monster-check:checked ~ .view .lose-dialog {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.monster-check:checked ~ .view .character {
  background-image: url("https://assets.codepen.io/430361/css-maze-character-faint.png");
  background-size: 144px 48px;
  background-position: -96px 0;
  animation: character-faint 512ms step-end !important;
}

@keyframes character-faint {
  0% {
    background-image: url("https://assets.codepen.io/430361/css-maze-character.png");
    background-position: 0 0;
  }
  33.3333% {
    background-image: url("https://assets.codepen.io/430361/css-maze-character-faint.png");
    background-position: 0 0;
  }
  66.66667% {
    background-position: -48px 0;
  }
  100% {
    background-position: -96px 0;
  }
}