/* ==========================================================================
   DiabloS Universal Tooltip Stylesheet for WordPress
   Includes Blizzard gothic frames, quality variants, set bonuses, and CTA
   ========================================================================== */

:root {
  --diablos-tooltip-base: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/tooltip-base.webp");
  --diablos-tooltip-frame: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/tooltip-frame.webp");
  --diablos-tooltip-frame-common: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/frame-common.webp");
  --diablos-tooltip-frame-magic: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/frame-magic.webp");
  --diablos-tooltip-frame-rare: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/frame-rare.webp");
  --diablos-tooltip-frame-legendary: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/frame-legendary.webp");
  --diablos-tooltip-frame-set: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/frame-set.webp");
  --diablos-tooltip-frame-unique: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/frame-unique.webp");
  --diablos-tooltip-frame-mythic: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/frame-mythic.webp");
  --diablos-tooltip-headers: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/headers.webp");
  --diablos-tooltip-list-icons: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/list-icons-s6.webp");
  --diablos-tooltip-unique-star: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/unique-star.webp");
  --diablos-tooltip-damage-line: url("https://bubaigei.com/wp-content/uploads/diablos/d4/tooltip-ui/damage-line.webp");

  --panel-border: rgba(255, 255, 255, 0.08);
  --accent: #00e5a3;
  --accent-soft: rgba(0, 229, 163, 0.08);
  --d4-quality-unique: #deab5b;
}

.diablos-tooltip-root {
  position: relative;
  z-index: 999999;
}

.diablos-tooltip-floating {
  position: fixed;
  z-index: 999999;
  pointer-events: auto;
  width: max-content;
  max-width: min(440px, calc(100vw - 16px));
  max-height: min(88vh, calc(100dvh - 16px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: diablosTooltipFadeIn 0.15s ease-out;
  box-sizing: border-box;
}

@keyframes diablosTooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

a.diablos-tooltip-trigger {
  text-decoration: underline dotted #c8a56f 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a.diablos-tooltip-trigger:hover,
a.diablos-tooltip-trigger.is-tooltip-active {
  color: #f3d79b;
  text-decoration-color: #f3d79b;
}

/* Tooltip Embed Structure */
.diablos-tooltip-embed {
  display: flex;
  flex-direction: column;
  width: min(406px, calc(100vw - 44px));
  box-sizing: border-box;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.diablos-tooltip-embed__body {
  position: relative;
}

/* Card Panel Base */
.diablos-unique-card__panel {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  inset: auto !important;
  width: 100% !important;
  max-width: 406px !important;
  box-sizing: border-box;
  padding: 28px 24px;
  background:
    linear-gradient(180deg, rgba(31, 18, 14, 0.98), rgba(10, 8, 9, 0.995)),
    #0b0808;
  box-shadow:
    0 26px 72px rgba(0, 0, 0, 0.72),
    0 0 18px rgba(0, 0, 0, 0.72);
  color: #bab0a3;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 14px;
  isolation: isolate;
  line-height: 1.5;
  opacity: 1;
  pointer-events: auto;
  overflow: visible !important;
  text-shadow: 0 0 2px #000;
  margin: 0 !important;
}

/* Dual Layer Borders: Before = Quality Filigree, After = Outer Gothic Spikes */
.diablos-unique-card__panel::before,
.diablos-unique-card__panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.diablos-unique-card__panel::before {
  box-sizing: border-box;
  inset: 0;
  z-index: -2;
  border: 64px solid transparent;
  border-image: var(--diablos-tooltip-frame-unique) 128 fill / 64px stretch;
  opacity: 1;
}

.diablos-unique-card__panel::after {
  box-sizing: border-box;
  inset: 0;
  z-index: -1;
  border: 62px solid transparent;
  border-image: var(--diablos-tooltip-frame) 124 / 62px / 12px round;
  opacity: 1;
}

.diablos-unique-card__panel.is-normal::before {
  border-image-source: var(--diablos-tooltip-frame-common);
}

.diablos-unique-card__panel.is-magic::before {
  border-image-source: var(--diablos-tooltip-frame-magic);
}

.diablos-unique-card__panel.is-rare::before {
  border-image-source: var(--diablos-tooltip-frame-rare);
}

.diablos-unique-card__panel.is-legendary::before {
  border-image-source: var(--diablos-tooltip-frame-legendary);
}

.diablos-unique-card__panel.is-set::before {
  border-image-source: var(--diablos-tooltip-frame-set);
}

.diablos-unique-card__panel.is-unique::before {
  border-image-source: var(--diablos-tooltip-frame-unique);
}

.diablos-unique-card__panel.is-mythic::before {
  border-image-source: var(--diablos-tooltip-frame-mythic);
}

/* Header & Artwork */
.diablos-unique-card__item-left,
.diablos-unique-card__item-header,
.diablos-unique-card__item-body,
.diablos-unique-card__stats,
.diablos-unique-card__section,
.diablos-unique-card__power,
.diablos-unique-card__flavor,
.diablos-unique-card__footer {
  position: relative;
  z-index: 1;
}

.diablos-unique-card__item-header {
  min-height: 96px;
  padding-top: 10px;
  padding-right: 104px;
}

.diablos-unique-card__item-title {
  display: block;
  margin-bottom: 6px;
  min-width: 0;
  color: #f7c99c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.diablos-unique-card__panel.is-mythic .diablos-unique-card__item-title {
  color: #cda1d8;
}

.diablos-unique-card__panel.is-set .diablos-unique-card__item-title {
  color: #00ff00;
}

.diablos-unique-card__panel.is-legendary .diablos-unique-card__item-title {
  color: #f8930a;
}

.diablos-unique-card__panel.is-rare .diablos-unique-card__item-title {
  color: #f1f25c;
}

.diablos-unique-card__panel.is-magic .diablos-unique-card__item-title {
  color: #6d9eeb;
}

.diablos-unique-card__item-title span,
.diablos-unique-card__item-title small {
  display: block;
}

.diablos-unique-card__item-title small {
  margin-top: 4px;
  color: #8f857a;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.diablos-unique-card__image-section {
  position: absolute;
  z-index: 2;
  top: -22px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 90px;
  height: 135px;
  margin: 0;
}

.diablos-unique-card__item-art {
  display: block;
  width: 90px;
  height: 135px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.78));
}

.talisman-icon-art {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
}

.rune-icon-art {
  width: 76px;
  height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.6));
}

/* Item Type & Separator */
.diablos-unique-card__item-type {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 98px);
  font-size: 0.86rem;
  line-height: 1.4;
  color: #f7c99c;
  font-weight: 800;
}

.diablos-unique-card__panel.is-mythic .diablos-unique-card__item-type {
  color: #cda1d8;
}

.diablos-unique-card__panel.is-set .diablos-unique-card__item-type {
  color: #00ff00;
}

.diablos-unique-card__panel.is-legendary .diablos-unique-card__item-type {
  color: #f8930a;
}

.diablos-unique-card__panel.is-rare .diablos-unique-card__item-type {
  color: #f1f25c;
}

.diablos-unique-card__panel.is-magic .diablos-unique-card__item-type {
  color: #6d9eeb;
}

.diablos-unique-card__seperator {
  position: relative;
  z-index: 1;
  height: 10px;
  margin: 8px auto;
  background-image: var(--diablos-tooltip-headers);
  background-position: center -32px;
  background-repeat: no-repeat;
}

/* Affixes & Lines */
.diablos-unique-card__implicit,
.diablos-unique-card__affixes {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  color: #d7c5aa;
  font-size: 0.86rem;
  line-height: 1.45;
}

.diablos-unique-card__line {
  position: relative;
  min-height: 1.5rem;
  padding-left: 1.5rem;
  overflow-wrap: anywhere;
}

.diablos-unique-card__line::before {
  content: "";
  position: absolute;
  top: 0;
  left: -0.3125rem;
  width: 1.5rem;
  height: 1.5rem;
  background: var(--diablos-tooltip-list-icons) -1.5rem 0 / auto no-repeat;
}

.diablos-unique-card__line.is-unique-affix {
  color: #f7c99c;
}

.diablos-unique-card__panel.is-mythic .diablos-unique-card__line.is-unique-affix {
  color: #cda1d8;
}

.diablos-unique-card__panel.is-set .diablos-unique-card__line.is-unique-affix {
  color: #00ff00;
}

.diablos-unique-card__line.is-unique-affix::before {
  left: -5px;
  width: 24px;
  height: 24px;
  background: var(--diablos-tooltip-unique-star) center / 100% no-repeat;
}

.diablos-unique-card__number {
  color: #ffc772;
}

/* Set Bonus Box Styling */
.talisman-set-section {
  margin-top: 8px;
}

.talisman-set-heading {
  display: block;
  margin: 6px 0 8px;
  color: #00e5a3;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.talisman-set-stack {
  display: grid;
  gap: 8px;
}

.talisman-set-group {
  display: grid;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 229, 163, 0.3);
  border-radius: 4px;
  background: rgba(0, 229, 163, 0.08);
  box-shadow: inset 0 0 12px rgba(0, 229, 163, 0.04);
  box-sizing: border-box;
}

.talisman-set-badge {
  display: inline-block;
  color: #00e5a3;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
}

/* Item Aliases / Set Parts Box */
.item-detail-aliases {
  margin: 10px 0 0 0 !important;
  padding: 8px 12px !important;
  background: rgba(18, 13, 10, 0.95) !important;
  border: 1px solid rgba(200, 165, 111, 0.3) !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #bab0a3 !important;
  box-sizing: border-box !important;
}

.item-detail-aliases.is-set-parts strong {
  color: #00e5a3 !important;
}

.item-detail-aliases strong {
  color: #e5c285 !important;
}

/* Footer & Classes */
.diablos-unique-card__footer {
  display: grid;
  gap: 6px;
  color: #8d8478;
  font-size: 0.76rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Runeword Card */
.runeword-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 406px;
  padding: 20px;
  background: linear-gradient(180deg, rgba(31, 18, 14, 0.98), rgba(10, 8, 9, 0.995)), #0b0808;
  border: 1px solid rgba(200, 165, 111, 0.35);
  border-radius: 4px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72);
  color: #bab0a3;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  box-sizing: border-box;
}

.runeword-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.runeword-card__icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
}

.runeword-card__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.runeword-card__name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #deab5b;
}

.runeword-card__alt {
  font-size: 0.8rem;
  color: #8f857a;
}

.runeword-card__badges {
  display: flex;
  gap: 6px;
}

.runeword-card__badge {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
}

.runeword-card__badge.is-runeword {
  background: rgba(200, 155, 60, 0.15);
  color: #f0c975;
  border: 1px solid rgba(200, 155, 60, 0.35);
}

.runeword-card__badge.is-season {
  background: rgba(0, 229, 163, 0.12);
  color: #00e5a3;
  border: 1px solid rgba(0, 229, 163, 0.3);
}

.runeword-card__rune {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  border-radius: 3px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 600;
}

.runeword-card__rune.is-condition {
  border-left: 2px solid #4880ff;
  color: #a8c8ff;
}

.runeword-card__rune.is-effect {
  border-left: 2px solid #00e5a3;
  color: #a3f7db;
}

.runeword-card__rune img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.runeword-card__power {
  display: grid;
  gap: 6px;
  border-left: 3px solid #deab5b;
  border-radius: 0 4px 4px 0;
  padding: 10px 12px;
  background: rgba(222, 171, 91, 0.08);
}

.runeword-card__power p {
  margin: 0;
  color: #e6ebf2;
  font-size: 13.5px;
  line-height: 1.6;
}

/* Prominent Blizzard Gold CTA Button (Inside Card Panel) */
.diablos-unique-card__more-btn,
.diablos-tooltip-embed__more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 8px 14px;
  background: linear-gradient(180deg, #2b1c11 0%, #150d07 100%);
  border: 1px solid rgba(212, 175, 55, 0.6);
  border-radius: 3px;
  color: #f7d287;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.18s ease-in-out;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 230, 160, 0.2);
  box-sizing: border-box;
}

.diablos-unique-card__more-btn:hover,
.diablos-tooltip-embed__more-btn:hover {
  background: linear-gradient(180deg, #3d2717 0%, #1f130a 100%);
  border-color: #ffd700;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
  box-shadow:
    0 4px 14px rgba(212, 175, 55, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.diablos-unique-card__more-arrow,
.diablos-tooltip-embed__arrow {
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: #ffd700;
  transition: transform 0.18s ease-in-out;
}

.diablos-unique-card__more-btn:hover .diablos-unique-card__more-arrow,
.diablos-tooltip-embed__more-btn:hover .diablos-tooltip-embed__arrow {
  transform: translate(2px, -2px);
  color: #ffffff;
}