/* The two rarest tiers get their own surface: legendary is brushed gold with a travelling sheen,
   mythic is an opal that drifts between pink, violet and cyan. Only the card and the hover popup change;
   the sticker image itself is left alone. */
@keyframes rarity-sheen{to{background-position:-250% 0,0 0}}
@keyframes rarity-metal{to{background-position:100% 0}}
@keyframes rarity-twinkle{50%{opacity:.55}}

/* cards: inventory, catalog, quick strip */
.collection-card[data-rarity=legendary],.favorite-card[data-rarity=legendary]{
  border-color:#c9971c;box-shadow:0 0 0 1px #ffd76640,0 8px 26px #ffc74524;
  background:linear-gradient(115deg,#ffd76600 32%,#ffe9a366 46%,#fff7d91f 50%,#ffd76600 62%) 0 0/250% 100% no-repeat,linear-gradient(160deg,#5a4109,#211803 52%,#473207);
  animation:rarity-sheen 5s linear infinite}
.collection-card[data-rarity=mythic],.favorite-card[data-rarity=mythic]{
  border-color:#ff5fba;box-shadow:0 0 0 1px #ff5fba59,0 8px 30px #ff5fba33;
  background:linear-gradient(115deg,#ff5fba00 24%,#ff5fba73 38%,#9b8cff73 48%,#5fe1ff66 58%,#ff5fba00 74%) 0 0/250% 100% no-repeat,linear-gradient(160deg,#4a1140,#180a2b 50%,#0f2140);
  animation:rarity-sheen 3.6s linear infinite}
.collection-card[data-rarity=legendary] .collection-art,.favorite-card[data-rarity=legendary] .favorite-art{background:radial-gradient(ellipse at 50% 60%,#ffd7664d,transparent 72%)}
.collection-card[data-rarity=mythic] .collection-art,.favorite-card[data-rarity=mythic] .favorite-art{background:radial-gradient(ellipse at 50% 60%,#ff5fba47,#7a6bff1f 55%,transparent 75%)}
.collection-card[data-rarity=legendary] h3{color:#ffe9a3}
.collection-card[data-rarity=mythic] h3{color:#ffc4e6}

/* hover popup on the wall */
.target-info[data-rarity=legendary],.target-info[data-rarity=mythic]{overflow:hidden;border-width:1px;border-style:solid}
.target-info[data-rarity=legendary]{
  color:#2a1c00;border-color:#fff3c4;box-shadow:0 0 0 1px #b8860b,0 10px 34px #b8860b73,inset 0 1px 0 #fffbe6;
  background:linear-gradient(115deg,#c9971c,#ffe9a3 30%,#d4a017 55%,#fff6d0 78%,#c9971c) 0 0/220% 100%;
  animation:rarity-metal 9.3s ease-in-out infinite alternate}
.target-info[data-rarity=legendary] p{color:#5c4300}
.target-info[data-rarity=legendary] .hp-track{background:#0000002e}
.target-info[data-rarity=legendary] .hp-track i{background:#3d2a00}
.target-info[data-rarity=mythic]{
  color:#22062c;border-color:#fff0fa;box-shadow:0 0 0 1px #ff5fba,0 10px 38px #ff5fba80,inset 0 1px 0 #fff;
  background:linear-gradient(115deg,#ff8fcf,#c79bff 28%,#9be9ff 52%,#ffd9f0 76%,#ff8fcf) 0 0/220% 100%;
  animation:rarity-metal 8s ease-in-out infinite alternate}
.target-info[data-rarity=mythic]::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(#fff 1px,transparent 1.6px) 3px 5px/19px 23px,radial-gradient(#fff 1px,transparent 1.4px) 12px 15px/31px 27px;animation:rarity-twinkle 3.3s ease-in-out infinite}
.target-info[data-rarity=mythic] p{color:#5b1d57}
.target-info[data-rarity=mythic] .hp-track{background:#ffffff73}
.target-info[data-rarity=mythic] .hp-track i{background:#6a1263}
@media(prefers-reduced-motion:reduce){[data-rarity=legendary],[data-rarity=mythic],.target-info[data-rarity=mythic]::after{animation:none}}