/* Runiczna stal - wspólna ramka przedmiotów i pustych pól EQ w grze oraz na stronie.
   Zdobienia są rysowane przez CSS; działania slotów nie zmieniamy. */
:is(
  .inv-bag-slot, .inv-eq-slot, .inv-extra-slot, .inv-backpack-slot,
  .loot-slot, .lootlog-item-slot, .npc-shop-slot, .recovery-icon,
  .auc-slot, .mail-slot, .tr-slot, .party-loot-item-icon, .bs-item-slot, .quest-reward-slot,
  .achievement-reward-slot, .pg-item-slot, .peq-slot, .tt-slot,
  .wiki-item-slot, .news-item-slot, .profile-item-slot, .premium-slot,
  .vh-item-tt-icon-frame
):has(img[src]):not(.empty) {
  --vh-runic-rank: var(--vh-rank-common, #b9a179);
  --vh-runic-inset: 3px;
  isolation: isolate;
  box-sizing: border-box;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Nie zmieniaj pozycjonowania EQ: jego sloty są absolutnie ułożone na postaci. */
:is(.mail-slot, .tr-slot, .recovery-icon, .auc-slot, .peq-slot, .tt-slot, .vh-item-tt-icon-frame):has(img[src]) {
  position: relative;
}

/* Rangę czytamy z istniejących klas, zmiennych albo koloru ramki,
   które już przekazują moduły ekwipunku, łupów, sklepu i nagród. */
:is([class*="rarity-reinforced"], [class*="rarity-wzmocnion"], [class*="rarity-enhanced"]):has(img[src]) { --vh-runic-rank: var(--vh-rank-reinforced, #ffd24d) !important; }
:is([class*="rarity-rare"], [class*="rarity-szlachetn"], [class*="rarity-noble"]):has(img[src]) { --vh-runic-rank: var(--vh-rank-rare, #33aaff) !important; }
:is([class*="rarity-legendary"], [class*="rarity-legendarn"]):has(img[src]) { --vh-runic-rank: var(--vh-rank-legendary, #ff00c8) !important; }
:is([class*="rarity-elite"], [class*="rarity-elitarn"]):has(img[src]) { --vh-runic-rank: var(--vh-rank-elite, #ff3030) !important; }
:is(.vh-item-tt-icon-frame):has(img[src]) { --vh-runic-rank: var(--tt-rarity-color, #b9a179) !important; }
:is([style*="#ffd24d" i], [style*="255, 210, 77"], [style*="#ffda4d" i]):has(img[src]) { --vh-runic-rank: var(--vh-rank-reinforced, #ffd24d) !important; }
:is([style*="#33aaff" i], [style*="#6dc7ff" i], [style*="51, 170, 255"], [style*="109, 199, 255"]):has(img[src]) { --vh-runic-rank: var(--vh-rank-rare, #33aaff) !important; }
:is([style*="#ff00c8" i], [style*="255, 0, 200"]):has(img[src]) { --vh-runic-rank: var(--vh-rank-legendary, #ff00c8) !important; }
:is([style*="#ff0000" i], [style*="#ff2f2f" i], [style*="#ff5252" i], [style*="#f22" i], [style*="255, 0, 0"], [style*="255, 47, 47"], [style*="255, 82, 82"]):has(img[src]) { --vh-runic-rank: var(--vh-rank-elite, #ff3030) !important; }

/* Explicit rarity is stable even when two custom colors are identical. */
[data-vh-item-rarity="common"]:has(img[src]) { --vh-runic-rank: var(--vh-rank-common, #b9a179) !important; }
[data-vh-item-rarity="reinforced"]:has(img[src]),[data-vh-item-rarity="wzmocnione"]:has(img[src]),[data-vh-item-rarity="enhanced"]:has(img[src]) { --vh-runic-rank: var(--vh-rank-reinforced, #ffd24d) !important; }
[data-vh-item-rarity="rare"]:has(img[src]),[data-vh-item-rarity="szlachetne"]:has(img[src]),[data-vh-item-rarity="noble"]:has(img[src]) { --vh-runic-rank: var(--vh-rank-rare, #33aaff) !important; }
[data-vh-item-rarity="legendary"]:has(img[src]),[data-vh-item-rarity="legendarne"]:has(img[src]) { --vh-runic-rank: var(--vh-rank-legendary, #ff00c8) !important; }
[data-vh-item-rarity="elite"]:has(img[src]),[data-vh-item-rarity="elitarne"]:has(img[src]) { --vh-runic-rank: var(--vh-rank-elite, #ff3030) !important; }



:is(
  .inv-bag-slot, .inv-eq-slot, .inv-extra-slot, .inv-backpack-slot,
  .loot-slot, .lootlog-item-slot, .npc-shop-slot, .recovery-icon,
  .auc-slot, .mail-slot, .tr-slot, .party-loot-item-icon, .bs-item-slot, .quest-reward-slot,
  .achievement-reward-slot, .pg-item-slot, .peq-slot, .tt-slot,
  .wiki-item-slot, .news-item-slot, .profile-item-slot, .premium-slot,
  .vh-item-tt-icon-frame
):has(img[src]):not(.empty)::before,
:is(
  .inv-bag-slot, .inv-eq-slot, .inv-extra-slot, .inv-backpack-slot,
  .loot-slot, .lootlog-item-slot, .npc-shop-slot, .recovery-icon,
  .auc-slot, .mail-slot, .tr-slot, .party-loot-item-icon, .bs-item-slot, .quest-reward-slot,
  .achievement-reward-slot, .pg-item-slot, .peq-slot, .tt-slot,
  .wiki-item-slot, .news-item-slot, .profile-item-slot, .premium-slot,
  .vh-item-tt-icon-frame
):has(img[src]):not(.empty)::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  transform: none !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

:is(
  .inv-bag-slot, .inv-eq-slot, .inv-extra-slot, .inv-backpack-slot,
  .loot-slot, .lootlog-item-slot, .npc-shop-slot, .recovery-icon,
  .auc-slot, .mail-slot, .tr-slot, .party-loot-item-icon, .bs-item-slot, .quest-reward-slot,
  .achievement-reward-slot, .pg-item-slot, .peq-slot, .tt-slot,
  .wiki-item-slot, .news-item-slot, .profile-item-slot, .premium-slot,
  .vh-item-tt-icon-frame
):has(img[src]):not(.empty)::before {
  inset: 0 !important;
  z-index: 0 !important;
  border: 0 !important;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px) !important;
  background:
    radial-gradient(circle at 50% 2px, #fff5d3 0 1px, var(--vh-runic-rank) 1px 2px, transparent 2.5px),
    linear-gradient(135deg,
      #eed8a8 0%, #65462d 9%, #1a1114 27%,
      color-mix(in srgb, var(--vh-runic-rank) 74%, #34201c) 50%,
      #24181b 72%, #6e4d34 91%, #e7c789 100%) !important;
  box-shadow: none !important;
}

:is(
  .inv-bag-slot, .inv-eq-slot, .inv-extra-slot, .inv-backpack-slot,
  .loot-slot, .lootlog-item-slot, .npc-shop-slot, .recovery-icon,
  .auc-slot, .mail-slot, .tr-slot, .party-loot-item-icon, .bs-item-slot, .quest-reward-slot,
  .achievement-reward-slot, .pg-item-slot, .peq-slot, .tt-slot,
  .wiki-item-slot, .news-item-slot, .profile-item-slot, .premium-slot,
  .vh-item-tt-icon-frame
):has(img[src]):not(.empty)::after {
  inset: var(--vh-runic-inset) !important;
  z-index: 1 !important;
  border: 1px solid color-mix(in srgb, var(--vh-runic-rank) 69%, #b6a179) !important;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px) !important;
  background: radial-gradient(circle at 50% 30%,
    color-mix(in srgb, var(--vh-runic-rank) 12%, #291b1b), #0d080a 80%) !important;
  box-shadow: inset 0 0 7px #000 !important;
}

/* Ikona pozostaje nad pierścieniem, licznik sztuk nad ikoną. */
:is(
  .inv-bag-slot, .inv-eq-slot, .inv-extra-slot, .inv-backpack-slot,
  .loot-slot, .lootlog-item-slot, .npc-shop-slot, .recovery-icon,
  .auc-slot, .mail-slot, .tr-slot, .party-loot-item-icon, .bs-item-slot, .quest-reward-slot,
  .achievement-reward-slot, .pg-item-slot, .peq-slot, .tt-slot,
  .wiki-item-slot, .news-item-slot, .profile-item-slot, .premium-slot,
  .vh-item-tt-icon-frame
):has(img[src]):not(.empty) img {
  position: relative !important;
  z-index: 2 !important;
  width: calc(100% - 6px) !important;
  height: calc(100% - 6px) !important;
  max-width: calc(100% - 6px) !important;
  max-height: calc(100% - 6px) !important;
  margin: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  object-fit: contain !important;
  image-rendering: pixelated;
}

:is(.tr-slot, .inv-bag-slot, .inv-eq-slot, .inv-extra-slot, .inv-backpack-slot):has(img[src]) > :not(img):not(.inv-qty-badge) { position: relative; z-index: 2; }
:is(.inv-qty-badge, .quest-reward-qty, .achievement-reward-qty, .wiki-stack, .premium-slot span, .pg-item-slot b) { z-index: 4 !important; }
.vh-item-tt-icon-frame { width: 54px; height: 54px; display: grid; place-items: center; }
.vh-item-tt-icon-frame .vh-item-tt-icon { border: 0 !important; background: none !important; box-shadow: none !important; }
.lootlog-item-slot:has(img[src]), .pg-item-slot:has(img[src]), .auc-slot:has(img[src]) { --vh-runic-inset: 4px; }

/* Więcej miejsca na manekin. Boczne sloty nie przecinają już kręgu. */
@media (min-width: 1101px) and (pointer: fine) {
  #inventoryRightPanel { width: clamp(360px, 25vw, 480px) !important; }
}
#inventoryRightPanel .inv-eq-wrapper {
  width: min(100%, 344px) !important;
  max-width: 344px !important;
  height: 390px !important;
}
#inventoryRightPanel .inv-eq-wrapper::before {
  width: min(184px, calc(100% - 120px)) !important;
  height: auto !important;
  aspect-ratio: 1;
}
#inventoryRightPanel .inv-slot-amulet,
#inventoryRightPanel .inv-slot-gloves { left: 20px !important; }
#inventoryRightPanel .inv-slot-armor,
#inventoryRightPanel .inv-slot-pants { right: 20px !important; }
#inventoryRightPanel .inv-slot-weapon { left: 16px !important; }
#inventoryRightPanel .inv-slot-offhand { right: 16px !important; }
#inventoryRightPanel .inv-slot-amulet-label,
#inventoryRightPanel .inv-slot-gloves-label { left: 40px !important; }
#inventoryRightPanel .inv-slot-armor-label,
#inventoryRightPanel .inv-slot-pants-label { right: 40px !important; }
#inventoryRightPanel .inv-slot-weapon-label { left: 36px !important; }
#inventoryRightPanel .inv-slot-offhand-label { right: 36px !important; }
#inventoryRightPanel .inv-extra-panel-embedded .inv-extra-cell { top: 300px !important; }

/* W szerokim panelu siatka 6 x 7 pozostaje wyśrodkowana. */
@media (min-width: 821px) and (pointer: fine) {
  #inventoryRightPanel .inv-bag-grid { justify-content: center !important; }
}

@media (orientation: portrait) and (pointer: coarse) {
  #inventoryRightPanel .inv-eq-wrapper {
    width: min(100%, 336px) !important;
    max-width: 336px !important;
  }
}

@media (max-width: 350px) and (pointer: coarse) {
  #inventoryRightPanel .inv-extra-panel-embedded .inv-extra-cell { width: 48px !important; }
  #inventoryRightPanel .inv-extra-panel-embedded .inv-extra-cell[data-slot-name="shoulders"] { left: 20px !important; }
  #inventoryRightPanel .inv-extra-panel-embedded .inv-extra-cell[data-slot-name="ring"] { left: 79px !important; }
  #inventoryRightPanel .inv-extra-panel-embedded .inv-extra-cell[data-slot-name="cosmetic"] { right: 79px !important; }
  #inventoryRightPanel .inv-extra-panel-embedded .inv-extra-cell[data-slot-name="wings"] { right: 20px !important; }
  #inventoryRightPanel .inv-bag-grid {
    width: 100% !important;
    grid-template-columns: repeat(6, 32px) !important;
    grid-auto-rows: 32px !important;
    gap: 2px !important;
    justify-content: center !important;
    margin-inline: auto !important;
  }
  #inventoryRightPanel .inv-bag-slot { width: 32px !important; height: 32px !important; }
}

/* Puste pole jest przygaszoną wersją tej samej runicznej stali. */
#inventoryRightPanel :is(.inv-bag-slot, .inv-backpack-slot, .inv-eq-slot, .inv-extra-slot):is(:not(:has(img[src])), :has(.inv-slot-lock-badge)),
.profile-item-slot.empty {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#inventoryRightPanel :is(.inv-bag-slot, .inv-backpack-slot, .inv-eq-slot, .inv-extra-slot):is(:not(:has(img[src])), :has(.inv-slot-lock-badge))::before,
#inventoryRightPanel :is(.inv-bag-slot, .inv-backpack-slot, .inv-eq-slot, .inv-extra-slot):is(:not(:has(img[src])), :has(.inv-slot-lock-badge))::after,
.profile-item-slot.empty::before,
.profile-item-slot.empty::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  border-radius: 0 !important;
}
#inventoryRightPanel :is(.inv-bag-slot, .inv-backpack-slot, .inv-eq-slot, .inv-extra-slot):is(:not(:has(img[src])), :has(.inv-slot-lock-badge))::before,
.profile-item-slot.empty::before {
  inset: 0 !important;
  z-index: 0 !important;
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px) !important;
  border: 0 !important;
  background:
    radial-gradient(circle at 50% 2px, #b29a77 0 1px, transparent 2px),
    linear-gradient(135deg, #aa8a63, #473327 13%, #1a1112 30%, #795438 51%, #1a1112 72%, #4d3628 88%, #a88a65) !important;
  box-shadow: none !important;
}
#inventoryRightPanel :is(.inv-bag-slot, .inv-backpack-slot, .inv-eq-slot, .inv-extra-slot):is(:not(:has(img[src])), :has(.inv-slot-lock-badge))::after,
.profile-item-slot.empty::after {
  inset: 3px !important;
  z-index: 1 !important;
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px) !important;
  border: 1px solid #674c37 !important;
  background: radial-gradient(ellipse at 50% 42%, #2b1b18 0%, #110c0d 52%, #060506 100%) !important;
  box-shadow: inset 2px 2px 6px #000, inset -1px -1px 2px #845936 !important;
}

/* Aktywna paleta zmienia także metaliczne zdobienia na każdym slocie. */
html.vh-custom-item-frames :is(
  .inv-bag-slot, .inv-eq-slot, .inv-extra-slot, .inv-backpack-slot,
  .loot-slot, .lootlog-item-slot, .npc-shop-slot, .recovery-icon,
  .auc-slot, .mail-slot, .tr-slot, .party-loot-item-icon, .bs-item-slot, .quest-reward-slot,
  .achievement-reward-slot, .pg-item-slot, .peq-slot, .tt-slot,
  .wiki-item-slot, .news-item-slot, .profile-item-slot, .premium-slot,
  .vh-item-tt-icon-frame
):has(img[src]):not(.empty)::before {
  background:
    radial-gradient(circle at 50% 2px, color-mix(in srgb,var(--vh-runic-rank) 35%,white) 0 1px,var(--vh-runic-rank) 1px 2px,transparent 2.5px),
    linear-gradient(135deg,
      color-mix(in srgb,var(--vh-runic-rank) 48%,white) 0%,
      color-mix(in srgb,var(--vh-runic-rank) 65%,#1d1014) 9%,
      #1a1114 27%,
      color-mix(in srgb,var(--vh-runic-rank) 74%,#34201c) 50%,
      #24181b 72%,
      color-mix(in srgb,var(--vh-runic-rank) 65%,#1d1014) 91%,
      color-mix(in srgb,var(--vh-runic-rank) 48%,white) 100%) !important;
}
html.vh-custom-item-frames :is(
  .inv-bag-slot, .inv-eq-slot, .inv-extra-slot, .inv-backpack-slot,
  .loot-slot, .lootlog-item-slot, .npc-shop-slot, .recovery-icon,
  .auc-slot, .mail-slot, .tr-slot, .party-loot-item-icon, .bs-item-slot, .quest-reward-slot,
  .achievement-reward-slot, .pg-item-slot, .peq-slot, .tt-slot,
  .wiki-item-slot, .news-item-slot, .profile-item-slot, .premium-slot,
  .vh-item-tt-icon-frame
):has(img[src]):not(.empty)::after {
  border-color:color-mix(in srgb,var(--vh-runic-rank) 76%,#9e9a91) !important;
}