/* User-supplied Mobile Classic faces, preserved at their native 2:3 ratio. */
.card { aspect-ratio: 2 / 3; height: calc(var(--card-w, 68px) * 1.5); }
.card.art { background: #fff; overflow: hidden; border-radius: 6px; }
.card.art .card-image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.card.art .trump-mark { z-index: 1; top: auto; right: 4px; bottom: 5px; }
.hero-cards .card:first-child { transform: rotate(-15deg) translate(12px, 4px); }
.hero-cards .card:last-child { transform: rotate(15deg) translate(-12px, 4px); }

/* A second layer preserves the complete supplied motif below the enlarged
   printed index. The source JPEG is reused without changing the asset. */
.card-artwork{position:absolute;inset:0;background:var(--card-face) center/100% 100% no-repeat;opacity:1;pointer-events:none}
.card-artwork::after{content:'';position:absolute;top:0;left:0;width:52%;height:58%;background:#fff}
/* Compact portrait cards use the same complete face as hand cards. An enlarged
   corner over a masked duplicate face corrupts pips and court illustrations. */
body[data-page=game] .micro-pairs .card-artwork,
body[data-page=game] .flat-hand .card-artwork,
body[data-page=game][data-density=compact] .hand-card .card-artwork,
.flying-card.mini-flight .card-artwork{opacity:0}

/* A compact card magnifies the supplied upper-left rank and suit, rather
   than substituting a different drawing or squeezing the portrait artwork.
   Source window: y=30..310, centered at x=110 on the 600x900 original. */
body[data-page=game] .micro-pairs .card.art .card-image,
body[data-page=game] .flat-hand .card.art .card-image,
body[data-page=game][data-density=compact] .hand-card .card.art .card-image,
.flying-card.mini-flight .card.art .card-image {
  inset: auto;
  height: calc(100% * 900 / 280);
  width: auto;
  top: calc(100% * -30 / 280);
  left: 50%;
  transform: translateX(calc(-100% * 110 / 600));
  object-fit: fill;
  /* Isolate the original printed index. Wider crops otherwise reveal pieces
     of the main pips or court artwork, especially on 8/9/10 and face cards. */
  clip-path: inset(4.444444% 70.666667% 66.777778% 3.333333%);
}
body[data-page=game][data-density=compact] .hand-card .card.art .trump-mark,
.flying-card.mini-flight .card.art .trump-mark { width: 12px; height: 12px; right: 3px; bottom: 3px; }
@media(max-height:470px) {
  body[data-page=game] .hand-card .card-artwork{opacity:0}
  body[data-page=game] .hand-card .card.art .card-image {
    inset: auto;
    height: calc(100% * 900 / 280);
    width: auto;
    top: calc(100% * -30 / 280);
    left: 50%;
    transform: translateX(calc(-100% * 110 / 600));
    object-fit: fill;
    clip-path: inset(4.444444% 70.666667% 66.777778% 3.333333%);
  }
  body[data-page=game] .hand-card .card.art .trump-mark { width: 12px; height: 12px; right: 3px; bottom: 3px; }
}
@media(forced-colors:active) { .card.art { border: 1px solid CanvasText; } }