Various UX improvements.

web/src/components/BattlePhase.tsx

@@ -30,6 +30,9 @@ interface SideVis {
   pending: Card[] // foods revealed (or prepped) waiting for a pet
   unit: UnitVis | null
   setAside: Card[] // fainted pets kept beside the arena with a pending effect
+  // Ids of cards (set-aside pets or spent food perks) released this step: kept
+  // in their arrays for one beat so they can animate out, cleared next event.
+  leaving: string[]
 }
 
 // Milliseconds each event type stays on screen during playback.
@@ -57,10 +60,24 @@ const appleCount = (foods: Card[]) => foods.filter((f) => f.food === 'apple').le
 // seat's visual state. Units that died in the last applied event are still
 // present with dying=true so they can animate out.
 function replay(events: BattleEvent[], stackSizes: number[], upto: number): SideVis[] {
-  const sides: SideVis[] = stackSizes.map((n) => ({ stack: n, pending: [], unit: null, setAside: [] }))
+  const sides: SideVis[] = stackSizes.map((n) => ({
+    stack: n,
+    pending: [],
+    unit: null,
+    setAside: [],
+    leaving: [],
+  }))
   for (let k = 0; k < upto && k < events.length; k++) {
     for (const s of sides) {
       if (s.unit?.dying) s.unit = null // clear last step's casualties
+      if (s.leaving.length) {
+        // Drop cards that finished animating out last step.
+        const gone = new Set(s.leaving)
+        s.setAside = s.setAside.filter((c) => !gone.has(c.id))
+        if (s.unit) s.unit.foods = s.unit.foods.filter((c) => !gone.has(c.id))
+        s.pending = s.pending.filter((c) => !gone.has(c.id))
+        s.leaving = []
+      }
     }
     const ev = events[k]
     switch (ev.type) {
@@ -152,12 +169,10 @@ function replay(events: BattleEvent[], stackSizes: number[], upto: number): Side
         break
       case 'release': {
         // A spent card leaves the play area: a set-aside pet (Turtle) or a
-        // used-up food perk (Melon), which lives in the pet's food fan.
-        const s = sides[ev.seat!]
+        // used-up food perk (Melon), which lives in the pet's food fan. Flag it
+        // rather than removing it, so it animates out before unmounting.
         const id = ev.card?.id
-        s.setAside = s.setAside.filter((c) => c.id !== id)
-        if (s.unit) s.unit.foods = s.unit.foods.filter((c) => c.id !== id)
-        s.pending = s.pending.filter((c) => c.id !== id)
+        if (id) sides[ev.seat!].leaving.push(id)
         break
       }
     }
@@ -327,7 +342,12 @@ export function BattlePhase({ view, send, step, setStep }: Props) {
     const setAsideEl = s.setAside.length > 0 && (
       <div className="setaside-row">
         {s.setAside.map((c) => (
-          <CardView key={c.id} card={c} size="sm" />
+          <div
+            key={c.id}
+            className={`setaside-card ${s.leaving.includes(c.id) ? 'is-leaving' : ''}`}
+          >
+            <CardView card={c} size="sm" />
+          </div>
         ))}
       </div>
     )
@@ -339,7 +359,11 @@ export function BattlePhase({ view, send, step, setStep }: Props) {
     const foodFanEl = foods.length > 0 && (
       <div className="food-fan">
         {foods.map((f, i) => (
-          <div key={f.id} className="food-fan-card" style={{ zIndex: i + 1 }}>
+          <div
+            key={f.id}
+            className={`food-fan-card ${s.leaving.includes(f.id) ? 'is-leaving' : ''}`}
+            style={{ zIndex: i + 1 }}
+          >
             <CardView card={f} size="sm" />
           </div>
         ))}

web/src/components/CardView.tsx

@@ -1,8 +1,35 @@
-import { useState } from 'react'
+import { useLayoutEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import type { Card } from '../types'
 import { artFor } from '../petArt'
 
+// useFitText shrinks the effect text until it fits its band, so long abilities
+// (and the smaller battle cards) render in full instead of being clipped by
+// the fixed card height. It never grows past the CSS size, only shrinks toward
+// a small floor, and re-fits when the band resizes (breakpoints, battle mode).
+function useFitText(dep: unknown) {
+  const ref = useRef<HTMLDivElement>(null)
+  useLayoutEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const fit = () => {
+      el.style.fontSize = ''
+      let size = parseFloat(getComputedStyle(el).fontSize)
+      const min = 6
+      // Guard the loop; each step is 0.5px so ~40 covers any realistic band.
+      for (let i = 0; i < 40 && el.scrollHeight > el.clientHeight && size > min; i++) {
+        size = Math.max(min, size - 0.5)
+        el.style.fontSize = `${size}px`
+      }
+    }
+    fit()
+    const ro = new ResizeObserver(fit)
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [dep])
+  return ref
+}
+
 interface Props {
   card: Card
   size?: 'sm' | 'md' | 'lg'
@@ -39,6 +66,9 @@ export function CardView({
   // preview copy itself opts out so it can't recurse.
   const [hover, setHover] = useState<{ x: number; y: number } | null>(null)
   const power = (card.power ?? 0) + bonus
+  // Shrink long ability text to fit the (fixed-height) card, re-fitting when
+  // the text or card size changes. Only the branch that renders attaches it.
+  const effectRef = useFitText(`${size}|${card.effectText ?? ''}|${card.food ?? ''}`)
   const classes = [
     'card',
     `card-${size}`,
@@ -89,14 +119,18 @@ export function CardView({
       <div className="card-name">{card.name}</div>
       {card.kind === 'pet' ? (
         <>
-          {card.effectText && <div className="card-effect">{card.effectText}</div>}
+          {card.effectText && (
+            <div className="card-effect" ref={effectRef}>
+              {card.effectText}
+            </div>
+          )}
           <div className="card-bottom">
             <span className={`card-power ${bonus > 0 ? 'is-buffed' : ''}`}>{power}</span>
             {damage > 0 && !dead && <span className="card-damage">−{damage}</span>}
           </div>
         </>
       ) : (
-        <div className="card-effect">
+        <div className="card-effect" ref={effectRef}>
           {card.effectText ?? (card.food === 'apple' ? '+1 power (this battle)' : '')}
         </div>
       )}