.equip-wrap {
    display: inline-block;
    position: relative;
    width: fit-content;
}

.equip-container {
    position: relative;
    width: 400px;
    height: 400px;
    background-size: cover;
    background-position: center;
    border: 2px solid #c7b358;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.equip-item-abs {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.equip-accessories {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.equip-accessories > div {
    pointer-events: auto;
}

.item-tooltip {
    position: fixed;
    background: #1a1a1a;
    border: 2px solid #c7b358;
    padding: 8px 12px;
    border-radius: 4px;
    z-index: 9999;
    pointer-events: none;
    min-width: 180px;
    max-width: 250px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    
    /* ВАЖНО: меняем display на opacity */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Показываем при ховере */
.equip-item-abs:hover .item-tooltip,
.ring-slot:hover .item-tooltip,
.pendant-slot:hover .item-tooltip,
.entagrama-slot:hover .item-tooltip,
.earring-slot:hover .item-tooltip {
    opacity: 1;
    visibility: visible;
}


.item-tooltip .tt-name {
    color: #ffd700;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid #555;
    padding-bottom: 4px;
}

.item-tooltip .tt-prop {
    color: #ffd700;
    font-size: 10px;
    margin: 3px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.item-tooltip .tt-prop .label {
    color: #ffd700;
}

/* КОЛЬЦА */
.ring-slot {
    border-radius: 0%;
    background: transparent;
    position: absolute;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid #9e9e9e26;
    transition: all 0.2s ease;
}

/* КУЛОН */
.pendant-slot {
    width: 49px;
    height: 49px;
    border: 2px solid #9e9e9e00;
    background: transparent;
    position: absolute;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 250%;
    transform: none;
    top: 43px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* ЭНТАГРАМА */
.entagrama-slot {
    width: 75px;
    height: 71px;
    border: 2px solid #9e9e9e03;
    background: transparent;
    position: absolute;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* СЕРЬГИ */
.earring-slot {
    border: 2px solid #9e9e9e03;
    border-radius: 0%;
    background: transparent;
    position: absolute;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* HOVER ЭФФЕКТЫ */
.equip-item-abs:hover,
.ring-slot:hover,
.pendant-slot:hover,
.entagrama-slot:hover,
.earring-slot:hover {
    border-color: #ffd700;
    background-color: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}


/* Заголовок "Excellent Options:" */
.item-tooltip .tt-excellent-title,
.item-tooltip .tt-section-title {
  color: #51cf66;            /* нужный цвет */
  font-weight: 700;
  text-shadow: 0 0 6px rgba(81, 207, 102, 0.35);
}


/* Цветовая дифференциация по типам */
.item-tooltip[data-item-type="weapon"] .tt-excellent {
    color: #51cf66; /* Красный для оружия */
    text-shadow: 0 0 6px rgba(255, 107, 107, 0.4);
}

.item-tooltip[data-item-type="armor"] .tt-excellent {
    color: #51cf66; /* Зеленый для брони */
    text-shadow: 0 0 6px rgba(81, 207, 102, 0.4);
}

.item-tooltip[data-item-type="wings"] .tt-excellent {
    color: #4dabf7; /* Фиолетовый для крыльев */
    text-shadow: 0 0 6px rgba(218, 119, 242, 0.4);
}

.item-tooltip[data-item-type="accessory"] .tt-excellent {
    color: #51cf66; /* Голубой для аксессуаров */
    text-shadow: 0 0 6px rgba(77, 171, 247, 0.4);
}

/* ========================================
   РАСКРАСКА ИМЁН ПО РЕДКОСТИ
   ======================================== */

/* Базовый цвет (normal) */
.item-tooltip .tt-name {
    color: #e6e6e6;
    font-weight: 700;
}

/* Excellent (зелёный) */
.item-tooltip[data-rarity="excellent"] .tt-name {
    color: #51cf66;
}

/* Socket (фиолетовый) */
.item-tooltip[data-rarity="socket"] .tt-name {
    color: #da77f2;
}

/* Ancient (голубой) */
.item-tooltip[data-rarity="ancient"] .tt-name {
    color: #0cf6ed;
}

.tt-luck-option {
	color: #ffd700;
	font-size: 11px;
	margin: 2px 0;
}

.tt-luck-critical {
	color: #ffd700 !important;
	font-size: 11px;
	margin: 2px 0;
}

.tt-additional {
	color: #ff6b6b;
	font-size: 12px;
	font-weight: bold;
	margin: 4px 0;
}

/* =========================
   TOOLTIP: 1 строка + меньше шрифт
   ========================= */

/* базовый размер текста тултипа */
.item-tooltip {
  font-size: 14px;          /* общий базовый */
  line-height: 1.15;
  max-width: 320px;         /* можно увеличить, чтобы меньше "..." */
}

/* имя предмета чуть больше, но тоже компактно */
.item-tooltip .tt-name {
  font-size: 18px;
  margin-bottom: 6px;
}

/* все строки/пункты — не переносить */
.item-tooltip .tt-prop,
.item-tooltip .tt-excellent,
.item-tooltip .tt-ancient,
.item-tooltip .tt-luck-option,
.item-tooltip .tt-luck-critical,
.item-tooltip .tt-additional,
.item-tooltip .tt-section-title,
.item-tooltip .tt-socket {
  white-space: nowrap;      /* запрет переноса */
}

/* если строка не влезла — обрезать троеточием (опционально) */
.item-tooltip .tt-prop,
.item-tooltip .tt-excellent,
.item-tooltip .tt-ancient,
.item-tooltip .tt-luck-option,
.item-tooltip .tt-luck-critical,
.item-tooltip .tt-additional,
.item-tooltip .tt-socket {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* поджать отступы между пунктами */
.item-tooltip .tt-prop { margin: 2px 0; font-size: 12px; }
.item-tooltip .tt-excellent,
.item-tooltip .tt-ancient { margin: 1px 0; font-size: 12px; }
.item-tooltip .tt-luck-option,
.item-tooltip .tt-luck-critical { margin: 1px 0; font-size: 14px; }
.item-tooltip .tt-additional { margin: 2px 0; font-size: 14px; }
.item-tooltip .tt-section-title { margin-top: 4px; font-size: 16px; }
.item-tooltip .tt-socket { margin: 1px 0; font-size: 12px; } /* сокеты */