/* KABIR AZABI - loot3: item tooltip / bag legibility, pickup feed, boss reward label. Loaded last so it wins the (very layered) character-UI cascade. */

/* ───────── pickup feed ───────── */
#loot-feed { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--effect-floor, 160px) + 40px); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; z-index: 2 }
#loot-feed .lf-row { display: inline-flex; align-items: baseline; gap: 9px; padding: 5px 18px 6px; white-space: nowrap; font: 600 clamp(15px, 1.05vw, 21px)/1.25 var(--text, system-ui, sans-serif); color: #d9d2c3;
  text-shadow: 0 1px 2px #000, 0 0 6px #000c; background: linear-gradient(90deg, #0a080500, #0a0805c8 18%, #0a0805c8 82%, #0a080500); box-shadow: 0 1px 0 0 color-mix(in srgb, var(--lc) 70%, transparent);
  animation: lf-float 2.9s cubic-bezier(.2, .7, .3, 1) both; will-change: transform, opacity }
#loot-feed .lf-row i { font-style: normal; font-size: .72em; color: var(--lc); text-shadow: 0 0 8px var(--lc) }
#loot-feed .lf-row .lf-k { font-weight: 500; color: #c7c0b1 }
#loot-feed .lf-row b { font-weight: 800; color: var(--lc); letter-spacing: .01em; text-shadow: 0 1px 2px #000, 0 0 10px color-mix(in srgb, var(--lc) 55%, transparent) }
#loot-feed .lf-row em { font-style: normal; font-weight: 700; font-size: .72em; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--lc) 80%, #fff) }
#loot-feed .lf-row.rarity-common em, #loot-feed .lf-row.rarity-uncommon em { display: none }
#loot-feed .lf-row.rarity-epic, #loot-feed .lf-row.rarity-boss { font-size: clamp(17px, 1.2vw, 24px); animation-duration: 3.6s }
#loot-feed .lf-row.rarity-boss { background: linear-gradient(90deg, #1a100600, #1a1006dc 18%, #1a1006dc 82%, #1a100600); box-shadow: 0 1px 0 0 var(--lc), 0 0 22px -6px var(--lc); animation-duration: 4.6s }
@keyframes lf-float { 0% { opacity: 0; transform: translateY(14px) scale(.94) } 9% { opacity: 1; transform: translateY(0) scale(1.05) } 16% { transform: translateY(-2px) scale(1) } 76% { opacity: 1; transform: translateY(-14px) } 100% { opacity: 0; transform: translateY(-34px) } }
@media (prefers-reduced-motion: reduce) { #loot-feed .lf-row { animation-name: lf-fade } @keyframes lf-fade { 0%, 80% { opacity: 1 } 100% { opacity: 0 } } }
body.touch #loot-feed { bottom: calc(var(--bottom, 20px) + 330px * var(--k, 1)) }

/* ───────── boss / reward name label on the ground ───────── */
.loot-label.reward { font-size: 17px !important; font-weight: 800 !important; padding: 0 12px !important; letter-spacing: .03em; text-shadow: 0 1px 3px #000, 0 0 12px var(--lc) !important;
  background: linear-gradient(90deg, #1a100600, #1a1006e8 14%, #1a1006e8 86%, #1a100600) !important }

/* ───────── bag cells: brighter art, clearer rarity ───────── */
#character .char-item .char-gear-icon, #character .char-equipment .char-gear-icon { filter: brightness(1.32) contrast(1.07) saturate(1.1) drop-shadow(0 2px 3px #000b) }
#character .cd-art .char-gear-icon, #character .char-hover-tooltip .char-gear-icon { filter: brightness(1.28) contrast(1.06) saturate(1.1) drop-shadow(0 2px 4px #000c) }
#character .char-item { background: radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--rarity, #8c9aa5) 26%, #3b414a) 0, transparent 74%), radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--rarity, #8c9aa5) 30%, transparent), transparent 70%), linear-gradient(160deg, #262d36f5, #0b1016fa) }
#character .char-item.rarity-uncommon, #character .char-item.rarity-rare, #character .char-item.rarity-epic, #character .char-item.rarity-boss { border-color: color-mix(in srgb, var(--rarity) 72%, #10161c) }
#character .char-item.rarity-epic, #character .char-item.rarity-boss { box-shadow: inset 0 0 14px color-mix(in srgb, var(--rarity) 30%, transparent), 0 0 10px -3px color-mix(in srgb, var(--rarity) 55%, transparent) }
#character .char-item-level { font-size: 13px; font-weight: 800; color: #f6efdd; background: #05080cdd; text-shadow: 0 1px 1px #000 }
#character .char-item.too-high .char-item-level { color: #ffa592 }
#character .char-bag-help { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: #d3ccbb }

/* ───────── item detail + hover tooltip ───────── */
#character .cd-sub { font-size: 12.5px; font-weight: 800; letter-spacing: .09em; color: color-mix(in srgb, var(--rarity, #c9b690) 82%, #fff) }
#character .cd-title h3 { text-shadow: 0 1px 3px #000, 0 0 14px color-mix(in srgb, var(--rarity, #c9b690) 30%, transparent) }
#character .cd-plabel { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; color: #d4d9d8 }
#character .cd-pline strong { color: #fff6dc }
#character .cd-row { font: 600 15.5px/1.3 var(--text); color: #d0d4d2 }
#character .cd-row strong { font-weight: 800; color: #ffffff }
#character .cd-chip { font: 700 13px/1.3 var(--text); color: #e8ebe9 }
#character .cd-chip.ok { color: #b4efa4; border-color: #6fc05c66 }
#character .cd-chip.bad { color: #ffa08c; border-color: #e0674f88; background: #d4604a22 }
#character .cd-chip.power { color: #dccaff; border-color: #a583dc66; background: #9a74d01c }
#character .cd-hint { font: 700 13.5px/1.3 var(--text); color: #cfd6da }
#character .cd-hint.ok { color: #b4efa4 } #character .cd-hint.bad { color: #ff9f8b }
#character .cd-vs { margin: 0 0 8px; font: 500 13.5px/1.35 var(--text); color: #b9c1c4 }
#character .cd-vs b { color: #eef0ec; font-weight: 700 }
#character .cd-unique-power { border-color: #e2bf7e99; background: linear-gradient(180deg, #d6b47530, #d6b4750c); box-shadow: inset 0 0 16px #d6b47520, 0 0 14px -6px #d6b475 }
#character .cd-unique-power .cd-up-label { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #f0cd8a }
#character .cd-unique-power strong { font-size: 16.5px; font-weight: 800; color: #ffe2a6 }
#character .cd-unique-power p { font-size: 14px; font-weight: 500; line-height: 1.42; color: #e6dcc8 }
#character .cd-source { font-size: 13.5px; font-weight: 700 }
#character .cd-source em { font-size: 12.5px; font-weight: 600 }
#character .cd-note { font-size: 14px; font-weight: 500 }
#character .cd-lore { font-size: 14px; font-weight: 500; color: #bdc6c9 }
/* comparison arrows: filled pills, green = better, red = worse */
#character .cmp { padding: 1px 8px 2px; border-radius: 3px; font: 800 16.5px/1.25 var(--text) }
#character .cmp i { font-size: 12px }
#character .cmp.gain { color: #8cf774; background: #3f8a3322; box-shadow: inset 0 0 0 1px #6fd45a44 }
#character .cmp.loss { color: #ff8a77; background: #b4402f26; box-shadow: inset 0 0 0 1px #ef6c5a55 }
#character .cmp.same { color: #aab3b8; background: #ffffff0a; font-weight: 700 }
#character .cd-row .cmp { font-size: 14.5px; padding: 0 6px 1px }
#character .char-hover-tooltip { width: min(372px, calc(100vw - 24px)); padding: 15px 17px 13px }
#character .char-hover-tooltip .cd-title h3 { font-size: 20px }
#character .char-hover-tooltip .cd-pline strong { font-size: 32px }
#character .char-hover-tooltip .cd-row { font-size: 15px }
#character .char-hover-tooltip .cd-sub { font-size: 12px }
#character .cd-worn { font: 700 13.5px/1.35 var(--text); color: #bfe0b0 }