/* Custom styles on top of Tailwind. Play CDN compiles utilities at runtime. */

.card-3d { perspective: 1000px; }
.card-3d .flipper {
  position: relative;
  transition: transform .5s;
  transform-style: preserve-3d;
}
.card-3d.flipped .flipper { transform: rotateY(180deg); }
.card-3d .face {
  backface-visibility: hidden;
}
.card-3d .face-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

input:invalid.touched { border-color: #f43f5e; }

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