/* Rarity-lit artwork on Things and item details. Controls retain the shared UI. */
:is(.inventory-item-card, .detail) { --item-glow: #b64a3e; }
:is(.inventory-item-card, .detail).rarity-1 { --item-glow: #d7d23a; }
:is(.inventory-item-card, .detail).rarity-2 { --item-glow: #91c54b; }
:is(.inventory-item-card, .detail).rarity-3 { --item-glow: #73a9c7; }
:is(.inventory-item-card, .detail).rarity-4 { --item-glow: #d45a45; }
:is(.inventory-item-card, .detail).rarity-5 { --item-glow: #a868aa; }
:is(.inventory-item-card, .detail).rarity-6 { --item-glow: #f2a249; }
#content .inventory-item-card.item-card {
  gap: .8rem; padding: .9rem; align-content: start;
  background: linear-gradient(135deg, #fffdf6, #f4eddd);
  border-left-color: var(--item-glow);
  box-shadow: 0 3px 10px #18251b14, inset 0 1px #fff;
}
#content .inventory-item-card .item-card-link { grid-template-columns: 80px minmax(0, 1fr); gap: .9rem; }
#content .inventory-item-card .item-card-art { width: 80px; height: 80px; }
#content .inventory-item-card .item-card-art img { width: 64px; height: 64px; }
#content .inventory-item-card .item-card-actions { padding-top: .75rem; border-top: 1px solid #b9aa8f66; }
#content .inventory-item-card .item-card-art,
#content .detail .detail-art {
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--item-glow) 28%, #18232a), #111c23 75%);
  border: 1px solid color-mix(in srgb, var(--item-glow) 65%, #283237);
  border-radius: 5px;
  box-shadow: inset 0 0 0 3px #ffffff08, 0 2px 6px #14201b33;
}
#content .inventory-item-card .item-card-art img,
#content .detail .detail-image {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--item-glow) 65%, transparent));
}
#content .detail .detail-art { box-shadow: inset 0 0 0 4px #ffffff08, 0 4px 18px #14201b33; }
#content .detail[data-item-id] { border-left-color: var(--item-glow); }
#content .detail .detail-copy > .eyebrow { color: var(--rarity-link-color); }
#content .detail .detail-image { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--item-glow) 55%, transparent)); }
#content .inventory-item-card.item-card-damaged .item-card-art::after { z-index: 3; }
#content .detail.detail-damaged .detail-art::after { z-index: 3; }
.item-lustre {
  position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none;
  mask: var(--item-art) center / contain no-repeat;
}
.inventory-item-card .item-lustre { inset: 7px; }
.detail-art:has(.detail-image-fallback) .item-lustre { inset: 24px; }
.item-lustre::before {
  content: ''; position: absolute; inset: -40%;
  background: linear-gradient(110deg, transparent 38%, #fff7d326 45%, #fff 50%, #fff7d326 55%, transparent 62%);
  opacity: 0; transform: translateX(-80%);
  animation: item-art-shimmer 8s ease-in-out infinite;
  animation-delay: var(--item-shimmer-delay, -1s);
  animation-play-state: paused;
}
.item-lustre.is-visible::before { animation-play-state: running; }
.item-effects-paused .item-lustre::before { animation-play-state: paused; }
.inventory-item-card:nth-child(4n + 2) { --item-shimmer-delay: -3s; }
.inventory-item-card:nth-child(4n + 3) { --item-shimmer-delay: -5s; }
.inventory-item-card:nth-child(4n) { --item-shimmer-delay: -7s; }
#content .inventory-item-card:focus-within .item-card-art,
#content .inventory-item-card:hover .item-card-art { border-color: var(--item-glow); box-shadow: 0 0 14px color-mix(in srgb, var(--item-glow) 35%, transparent), inset 0 0 0 3px #ffffff08; }
@keyframes item-art-shimmer {
  0%, 60% { opacity: 0; transform: translateX(-80%); }
  66% { opacity: .15; }
  74% { opacity: .6; }
  84% { opacity: 0; transform: translateX(80%); }
  100% { opacity: 0; transform: translateX(80%); }
}
@media (max-width: 600px) {
  #content .inventory-region { padding: .65rem; }
  #content .inventory-city { padding: .6rem; }
  #content .inventory-item-card.item-card { padding: .7rem; }
  #content .inventory-item-card .item-card-link { grid-template-columns: 64px minmax(0, 1fr); gap: .65rem; }
  #content .inventory-item-card .item-card-art { width: 64px; height: 64px; }
  #content .inventory-item-card .item-card-art img { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .item-lustre::before { animation: none; opacity: 0; }
}