/* Rare and higher rarity frames are solid CSS strokes; art stays inside the icon. */
#items .it:is([data-tier="rare"], [data-tier="legend"], [data-tier="myth"], [data-tier="celestial"]),
#hotbar .hb:is([data-tier="rare"], [data-tier="legend"], [data-tier="myth"], [data-tier="celestial"]),
.shop .it:is([data-tier="rare"], [data-tier="legend"], [data-tier="myth"], [data-tier="celestial"]) {
  border: 2px solid var(--tc);
  border-radius: 2px;
  box-shadow: none;
}

#hotbar .hb[data-tier="celestial"] {
  --tc: var(--t-celestial);
  background: #16140f;
  color: var(--t-celestial);
}

#hotbar .hb[data-tier="celestial"] .hl {
  border-top-color: var(--t-celestial);
}

#hotbar .hb[data-tier="celestial"] .hl :is(.k, .u) {
  color: var(--t-celestial);
}

/* Chained alpha drop-shadows muddy fine edges; these tiers use the card's frame.
   The character sheet's equipment squares and the Items drawer's cards are the exceptions:
   there the art wears the traced tier edge itself, painted art included. */
#hotbar .hb:is([data-tier="rare"], [data-tier="legend"], [data-tier="myth"], [data-tier="celestial"]) img,
.shop .it:is([data-tier="rare"], [data-tier="legend"], [data-tier="myth"], [data-tier="celestial"]) img,
#stats img.premium-item-art {
  filter: none;
  opacity: 1;
}

@media (prefers-contrast: more) {
  #items .it:is([data-tier="rare"], [data-tier="legend"], [data-tier="myth"], [data-tier="celestial"]),
  #hotbar .hb:is([data-tier="rare"], [data-tier="legend"], [data-tier="myth"], [data-tier="celestial"]) {
    outline: 1px solid var(--tc);
    outline-offset: 1px;
  }
}