Improve some animations.

web/src/styles.css

@@ -1051,6 +1051,33 @@ h3 {
   gap: 16px;
   flex-wrap: wrap;
   justify-content: center;
+  /* Positioning context for the exit "ghost" cards, which are pinned to where
+     the departing card sat while they shrink away (see .card-ghost). */
+  position: relative;
+}
+
+/* A thin wrapper around each animated card. The FLIP animator moves and flips
+   this element (not the .card inside), so the card's own hover/selected lift
+   transforms stay independent. backface-visibility hides the card mid-flip so
+   a dealt-in card reads as turning face-up rather than showing mirrored text. */
+.card-cell {
+  display: flex;
+  flex: 0 0 auto;
+  backface-visibility: hidden;
+}
+
+/* An exiting card: pinned (inline styles) where it last sat, shrinking away as
+   its former neighbors glide into the gap. */
+.card-ghost {
+  z-index: 3;
+  animation: card-ghost-out 280ms cubic-bezier(0.4, 0, 0.7, 0.4) forwards;
+}
+
+@keyframes card-ghost-out {
+  to {
+    opacity: 0;
+    transform: scale(0.62) translateY(-6px);
+  }
 }
 
 .deck-empty {