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>
     )
 

web/src/styles.css

@@ -1377,3 +1377,44 @@ h3 {
     transform: scale(1.5);
   }
 }
+
+/* --- deck peek (battle) --- */
+
+.stackpile.peekable {
+  cursor: help;
+}
+
+.deck-peek {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  z-index: 60;
+  width: max-content;
+  max-width: 60vw;
+  background: rgba(18, 53, 31, 0.98);
+  border: 2px solid var(--cocoa);
+  border-radius: 10px;
+  padding: 8px 10px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
+}
+
+.deck-peek-left {
+  left: 0;
+}
+
+.deck-peek-right {
+  right: 0;
+}
+
+.deck-peek-label {
+  color: var(--gold);
+  font-size: 0.72rem;
+  font-weight: 800;
+  margin-bottom: 6px;
+}
+
+.deck-peek-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  max-width: min(60vw, 560px);
+}

web/src/types.ts

@@ -69,6 +69,7 @@ export interface BattleEvent {
 export interface BattleResult {
   round: number
   stackSizes: number[]
+  lineups?: Card[][] // each seat's arranged deck (top first); public for peeking
   events: BattleEvent[] | null
   winnerSeat: number
   trophies: number