.slot {
  width: 32px;
  height: 32px;
  background-image: url("/png/item.png?p=2");
  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;
}

.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;
  position: absolute;
  bottom: 2px;
  right: 4px;
  pointer-events: none;
  z-index: 100;
}

/* Drag & drop visual feedback */
.slot.drag-over {
  box-shadow: 0px 0px 0px 1px #4fc3f7 inset, 0 0 6px rgba(79, 195, 247, 0.5);
}

.slot.drag-source {
  opacity: 0.4;
}

#drag-ghost {
  position: fixed;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 10000;
  opacity: 0.85;
  background-image: url("/png/item.png?p=2");
}

#drag-ghost > canvas {
  width: 32px;
  height: 32px;
  pointer-events: none;
}

#drag-ghost > .count {
  color: white;
  font-size: 10px;
  position: absolute;
  bottom: 2px;
  right: 4px;
  pointer-events: none;
}