/* in-game art on cards: .deco + style="--art:url(card illustration)" = faded art on the right;
   <img class="peek" src="/assets/img/mob/ID.png"> inside a .card = small monster sprite in the top-right corner */
.deco { position: relative; overflow: hidden; isolation: isolate; }
.deco::before {
  /* sticks out past the top/right edge (clipped by overflow) and fades out radially, so the card frame never shows */
  content: ""; position: absolute; top: -30px; right: -30px; width: 68%; height: min(330px, calc(100% + 30px)); z-index: -1; pointer-events: none;
  background: var(--art) center 40% / cover no-repeat;
  opacity: .28;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 35%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 35%, transparent 75%);
  transition: opacity .3s, transform .5s;
}
.deco:hover::before { opacity: .45; transform: scale(1.05); }

.card { position: relative; }
.peek {
  position: absolute; top: 12px; right: 14px; max-height: 54px; max-width: 70px; z-index: 1; pointer-events: none;
  image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55));
  transition: transform .3s;
}
.card:hover > .peek { transform: translateY(-5px); animation: peek-bob 1s ease-in-out .3s infinite alternate; }
@keyframes peek-bob { from { transform: translateY(-5px); } to { transform: translateY(-1px); } }
@media (prefers-reduced-motion: reduce) {
  .deco::before, .peek { transition: none; }
  .card:hover > .peek { animation: none; }
}