.drop-feed {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  left: auto;
  top: auto;
  width: min(320px, calc(100vw - 36px));
  max-height: min(420px, calc(100vh - 100px));
  background: rgba(10, 17, 27, 0.94);
  overflow: hidden;
  border: 1px solid rgba(132, 147, 165, 0.18);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(2, 7, 14, 0.44);
  backdrop-filter: blur(18px);
  z-index: 90;
}

.drop-feed.is-visible {
  display: block;
}

.drop-title {
    text-align: center;
    font-size: 10px;
}

#drop-feed-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: min(420px, calc(100vh - 100px));
}

#drop-feed-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(132, 147, 165, 0.12);
  cursor: pointer;
  transition: background 0.2s;
}

#drop-feed-list li:last-child {
  border-bottom: 0;
}

#drop-feed-list li.is-static {
  cursor: default;
}

#drop-feed-list li:hover {
  background: rgba(87, 200, 255, 0.08);
}

#drop-feed-list img {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.drop-feed__content {
  min-width: 0;
  flex: 1;
}

.drop-feed .drop-title {
  overflow: hidden;
  color: #eef3fa;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drop-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 5px;
  color: #8fa0b5;
  font-size: 10px;
}

.drop-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drop-source {
  color: #72e6a4;
}

@media (max-width: 760px) {
  .drop-feed.is-visible {
    display: none;
  }
}







.rarity-box.rarity-mil-spec     { background-color: #4b69ff; }
.rarity-box.rarity-restricted   { background-color: #8847ff; }
.rarity-box.rarity-classified   { background-color: #d32ce6; }
.rarity-box.rarity-covert       { background-color: #eb4b4b; }
.rarity-box.rarity-contraband   { background-color: #ffd700; }

.rarity-common {
  background: rgba(255, 255, 255, 0.1);
  border-bottom: 4px solid rgb(255, 255, 255);
}

.rarity-uncommon {
  background: rgba(144, 202, 249, 0.2);
  border-bottom: 4px solid rgb(144, 202, 249);
}

.rarity-industrial-grade {
  background: rgba(144, 202, 249, 0.2);
  border-bottom: 4px solid rgb(144, 202, 249);
}

.rarity-rare {
  background: rgba(66, 165, 245, 0.2);
  border-bottom: 4px solid rgb(66, 165, 245);
}

.rarity-mythical {
  background: rgba(171, 71, 188, 0.2);
  border-bottom: 4px solid rgb(171, 71, 188);
}

.rarity-legendary {
  background: rgba(236, 64, 122, 0.2);
  border-bottom: 4px solid rgb(236, 64, 122);
}

.rarity-immortal {
  background: rgba(244, 67, 54, 0.2);
  border-bottom: 4px solid rgb(244, 67, 54);
}

.rarity-arcana {
  background: rgba(255, 215, 0, 0.2);
  border-bottom: 4px solid rgb(255, 215, 0);
}

/* Mil-Spec → покажем как у Rare */
.rarity-mil-spec {
  background: rgba(66, 165, 245, 0.2);
  border-bottom: 4px solid rgb(66, 165, 245);
}

/* Restricted → как у Mythical */
.rarity-restricted {
  background: rgba(171, 71, 188, 0.2);
  border-bottom: 4px solid rgb(171, 71, 188);
}

/* Classified → как у Legendary */
.rarity-classified {
  background: rgba(236, 64, 122, 0.2);
  border-bottom: 4px solid rgb(236, 64, 122);
}

/* Covert → как у Immortal */
.rarity-covert {
  background: rgba(244, 67, 54, 0.2);
  border-bottom: 4px solid rgb(244, 67, 54);
}

/* Contraband → как у Arcana */
.rarity-contraband {
  background: rgba(255, 215, 0, 0.2);
  border-bottom: 4px solid rgb(255, 215, 0);
}

.rarity-exceedingly-rare {
  background: rgba(255, 215, 0, 0.2);
  border-bottom: 4px solid rgb(255, 215, 0);
}

/* Ancient — у тебя был только border-color, добавим фон */
.rarity-ancient {
  background: rgba(235, 75, 75, 0.2);
  border-bottom: 4px solid rgb(235, 75, 75);
}

/* Общий сброс, если есть */
.inv-item.selected,
.target-item.selected {
  /* убираем прежнюю розовую подсветку */
  box-shadow: none !important;
  border-color: transparent !important;
  filter: none !important;
}

/* common */
.inv-item.rarity-common.selected,
.target-item.rarity-common.selected {
  border: 2px solid #b0c3d9;
  box-shadow: 0 0 8px rgba(176, 195, 217, 0.6);
}

/* uncommon */
.inv-item.rarity-uncommon.selected,
.target-item.rarity-uncommon.selected {
  border: 2px solid #5e98d9;
  box-shadow: 0 0 8px rgba(94, 152, 217, 0.6);
}

/* rare */
.inv-item.rarity-rare.selected,
.target-item.rarity-rare.selected {
  border: 2px solid #4b69ff;
  box-shadow: 0 0 8px rgba(75, 105, 255, 0.6);
}

/* mythical (или restricted) */
.inv-item.rarity-mythical.selected,
.target-item.rarity-mythical.selected,
.inv-item.rarity-restricted.selected,
.target-item.rarity-restricted.selected {
  border: 2px solid #8847ff;
  box-shadow: 0 0 8px rgba(136, 71, 255, 0.6);
}

/* legendary (или classified) */
.inv-item.rarity-legendary.selected,
.target-item.rarity-legendary.selected,
.inv-item.rarity-classified.selected,
.target-item.rarity-classified.selected {
  border: 2px solid #d32ce6;
  box-shadow: 0 0 8px rgba(211, 44, 230, 0.6);
}

/* immortal (или covert) */
.inv-item.rarity-immortal.selected,
.target-item.rarity-immortal.selected,
.inv-item.rarity-covert.selected,
.target-item.rarity-covert.selected {
  border: 2px solid #eb4b4b;
  box-shadow: 0 0 8px rgba(235, 75, 75, 0.6);
}

/* arcana (или contraband, persona) */
.inv-item.rarity-arcana.selected,
.target-item.rarity-arcana.selected,
.inv-item.rarity-contraband.selected,
.target-item.rarity-contraband.selected {
  border: 2px solid #ffd700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

/* ancient */
.inv-item.rarity-ancient.selected,
.target-item.rarity-ancient.selected {
  border: 2px solid #eb4b4b;
  box-shadow: 0 0 8px rgba(235, 75, 75, 0.6);
}

@keyframes dropFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.drop-feed-item-animate {
  animation: dropFadeIn 0.4s ease-out;
}

#drop-feed-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
}