.xp-display::before {
  content: "XP: " counter(xp);
}

.inventory {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--stacking-layer-ui);
  transform: translate(
    -50%,
    calc(-50% - (var(--viewport-height) / 2) - (var(--tile-height) / 4))
  );
  width: var(--viewport-width);
  height: var(--tile-height) * 2;
  padding: 2px;

  h2 {
    position: absolute;
    left: -9999px;
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .frame-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 1rem;
  }

  ul {
    margin: 0;
    padding: 0 2px;
    list-style: none;
    display: flex;

    > li {
      position: relative;
      width: var(--tile-width);
      height: var(--tile-height);
      margin: 0;
      padding: 0;
      background-image: url("../assets/ui/slot.png");
      background-size: cover;

      /* Actual item icon */
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: white;
      }
    }
  }
}

/*
  Animate items from map to inventory slot once picked up
  How this works:
  - Each item has a predefined slot (e.g. key in slot 2)
  - Inventory slots are aligned to map tiles
  - Items can only be picked up when the player is on their tile, i.e. when the tile is
  scrolled to the center of the viewport
  - Therefore for each item we can work out how far we need to animate it to get it to the
  inventory slot
  - In practice the item can't display outside map bounds, because of overflow, so we make
  a copy of the item appear in the slot once the item has reached the map boundary. Causes
  a bit of a "blip" but with a fast enough animation this isn't really noticeable.
  - An alternative would have been to do the reverse - have the item in the slot starting positioned  over the center tile, and then
  animating back to its slot, but this doesn't work because the maps are <dialog>s and therefore
  in the #top-layer (see https://developer.chrome.com/blog/what-is-the-top-layer)
*/
.inventory li::before {
  opacity: 0;
  transition: opacity 0s linear 0.3s;
  content: "";
  background-size: cover;
}

.item-icon {
  position: absolute;
  inset: 0;
  transition:
    transform 0.3s linear,
    opacity 0s linear 0.3s;
  background-size: cover;
}

.app:has(#item-croissant:checked) {
  .inventory li:nth-child(1) {
    &::before {
      opacity: 1;
      content: "";
    }
  }

  #item-croissant + .item-icon {
    transform: translate(
      calc(-4 * var(--tile-width)),
      calc(-6 * var(--tile-height))
    );
    opacity: 0;
  }
}
/* Fade inventory croissant out when given to the stego and fade old back plate in as we receive it */
.app:has(#encounter-give:checked) {
  .inventory li:nth-child(1)::before {
    opacity: 0;
    transition: opacity 0.4s linear;
  }
  .inventory li:nth-child(4)::before {
    opacity: 1;
    transition: opacity 0.4s linear 6s;
  }
}

.app:has(#item-KEY:checked) {
  .inventory li:nth-child(2) {
    &::before {
      opacity: 1;
      content: "";
    }
  }

  #item-KEY + .item-icon {
    transform: translate(
      calc(-3 * var(--tile-width)),
      calc(-6 * var(--tile-height))
    );
    opacity: 0;
  }
}

.app:has(#item-crystal:checked) {
  .inventory li:nth-child(3) {
    &::before {
      opacity: 1;
      content: "";
    }
  }

  #item-crystal + .item-icon {
    transform: translate(
      calc(-2 * var(--tile-width)),
      calc(-6 * var(--tile-height))
    );
    opacity: 0;
  }
}

:has(.map[open]) .inventory {
  display: block;
}

/* Item icons */
.inventory li:nth-child(1)::before,
.item-croissant .item-icon {
  background-image: url("../assets/items/croissant.png");
}
.inventory li:nth-child(2)::before,
.item-key .item-icon {
  background-image: url("../assets/items/keycard.png");
}
.inventory li:nth-child(3)::before,
.item-crystal .item-icon {
  background-image: url("../assets/items/crystal.png");
}
.inventory li:nth-child(4)::before,
.item-back-plate .item-icon {
  background-image: url("../assets/items/back-plate.png");
}