Fly faint-summoned apples and bees out from the pet.

web/src/components/BattlePhase.tsx

@@ -249,7 +249,10 @@ export function BattlePhase({ view, send }: Props) {
           <div className="card-slot-empty stack-empty" />
         )}
         {summoning && lastEvent?.card && (
-          <div className="summon-pop">
+          // Fly the spawned apple/bee out from where the pet stood (the unit
+          // zone sits on the inner edge) onto the top of the deck, so it reads
+          // as coming from the pet that just fainted.
+          <div className={`summon-pop ${dir === 'left' ? 'summon-from-right' : 'summon-from-left'}`}>
             <CardView card={lastEvent.card} size="sm" />
           </div>
         )}

web/src/styles.css

@@ -863,6 +863,55 @@ h3 {
   pointer-events: none;
 }
 
+/* Spawn arcs out from the pet (inner edge) onto the deck. The pet sits to the
+   right of the deck on the left side and to the left on the right side, so
+   each side pulls its spawn in from the opposite direction. */
+@keyframes summon-from-right {
+  0% {
+    opacity: 0;
+    transform: translate(120px, 8px) scale(0.5) rotate(10deg);
+  }
+  25% {
+    opacity: 1;
+    transform: translate(64px, -22px) scale(1.05) rotate(5deg);
+  }
+  70% {
+    opacity: 1;
+    transform: translate(0, -12px) scale(1) rotate(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(0, 2px) scale(0.72);
+  }
+}
+
+@keyframes summon-from-left {
+  0% {
+    opacity: 0;
+    transform: translate(-120px, 8px) scale(0.5) rotate(-10deg);
+  }
+  25% {
+    opacity: 1;
+    transform: translate(-64px, -22px) scale(1.05) rotate(-5deg);
+  }
+  70% {
+    opacity: 1;
+    transform: translate(0, -12px) scale(1) rotate(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(0, 2px) scale(0.72);
+  }
+}
+
+.summon-pop.summon-from-right {
+  animation-name: summon-from-right;
+}
+
+.summon-pop.summon-from-left {
+  animation-name: summon-from-left;
+}
+
 /* --- foods waiting for a pet --- */
 
 .pending-foods {