.dmw-item-tooltip {
  --tooltip-rarity: #e9d6a0;
  position: fixed;
  z-index: 10000;
  width: min(370px, calc(100vw - 20px));
  max-height: min(620px, calc(100vh - 20px));
  overflow: auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--tooltip-rarity) 72%, #4a351f);
  border-radius: 3px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tooltip-rarity) 13%, transparent), transparent 90px),
    radial-gradient(circle at 50% -30%, rgba(215, 180, 106, .13), transparent 54%),
    #11100f;
  color: #efe7d8;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .72), inset 0 0 30px rgba(214, 176, 93, .05);
  font-family: "EB Garamond", Georgia, serif;
}

.dmw-item-tooltip[hidden] { display: none; }
.dmw-item-tooltip[data-rarity="poor"], .trade-chat-item-trigger[data-rarity="poor"] { --tooltip-rarity: #9f9b93; }
.dmw-item-tooltip[data-rarity="common"], .trade-chat-item-trigger[data-rarity="common"] { --tooltip-rarity: #eee5d2; }
.dmw-item-tooltip[data-rarity="uncommon"], .trade-chat-item-trigger[data-rarity="uncommon"] { --tooltip-rarity: #6bd315; }
.dmw-item-tooltip[data-rarity="rare"], .trade-chat-item-trigger[data-rarity="rare"] { --tooltip-rarity: #4f9dff; }
.dmw-item-tooltip[data-rarity="epic"], .trade-chat-item-trigger[data-rarity="epic"] { --tooltip-rarity: #bd6dff; }
.dmw-item-tooltip[data-rarity="legendary"], .trade-chat-item-trigger[data-rarity="legendary"] { --tooltip-rarity: #f1a20b; }
.dmw-item-tooltip[data-rarity="unique"], .trade-chat-item-trigger[data-rarity="unique"] { --tooltip-rarity: #e9d184; }
.dmw-item-tooltip[data-rarity="artifact"], .trade-chat-item-trigger[data-rarity="artifact"] { --tooltip-rarity: #e1272f; }

.dmw-item-tooltip__header {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  min-height: 72px;
  padding: 12px 15px;
  border-bottom: 2px solid var(--tooltip-rarity);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tooltip-rarity) 18%, #17120e), #171411 72%);
}

.dmw-item-tooltip__art {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgba(226, 191, 116, .32);
  background: rgba(0, 0, 0, .28);
}

.dmw-item-tooltip__art::before {
  content: "DMW";
  color: rgba(226, 191, 116, .38);
  font: 700 .66rem "Cinzel", serif;
  letter-spacing: .12em;
}

.dmw-item-tooltip__art.has-artwork::before { display: none; }
.dmw-item-tooltip__art img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(0,0,0,.65)); }
.dmw-item-tooltip__heading { min-width: 0; }
.dmw-item-tooltip__name { margin: 0; color: var(--tooltip-rarity); font: 700 1.58rem/1.05 "Almendra", Georgia, serif; text-wrap: balance; }
.dmw-item-tooltip__rarity { display: block; margin-top: 5px; color: #a99d8d; font: 600 .63rem "Cinzel", serif; letter-spacing: .14em; text-transform: uppercase; }
.dmw-item-tooltip__stats { display: grid; gap: 6px; padding: 14px 16px 15px; }

.dmw-item-tooltip__stat {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: baseline;
  font-size: 1.05rem;
  line-height: 1.2;
}

.dmw-item-tooltip__dash { color: #8e887e; }
.dmw-item-tooltip__stat-name { color: #eee8dc; }
.dmw-item-tooltip__stat-value { color: inherit; font-weight: 700; }
.dmw-item-tooltip__stat--roll { color: #2bbcff; }
.dmw-item-tooltip__stat--roll .dmw-item-tooltip__stat-name { color: #2bbcff; }
.dmw-item-tooltip__gem { grid-column: 2 / -1; color: #b88cff; font: 600 .72rem "Cinzel", serif; letter-spacing: .04em; }
.dmw-item-tooltip__empty { margin: 2px 0; color: #b6aa98; font-size: .96rem; }

.dmw-item-tooltip__market {
  display: grid;
  gap: 3px;
  padding: 11px 16px 12px;
  border-top: 1px solid rgba(210, 176, 101, .24);
  background: rgba(211, 165, 72, .055);
}
.dmw-item-tooltip__market-label { color: #ae9d81; font: 600 .63rem "Cinzel", serif; letter-spacing: .09em; text-transform: uppercase; }
.dmw-item-tooltip__market-value { color: #f0d081; font-size: 1.08rem; }
.dmw-item-tooltip__market-basis { color: #9c907e; font-size: .78rem; }

.dmw-item-tooltip__footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 15px;
  border-top: 1px solid rgba(210, 176, 101, .24);
  color: #8f8371;
  font: 600 .59rem "Cinzel", serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.dmw-item-tooltip.is-pinned::after {
  content: "Pinned · click outside to close";
  display: block;
  padding: 0 15px 9px;
  color: #c9a85e;
  font: 600 .57rem "Cinzel", serif;
  letter-spacing: .08em;
  text-align: right;
  text-transform: uppercase;
}

@media (max-width: 620px) {
  .dmw-item-tooltip {
    left: 10px !important;
    right: 10px;
    bottom: 10px;
    top: auto !important;
    width: auto;
    max-height: min(70vh, 620px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .dmw-item-tooltip:not([hidden]) { animation: dmw-tooltip-in 120ms ease-out; }
  @keyframes dmw-tooltip-in { from { opacity: 0; transform: translateY(3px); } }
}