@font-face {
  font-family: "DTM Sans";
  src: url("/assets/dtm_sans.ttf") format("truetype");
  font-display: swap;
}

.tooltip {
  --accent: #d9ad58;
  --tooltip-background: #17110e;
  --tooltip-text: #eadfc8;
  --badge-strong: #ffc247;
  --badge-soft: #ffe6ba;
  --badge-ink: #211923;
  position: relative;
  min-height: 0;
  padding: 17px 17px 12px;
  border: 2px solid var(--accent);
  background: var(--tooltip-background);
  color: var(--tooltip-text);
  box-shadow: inset 0 0 0 2px #3c3023, 0 0 0 3px #0c0907, 0 0 0 4px var(--accent);
  font-family: "DTM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.24;
  image-rendering: pixelated;
}

.tooltip-head { display: flex; align-items: center; gap: 9px; min-height: 72px; }
.tooltip-identity { min-width: 0; }
.tooltip-head h2 { margin: 0 0 5px; color: var(--accent); font: inherit; font-size: 21px; line-height: 1.1; text-shadow: 1px 1px #18100d; overflow-wrap: anywhere; }
.item-mark { position: relative; display: grid; place-items: center; flex: 0 0 74px; width: 74px; height: 74px; border: 0; background: none; transform: none; }
.item-mark::first-letter { transform: none; }
.item-mark .item-mark-frame { width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; }
.item-mark #preview-icon,.item-mark .preview-icon { position: absolute; width: 32px; height: 32px; object-fit: contain; filter: brightness(0) invert(88%) sepia(25%) saturate(600%) hue-rotate(340deg); }
.item-mark #preview-icon.is-sprite,.item-mark .preview-icon.is-sprite { filter: none; image-rendering: pixelated; }
.tooltip-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.tooltip-badges span { display: inline-block; border: 0; padding: 2px 5px; background: var(--badge-strong); color: var(--badge-ink); font-size: 12px; line-height: 1; white-space: nowrap; }
.tooltip-badges span + span { background: var(--badge-soft); color: #211923; }
.tooltip-divider { display: flex; align-items: center; gap: 5px; margin: 13px 0 10px; color: var(--accent); font-size: 11px; }
.tooltip-divider::before,.tooltip-divider::after { content: ""; height: 1px; flex: 1; background: var(--accent); opacity: .65; }
#preview-content,.tooltip-content { min-height: 85px; }
.preview-heading { display: block; margin: 0 0 8px; color: var(--accent); font-size: 14px; }
.preview-requirement,.stat-row,.socket-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 14px; }
.preview-requirement { color: #fcfcfc; }
.requirement-label { display: inline-flex; align-items: center; gap: 5px; }
.requirement-icon { color: #83dfae; }
.preview-requirement strong { color: #aeaeae; font-weight: 400; text-align: right; }
.stat-row { border: 0; }
.stat-row span { min-width: 0; }
.stat-row strong { color: #83dfae; font-weight: 400; white-space: nowrap; }
.socket-row { justify-content: flex-start; color: var(--tooltip-text); border: 0; }
.socket-row .socket-empty { color: #8d857d; }
.tooltip-lore { margin: 0; color: var(--tooltip-text); text-align: left; white-space: pre-wrap; font-size: 14px; line-height: 1.35; }
.tooltip-tabs { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 13px 0 0; }
.tooltip-tabs button { display: grid; place-items: center; flex: 0 0 auto; padding: 0; width: 26px; height: 26px; border: 0; background: none; color: #655a4d; font: inherit; font-size: 13px; line-height: 1; cursor: pointer; }
.tooltip-tabs button.active { color: var(--accent); }
.tooltip-tabs button[hidden] { display: none; }
.tooltip-tabs .tooltip-key { display: inline-grid; place-items: center; min-width: 16px; height: 15px; margin-left: 4px; background: #f4f0e9; color: #211b17; font-size: 10px; }
.preview-player { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: -9px 0 20px; }
.preview-player label { font-size: 11px; }
.preview-player input,.preview-player select { width: 100%; padding: 7px 8px; font-size: 12px; }
.preview-combat { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--accent); }
.preview-section-divider { margin: 11px 0 10px; border-top: 1px solid var(--accent); opacity: .75; }
.preview-dps { margin-bottom: 3px; color: var(--accent); font-size: 26px; line-height: 1.1; }
.preview-dps .number-positive { color: var(--accent); }
.preview-dps span:last-child { color: var(--tooltip-text); font-size: 14px; }
.preview-combat-line { padding: 2px 0; color: var(--tooltip-text); font-size: 14px; }
.preview-combat-line img { display: inline-block; width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; image-rendering: pixelated; }
.number-positive { color: #83dfae; }
.number-negative,.requirement-failed strong { color: #d05a4a; }
.requirement-failed { color: #fcfcfc; }
.requirement-failed .requirement-icon { color: #d05a4a; }
.requirement-failed .number-positive { color: #d05a4a; }