.gear-equipment, .equipment-popup {
  --equipment-ink: #080808;
  --equipment-copy: #bdbab4;
  --equipment-serif: Cinzel, Georgia, "Times New Roman", serif;
}

.gear-equipment {
  width: min(100%, 580px);
  margin: 16px auto 14px;
}

.detail-tooltip.equipment-popup {
  width: min(350px, calc(100vw - 16px));
  border: 0;
  border-radius: 0;
  background: var(--equipment-ink);
  box-shadow: 0 0 0 1px #000, 0 5px 16px #000d;
  scrollbar-color: #6e5941 var(--equipment-ink);
  scrollbar-width: thin;
}

.equipment-popup .equipment-item { box-shadow: none; }

.equipment-popup-layer {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  pointer-events: none;
}
.equipment-popup-layer::backdrop { background: transparent; pointer-events: none; }

.equipment-popup-layer > .detail-tooltip.equipment-popup[data-pinned] {
  position: fixed;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  pointer-events: auto;
}

@media (max-width: 780px), (hover: none) {
  .equipment-popup-layer > .detail-tooltip.equipment-popup[data-pinned] {
    width: min(350px, calc(100vw - 56px));
    max-height: 45dvh;
  }
}

.equipment-popup-close { display: none; }
.equipment-popup[data-pinned] .equipment-popup-close {
  position: sticky;
  top: 6px;
  z-index: 2;
  grid-area: 1 / 1;
  justify-self: end;
  align-self: start;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 6px 6px 0;
  padding: 0;
  border: 1px solid #8b704a;
  border-radius: 0;
  background: #201810;
  color: #ead0a8;
  font: 22px/1 var(--sans);
}
.equipment-popup-close:hover { border-color: #d2ac74; background: #36281a; color: #fff0d7; }
.equipment-popup-close:focus-visible { outline: 2px solid #e2c393; outline-offset: -3px; }

.equipment-popup[data-pinned] .equipment-item {
  grid-area: 1 / 1;
  min-width: 0;
  overflow: visible;
}

.equipment-popup[data-pinned] .equipment-item-header {
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: max(44px, var(--item-header-height));
  padding-inline: 44px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.equipment-popup[data-pinned] .equipment-item-header:active,
.equipment-popup[data-dragging] .equipment-item-header { cursor: grabbing; }
.equipment-popup[data-pinned] .equipment-item-header:focus-visible { outline: 2px solid #e2c393; outline-offset: -3px; }

@media (pointer: coarse) {
  .equipment-popup[data-pinned] .equipment-popup-close { width: 40px; height: 40px; }
  .equipment-popup[data-pinned] .equipment-item-header { min-height: max(52px, var(--item-header-height)); padding-inline: 52px; }
}

.equipment-window {
  padding: 5px;
  border: 1px solid #796343;
  background: linear-gradient(135deg, #5a472f, #201a13 22% 78%, #473924);
  box-shadow: inset 0 0 0 1px #0d0b08, inset 0 0 0 3px #32281b, 0 4px 15px #0009;
}

.equipment-window-header {
  padding: 10px 12px 12px;
  text-align: center;
  border: 1px solid #6a5436;
  border-bottom-color: #30251a;
  background: url("art/ui/unique-divider.webp") bottom 3px center / min(72%, 221px) 6px no-repeat,
    linear-gradient(90deg, #0e0c09, #1f1912 24% 76%, #0e0c09);
}

.build-content .equipment-window-header h3 {
  color: #ddc499;
  font: 600 21px/1.2 var(--equipment-serif);
  letter-spacing: .075em;
  text-shadow: 0 1px 2px #000;
}

.build-content .equipment-window-header p { margin-top: 3px; color: var(--equipment-copy); font-size: 12px; }
.equipment-tap-hint { display: none; }

.equipment-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-areas:
    "weapon .         helmet amulet     offhand"
    "weapon ring-left body   ring-right offhand"
    "gloves .         body   .          boots"
    ".      jewels    belt   belt       .";
  grid-template-rows: repeat(3, minmax(83px, auto)) minmax(65px, auto);
  gap: clamp(4px, 1.15vw, 10px);
  padding: clamp(8px, 2vw, 18px);
  border: 1px solid #57432c;
  border-top: 0;
  background:
    radial-gradient(ellipse at 50% 46%, #43332159, transparent 73%),
    repeating-linear-gradient(132deg, #e2c98d06 0 1px, transparent 1px 4px),
    #15120f;
  box-shadow: inset 0 0 13px #000a;
}

.equipment-flasks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(4px, 1.15vw, 9px);
  padding: 8px clamp(6px, calc((100% - 400px) / 2), 72px) 9px;
  border: 1px solid #57432c;
  border-top-color: #6b5539;
  background: linear-gradient(90deg, #110e0b, #231a12 24% 76%, #110e0b);
  box-shadow: inset 0 0 10px #000b;
}

.equipment-window .equipment-flask-source {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 9px;
  padding: 7px 10px;
  border-inline: 1px solid #57432c;
  background: #14100c;
  color: #d2bda0;
  font-size: 11px;
  text-align: center;
}

.equipment-flask-source select {
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid #695337;
  border-radius: 0;
  background: #201810;
  color: #ead7b8;
  font: inherit;
}

.equipment-slot {
  --slot-rarity: #c8c8c8;
  --slot-rim: #605440;
  --slot-hover: #aa936a;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  min-width: 0;
  padding: 3px 3px 5px;
  border: 1px solid var(--slot-rim);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px #050504, inset 0 0 0 2px #302820, 0 1px 2px #0008;
  background: radial-gradient(ellipse at 50% 41%, #22201c 0%, #0b0a09 63%, #060605 100%);
  color: #bcb0a0;
  font-size: 11px;
  line-height: 1.15;
  text-align: center;
}

.equipment-slot[data-rarity="magic"] { --slot-rarity: #9999ff; --slot-rim: #615e85; --slot-hover: #aaa9e8; }
.equipment-slot[data-rarity="rare"] { --slot-rarity: #ffff77; --slot-rim: #82734b; --slot-hover: #cfba69; }
.equipment-slot[data-rarity="unique"] { --slot-rarity: #e59b63; --slot-rim: #8a5636; --slot-hover: #d99a63; }
.equipment-slot[data-rarity="empty"] {
  --slot-rim: #504638;
  color: #a3998c;
  background: #0b0a09;
}
.equipment-slot[data-rarity="empty"] img { opacity: .34; filter: grayscale(.8); }
.equipment-slot[data-gear-slot]:is(:hover, [aria-expanded="true"], [aria-describedby], :focus-visible) {
  border-color: var(--slot-hover);
  box-shadow: inset 0 0 0 1px #050504, inset 0 0 0 2px var(--slot-rim), 0 1px 3px #000;
  background: radial-gradient(ellipse at 50% 40%, #2b2721, #12100d 63%, #0a0908);
  color: #e9dfd1;
}
.equipment-slot:focus-visible { outline: 2px solid #e2c393; outline-offset: 2px; }

.equipment-slot[data-slot="weapon"] { grid-area: weapon; }
.equipment-slot[data-slot="helmet"] { grid-area: helmet; }
.equipment-slot[data-slot="offhand"] { grid-area: offhand; }
.equipment-slot[data-slot="ring-left"] { grid-area: ring-left; }
.equipment-slot[data-slot="ring-right"] { grid-area: ring-right; }
.equipment-slot[data-slot="body"] { grid-area: body; }
.equipment-slot[data-slot="amulet"] { grid-area: amulet; }
.equipment-slot[data-slot="gloves"] { grid-area: gloves; }
.equipment-slot[data-slot="belt"] { grid-area: belt; }
.equipment-slot[data-slot="boots"] { grid-area: boots; }
.equipment-slot[data-slot="jewels"] { grid-area: jewels; }

.equipment-flasks .equipment-slot {
  grid-template-rows: 50px auto;
  align-items: start;
  padding-inline: 2px;
}

.equipment-art {
  display: grid;
  place-items: center;
  width: min(100%, 71px);
  height: 53px;
  min-width: 0;
}
.equipment-art img {
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px #000d);
}
.equipment-slot:is([data-slot="amulet"], [data-slot="ring-left"], [data-slot="ring-right"], [data-slot="jewels"]) .equipment-art {
  width: min(100%, 48px);
  height: 44px;
}
.equipment-slot:is([data-slot="weapon"], [data-slot="offhand"], [data-slot="body"]) .equipment-art {
  width: min(100%, 88px);
  height: 125px;
}
.equipment-flasks .equipment-slot .equipment-art {
  align-self: center;
  width: min(100%, 42px);
  height: 48px;
}
.equipment-item-art, .equipment-art.has-item-art > :first-child { visibility: hidden; }
.equipment-art.has-item-art .equipment-item-art { visibility: visible; }

.equipment-slot-caption {
  display: grid;
  gap: 2px;
  width: 100%;
  min-width: 0;
  padding: 3px 2px 1px;
  border-top: 1px solid #b09b7433;
  overflow-wrap: anywhere;
}
.equipment-slot-name {
  color: var(--slot-rarity);
  font-size: 11px;
}
.equipment-flasks .equipment-slot-caption { padding-inline: 0; }

/* PoE 1 item frame and separator artwork © Grinding Gear Games, sourced from PoEDB. */
.equipment-item {
  --item-accent: #d6d6d6;
  --item-frame: #5e5547;
  --item-header: #171611;
  --item-header-height: 38px;
  --item-header-left: url("art/ui/normal-header-left.webp");
  --item-header-right: url("art/ui/normal-header-right.webp");
  --item-header-middle: url("art/ui/normal-header-middle.webp");
  --item-divider: url("art/ui/normal-divider.webp");
  overflow: hidden;
  border: 1px solid var(--item-frame);
  background: var(--equipment-ink);
  color: var(--equipment-copy);
  box-shadow: 0 0 0 1px #000, 0 5px 14px #0009;
  text-align: center;
  overflow-wrap: anywhere;
}
.equipment-item[data-rarity="magic"] {
  --item-accent: #9999ff;
  --item-frame: #625d86;
  --item-header: #181827;
  --item-header-left: url("art/ui/magic-header-left.webp");
  --item-header-right: url("art/ui/magic-header-right.webp");
  --item-header-middle: url("art/ui/magic-header-middle.webp");
  --item-divider: url("art/ui/magic-divider.webp");
}
.equipment-item[data-rarity="rare"] {
  --item-accent: #ffff77;
  --item-frame: #978649;
  --item-header: #262013;
  --item-header-left: url("art/ui/rare-header-left.webp");
  --item-header-right: url("art/ui/rare-header-right.webp");
  --item-header-middle: url("art/ui/rare-header-middle.webp");
  --item-divider: url("art/ui/rare-divider.webp");
}
.equipment-item[data-rarity="unique"] {
  --item-accent: #df9660;
  --item-frame: #996039;
  --item-header: #27190f;
  --item-header-height: 54px;
  --item-header-left: url("art/ui/unique-header-left.webp");
  --item-header-right: url("art/ui/unique-header-right.webp");
  --item-header-middle: url("art/ui/unique-header-middle.webp");
  --item-divider: url("art/ui/unique-divider.webp");
}
.equipment-item[data-rarity="empty"] { --item-accent: #aba6a0; --item-frame: #5b5348; }

.equipment-item-header {
  display: grid;
  align-content: center;
  min-height: var(--item-header-height);
  gap: 1px;
  padding: 7px clamp(19px, 7vw, 28px);
  border-bottom: 1px solid var(--item-frame);
  background:
    var(--item-header-left) left center / auto 100% no-repeat,
    var(--item-header-right) right center / auto 100% no-repeat,
    var(--item-header-middle) center / auto 100% repeat-x var(--item-header);
}
.equipment-item-header h3 {
  color: var(--item-accent);
  font: 600 17px/1.2 var(--equipment-serif);
  text-shadow: 0 1px 2px #000;
}
.equipment-item-base { color: var(--item-accent); font: 600 14px/1.25 var(--equipment-serif); }
.equipment-unique-stats { padding: 8px 12px 6px; font-size: 13px; line-height: 1.42; }
.equipment-unique-stats > * + * { margin-top: 4px; }
.equipment-implicit, .equipment-mods { padding-top: 9px; color: #a6a5ff; }
.equipment-implicit, .equipment-mods, .equipment-guide-targets, .equipment-crafting {
  background: var(--item-divider) top center / min(90%, 221px) 6px no-repeat;
}
.equipment-guide-targets { display: grid; gap: 8px; padding: 10px 13px; }
.equipment-item-header + .equipment-guide-targets { background: none; }
.equipment-item h4 { margin: 0 0 3px; color: #bdae91; font-size: 10px; font-weight: 650; letter-spacing: .075em; text-transform: uppercase; }
.equipment-targets ul { margin: 0; padding: 0; list-style: none; color: #cfcac2; font-size: 13px; line-height: 1.45; }
.equipment-targets[data-target-kind="pseudo"] ul { color: #a3cbd1; }
.equipment-targets[data-target-kind="modifier"] ul { color: #a6a5ff; }
.equipment-targets[data-target-kind="socket"] ul { color: #9fcbac; }
.equipment-item :is(.equipment-roll-note, .equipment-shared-note, .equipment-item-guide) { color: #b4a999; font-size: 11px; line-height: 1.4; }
.equipment-roll-note code { font-family: var(--mono); color: #dfd2ba; }
.equipment-crafting { padding: 11px 13px 10px; }
.equipment-item .equipment-crafting p { color: #c9c2b7; font-size: 12px; line-height: 1.45; }
.equipment-strategy { margin-top: 14px; }

@media (max-width: 780px), (hover: none) {
  .equipment-hover-hint { display: none; }
  .equipment-tap-hint { display: inline; }
}

@media (max-width: 480px) {
  .equipment-slots { grid-template-rows: repeat(3, minmax(66px, auto)) minmax(56px, auto); }
  .equipment-slot { font-size: 10px; }
  .equipment-slot .equipment-art { height: 42px; }
  .equipment-slot:is([data-slot="amulet"], [data-slot="ring-left"], [data-slot="ring-right"], [data-slot="jewels"]) .equipment-art { height: 36px; }
  .equipment-slot:is([data-slot="weapon"], [data-slot="offhand"], [data-slot="body"]) .equipment-art { height: 89px; }
  .equipment-flasks .equipment-slot { grid-template-rows: 42px auto; }
  .equipment-flasks .equipment-slot .equipment-art { height: 40px; }
  .equipment-slot-name { font-size: 10px; }
}