/*
 * Ortak item deger cercevesi
 * --------------------------
 * Bir item hangi panelde gorunurse gorunsun katalogdaki ayni rarity rengini
 * kullanir. Kalinlik ve parilti slotun icine dogru verildigi icin ikonun
 * disina tasmaz ve komsu slotlarin alanini bozmaz.
 */
html body [data-ui-panel] .item-tier-frame.item-tier-frame {
  --item-frame-edge: #b9ad93;
  --item-frame-inner: rgba(203, 192, 166, .42);
  --item-frame-glow: rgba(185, 173, 147, .18);
  --item-frame-outer: rgba(185, 173, 147, .2);
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  border-width: 2px;
  border-style: solid;
  border-color: var(--item-frame-edge);
  background-clip: padding-box;
  box-shadow:
    inset 0 0 0 2px var(--item-frame-inner),
    inset 0 0 .78rem var(--item-frame-glow),
    0 0 .3rem var(--item-frame-outer);
  transition: border-color 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

html body [data-ui-panel] .item-tier-frame.item-tier-frame.is-rarity-common {
  --item-frame-edge: #c4b99f;
  --item-frame-inner: rgba(225, 216, 194, .42);
  --item-frame-glow: rgba(185, 173, 147, .2);
  --item-frame-outer: rgba(185, 173, 147, .22);
}
html body [data-ui-panel] .item-tier-frame.item-tier-frame.is-rarity-uncommon {
  --item-frame-edge: #72d16e;
  --item-frame-inner: rgba(150, 229, 142, .46);
  --item-frame-glow: rgba(77, 190, 82, .24);
  --item-frame-outer: rgba(90, 207, 91, .28);
}
html body [data-ui-panel] .item-tier-frame.item-tier-frame.is-rarity-rare {
  --item-frame-edge: #68a9f5;
  --item-frame-inner: rgba(139, 190, 250, .5);
  --item-frame-glow: rgba(62, 126, 224, .27);
  --item-frame-outer: rgba(82, 151, 244, .3);
}
html body [data-ui-panel] .item-tier-frame.item-tier-frame.is-rarity-epic {
  --item-frame-edge: #bd7bf0;
  --item-frame-inner: rgba(211, 150, 252, .5);
  --item-frame-glow: rgba(158, 74, 224, .28);
  --item-frame-outer: rgba(183, 102, 239, .31);
}
html body [data-ui-panel] .item-tier-frame.item-tier-frame.is-rarity-legendary {
  --item-frame-edge: #ffb341;
  --item-frame-inner: rgba(255, 207, 105, .55);
  --item-frame-glow: rgba(255, 142, 36, .3);
  --item-frame-outer: rgba(255, 171, 54, .35);
}

/* Secim ve surukleme geri bildirimi rarity rengini degistirmez. */
html body [data-ui-panel] .item-tier-frame.item-tier-frame:is(.is-selected, .is-target, .is-in-cart, .is-drop-target) {
  outline: 2px solid rgba(255, 238, 177, .95);
  outline-offset: -4px;
  filter: brightness(1.13);
}

/* Cerceve dogrudan kucuk ikonun uzerindeyse okunur bir slot zemini sagla. */
html body [data-ui-panel] img.item-tier-frame.item-tier-frame {
  padding: 1px;
  background-color: rgba(5, 7, 10, .9);
}

/* Tier 5: cercevenin ic kenarinda yavasca dolasan kisa bir isik cizgisi. */
html body [data-ui-panel] .item-tier-frame.item-tier-frame.is-item-tier-5:not(img)::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: 0;
  left: 0;
  width: 11px;
  height: 2px;
  border: 0;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, #fffbdc 25% 75%, transparent);
  box-shadow: 0 0 3px 1px #ffd06a, 0 0 7px 2px rgba(255, 117, 19, .62);
  offset-path: inset(4px round 1px);
  offset-distance: 0%;
  offset-rotate: auto;
  animation: item-tier-5-orbit 5.2s linear infinite;
  pointer-events: none;
}

/* Dogrudan img cercevesi kullanan kucuk odul satirlari icin ayni turun
   border-image karsiligi; replaced elementlerde pseudo-element cizilmez. */
@property --item-tier-5-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
html body [data-ui-panel] img.item-tier-frame.item-tier-frame.is-item-tier-5 {
  --item-tier-5-angle: 0deg;
  border-image: conic-gradient(
    from var(--item-tier-5-angle),
    var(--item-frame-edge) 0deg 326deg,
    #fff8c8 330deg 344deg,
    var(--item-frame-edge) 352deg 360deg
  ) 1;
  animation: item-tier-5-image-orbit 5.2s linear infinite;
}

/* Besli set: dar bir serit yerine itemin tamaminda belirip sonen beyaz yansima.
   Bes katman ayni renderda eklenir; yalniz opacity animasyonu fazlarini korur. */
html body [data-ui-panel="inventory"] .cp-slot.item-tier-frame.is-complete-armor-set {
  overflow: hidden;
}

html body [data-ui-panel="inventory"] .cp-set-reflection {
  position: absolute;
  z-index: 7;
  inset: 0;
  border: 0;
  background: linear-gradient(125deg,
    rgba(255, 255, 255, .62) 0%,
    rgba(255, 255, 255, .94) 42%,
    rgba(255, 255, 255, .82) 58%,
    rgba(255, 255, 255, .62) 100%);
  opacity: 0;
  animation: complete-armor-set-reflection 3.8s ease-in-out infinite;
  pointer-events: none;
}

.cp-set-bonus {
  display: flex;
  flex-direction: column;
  gap: .08rem;
  margin-top: .3rem;
  padding: .3rem .4rem;
  border: 1px solid rgba(232, 192, 100, .38);
  background: linear-gradient(135deg, rgba(82, 56, 17, .32), rgba(8, 18, 12, .76));
  color: #b8e8a8;
  font-size: clamp(.54rem, 1.15vh, .68rem);
}
.cp-set-bonus__title { color: #f3d27d; letter-spacing: .06em; text-transform: uppercase; }
.cp-set-bonus__progress { color: #d5c8a8; }
@keyframes item-tier-5-orbit { to { offset-distance: 100%; } }
@keyframes item-tier-5-image-orbit { to { --item-tier-5-angle: 360deg; } }
@keyframes complete-armor-set-reflection {
  0%, 6%, 68%, 100% { opacity: 0; }
  28%, 40% { opacity: .65; }
}

@media (prefers-reduced-motion: reduce) {
  html body [data-ui-panel] .item-tier-frame.item-tier-frame { transition: none; }
  html body [data-ui-panel] .item-tier-frame.item-tier-frame.is-item-tier-5::after,
  html body [data-ui-panel] img.item-tier-frame.item-tier-frame.is-item-tier-5,
  html body [data-ui-panel="inventory"] .cp-set-reflection {
    animation: none;
  }
  html body [data-ui-panel="inventory"] .cp-set-reflection { display: none; }
}