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

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

.slot.mobile-tap-highlight {
  box-shadow: 0px 0px 0px 1px white inset;
}

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

.slot.legendary {
  box-shadow: inset 0 0 8px orange;
}

.slot.epic {
  box-shadow: inset 0 0 8px purple;
}

.slot.rare {
  box-shadow: inset 0 0 8px blue;
}

.slot.uncommon {
  box-shadow: inset 0 0 8px green;
}

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

.slot > .count {
  color: white;
  font-size: 10px;
  font-weight: bold;
  position: absolute;
  bottom: 2px;
  right: 4px;
  pointer-events: none;
  z-index: 101;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}