/* d4 tooltip card — the FULL hi-fi port (design_handoff_phase4 card.css +
   tooltip-colors.css, verified against d4-tooltips/renders/). The card is
   theme-invariant game-dark; rarity is a THEME class setting --rarity-* vars.
   Chrome assets ship beside this file under ui/ (relative urls). */

:root {
  /* tooltip-colors.css inlined (RE-authoritative; resource = user-verified fix) */
  --d4tt-mythic: #dea3ef;
  --d4tt-unique-name: #dcae81;
  --d4tt-unique-type: #bd956e;
  --d4tt-unique-power: #ddae81;
  --d4tt-body: #bab0a3;
  --d4tt-value: #dfdcd7;
  --d4tt-range: #9ba9b3;
  --d4tt-flavor: #888888;
  --d4tt-socket: #717171;
  --d4tt-gold: #d4a24a;
  --d4tt-gain: #30f010;
  --d4tt-c-number: #dcaf6c;
  --d4tt-c-random: #b1b1f7;
  --d4tt-c-important: #d9e0e3;
  --d4tt-c-label: #aaaaaa;
  --d4tt-c-resource: #eced76;
  --d4tt-c-gold: #c08828;
}

/* {c_xxx}…{/c} → <span class="tt-xxx"> (markup contract, handoff spec/03) */
.d4-tooltip .tt-number{color:var(--d4tt-c-number)}
.d4-tooltip .tt-random{color:var(--d4tt-c-random)}
.d4-tooltip .tt-important{color:var(--d4tt-c-important)}
.d4-tooltip .tt-label{color:var(--d4tt-c-label)}
.d4-tooltip .tt-resource{color:var(--d4tt-c-resource)}
.d4-tooltip .tt-gold{color:var(--d4tt-c-gold)}
.d4-tooltip .tt-mythic{color:var(--d4tt-mythic)}

/* ---------- the canonical card (card.css port) ---------- */
.d4-tooltip{width:340px;max-width:100%;position:relative;background:#0c0a0e;color:var(--d4tt-body);
  font-family:Inter,var(--font-body,sans-serif),sans-serif;font-size:16px;line-height:1.35;
  text-shadow:0 1px 2px rgba(0,0,0,.55);box-sizing:border-box}
.d4-tooltip *{box-sizing:border-box}
.d4-tooltip .tt-base{position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(90deg,var(--rarity-tint) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 66%,var(--rarity-tint) 100%),
             linear-gradient(180deg,var(--rarity-tint) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 66%,var(--rarity-tint) 100%)}
.d4-tooltip .tt-frame{position:absolute;inset:0;border:88px solid transparent;border-image:var(--rarity-frame) 128 fill stretch;pointer-events:none;z-index:1}
.d4-tooltip .tt-inner{position:relative;z-index:2;padding:26px 28px}
.d4-tooltip.rarity-unique,.rarity-unique{--rarity-name:var(--d4tt-unique-name);--rarity-sub:var(--d4tt-unique-type);--rarity-power:var(--d4tt-unique-power);
  --rarity-frame:url(ui/rarity-frame-unique.webp);--rarity-tint:rgba(220,174,129,.077)}
.d4-tooltip.rarity-mythic,.rarity-mythic{--rarity-name:var(--d4tt-mythic);--rarity-sub:var(--d4tt-mythic);--rarity-power:var(--d4tt-mythic);
  --rarity-frame:url(ui/rarity-frame-mythic.webp);--rarity-tint:rgba(222,163,239,.077)}
.d4-tooltip.rarity-rare,.rarity-rare{--rarity-name:#efef00;--rarity-sub:#efef00;--rarity-power:#efef00;
  --rarity-frame:url(ui/rarity-frame-rare.webp);--rarity-tint:rgba(236,235,20,.06)}
.d4-tooltip.rarity-legendary,.rarity-legendary{--rarity-name:#f88807;--rarity-sub:#f88807;--rarity-power:#f88807;
  --rarity-frame:url(ui/rarity-frame-legendary.webp);--rarity-tint:rgba(248,136,7,.063)}
.d4-tooltip .tt-name{font-family:Cinzel,serif;font-weight:600;color:var(--rarity-name);text-transform:uppercase;
  letter-spacing:.06em;font-size:18px;line-height:1.1;margin:2px 0 4px;white-space:nowrap;padding-right:84px}
.d4-tooltip .tt-sub{color:var(--rarity-sub);padding-right:84px}
.d4-tooltip .tt-ip{margin-top:2px}
.d4-tooltip img.tt-icon{position:absolute;top:22px;right:40px;width:78px;height:116px;object-fit:contain;z-index:3;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.d4-tooltip hr.tt-div{border:none;height:14px;margin:6px 0 4px;background:url(ui/divider-affix.webp) center/contain no-repeat;opacity:.9}
.d4-tooltip hr.tt-div.hd{background-image:url(ui/divider-header.webp)}
.d4-tooltip .tt-affix{position:relative;padding-left:15px;margin:4px 0}
.d4-tooltip .tt-affix::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--d4tt-range);transform:rotate(45deg)}
.d4-tooltip .ttv{color:var(--d4tt-value)}
.d4-tooltip .ttv .rng{color:var(--d4tt-range)}
.d4-tooltip .tt-affix.tt-random{color:var(--d4tt-c-random)}
.d4-tooltip .tt-affix.tt-random::before{background:var(--d4tt-c-random);opacity:.7}
.d4-tooltip .tt-power{position:relative;padding-left:15px;margin:8px 0;color:var(--rarity-power)}
.d4-tooltip .tt-power::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--rarity-power);transform:rotate(45deg)}
.d4-tooltip .tt-power .ttv{color:inherit}
.d4-tooltip .tt-power .tt-number .ttv{color:var(--d4tt-c-number)}
.d4-tooltip .tt-power .tt-random .ttv{color:var(--d4tt-c-random)}
.d4-tooltip.rarity-mythic .tt-power .tt-random .ttv{color:var(--d4tt-c-number)}
.d4-tooltip .tt-flavor{color:var(--d4tt-flavor);font-style:italic;margin:10px 0 2px;font-size:13px;white-space:pre-line}
.d4-tooltip .tt-req{margin-top:8px;font-size:13px;text-align:right}
.d4-tooltip .tt-req .gold{color:var(--d4tt-gold)}
.d4-tooltip .fmt{color:var(--d4tt-socket)}
/* inline markup icons ({icon:bullet} etc — tt-mk, distinct from img.tt-icon) */
.d4-tooltip i.tt-mk{display:inline-block;width:14px;height:14px;vertical-align:-2px}
.d4-tooltip i.tt-mk[data-icon="bullet"]{background:url(ui/mk-bullet.webp) center/contain no-repeat}
.d4-tooltip i.tt-mk[data-icon="arrow"]{width:12px;height:12px;background:none;position:relative}
.d4-tooltip i.tt-mk[data-icon="arrow"]::before{content:"";position:absolute;inset:2px 3px;border-right:2px solid var(--d4tt-c-number);border-top:2px solid var(--d4tt-c-number);transform:rotate(45deg)}

/* ---- glyph / skill / aspect chrome: leather panel + tiled hollow frame ---- */
.d4-tooltip.tt-glyph,.d4-tooltip.tt-node,.d4-tooltip.tt-skill,.d4-tooltip.tt-upgrade,.d4-tooltip.tt-aspect{background:none;padding-top:44px}
.d4-tooltip .tt-panel{position:absolute;inset:44px 0 0 0;pointer-events:none;z-index:0;background:#141014;
  border:38px solid transparent;border-image:url(ui/panel-leather.webp) 76 fill / 38px stretch}
.d4-tooltip .tt-vig{position:absolute;inset:44px 0 0 0;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,var(--rarity-tint) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 66%,var(--rarity-tint) 100%),
             linear-gradient(180deg,var(--rarity-tint) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,0) 66%,var(--rarity-tint) 100%)}
.d4-tooltip .tt-rint{position:absolute;inset:44px 0 0 0;pointer-events:none;z-index:1;border:44px solid transparent;border-image:var(--rarity-frame) 128 fill stretch;opacity:.85}
.d4-tooltip .tt-tiled{position:absolute;inset:44px 0 0 0;pointer-events:none;z-index:2;border:36px solid transparent;border-image:url(ui/frame-skill-tiled.webp) 143 stretch}
.d4-tooltip.tt-glyph .tt-inner,.d4-tooltip.tt-node .tt-inner,.d4-tooltip.tt-skill .tt-inner,.d4-tooltip.tt-upgrade .tt-inner,.d4-tooltip.tt-aspect .tt-inner{padding:56px 30px 30px;z-index:3}
.d4-tooltip .tt-medallion{position:absolute;left:50%;top:0;transform:translateX(-50%);width:88px;height:88px;z-index:4;
  background:url(ui/glyph-holder.webp) center/contain no-repeat;display:flex;align-items:center;justify-content:center}
.d4-tooltip .tt-medallion img{width:71%;height:71%;object-fit:contain;margin-top:1px}
.d4-tooltip .tt-rarity-label{text-align:center;color:var(--rarity-name);font-size:14px;letter-spacing:.03em}
.d4-tooltip.tt-glyph .tt-name,.d4-tooltip.tt-node .tt-name,.d4-tooltip.tt-skill .tt-name,.d4-tooltip.tt-upgrade .tt-name,.d4-tooltip.tt-aspect .tt-name{font-family:Alegreya,serif;font-weight:500;
  text-transform:none;letter-spacing:.05em;text-align:center;font-size:24px;color:#dfdad1;padding:0;white-space:normal;margin:1px 0 6px}
.d4-tooltip .tt-rankbar{text-align:center;font-size:12.5px;letter-spacing:.16em;color:#dfdcd7;
  background:linear-gradient(180deg,#2c2530,#221c26);border:1px solid #3b3341;border-radius:2px;padding:3px 0;margin:0 26px 8px;text-transform:uppercase}
.d4-tooltip .tt-glyph .tt-label,.d4-tooltip.tt-glyph .tt-label{color:#bda582;margin:8px 0 2px}
.d4-tooltip .tt-affix.tt-bonus::before{background:var(--rarity-name)}
.d4-tooltip .tt-affix.tt-additional{color:#8f897d}
.d4-tooltip .tt-affix.tt-additional .tt-number,.d4-tooltip .tt-affix.tt-additional .tt-important{color:#8f897d}
.d4-tooltip .tt-affix.tt-additional.active{color:var(--d4tt-body)}
.d4-tooltip .tt-affix.tt-additional.active .tt-number{color:var(--d4tt-c-number)}
.d4-tooltip .tt-affix.tt-additional.active .tt-important{color:var(--d4tt-c-important)}
.d4-tooltip .tt-affix.tt-legendary::before{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  transform:none;width:11px;height:11px;top:5px;background:var(--rarity-name)}
.d4-tooltip .tt-affix.tt-legendary.tt-locked{color:#8f897d}
.d4-tooltip .tt-affix.tt-legendary.tt-locked .tt-number,.d4-tooltip .tt-affix.tt-legendary.tt-locked .tt-important{color:#8f897d}
.d4-tooltip .tt-affix.tt-legendary:not(.tt-locked){color:#f88807}
.d4-tooltip .tt-affix.tt-legendary:not(.tt-locked) .tt-number,.d4-tooltip .tt-affix.tt-legendary:not(.tt-locked) .tt-important{color:#f88807}
.d4-tooltip .tt-required{color:#c01010;font-size:13.5px;margin:2px 0 0 15px}
.d4-tooltip .tt-required[hidden]{display:none}
.d4-tooltip .tt-radius{margin:2px 0}
.d4-tooltip .tt-radius b{color:#d8a868;font-weight:500}
/* paragon nodes (NODE-TEMPLATE.md): the glyph holder carries a rarity DISC
   (2DUI_ParagonNodes#5-8) under the node's own sigil. Sizes from the template
   (holder 100 / disc 74 / sigil 48) as percentages of the 88px holder; the
   sigil canvases are UNCROPPED 135px with ~80% art, hence the larger share. */
.d4-tooltip .tt-medallion.nd .disc{position:absolute;width:74%;height:74%;top:13%;left:13%;background:center/contain no-repeat}
.d4-tooltip.rarity-normal .tt-medallion.nd .disc{background-image:url(ui/node-disc-normal.webp)}
.d4-tooltip.rarity-magic .tt-medallion.nd .disc{background-image:url(ui/node-disc-magic.webp)}
.d4-tooltip.rarity-rare .tt-medallion.nd .disc{background-image:url(ui/node-disc-rare.webp)}
.d4-tooltip.rarity-legendary .tt-medallion.nd .disc{background-image:url(ui/node-disc-legendary.webp)}
.d4-tooltip .tt-medallion.nd img{width:60%;height:60%;position:relative;margin-top:2px}
/* no rarity vignette on a normal node; magic/rare/legendary tint like items */
.d4-tooltip.tt-node.rarity-normal .tt-vig{display:none}
/* title: "<Type> Node" is the whole title for normal/magic (cream / blue);
   rare/legendary show a small coloured type label over the cream name */
.d4-tooltip.tt-node .tt-name{color:#dfdad1}
.d4-tooltip.tt-node.rarity-normal .tt-node-title{color:#e0d0b0}
.d4-tooltip.tt-node.rarity-magic .tt-node-title{color:#8080f0}
.d4-tooltip.tt-node.rarity-normal .tt-rarity-label{color:#e0d0b0}
.d4-tooltip.tt-node.rarity-magic .tt-rarity-label{color:#8080f0}
.d4-tooltip.tt-node.rarity-rare .tt-rarity-label{color:#e8e808}
.d4-tooltip.tt-node.rarity-legendary .tt-rarity-label{color:#f88807}
/* affix values are body colour on nodes (not gold); smaller, dimmer bullet */
.d4-tooltip.tt-node .tt-affix{color:var(--d4tt-body)}
.d4-tooltip.tt-node .tt-affix::before{width:6px;height:6px;top:8px;opacity:.7}
.d4-tooltip.tt-node .tt-bonus{color:#8f897d;margin:8px 0 2px}
.d4-tooltip.tt-node .tt-bonus .tt-lbl{color:#bda582}
.d4-tooltip.tt-node .tt-affix.tt-need b{font-weight:500;color:var(--d4tt-value)}
.d4-tooltip.tt-node .tt-body{margin-top:2px}
.d4-tooltip.tt-node .tt-body .tt-number{color:var(--d4tt-c-number)}
/* ---- temper manuals (ASPECT-TEMPLATE.md "Temper Manuals"): the aspect chrome,
   the CATEGORY icon 10% smaller than an aspect's, the rarity word where the
   rank bar would be, dimmed ranges, the applies-to note ---- */
.d4-tooltip.tt-temper{background:none;padding-top:44px}
.d4-tooltip.tt-temper .tt-inner{padding:56px 30px 30px;z-index:3}
.d4-tooltip.tt-temper .tt-name{font-family:Alegreya,serif;font-weight:500;text-transform:none;letter-spacing:.05em;text-align:center;font-size:24px;color:#dfdad1;padding:0;white-space:normal;margin:1px 0 6px}
.d4-tooltip .tt-medallion.sq.tmp img{width:58%;height:58%}
.d4-tooltip.tt-temper .tt-rarity-label{font-size:17px;margin:-4px 0 8px}
.d4-tooltip.tt-temper.rarity-magic .tt-rarity-label{color:#7070d2}
.d4-tooltip.tt-temper.rarity-rare .tt-rarity-label{color:#cacb0d}
.d4-tooltip.tt-temper.rarity-legendary .tt-rarity-label{color:#d47407}
.d4-tooltip.tt-temper .tt-affix{color:var(--d4tt-body)}
.d4-tooltip.tt-temper .tt-affix .rng{color:var(--d4tt-range)}
.d4-tooltip.tt-temper .tt-note{margin:16px 0 0;color:var(--d4tt-body)}
/* ---- charms / seals / set charms (item chrome; handoff "Charms, set charms and seals") ---- */
.d4-tooltip.rarity-set,.rarity-set{--rarity-name:#34f411;--rarity-sub:#2dd20e;--rarity-power:#dfdcd7;
  --rarity-frame:url(ui/rarity-frame-set.webp);--rarity-tint:rgba(52,244,17,.07)}
.d4-tooltip.rarity-set .tt-item .tt-name{color:#34f411}
.d4-tooltip.rarity-set .tt-item .tt-sub{color:#2dd20e}
.d4-tooltip.rarity-unique .tt-charm .tt-name{color:var(--d4tt-unique-name)}
.d4-tooltip.rarity-mythic .tt-charm .tt-name{color:var(--d4tt-mythic)}
.d4-tooltip .tt-charm .tt-sub{margin-bottom:12px}
.d4-tooltip .tt-charm .tt-sub:has(+ .tt-ip){margin-bottom:0}
.d4-tooltip .tt-charm .tt-ip{color:var(--d4tt-body);margin:2px 0 12px}
.d4-tooltip .tt-charm .tt-affix.tt-rnd,.d4-tooltip .tt-charm .tt-rnd{color:var(--d4tt-range)}
.d4-tooltip .tt-charm .tt-affix.tt-rnd::before{background:var(--d4tt-range)}
.d4-tooltip .tt-charm .tt-affix b{font-weight:500;color:var(--d4tt-value)}
.d4-tooltip .tt-item.tt-charm img.tt-icon--hdr{width:80px;height:100px;top:20px;right:12px}
/* the granted power behind the game's own star sprite, sharing the bullet column */
.d4-tooltip .tt-charm .tt-power--star{display:flex;gap:8px;padding-left:0;margin:6px 0;color:var(--rarity-power)}
.d4-tooltip .tt-charm .tt-power--star::before{display:none}
.d4-tooltip .tt-charm .tt-power--star img.tt-star{width:22px;height:22px;flex:0 0 auto;margin:0 0 0 -7px;object-fit:contain}
.d4-tooltip.rarity-mythic .tt-charm .tt-power--star{color:var(--d4tt-mythic)}
.d4-tooltip .tt-charm .tt-para+.tt-para{margin-top:8px}
.d4-tooltip .tt-charm .tt-flavor{white-space:normal}
.d4-tooltip .tt-charm .tt-flavor .tt-line+.tt-line{margin-top:2px}
.d4-tooltip .tt-charm .tt-setrow{display:flex;gap:8px;align-items:flex-start;margin:3px 0}
.d4-tooltip .tt-charm .tt-setrow img.tt-seticon{width:20px;height:20px;flex:0 0 auto;margin:1px 0 0 -6px;object-fit:contain}
.d4-tooltip .tt-charm .tt-set-head{font-size:18px;color:#dfdcd7;margin:8px 0 4px}
.d4-tooltip .tt-charm .tt-piece{display:flex;gap:6px;align-items:center;margin:2px 0 2px 26px;color:var(--d4tt-body)}
.d4-tooltip .tt-charm .tt-piece .tt-arrow{color:#8f887c;font-size:12px;margin-right:2px}
.d4-tooltip .tt-charm .tt-set-count{color:var(--rarity-name);margin:8px 0 2px}
.d4-tooltip .tt-charm .tt-tier{color:var(--d4tt-socket);margin:6px 0 2px}
.d4-tooltip .tt-charm .tt-bullet{position:relative;padding-left:15px;margin:3px 0}
.d4-tooltip .tt-charm .tt-bullet::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--d4tt-range);transform:rotate(45deg)}
.d4-tooltip .tt-charm .tt-foot .gold{color:var(--d4tt-gold)}
/* the set-piece rune glyphs (icons/ui/set-piece-glyph-*.webp): masks tinted by the text around them */
.d4-tooltip .tt-glyph{display:inline-block;width:.75em;height:1em;vertical-align:-.15em;margin-left:.3em;background:currentColor;
  -webkit-mask:var(--g) center/contain no-repeat;mask:var(--g) center/contain no-repeat}
.d4-tooltip .tt-glyph--phoba{--g:url(ui/set-piece-glyph-phoba.webp)}
.d4-tooltip .tt-glyph--fer{--g:url(ui/set-piece-glyph-fer.webp)}
.d4-tooltip .tt-glyph--mlor{--g:url(ui/set-piece-glyph-mlor.webp)}
.d4-tooltip .tt-glyph--linta{--g:url(ui/set-piece-glyph-linta.webp)}
.d4-tooltip .tt-glyph--beru{--g:url(ui/set-piece-glyph-beru.webp)}
/* skill extras */
.d4-tooltip .tt-medallion.sq{background:none;width:84px;height:84px}
.d4-tooltip .tt-medallion.sq .holder{position:absolute;inset:0;background:url(ui/holder-skill.webp) center/contain no-repeat}
.d4-tooltip .tt-medallion.sq.asp .holder{background-image:url(ui/holder-aspect.webp)}
/* upgrade nodes (SKILL-TEMPLATE.md "Upgrade nodes", RE 2026-09-07): the DIAMOND
   holder (2DUI_TalentSkill_Nodes#4) for major AND minor upgrades — a 92px box
   straddling the frame's top edge (the sprite's diamond spans ~76px of it).
   Its centre is OPAQUE, so the icon is cut to a diamond and laid OVER it. */
.d4-tooltip .tt-medallion.sq.upg{width:92px;height:92px;top:-2px}
.d4-tooltip .tt-medallion.sq.upg .holder{background-image:url(ui/holder-upgrade.webp);z-index:1}
.d4-tooltip .tt-medallion.sq.upg img{width:44px;height:44px;z-index:2;margin-top:0;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.d4-tooltip.tt-upgrade .tt-body{margin-top:2px}
.d4-tooltip .tt-choice{color:#c47334;font-size:13.5px;margin:8px 0 0}
.d4-tooltip .tt-medallion.sq img{width:64%;height:64%;object-fit:contain;position:relative}
.d4-tooltip .tt-pills{display:flex;gap:6px;justify-content:center;margin:2px 0 6px;flex-wrap:wrap}
.d4-tooltip .tt-pill{font-size:15px;color:#ddc8a6;background:#242220;border:1px solid #454138;border-radius:2px;padding:3px 14px;letter-spacing:.04em}
.d4-tooltip .tt-pill-cat{background:#12280f;border-color:#2c5a24}
.d4-tooltip .tt-body{white-space:pre-line;margin:4px 0}
.d4-tooltip hr.tt-div-left{background-image:url(ui/divider-skill-bottom.webp);background-position:left center}
.d4-tooltip .tt-foot{text-align:right;font-size:13.5px;color:#a3a3a3;display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.d4-tooltip .tt-dmg{display:inline-flex;align-items:center;gap:6px}
.d4-tooltip .tt-dmg::before{content:"";width:20px;height:20px;background:url(ui/icon-dmg-physical.webp) center/contain no-repeat}
.d4-tooltip .ttv.pinned{color:var(--d4tt-c-number);border-bottom:1px dotted var(--d4tt-c-number)}
/* aspect specifics (ASPECT-TEMPLATE.md / renders/aspect.html): star-bulleted
   orange power, salvage line with the blacksmith icon, imprint note */
.d4-tooltip.tt-aspect .tt-power{position:relative;padding-left:17px;margin:6px 0;color:#f88807}
.d4-tooltip.tt-aspect .tt-power::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;transform:none;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#f88807}
.d4-tooltip.tt-aspect .tt-power .ttv{color:inherit}
.d4-tooltip.tt-aspect .tt-power .tt-random{color:var(--d4tt-c-random)}
.d4-tooltip.tt-aspect .tt-power .tt-random .ttv{color:var(--d4tt-c-random)}
.d4-tooltip .tt-salvage{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;color:var(--d4tt-body);font-size:14px}
.d4-tooltip .tt-salvage .tt-salv{flex:none;width:20px;height:20px;margin-top:2px;background:url(ui/icon-salvage.webp) center/contain no-repeat}
.d4-tooltip .tt-salvage .asp-name{color:var(--d4tt-value)}
.d4-tooltip .tt-note{margin:8px 0 2px;color:var(--d4tt-body);font-size:13px}
/* interactive states (page-side; the card itself never restyles) */
.d4-tooltip .tt-affix.cfg{cursor:pointer;border-radius:3px;margin-left:-6px;padding-left:21px;margin-right:-6px;padding-right:6px}
.d4-tooltip .tt-affix.cfg::before{left:6px}
.d4-tooltip .tt-affix.cfg:hover{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(220,174,129,.25)}
.d4-tooltip .tt-affix.cfg.sel{box-shadow:inset 0 0 0 1px rgba(220,174,129,.5)}
.d4-tooltip .tt-random{cursor:pointer}
.d4-tooltip .tt-affix.tt-random:hover{color:#d9d0f7;text-decoration:underline}

/* ---------- hover panel / touch sheet (phase-4 interaction spec) ---------- */
.d4tt-panel{position:absolute;z-index:999;width:340px;pointer-events:auto;
  filter:drop-shadow(0 18px 50px rgba(0,0,0,.6))}
.d4tt-panel .d4-tooltip{width:100%}
.d4tt-chip{margin:0 0 6px;padding:4px 10px;background:#241d2a;border:1px solid #3a3340;
  border-radius:4px;font-size:11.5px;color:#bda582;letter-spacing:.04em}
.d4tt-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:#0c0a0e;border-top:1px solid #3a3340;
  border-radius:12px 12px 0 0;max-height:75vh;display:flex;flex-direction:column;box-shadow:0 -12px 40px rgba(0,0,0,.6)}
.d4tt-sheet-bd{overflow:auto;padding:16px 12px;color:#bab0a3;font-size:14px;line-height:1.45}
.d4tt-sheet-bd .d4-tooltip{margin:0 auto;max-width:calc(100vw - 24px)} /* audit: the 340px card overflowed the sheet at <376px */
.d4tt-sheet-ft button{min-height:40px;padding:8px 18px}
.d4tt-sheet-ft{display:flex;gap:12px;justify-content:space-between;padding:10px 18px;border-top:1px solid #3a3340}
.d4tt-sheet-ft a{color:#dcaf6c;text-decoration:none}
.d4tt-sheet-ft button{background:#241d2a;border:1px solid #3a3340;border-radius:5px;color:#c9c2d0;padding:5px 14px}
.d4tt-backdrop{position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.5)}

/* ---------- entity-page app (db-pages.js) ---------- */
.db-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin:14px 0}
.db-slider{display:flex;align-items:center;gap:10px}
.db-slider label{font-size:13px;color:#bda582}
.db-slider input{width:220px;max-width:56vw;accent-color:#dcaf6c;height:28px}
.db-slider output{font-family:monospace;min-width:32px;text-align:right;color:#dcaf6c}
.db-cap{font-size:11.5px;color:#8a8090}
.db-pool{position:fixed;right:16px;top:80px;bottom:16px;width:360px;overflow:auto;z-index:60;
  background:#0c0a0e;border:1px solid #3a3340;border-radius:8px;padding:10px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.db-pool[hidden]{display:none}
.db-pool-h{display:flex;justify-content:space-between;align-items:center;color:#dfdad1;padding:4px 6px 10px}
.db-x{background:none;border:none;color:#8a8090;cursor:pointer;font-size:16px;padding:10px;margin:-6px}
.db-pool-row{display:block;width:100%;text-align:left;background:#17131b;border:1px solid #2a242f;border-radius:5px;
  color:#bab0a3;padding:8px 10px;margin:4px 0;cursor:pointer;font-size:13px}
.db-pool-row:hover{border-color:#dcaf6c}
.db-pin{width:88px;background:#17131b;border:1px solid #dcaf6c;border-radius:3px;color:#dcaf6c;font-family:monospace;font-size:16px;min-height:32px}
.db-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:90;opacity:0;
  background:#241d2a;border:1px solid #3a3340;border-radius:6px;padding:8px 16px;color:#dfdad1;font-size:13px;transition:all .25s}
.db-toast.show{opacity:1;transform:translate(-50%,0)}
.db-pool-note{color:#8a8090;font-size:12.5px;padding:6px}
.db-range-hint{font-style:normal;color:#8a8090;font-size:12px}
.db-pin-btn{margin-left:8px;background:none;border:1px dashed #3a3340;border-radius:3px;color:#bda582;font-size:11px;padding:6px 10px;cursor:pointer;min-height:32px}
.db-pin-btn:hover{border-color:#dcaf6c;color:#dcaf6c}
.db-levels th.on,.db-levels td.on{background:#241d2a;color:#dcaf6c}
@media (max-width: 720px){ /* W1: the pool becomes a bottom sheet on phones */
  .db-pool{left:0;right:0;top:auto;bottom:0;width:auto;max-height:70vh;border-radius:12px 12px 0 0}
}
@media (prefers-reduced-motion: reduce){ /* S3 */
  .db-toast,.d4tt-sheet{transition:none}
}
.db-class-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.db-class-chips .chip{background:#17131b;border:1px solid #2a242f;border-radius:99px;color:#bab0a3;font-size:12px;padding:3px 12px;cursor:pointer;text-transform:capitalize}
.db-class-chips .chip.on{border-color:#dcaf6c;color:#dcaf6c}
.db-hub-results .db-row .k{font-style:normal;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#8a8090;min-width:52px}

/* ---------- item families: gems, runes, consumables, materials, keys, trophies ----------
   ITEM-TEMPLATE.md port (renders/gem-*, rune-*, key-*, material-* verified against
   screenshots). One template, rarity = a theme: no rarity → the leather tooltip
   base 9-slice (76 fill, 38px); a rarity → the rarity frame (128 fill, 88px).
   No tiled overlay, no class background. */
:root{
  --d4tt-c-white:#dfdcd7;--d4tt-c-highlight:#c47334;--d4tt-c-red:#c01613;--d4tt-c-chaos:#49ad96;
  --d4tt-c-yellow:#eced66;--d4tt-c-boss_summon_mats:#5dc2f1;--d4tt-c-lore:#eca5a6;
  --d4tt-c-legendary:#f88807;--d4tt-c-rare:#e8e808;--d4tt-c-magic:#8080f0;--d4tt-c-unique:#dcae81;
  --d4tt-rune-cond:#d29916;--d4tt-rune-eff:#b64acf}
.d4-tooltip .tt-white{color:var(--d4tt-c-white)}
.d4-tooltip .tt-highlight{color:var(--d4tt-c-highlight)}
.d4-tooltip .tt-red{color:var(--d4tt-c-red)}
.d4-tooltip .tt-chaos{color:var(--d4tt-c-chaos)}
.d4-tooltip .tt-yellow{color:var(--d4tt-c-yellow)}
.d4-tooltip .tt-boss_summon_mats{color:var(--d4tt-c-boss_summon_mats)}
.d4-tooltip .tt-lore{color:var(--d4tt-c-lore)}
.d4-tooltip .tt-legendary{color:var(--d4tt-c-legendary)}
.d4-tooltip .tt-rare{color:var(--d4tt-c-rare)}
.d4-tooltip .tt-magic{color:var(--d4tt-c-magic)}
.d4-tooltip .tt-unique{color:var(--d4tt-c-unique)}
.d4-tooltip .tt-gray,.d4-tooltip .tt-grey{color:var(--d4tt-flavor)}
.d4-tooltip .tt-runecondition{color:var(--d4tt-rune-cond)}
.d4-tooltip .tt-runeeffect{color:var(--d4tt-rune-eff)}
/* {c_number} inside rune text is the gold of the condition colour (sampled) */
.d4-tooltip.tt-rune .tt-number{color:var(--d4tt-rune-cond)}
/* themes the equipment card lacked: normal (leather base) + magic */
.d4-tooltip.rarity-normal,.rarity-normal{--rarity-name:#ebebeb;--rarity-sub:#c9c9c9;--rarity-power:#dfdcd7;
  --rarity-frame:url(ui/panel-leather.webp);--rarity-tint:rgba(201,201,201,.07)}
.d4-tooltip.rarity-normal .tt-frame{border-width:38px;border-image:url(ui/panel-leather.webp) 76 fill stretch}
.d4-tooltip.rarity-magic,.rarity-magic{--rarity-name:#dfdcd7;--rarity-sub:#7070d2;--rarity-power:#8080f0;
  --rarity-frame:url(ui/rarity-frame-magic.webp);--rarity-tint:rgba(112,112,210,.07)}
/* subtitle colours sampled on item tooltips (differ from the equipment card's) */
.d4-tooltip.rarity-rare .tt-item .tt-sub{color:#cacb0d}
.d4-tooltip.rarity-legendary .tt-item .tt-sub{color:#d47407}
.d4-tooltip.rarity-unique .tt-item .tt-sub{color:#bd956e}
.d4-tooltip.rarity-mythic .tt-item .tt-sub{color:#be8bcd}
.d4-tooltip.rarity-magic .tt-item .tt-sub{color:#7070d2}
.d4-tooltip.rarity-normal .tt-item .tt-sub{color:#c9c9c9}
/* header: name wraps left of the icon; the icon spans name cap-top → divider */
.d4-tooltip .tt-inner.tt-item{padding:28px}
.d4-tooltip .tt-item .tt-hdr{display:flex;gap:10px;align-items:flex-start;min-height:64px}
.d4-tooltip .tt-item .tt-hdr-text{flex:1;min-width:0;padding-right:84px}
.d4-tooltip .tt-item .tt-name{white-space:normal;padding:0;margin:2px 0 7px;color:#dfdcd7}
.d4-tooltip.rarity-normal .tt-item .tt-name{color:#ebebeb}
.d4-tooltip.tt-rune .tt-item .tt-name{color:#f4be8c}
.d4-tooltip .tt-item .tt-name.tt-boss_summon_mats{color:#5dc1f1}
.d4-tooltip .tt-item .tt-name img.tt-mk{height:1em;width:auto;vertical-align:-.08em;margin-right:.15em}
.d4-tooltip .tt-item .tt-sub{padding:0;margin-bottom:12px}
.d4-tooltip .tt-item img.tt-icon--hdr{top:34px;right:10px;width:72px;height:62px;filter:none}
/* the render's divider is an inline <img>: its line box adds ~5px under the art */
.d4-tooltip .tt-item hr.tt-div{margin:3px 0 8px;opacity:.9}
/* body rows */
.d4-tooltip .tt-item .tt-desc{margin:2px 0 10px}
.d4-tooltip .tt-item .tt-line{margin:2px 0}
.d4-tooltip .tt-item .tt-gap{height:8px}
.d4-tooltip .tt-item .tt-bullet{position:relative;padding-left:15px;margin:3px 0}
.d4-tooltip .tt-item .tt-bullet::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;background:var(--d4tt-flavor);transform:rotate(45deg)}
.d4-tooltip .tt-item .tt-bullet--cond::before{background:var(--d4tt-rune-cond)}
.d4-tooltip .tt-item .tt-bullet--eff::before{background:var(--d4tt-rune-eff)}
.d4-tooltip .tt-item .tt-lbl{color:#bda582}
.d4-tooltip .tt-item .tt-lbl--slot{color:var(--d4tt-socket)}
.d4-tooltip .tt-item .tt-sublabel{color:var(--d4tt-flavor);margin:-1px 0 4px 15px;font-size:15px}
.d4-tooltip .tt-item .tt-loc{color:#dfdcd7;margin:10px 0 8px}
.d4-tooltip .tt-item .tt-banner{margin:8px -6px 6px;padding:5px 10px;text-align:center;font-family:Cinzel,serif;font-weight:600;
  letter-spacing:.12em;font-size:14px;color:#dfdcd7;background:linear-gradient(180deg,#3a3630,#26231f);
  border-top:1px solid #57524a;border-bottom:1px solid #57524a}
.d4-tooltip .tt-item .tt-affix{margin:5px 0;padding-left:15px;color:#bda582}
.d4-tooltip .tt-item .tt-affix::before{background:var(--d4tt-flavor)}
.d4-tooltip .tt-item .tt-affix-ds{color:var(--d4tt-flavor);margin-top:1px;line-height:1.3}
.d4-tooltip .tt-item .tt-flavor{margin:8px 0;line-height:1.4;white-space:normal}
.d4-tooltip .tt-item .tt-foot{display:block;margin-top:6px;font-size:13px;text-align:right;color:#dfdcd7}
.d4-tooltip .tt-item .tt-foot div{margin:1px 0}
/* inline markup sprites: the renders draw every {icon:} at 16px regardless of its scale arg */
.d4-tooltip img.tt-mk{display:inline-block;height:16px;width:16px;vertical-align:-3px;margin-right:3px;object-fit:contain}
/* planner foot notes (the d4tool:hover bridge): Not Yet Learned, the choice-group line, the level gate, the click hint */
.d4tt-notes{position:relative;z-index:3;margin:6px 26px 24px;padding-top:8px;border-top:1px solid #3b3341;font-size:13px;line-height:1.4;text-align:center;color:#a89d8b}
.d4tt-note+.d4tt-note{margin-top:3px}
.d4tt-note--warn{color:#c01414}