.slot {
  width: 32px;
  height: 32px;
  background-image: url("../png/item.png");
  position: relative;
  border: 1px solid #111;
}

.slot:hover {
  box-shadow: 0px 0px 0px 1px white inset;
}

.slot.selected {
  box-shadow: inset 0 0 8px white;
}

/* Colored value frame: what an item is worth (NPC sell price or Market average) is drawn
   as a frame over the slot, the same way real Tibia's "Colorized Loot Value" feature
   (Winter Update 2018) does it. Sits behind the item sprite (canvas is z-index 100) so the
   icon is never obscured. */
.slot::after {
  content: "";
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 90;
}

.slot.value-grey::after {
  display: block;
  background-image: url("../png/rarityitems/rarity_square_grey.png");
}

.slot.value-green::after {
  display: block;
  background-image: url("../png/rarityitems/rarity_square_green.png");
}

.slot.value-blue::after {
  display: block;
  background-image: url("../png/rarityitems/rarity_square_blue.png");
}

.slot.value-purple::after {
  display: block;
  background-image: url("../png/rarityitems/rarity_square_purple.png");
}

.slot.value-yellow::after {
  display: block;
  background-image: url("../png/rarityitems/rarity_square_yellow.png");
}

.slot > canvas {
  pointer-events: none;
  width: 32px;
  height: 32px;
  position: absolute;
  z-index: 100;
}

.slot > .count {
  color: white;
  font-size: 10px;
  position: absolute;
  bottom: 2px;
  right: 4px;
  pointer-events: none;
  z-index: 100;
}

/* Card slot tier badge: how many card slots this specific item instance rolled (see
   Slot.getCardSlotClass). ::before rather than ::after -- ::after is already the colored
   value-frame border above. Top-right corner (Douglas, 2026-09-21) keeps it clear of the
   stack count (bottom-right). */
.slot::before {
  content: "";
  display: none;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 9px;
  height: 8px;
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  image-rendering: pixelated;
  z-index: 101;
}

.slot.card-tier-1::before {
  display: block;
  background-image: url("../png/items/tier-1.png");
}

.slot.card-tier-2::before {
  display: block;
  background-image: url("../png/items/tier-2.png");
}

.slot.card-tier-3::before {
  display: block;
  background-image: url("../png/items/tier-3.png");
}