/* Global Tooltip System — shared across all pages that load tooltip.js */
/* Originally lived in loot-table.css; extracted to allow reuse. */

/* Item Tooltip (Diablo-style, cursor-following) */
.item-tooltip {
    position: fixed;
    z-index: var(--z-tooltip, 99999);
    background: var(--bg-secondary, #1a1b20);
    border: 1px solid var(--border-color, #2a2a35);
    border-radius: 2px;
    min-width: 280px;
    max-width: 340px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    will-change: opacity, transform;
    font-family: var(--font-body);
}

.item-tooltip h1,
.item-tooltip h2,
.item-tooltip h3,
.item-tooltip h4 { font-family: inherit; }

.item-tooltip--visible {
    opacity: 1;
    transform: scale(1);
}

.item-tooltip__name {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.item-tooltip__name--unique { color: var(--unique-gold, #d1a781); }
.item-tooltip__name--mythic { color: var(--mythic-red, #c0a1d8); text-shadow: 0 0 12px rgba(192, 161, 216, 0.6); }
.item-tooltip__name--legendary { color: var(--legendary-purple, #d98c3c); }
.item-tooltip__name--rare { color: var(--rare-yellow, #f1f25c); }
.item-tooltip__name--magic { color: var(--magic-blue, #6d6ed9); }

.item-tooltip__type {
    font-size: 0.8rem;
    color: var(--text-secondary, #a09d94);
    margin-bottom: 0.25rem;
}

.item-tooltip__rarity {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.item-tooltip__divider {
    height: 1px;
    background: var(--border-color, #2a2a35);
    margin: 0.75rem 0;
}

.item-tooltip__affixes { margin: 0.75rem 0; }

.item-tooltip__affix {
    font-size: 0.85rem;
    color: var(--text-primary, #e0ddd5);
    margin-bottom: 0.4rem;
    padding-left: 0.5rem;
    border-left: 2px solid transparent;
}

.item-tooltip__affix--greater {
    color: var(--gold, #a50905);
    border-left-color: var(--gold, #a50905);
    font-weight: 600;
}

.item-tooltip__affix--temper {
    color: var(--legendary-purple, #d98c3c);
    border-left-color: var(--legendary-purple, #d98c3c);
}

.item-tooltip__unique-effect {
    background: rgba(209, 167, 129, 0.08);
    border: 1px solid var(--unique-gold, #d1a781);
    border-radius: var(--border-radius, 4px);
    padding: 0.75rem;
    margin: 0.75rem 0;
    font-size: 0.85rem;
    color: var(--unique-gold, #d1a781);
    line-height: 1.4;
}

.item-tooltip__aspect {
    background: rgba(217, 140, 60, 0.08);
    border: 1px solid var(--legendary-purple, #d98c3c);
    border-radius: var(--border-radius, 4px);
    padding: 0.75rem;
    margin: 0.75rem 0;
}

.item-tooltip__aspect-name {
    font-weight: 600;
    color: var(--legendary-purple, #d98c3c);
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.item-tooltip__aspect-description {
    font-size: 0.8rem;
    color: var(--text-primary, #e0ddd5);
    line-height: 1.4;
}

.item-tooltip__flavor {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--text-dark, #4a4840);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #2a2a35);
    line-height: 1.4;
}