/* Two physical faces, turning at the same position and size on the table. */
.card-table-scene { z-index: 10; }
.card-turner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 736ms cubic-bezier(.22,.72,.18,1);
}
.card-wrapper.is-flipped .card-turner { transform: rotateY(180deg); }
.card-side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(.15px); }
.card-side-back { transform: rotateY(180deg) translateZ(.15px); }

/* Both faces are laid out on one 300 x 426 canvas and scaled to the physical card. */
.card-layout { width: 300px; height: 426px; --card-w: 300px; transform: scale(var(--face-scale, 1)); transform-origin: 0 0; }
.card-side .playing-card { pointer-events: auto; cursor: grab; }
.card-wrapper.is-dragging .playing-card { cursor: grabbing; }
.title-card .card-layout { width: 100%; height: 100%; transform: none; }
.card-side-back .title-face { background: var(--grain), #1b1e21; }

@media (prefers-reduced-motion: reduce) { .card-turner { transition: none; } }