.inventory-slots {  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr 0.9fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  height: 300px;
  background-color: black;
}

.inv_slot{
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.inv_slot:hover {
  filter: brightness(1.2);
  cursor: pointer;
}

.slot_right { 
  grid-area: 1 / 1 / 4 / 2;
  background-image: url('../game_resources/ui/inv_slot_right.webp');
}

.slot_armor { 
  grid-area: 1 / 2 / 3 / 3;
  background-image: url('../game_resources/ui/inv_slot_armor.webp');

}

.slot_left { 
  grid-area: 1 / 3 / 3 / 4;
  background-image: url('../game_resources/ui/inv_slot_left.webp');

}

.slot_helm { 
  grid-area: 1 / 4 / 2 / 5;
  background-image: url('../game_resources/ui/inv_slot_helm.webp');

}

.slot_cloak { 
  grid-area: 1 / 5 / 3 / 6;
  background-image: url('../game_resources/ui/inv_slot_cloak.webp');

}

.slot_boots { 
  grid-area: 3 / 5 / 4 / 6;
  background-image: url('../game_resources/ui/inv_slot_boots.webp');

}

.slot_gloves { 
  grid-area: 2 / 4 / 3 / 5;
  background-image: url('../game_resources/ui/inv_slot_gloves.webp');

}

.slot_belt { 
  grid-area: 3 / 3 / 4 / 4;
  background-image: url('../game_resources/ui/inv_slot_belt.webp');

}

.slot_amulet { 
  grid-area: 3 / 4 / 4 / 5;
  background-image: url('../game_resources/ui/inv_slot_amulet.webp');

}

.slot_ammo {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "slot_arrows slot_bullets slot_bolts"
    "slot_arrows slot_bullets slot_bolts"
    "slot_arrows slot_bullets slot_bolts";
  grid-area: 3 / 2 / 4 / 3;
}

.slot_arrows { 
  grid-area: slot_arrows;
  background-image: url('../game_resources/ui/inv_slot_arrow.webp');

}

.slot_bullets { 
  grid-area: slot_bullets;
  background-image: url('../game_resources/ui/inv_slot_sling.webp');

}

.slot_bolts { 
  grid-area: slot_bolts;
  background-image: url('../game_resources/ui/inv_slot_bolts.webp');

}

.slot_jewels {  display: grid;
  grid-template-columns: 0.8fr 0.8fr 0.9fr 0.9fr;
  grid-template-rows: 0.8fr 0.8fr 0.9fr 0.9fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "slot_ring1 slot_ring1 slot_amulet slot_amulet"
    "slot_ring1 slot_ring1 slot_amulet slot_amulet"
    "slot_ring2 slot_ring2 slot_amulet slot_amulet"
    "slot_ring2 slot_ring2 slot_amulet slot_amulet";
  grid-area: 3 / 4 / 4 / 5;
}

.slot_ring1 { 
  grid-area: slot_ring1;
  background-image: url('../game_resources/ui/inv_slot_ring.webp');

}

.slot_ring2 { 
  grid-area: slot_ring2;
  background-image: url('../game_resources/ui/inv_slot_ring.webp');

}

.slot_amulet { 
  grid-area: slot_amulet;
  background-image: url('../game_resources/ui/inv_slot_amulet.webp');

}

/* Popup Card Styles - matching inventory card design */
.popup-card {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.95) translateY(60px);
  transform-origin: center right;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  border: 2px solid rgb(161 98 7 / var(--tw-border-opacity, 1));
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(4px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(212, 165, 116, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.popup-card.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}