.card {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  transform-style: preserve-3d;
  transition: transform 240ms ease;
  will-change: transform;
}
.card.flipped { transform: rotateY(180deg); }

.card-face, .card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.card-face { transform: rotateY(180deg); background: #f8f4e8; }
.card-back { background: #1b2a46; }

.card-face svg, .card-back svg {
  width: 100%;
  height: 100%;
}

/* Deal animation: start offset + fade */
.card.dealing {
  animation: deal-in 220ms ease-out both;
}
@keyframes deal-in {
  from { transform: translate(-60vw, -30vh) rotate(-8deg); opacity: 0.2; }
  to { transform: translate(0, 0) rotate(0deg); opacity: 1; }
}
.card.dealing.flipped {
  animation: deal-in-flipped 220ms ease-out both;
}
@keyframes deal-in-flipped {
  from { transform: translate(-60vw, -30vh) rotate(-8deg) rotateY(180deg); opacity: 0.2; }
  to { transform: translate(0, 0) rotate(0deg) rotateY(180deg); opacity: 1; }
}