@font-face {
  font-family: Upheaval;
  src: url(font/upheaval/upheavtt.ttf);
}

body {
  margin: 0;
  min-height: 100vh;

  font-family: Upheaval;
  font-size: 16px;
  color: white;
  text-shadow: 
    1px 0 0 black,
    -1px 0 0 black,
    0 1px 0 black,
    0 -1px 0 black;

  display: grid;
  place-items: center;
  background-image: url("images/background/house_closet.png");
  background-color: black;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
  image-rendering: pixelated;
  background-position: center;
}
body h1 {
  color: #ffffff;
  font-size: 64px;
  text-shadow:
    0 0 20px rgb(255, 0, 0)
}

.choices {
  width: 25%;
  height: 40px;
  z-index: 10;
  font-size: 24px;
}
.choices.is-open .choices__inner {
  opacity: 0;
}
.choices__list--dropdown {
  transform: translateY(-40px);
}

.choice-label {
  font-family: Upheaval;
  font-size: 24px;
  vertical-align: center;
}
.choice-image {
  width: 60px;
  height: 60px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);

  width: min(75vh, 75vw);
  aspect-ratio: 1 / 1;

  gap: 4px;
}

.grid .cell {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background-image: url("images/background/library_floor.png");
  background-repeat: no-repeat;
  background-size: cover;
  image-rendering: pixelated;
  border: 2px solid rgb(70, 70, 70);
  border-radius: 10px;
}
.grid .cell[state=active]{
  background-color: #00000044;
  background-blend-mode: multiply;
  border-color: #b0b0b0;
}

.grid .row-label,
.grid .col-label,
.grid .corner {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #6e3204;
  font-weight: bold;
}
.grid .col-label img.label-img,
.grid .row-label img.label-img {
    position: absolute;
    image-rendering: pixelated;
    inset: 0;

    left: 36.5%;
    top: 60%;

    width: 25%;
    height: 25%;

    object-fit: contain;
}

.cell {
  font-family: inherit;
  font-size: 20px;
}
.cell img.item-img {
    position: absolute;
    image-rendering: pixelated;
    inset: 0;

    left: 17.5%;
    top: 0%;

    width: 65%;
    height: 65%;

    object-fit: contain;
    z-index: 2;
}

.cell img.pedestal-img {
    position: absolute;
    image-rendering: pixelated;
    inset: 0;

    left: 25%;
    top: 50%;

    width: 50%;
    height: 50%;

    object-fit: contain;
}
.cell span {
  position: relative;
  z-index: 1;

  color: white;
  font-weight: bold;
  text-shadow: 2px 2px 0 black;

  top: 35%;
}