Let players peek both decks during and after a battle

Record each seat's arranged lineup on the battle result (already public)
and reveal the full deck in a popover when hovering a deck pile in the
battle view — the opponent's included.

web/src/components/BattlePhase.tsx

@@ -175,6 +175,8 @@ export function BattlePhase({ view, send }: Props) {
   const events = battle.events ?? []
   const [step, setStep] = useState(0)
   const [acked, setAcked] = useState(false)
+  const [peekSeat, setPeekSeat] = useState<number | null>(null)
+  const lineups = battle.lineups
   const done = step >= events.length
   const lastEvent = step > 0 ? events[step - 1] : null
 
@@ -207,8 +209,14 @@ export function BattlePhase({ view, send }: Props) {
     const revealing = !done && lastEvent?.type === 'reveal' && lastEvent.seat === seat
     const pop = done ? null : unitPop(lastEvent, seat, events, step)
 
+    const lineup = lineups?.[seat] ?? []
     const stackEl = (
-      <div className="stackpile">
+      <div
+        className={`stackpile ${lineup.length ? 'peekable' : ''}`}
+        onMouseEnter={lineup.length ? () => setPeekSeat(seat) : undefined}
+        onMouseLeave={() => setPeekSeat((s) => (s === seat ? null : s))}
+        title={lineup.length ? 'Hover to see the whole deck' : undefined}
+      >
         {s.stack > 0 ? (
           <div className="card-back">
             <span className="card-back-count">{s.stack}</span>
@@ -226,6 +234,19 @@ export function BattlePhase({ view, send }: Props) {
             <CardView card={lastEvent.card} size="sm" dead />
           </div>
         )}
+        {peekSeat === seat && lineup.length > 0 && (
+          <div className={`deck-peek deck-peek-${dir}`}>
+            <div className="deck-peek-label">
+              {seat === youSeat ? 'Your' : 'Opponent’s'} deck · {lineup.length} card
+              {lineup.length !== 1 ? 's' : ''} (top first)
+            </div>
+            <div className="deck-peek-cards">
+              {lineup.map((c, i) => (
+                <CardView key={c.id || i} card={c} size="sm" />
+              ))}
+            </div>
+          </div>
+        )}
       </div>
     )