body {
  margin: 0;
  --bg: url(./bg.jpg);
  --door-font: 2rem;
  min-height: 100vh;
  background-image: var(--bg);
  background-size: 100vw 100vh;
  background-position: 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(0.5rem);
}

body.loading {
  cursor: wait;
}
body.loading .grid {
  pointer-events: none;
}

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 9px;
  width: 50vw;
  aspect-ratio: 6/4;
  padding: 5vw;
}

.door {
  aspect-ratio: 1/1;
  background-color: #191919;
  perspective: 400px;
  cursor: pointer;
  border: #191919 solid;
}
.door:hover {
  z-index: 100;
}
.door-front {
  background-image: var(--bg);
  background-size: 100vw 100vh;
  aspect-ratio: 1/1;
  height: 100%;
  transform-origin: 0% 0%;
  transition: 250ms;
  font-family: "Mountains of Christmas", cursive;
  font-size: var(--door-font);
  text-align: end;
}
.door:not(.blocked):hover .door-front {
  transform: rotateY(-45deg);
}
.door.blocked {
  cursor: not-allowed;
}

.door1 {
  grid-area: 1 / 1 / 2 / 2;
}
.door2 {
  grid-area: 1 / 2 / 2 / 3;
}
.door3 {
  grid-area: 1 / 3 / 2 / 4;
}
.door4 {
  grid-area: 1 / 4 / 2 / 5;
}
.door5 {
  grid-area: 1 / 5 / 2 / 6;
}
.door6 {
  grid-area: 1 / 6 / 2 / 7;
}
.door7 {
  grid-area: 2 / 1 / 3 / 2;
}
.door8 {
  grid-area: 2 / 2 / 3 / 3;
}
.door9 {
  grid-area: 2 / 3 / 3 / 4;
}
.door10 {
  grid-area: 2 / 4 / 3 / 5;
}
.door11 {
  grid-area: 2 / 5 / 3 / 6;
}
.door12 {
  grid-area: 2 / 6 / 3 / 7;
}
.door13 {
  grid-area: 3 / 1 / 4 / 2;
}
.door14 {
  grid-area: 3 / 2 / 4 / 3;
}
.door15 {
  grid-area: 3 / 3 / 4 / 4;
}
.door16 {
  grid-area: 3 / 4 / 4 / 5;
}
.door17 {
  grid-area: 3 / 5 / 4 / 6;
}
.door18 {
  grid-area: 3 / 6 / 4 / 7;
}
.door19 {
  grid-area: 4 / 1 / 5 / 2;
}
.door20 {
  grid-area: 4 / 2 / 5 / 3;
}
.door21 {
  grid-area: 4 / 3 / 5 / 4;
}
.door22 {
  grid-area: 4 / 4 / 5 / 5;
}
.door23 {
  grid-area: 4 / 5 / 5 / 6;
}
.door24 {
  grid-area: 4 / 6 / 5 / 7;
}