/**
 * Стили тултипов Diablo 4
 *
 * @package Diablo4_Items_Tooltip
 * @author vlad1116
 */

/* Базовый сброс и шрифты для тултипа */
.d4-tooltip {
    font-family: 'Outfit', sans-serif;
    color: #e5e7eb;
    background: linear-gradient(135deg, #120f0e 0%, #060505 100%);
    border: 1px solid #3c322a;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9), 
                inset 0 0 20px rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    padding: 20px;
    width: 380px;
    max-width: 100%;
    box-sizing: border-box;
    position: absolute;
    z-index: 99999;
    pointer-events: none;
    font-size: 14px;
    line-height: 1.5;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.d4-tooltip.active {
    opacity: 1;
    transform: translateY(0);
}

.d4-tooltip-static {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
    margin: 0 auto;
}

/* Ссылка на предмет */
.d4-item-link {
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease, text-shadow 0.15s ease;
    border-bottom: 1px dashed currentColor;
}

.d4-item-link:hover {
    text-shadow: 0 0 8px currentColor;
}

/* Цвета по редкостям для ссылок и заголовков */
.d4-rarity-common, .d4-item-link.d4-rarity-common { color: #d1d5db; } /* Серый */
.d4-rarity-magic, .d4-item-link.d4-rarity-magic { color: #3b82f6; } /* Синий */
.d4-rarity-rare, .d4-item-link.d4-rarity-rare { color: #ffff00; } /* Жёлтый (как в игре) */
.d4-rarity-legendary, .d4-item-link.d4-rarity-legendary { color: #f97316; } /* Оранжевый */
.d4-rarity-unique, .d4-item-link.d4-rarity-unique { color: #dca779; } /* Бежево-золотой (как в игре) */
.d4-rarity-mythic, .d4-item-link.d4-rarity-mythic { color: #c084fc; text-shadow: 0 0 10px rgba(192, 132, 252, 0.4); } /* Фиолетовый */
.d4-rarity-set, .d4-item-link.d4-rarity-set { color: #4ade80; } /* Зелёный — комплект */

/* Индивидуальные рамки/свечения для уникальных и мифических предметов */
.d4-tooltip.d4-rarity-unique {
    border: 1px solid #78350f;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.9), 
                inset 0 0 25px rgba(217, 119, 6, 0.1);
}

.d4-tooltip.d4-rarity-mythic {
    border: 1px solid #6b21a8;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.95), 
                inset 0 0 30px rgba(147, 51, 234, 0.15);
}

/* Шапка тултипа */
.d4-tooltip-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.d4-tooltip-icon {
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #3c322a;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.d4-tooltip-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.d4-tooltip-header-info {
    flex-grow: 1;
}

.d4-tooltip-name {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}

.d4-tooltip-type-line {
    font-size: 12px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.d4-tooltip-rarity-label {
    font-weight: 600;
}

/* Разделители в стиле D4 */
.d4-tooltip-divider {
    height: 9px;
    background-image: radial-gradient(circle, #4c3f35 0%, rgba(76, 63, 53, 0) 70%);
    margin: 14px 0;
    position: relative;
}

.d4-tooltip-divider::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 5px;
    height: 5px;
    background: #4c3f35;
    border: 1px solid #6b5a4c;
}

.d4-divider-power {
    background-image: radial-gradient(circle, #b45309 0%, rgba(180, 83, 9, 0) 80%);
}

.d4-divider-power::before {
    background: #b45309;
    border-color: #f59e0b;
}

/* Сила предмета */
.d4-tooltip-item-power {
    text-align: center;
    font-size: 13px;
}

.d4-power-value {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.d4-power-label {
    color: #9ca3af;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.05em;
}

/* Свойства (Implicits и Affixes) */
.d4-tooltip-implicits, .d4-tooltip-affixes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.d4-tooltip-implicit-stat {
    color: #9ca3af;
    font-size: 13.5px;
}

.d4-tooltip-affix-stat {
    color: #e5e7eb;
    font-size: 13.5px;
    position: relative;
    padding-left: 12px;
}

.d4-tooltip-affix-stat::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #4b5563;
}

/* Greater Affixes */
.d4-tooltip-affix-stat.d4-affix-greater {
    color: #38bdf8; /* Голубой */
    font-weight: 600;
    text-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}

.d4-tooltip-affix-stat.d4-affix-greater::before {
    display: none;
}

.d4-greater-star {
    color: #38bdf8;
    margin-right: 2px;
    font-size: 14px;
}

/* Masterworking (Обработка) */
.d4-tooltip-affix-stat.d4-affix-masterworked {
    color: #60a5fa; /* Синеватый оттенок MW */
}

/* Аспекты */
.d4-tooltip-aspect {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.d4-aspect-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97316;
    border: 2px solid #fdba74;
    box-shadow: 0 0 8px #f97316;
    flex-shrink: 0;
    margin-top: 6px;
}

.d4-rarity-unique .d4-aspect-bullet {
    background: #d97706;
    border-color: #fef08a;
    box-shadow: 0 0 8px #d97706;
}

.d4-aspect-text {
    color: #ff9d5c; /* Оранжево-персиковый для аспектов */
    font-size: 13.5px;
}

.d4-rarity-unique .d4-aspect-text, .d4-rarity-mythic .d4-aspect-text {
    color: #f59e0b; /* Золотистый для уникальных умений */
}

/* Гнезда */
.d4-tooltip-sockets {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d4-tooltip-socket-slot {
    width: 22px;
    height: 22px;
    border: 2px solid #4c3f35;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.8);
}

.d4-socket-icon {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, #f43f5e 0%, #9f1239 80%);
    box-shadow: 0 0 6px #f43f5e;
}

.d4-tooltip-socketed-gems-text {
    font-size: 12px;
    color: #9ca3af;
}

.d4-tooltip-socketed-gems-text.empty {
    color: #6b7280;
    font-style: italic;
}

/* Требования */
.d4-tooltip-requirements {
    font-size: 12px;
    color: #9ca3af;
    text-align: center;
}

/* Флейвор-текст */
.d4-tooltip-description-text {
    font-size: 12px;
    color: #b45309; /* Коричневый */
    font-style: italic;
    text-align: center;
    margin-top: 15px;
    line-height: 1.4;
}

.d4-rarity-mythic .d4-tooltip-description-text {
    color: #a855f7; /* Фиолетовый флейвор для Uber-шмоток */
    text-shadow: 0 0 6px rgba(168, 85, 247, 0.15);
}

/* Бэкдроп и модалка для мобильных */
.d4-tooltip-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 99998;
}

.d4-tooltip-backdrop.active {
    display: block;
}

/* Стили мобильной версии тултипа */
@media (max-width: 768px) {
    .d4-tooltip.mobile-modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -45%) !important;
        width: 90% !important;
        max-width: 360px !important;
        pointer-events: auto !important;
        opacity: 0 !important;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }
    
    .d4-tooltip.mobile-modal.active {
        opacity: 1 !important;
        transform: translate(-50%, -50%) !important;
    }
    
    /* Кнопка закрытия для мобильного */
    .d4-tooltip-close {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        color: #9ca3af;
        font-size: 20px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
    }
}


/* === D4 Tooltip V2: hover-only Diablo-like cards === */
.d4-tooltip-link {
    color: #d8b16a;
    border-bottom: 1px dotted rgba(216,177,106,.65);
    cursor: help;
    text-decoration: none;
    font-weight: 650;
    text-shadow: 0 0 10px rgba(216, 97, 40, .18);
}
.d4-tooltip-link:hover { color: #ffd48a; border-bottom-color: #ffd48a; }
.d4-tooltip-link--gem { color: #7dd3fc; border-bottom-color: rgba(125,211,252,.6); }
.d4-tooltip-link--rune { color: #c4b5fd; border-bottom-color: rgba(196,181,253,.6); }
.d4-tooltip-link--aspect, .d4-rarity-legendary { color: #f59e0b; border-bottom-color: rgba(245,158,11,.65); }
.d4-rarity-unique { color: #dca779; border-bottom-color: rgba(220,167,121,.75); }
/* Link colors by what the link points at — includes/link-tones.php adds
   d4-tone-<tone> (the «D4» button writes it, older links get it when the
   page is shown). An author's own text color set in the editor still wins. */
.d4-tooltip-link--skill, .d4-tooltip-link.d4-tone-skill { color: #5eead4; border-bottom-color: rgba(94,234,212,.6); text-shadow: 0 0 10px rgba(94,234,212,.18); }
.d4-tooltip-link.d4-tone-common { color: #d1d5db; border-bottom-color: rgba(209,213,219,.55); }
.d4-tooltip-link.d4-tone-magic { color: #8fa8ff; border-bottom-color: rgba(143,168,255,.6); }
.d4-tooltip-link.d4-tone-rare { color: #ffff00; border-bottom-color: rgba(255,255,0,.55); }
.d4-tooltip-link.d4-tone-legendary { color: #ff8a1f; border-bottom-color: rgba(255,138,31,.65); }
.d4-tooltip-link.d4-tone-unique { color: #dca779; border-bottom-color: rgba(220,167,121,.75); }
.d4-tooltip-link.d4-tone-mythic { color: #d29cff; border-bottom-color: rgba(210,156,255,.7); text-shadow: 0 0 10px rgba(192,132,252,.45); }
.d4-tooltip-link.d4-tone-set { color: #4ade80; border-bottom-color: rgba(74,222,128,.6); }
.d4-tooltip-link.d4-tone-gem { color: #7dd3fc; border-bottom-color: rgba(125,211,252,.6); }
.d4-tooltip-link.d4-tone-rune { color: #c4b5fd; border-bottom-color: rgba(196,181,253,.6); }
/* Build-data kinds: war plans (bronze), mercenaries (steel blue), paragon
   glyphs (pale gold), class mechanics (rose). A paragon legendary node uses
   the legendary tone. */
.d4-tooltip-link.d4-tone-warplan { color: #c8954a; border-bottom-color: rgba(200,149,74,.65); }
.d4-tooltip-link.d4-tone-mercenary { color: #8fb3d9; border-bottom-color: rgba(143,179,217,.65); }
.d4-tooltip-link.d4-tone-glyph { color: #d6c27a; border-bottom-color: rgba(214,194,122,.65); }
.d4-tooltip-link.d4-tone-mechanic { color: #e58fb0; border-bottom-color: rgba(229,143,176,.65); }
.d4-tooltip-link--skill:hover, .d4-tooltip-link[class*="d4-tone-"]:hover { filter: brightness(1.25); }

.d4-tooltip.d4-tooltip-v2 {
    width: min(420px, calc(100vw - 28px));
    padding: 0;
    border-radius: 8px;
    overflow: hidden;
    background:
      radial-gradient(circle at 20% 0%, rgba(140, 68, 25, .23), transparent 35%),
      linear-gradient(145deg, #17100d 0%, #0b0807 48%, #050404 100%);
    border: 1px solid rgba(108, 86, 58, .9);
    box-shadow:
      0 24px 70px rgba(0,0,0,.82),
      inset 0 0 0 1px rgba(255,210,132,.05),
      inset 0 0 42px rgba(0,0,0,.75);
    color: #e9dfcf;
    font-family: Inter, Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    pointer-events: none;
}
.d4-tooltip.d4-tooltip-v2.active { opacity: 1; transform: translateY(0) scale(1); }
.d4-tooltip-v2__topline {
    height: 3px;
    background: linear-gradient(90deg, transparent, #a16a2b, #f0c879, #a16a2b, transparent);
    opacity: .9;
}
.d4-tooltip-v2__header {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 14px;
    padding: 16px 18px 12px;
    align-items: center;
}
.d4-tooltip-v2__icon {
    width: 62px;
    height: 62px;
    /* flex, not grid: in a grid the image's 100% height follows its own
       (auto-sized) row, so a tall unique icon (120x180) grew to 60x90 and
       was cut off by overflow:hidden. A flex box of fixed height gives the
       100% a real size — every icon is fitted whole (object-fit: contain). */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background:
      radial-gradient(circle at 50% 35%, rgba(255,205,113,.18), transparent 55%),
      linear-gradient(145deg, #211813, #080706);
    border: 1px solid rgba(151, 111, 62, .8);
    box-shadow: inset 0 0 18px rgba(0,0,0,.9), 0 0 18px rgba(185,111,43,.13);
    color: #f5c56f;
    font-size: 31px;
    font-weight: 800;
    overflow: hidden;
}
.d4-tooltip-v2__icon img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; }
.d4-tooltip-v2__name {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 750;
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: .01em;
    color: #f5e7c8;
    text-shadow: 0 1px 0 #000, 0 0 14px rgba(209, 123, 43, .22);
}
.d4-tooltip-v2__en { margin-top: 3px; color: #9b9387; font-size: 12px; }
.d4-tooltip-v2__subtitle {
    margin-top: 6px;
    color: #c39b61;
    text-transform: uppercase;
    letter-spacing: .085em;
    font-size: 11px;
    font-weight: 700;
}
.d4-tooltip-v2__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 18px 12px;
}
.d4-tooltip-v2__meta span {
    border: 1px solid rgba(120, 91, 55, .65);
    color: #b9aa95;
    background: rgba(0,0,0,.24);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
}
.d4-tooltip-v2__divider {
    height: 1px;
    margin: 0 18px;
    background: linear-gradient(90deg, transparent, rgba(167, 121, 62, .72), transparent);
    position: relative;
}
.d4-tooltip-v2__divider::after {
    content: '';
    position: absolute;
    left: 50%; top: -3px;
    width: 7px; height: 7px;
    transform: translateX(-50%) rotate(45deg);
    background: #17100d;
    border: 1px solid rgba(167, 121, 62, .75);
}
.d4-tooltip-v2__section { padding: 12px 18px 13px; }
.d4-tooltip-v2__section-title {
    color: #d4a455;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 800;
}
.d4-tooltip-v2__lines { display: grid; gap: 6px; }
.d4-tooltip-v2__line {
    color: #ddd4c7;
    font-size: 13.5px;
    line-height: 1.42;
    padding-left: 14px;
    position: relative;
}
.d4-tooltip-v2__line::before {
    content: '◆';
    position: absolute;
    left: 0;
    top: .1em;
    color: rgba(167,121,62,.9);
    font-size: 8px;
}
.d4-tooltip-v2__tag { color: #b6a6ff; font-weight: 700; }
.d4-tooltip-v2.d4-rarity-unique {
    border-color: rgba(195, 136, 48, .95);
    box-shadow: 0 24px 70px rgba(0,0,0,.84), inset 0 0 35px rgba(153, 95, 22, .16);
}
.d4-tooltip-v2.d4-rarity-unique .d4-tooltip-v2__name { color: #dca779; }
.d4-tooltip-v2.d4-rarity-legendary .d4-tooltip-v2__name { color: #f08b3e; }
.d4-tooltip-v2.d4-rarity-magic .d4-tooltip-v2__name { color: #7dd3fc; }
.d4-tooltip-v2.d4-rarity-rare .d4-tooltip-v2__name { color: #ffff00; }
.d4-tooltip-v2.d4-tooltip-kind-rune .d4-tooltip-v2__name { color: #c4b5fd; }
.d4-tooltip-v2.d4-tooltip-kind-gem .d4-tooltip-v2__name,
.d4-tooltip-v2.d4-tooltip-kind-splinter .d4-tooltip-v2__name { color: #7dd3fc; }

@media (max-width: 768px) {
    .d4-tooltip.d4-tooltip-v2.mobile-modal {
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: min(420px, calc(100vw - 26px)) !important;
        pointer-events: auto;
        max-height: calc(100vh - 34px);
        overflow-y: auto;
    }
    /* A circle with the × centered. The theme gives every <button> padding
       (Astra: 12px 24px) and a shadow, which stretched it into an oval with
       the × off to one side — so reset all of that here. */
    .d4-tooltip-close {
        position: absolute;
        top: 8px;
        right: 10px;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 28px;
        height: 28px;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 0 0 2px;
        border: 1px solid rgba(164,128,78,.65);
        border-radius: 50%;
        background: rgba(0,0,0,.45);
        box-shadow: none;
        color: #d8c7ad;
        cursor: pointer;
        font-family: Arial, sans-serif;
        font-size: 20px;
        font-weight: 400;
        line-height: 1;
        letter-spacing: 0;
        text-transform: none;
    }
    /* Room for the × so it doesn't sit on top of the item/skill icon. */
    .d4-tooltip.d4-tooltip-v2 .d4-tooltip-close + .d4-tooltip-v2__header {
        padding-right: 48px;
    }
}

/* === Diablo IV Skill Tree Dynamic Rank Tooltip Styles (vlad1116) === */
.d4-tooltip-v2__rank-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: 4px;
    margin-top: 6px;
    width: fit-content;
}
.d4-tooltip-v2__rank-badge.d4-rank-preview {
    background: rgba(140, 140, 140, 0.16);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.35);
}
.d4-tooltip-v2__rank-badge.d4-rank-active {
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
    border: 1px solid rgba(234, 179, 8, 0.5);
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.2);
}
.d4-tooltip-v2__rank-badge.d4-rank-max {
    background: rgba(249, 115, 22, 0.18);
    color: #fb923c;
    border: 1px solid rgba(249, 115, 22, 0.6);
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.25);
}

.d4-tooltip-v2__section--next-rank {
    background: rgba(0, 0, 0, 0.35);
    border-top: 1px solid rgba(167, 121, 62, 0.3);
    padding: 10px 18px 12px;
}
.d4-tooltip-v2__section--next-rank .d4-tooltip-v2__section-title {
    color: #4ade80;
    letter-spacing: .08em;
}
.d4-tooltip-v2__highlight-upgrade {
    color: #4ade80;
    font-weight: 750;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
}

.d4-tooltip-v2__hint {
    padding: 8px 18px 10px;
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.3);
    letter-spacing: .02em;
}

/* ============================================================
   Game-style tooltip (same look as diablo4-equipment-blocks' item
   tooltip). Author: vlad1116. Only visuals here — the root's position
   (absolute / mobile fixed) stays as defined above.
   ============================================================ */
.d4-tooltip.d4-tooltip-v2 {
    --tt-rarity: #e3e0d9;
    --tt-glow: rgba(227,224,217,.12);
    --tt-text: #b8afa1;
    --tt-line: #5b4a35;
    width: min(380px, calc(100vw - 28px));
    border-radius: 2px;
    border: 1px solid #6c573a;
    background:
      radial-gradient(120% 60% at 50% 0%, var(--tt-glow), transparent 60%),
      linear-gradient(180deg, #14110d 0%, #0c0a08 55%, #0a0806 100%);
    box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #231c13, inset 0 0 0 4px #3d3122, 0 18px 50px rgba(0,0,0,.8);
    color: var(--tt-text);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    line-height: 1.45;
    text-shadow: 0 0 2px #000;
}
.d4-tooltip.d4-tooltip-v2::before, .d4-tooltip.d4-tooltip-v2::after {
    content: ""; position: absolute; top: 3px; width: 7px; height: 7px; z-index: 1;
    background: #0c0a08; border: 1px solid #a8885a; transform: rotate(45deg); pointer-events: none;
}
.d4-tooltip.d4-tooltip-v2::before { left: 3px; }
.d4-tooltip.d4-tooltip-v2::after { right: 3px; }
.d4-tooltip-v2.d4-rarity-magic { --tt-rarity: #8c8cff; --tt-glow: rgba(105,105,255,.16); }
.d4-tooltip-v2.d4-rarity-rare { --tt-rarity: #ffff00; --tt-glow: rgba(255,255,0,.12); }
.d4-tooltip-v2.d4-rarity-legendary { --tt-rarity: #ff8a1f; --tt-glow: rgba(255,128,0,.2); border-color: #8a5a2c; }
.d4-tooltip-v2.d4-rarity-unique { --tt-rarity: #dca779; --tt-glow: rgba(220,167,121,.24); border-color: #9a7b4f; }
.d4-tooltip-v2.d4-rarity-mythic { --tt-rarity: #dc9bf2; --tt-glow: rgba(176,90,230,.3); border-color: #8b5aa8; box-shadow: inset 0 0 0 1px #000, inset 0 0 0 3px #1d1424, inset 0 0 0 4px #4b2f5e, 0 0 26px rgba(176,90,230,.3), 0 18px 50px rgba(0,0,0,.8); }
.d4-tooltip-v2.d4-rarity-set { --tt-rarity: #4ade80; --tt-glow: rgba(74,222,128,.16); border-color: #3f7a4f; }
.d4-tooltip-v2.d4-tooltip-kind-skill { --tt-rarity: #e3e0d9; --tt-glow: rgba(227,224,217,.1); }
.d4-tooltip-v2.d4-tooltip-kind-affix { --tt-rarity: #8c8cff; --tt-glow: rgba(105,105,255,.14); }
/* Build-data kinds (same colors as their link tones). They come after the
   rarity rules: these entities have no rarity, so the default one applies.
   A paragon legendary node keeps the legendary orange of its rarity. */
.d4-tooltip-v2.d4-tooltip-kind-war_plan,
.d4-tooltip-v2.d4-tooltip-kind-war_plan_upgrade { --tt-rarity: #c8954a; --tt-glow: rgba(200,149,74,.16); --tt-line: #6b5232; }
.d4-tooltip-v2.d4-tooltip-kind-mercenary,
.d4-tooltip-v2.d4-tooltip-kind-mercenary_skill { --tt-rarity: #8fb3d9; --tt-glow: rgba(143,179,217,.16); --tt-line: #44566b; }
.d4-tooltip-v2.d4-tooltip-kind-paragon_glyph { --tt-rarity: #d6c27a; --tt-glow: rgba(214,194,122,.16); --tt-line: #6b6034; }
.d4-tooltip-v2.d4-tooltip-kind-class_mechanic { --tt-rarity: #e58fb0; --tt-glow: rgba(229,143,176,.15); --tt-line: #6b3d4e; }

.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__topline { display: none; }
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 16px 18px 12px;
    background: linear-gradient(180deg, var(--tt-glow) 0%, transparent 100%);
    border-bottom: 1px solid var(--tt-line);
    position: relative;
}
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__header::after {
    content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; margin-left: -4px;
    background: #0f0c09; border: 1px solid var(--tt-rarity); transform: rotate(45deg); opacity: .8;
}
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__heading { min-width: 0; }
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__name {
    color: var(--tt-rarity); font-family: Georgia, "Times New Roman", serif; font-weight: 400;
    font-size: 19px; font-variant: small-caps; letter-spacing: .02em; line-height: 1.15;
    text-shadow: 0 0 10px var(--tt-glow), 0 0 2px #000;
}
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__subtitle {
    margin-top: 4px; color: var(--tt-rarity); opacity: .78; font-size: 12.5px;
    text-transform: none; letter-spacing: 0; font-weight: 400;
}
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__icon {
    flex: 0 0 auto; width: 60px; height: 60px; border: 0; border-radius: 0; background: none; box-shadow: none;
    filter: drop-shadow(0 0 6px var(--tt-glow)) drop-shadow(0 2px 3px #000);
}
.d4-tooltip.d4-tooltip-v2.d4-tooltip-kind-skill .d4-tooltip-v2__icon,
.d4-tooltip.d4-tooltip-v2.d4-tooltip-kind-gem .d4-tooltip-v2__icon,
.d4-tooltip.d4-tooltip-v2.d4-tooltip-kind-splinter .d4-tooltip-v2__icon,
.d4-tooltip.d4-tooltip-v2.d4-tooltip-kind-rune .d4-tooltip-v2__icon,
.d4-tooltip.d4-tooltip-v2.d4-tooltip-kind-war_plan_upgrade .d4-tooltip-v2__icon,
.d4-tooltip.d4-tooltip-v2.d4-tooltip-kind-mercenary_skill .d4-tooltip-v2__icon,
.d4-tooltip.d4-tooltip-v2.d4-tooltip-kind-paragon_glyph .d4-tooltip-v2__icon,
.d4-tooltip.d4-tooltip-v2.d4-tooltip-kind-paragon_node .d4-tooltip-v2__icon,
.d4-tooltip.d4-tooltip-v2.d4-tooltip-kind-class_mechanic .d4-tooltip-v2__icon,
.d4-tooltip.d4-tooltip-v2.d4-tooltip-kind-boss_trophy .d4-tooltip-v2__icon { width: 48px; height: 48px; }
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__meta { padding: 10px 18px 0; gap: 5px; }
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__meta span {
    border: 1px solid #3d3122; border-radius: 2px; background: rgba(0,0,0,.3); color: #9c9284; font-size: 11px; padding: 2px 7px;
}
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__divider { height: 9px; margin: 2px 18px; background: none; position: relative; }
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__divider::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: linear-gradient(90deg, transparent, #6c573a 18%, #6c573a 82%, transparent); }
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__divider::after { left: 50%; top: 1px; width: 6px; height: 6px; margin-left: -3px; transform: rotate(45deg); background: #0c0a08; border: 1px solid #8f7550; }
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__section { padding: 10px 18px 8px; }
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__header + .d4-tooltip-v2__section,
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__meta + .d4-tooltip-v2__section { padding-top: 14px; }
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__section-title { color: #e3e0d9; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; margin: 0 0 6px; }

.d4-tooltip-v2 .d4-tt-text { margin: 0 0 4px; color: #d6cebf; font-size: 13.5px; }
.d4-tooltip-v2 .d4-tt-list { list-style: none; margin: 0; padding: 0 0 0 18px; }
.d4-tooltip-v2 .d4-tt-list li { position: relative; margin: 3px 0; color: var(--tt-text); }
.d4-tooltip-v2 .d4-tt-list li::before {
    content: ""; position: absolute; left: -14px; top: .5em; width: 6px; height: 6px;
    transform: rotate(45deg); border: 1px solid #8a7b67; background: #2a241c;
}
.d4-tooltip-v2 .d4-tt-list li.is-legendary-power::before { border-color: #ff8a1f; background: #4a2508; box-shadow: 0 0 5px rgba(255,128,0,.55); }
.d4-tooltip-v2 .d4-tt-list li.is-unique-power { color: #dcc6a6; white-space: pre-line; }
.d4-tooltip-v2 .d4-tt-list li.is-unique-power::before { border-color: #dca779; background: #3a2a17; box-shadow: 0 0 6px rgba(220,167,121,.55); }
.d4-tooltip-v2.d4-rarity-mythic .d4-tt-list li.is-unique-power::before { border-color: #dc9bf2; background: #33173f; box-shadow: 0 0 6px rgba(220,155,242,.6); }
.d4-tooltip-v2 .d4-tt-list li.is-set { color: #a8c99a; }
.d4-tooltip-v2 .d4-tt-list li.is-set::before { border-color: #6fbf5a; background: #18301a; }
.d4-tooltip-v2 .d4-tt-list li.is-gem::before { border-radius: 50%; transform: none; width: 7px; height: 7px; border-color: #8a7b67; }
.d4-tooltip-v2 .d4-tt-label { color: #b69e7a; }
.d4-tooltip-v2 .d4-tt-label--legendary { color: #ff8a1f; }
.d4-tooltip-v2 .d4-tt-flavor p { margin: 2px 0; color: #8a8478; font-style: italic; font-size: 12px; }
.d4-tooltip-v2 .d4-tt-notes { margin: 4px 18px 0; padding: 8px 0 12px; border-top: 1px solid rgba(108,87,58,.4); }
.d4-tooltip-v2 .d4-tt-notes p { margin: 2px 0; color: #7d776d; font-size: 11.5px; line-height: 1.4; }
.d4-tooltip-v2 .d4-tooltip-v2__section:last-child { padding-bottom: 14px; }

.d4-tooltip-v2 .d4-tt-rune p { margin: 0 0 2px; color: #c9c2b5; }
.d4-tooltip-v2 .d4-tt-rune__value { color: #ce911a; font-weight: 600; }
.d4-tooltip-v2 .d4-tt-rune p.d4-tt-rune__desc--ritual { color: #ce911a; }
.d4-tooltip-v2 .d4-tt-rune p.d4-tt-rune__desc--invocation { color: #b866d1; }
.d4-tooltip-v2 .d4-tt-important { color: #e3e0d9; }
.d4-tooltip-v2 .d4-tt-place { color: #bf6b31; }
.d4-tooltip-v2 .d4-tt-marker { display: inline-block; width: 22px; height: 22px; margin: -3px 4px -5px 0; vertical-align: baseline; object-fit: contain; }
.d4-tooltip-v2 .d4-tt-game p { margin: 0 0 4px; color: #c9c2b5; }
.d4-tooltip-v2 .d4-tt-game .d4-tt-list li { color: #c9c2b5; }
.d4-tooltip-v2 .d4-tt-number { color: #dba864; }

.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__section--next-rank { background: rgba(0,0,0,.3); border-top: 0; }
.d4-tooltip.d4-tooltip-v2 .d4-tooltip-v2__hint { border-top: 1px solid rgba(108,87,58,.4); background: rgba(0,0,0,.25); font-family: Georgia, serif; }

/* theme-guard:start — generated by tools/theme-guard.mjs, do not edit */
@media (max-width: 768px) {
  html body .d4-tooltip-close:where(:hover, :focus) { color: #9ca3af; }
}
html body .d4-tooltip-link:where(:hover, :focus) { color: #d8b16a; border-bottom: 1px dotted rgba(216,177,106,.65); }
html body .d4-tooltip-link--gem:where(:hover, :focus) { color: #7dd3fc; border-bottom-color: rgba(125,211,252,.6); }
html body .d4-tooltip-link--rune:where(:hover, :focus) { color: #c4b5fd; border-bottom-color: rgba(196,181,253,.6); }
html body .d4-tooltip-link--aspect:where(:hover, :focus) { color: #f59e0b; border-bottom-color: rgba(245,158,11,.65); }
html body .d4-tooltip-link--skill:where(:hover, :focus) { color: #5eead4; border-bottom-color: rgba(94,234,212,.6); }
@media (max-width: 768px) {
  html body .d4-tooltip-close:where(:hover, :focus) { border: 1px solid rgba(164,128,78,.65); background: rgba(0,0,0,.45); color: #d8c7ad; }
}
/* theme-guard:end */