.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;
  /* Hard-bound the overlay to the slot so a long timer (e.g. soft-boots
     "52:08") can NEVER spill past the slot edge onto neighbouring UI like the
     Cap label — the count is anchored right and grows left, and the same px
     font renders WIDER on Windows than macOS (Mac fit, Windows overflowed).
     The JS shrink-to-fit (Equipment.__fitOverlayText) keeps it readable; this
     is the physical safety net. */
  max-width: calc(100% - 6px);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  z-index: 101;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* Long ring/amulet timer / charge strings — shrink so they don't crowd the
 * 32px slot. Toggled by Equipment.updateTimerOverlays by string length:
 *   4 chars ("1:23")  -> count-compact    (9px, just a hair under default)
 *   5+ chars ("12:34", future big charge counts) -> count-compact-xs (8px) */
.slot > .count.count-compact {
  font-size: 9px;
  bottom: 2px;
  right: 3px;
}
.slot > .count.count-compact-xs {
  font-size: 8px;
  bottom: 3px;
  right: 2px;
}
/* Loot-router bag-name chip (first 4 letters of a named bag) */
.slot > .loot-chip {
  position: absolute;
  top: 0;
  left: 1px;
  z-index: 101;   /* the slot canvas itself is z-index:100 — the chip must top it */
  font-size: 8px;
  line-height: 9px;
  color: #e5c46a;
  text-shadow: 1px 1px 0 #000;
  pointer-events: none;
  font-family: inherit;
}

/* ---- regras so do TibiaOT (nao existem no Minibia) ---- */
.slot.drop-target {
  box-shadow: 0px 0px 0px 2px #4CAF50 inset, 0px 0px 8px #4CAF50;
}
#item-drag-ghost {
  position: fixed;
  width: 32px;
  height: 32px;
  background-image: url("/png/item.png");
  border: 1px solid #4CAF50;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
  opacity: 0.85;
  pointer-events: none;
  z-index: 10000;
}
#item-drag-ghost > canvas {
  width: 32px;
  height: 32px;
  position: absolute;
}
#item-drag-ghost > .drag-count {
  color: white;
  font-size: 10px;
  position: absolute;
  bottom: 2px;
  right: 4px;
}