/* Flip the two planes instead of mirroring the whole card. This stays stable
   across Chromium GPU modes and never exposes a mirrored identity harness. */
.flash-card {
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
}
.card-face {
  visibility: visible;
  transition: transform 650ms cubic-bezier(.2,.72,.2,1), opacity 260ms ease;
}
.card-front,
[data-card-front] {
  z-index: 2;
  opacity: 1;
  transform: rotateY(0deg) translateZ(1px);
  pointer-events: auto;
}
.card-back,
[data-card-back] {
  z-index: 1;
  opacity: 0;
  transform: rotateY(-180deg) translateZ(1px);
  pointer-events: none;
}
.flash-card[data-side="back"] .card-front,
.flash-card[data-side="back"] [data-card-front] {
  z-index: 1;
  opacity: 0;
  transform: rotateY(180deg) translateZ(1px);
  pointer-events: none;
}
.flash-card[data-side="back"] .card-back,
.flash-card[data-side="back"] [data-card-back] {
  z-index: 2;
  opacity: 1;
  transform: rotateY(0deg) translateZ(1px);
  pointer-events: auto;
}
