.playing-card {
  display: block;
  position: relative;
  width: var(--card-width, 62px);
  aspect-ratio: 80 / 116;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #b3a17d;
  background: #f1e7d0 url("/assets/playing-cards-v2/paper.webp") center / 100%
    100%;
  box-shadow: inset 0 0 0 1px #fff6df70;
  user-select: none;
  pointer-events: none;
}
.playing-card > img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: fill;
}
.playing-card > .playing-card-art {
  inset: 50% auto auto 50%;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
}
.playing-card > .court-art {
  /* A 52 × 78 illustration inside the SVG's 54 × 82 frame. */
  width: 65%;
}
.playing-card > .joker-art {
  /* Center the visible ink, not the unequal transparent canvas margins.
     Red alpha bounds: 403 × 702 at (63, 2), in a 480 × 720 source.
     Both jokers' visible ink is 96 units high on the 80 × 116 card. */
  width: 82.05%;
  transform: translate(-55.104%, -49.028%);
}
.playing-card > .joker-black {
  /* Black alpha bounds: 388 × 665 at (70, 23). */
  width: 86.617%;
  transform: translate(-55%, -49.375%);
}
.playing-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/playing-cards-v2/paper.webp") center / 100% 100%;
  opacity: 0.14;
  mix-blend-mode: multiply;
}
.playing-card-back {
  border-color: #b8a889;
}