/* =========================
   Vault Page Layout
   ========================= */

.vault-page {
  padding: 24px;
  color: #e6e6e6;
}

.vault-page h2 {
  margin: 0 0 12px 0;
  font-weight: 600;
  letter-spacing: 0.04em;
}


/* =========================
   Inventory Grid
   ========================= */

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 64px);
  gap: 6px;

  /* Keeps grid tidy if capacity grows */
  max-width: 100%;
}


/* =========================
   Slot Base
   ========================= */

.slot {
  width: 64px;
  height: 64px;
  position: relative;

  background: #1f1f1f;
  border: 1px solid #4a4a4a;

  box-sizing: border-box;
  user-select: none;
}


/* =========================
   Empty Slot
   ========================= */

.slot.empty {
  background: #181818;
  border: 1px dashed #3a3a3a;
}


/* =========================
   Filled Slot
   ========================= */

.slot.filled {
  background: linear-gradient(
    180deg,
    #2c2c2c 0%,
    #1f1f1f 100%
  );
}


/* =========================
   Item Icon
   ========================= */

.slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;

  /* Slight visual crispness */
  image-rendering: auto;
}


/* =========================
   Stack Count
   ========================= */

.slot .count {
  position: absolute;
  right: 4px;
  bottom: 2px;

  font-size: 12px;
  font-weight: 600;
  color: #f2f2f2;

  text-shadow:
    1px 1px 2px rgba(0, 0, 0, 0.9);
}


/* =========================
   Drag & Drop Feedback
   ========================= */

.slot[draggable="true"] {
  cursor: grab;
}

.slot[draggable="true"]:active {
  cursor: grabbing;
}

/* When something is dragged over */
.slot.drag-over {
  border-color: #d4af37;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.8),
    inset 0 0 8px rgba(212, 175, 55, 0.25);
}


/* =========================
   Hover (future tooltips)
   ========================= */

.slot.filled:hover {
  border-color: #888;
}


/* =========================
   Error Text
   ========================= */

.vault-page .error {
  margin-top: 12px;
  color: #ff6b6b;
}


/* =========================
   Future Hooks (do not remove)
   ========================= */

/* Rarity borders (apply class dynamically later)
.slot.rarity-common    { border-color: #8e8e8e; }
.slot.rarity-uncommon  { border-color: #4caf50; }
.slot.rarity-rare      { border-color: #3f51b5; }
.slot.rarity-epic      { border-color: #9c27b0; }
.slot.rarity-legendary { border-color: #ff9800; }
*/

/* Thesaura / expanded capacity visual separator
.inventory-grid.expanded {
  padding-top: 12px;
  border-top: 1px solid #333;
}
*/