The face-up hands at game's end keep to their frame and fold away

On a desktop the table is pinned to the window and the board's row may
shrink to nothing; four hands of cards beneath it did exactly that in
room 7S6C, and nothing put them away. The reveal now scrolls inside a
capped frame and its header carries a fold button.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

packages/web/src/App.svelte

@@ -273,6 +273,9 @@
   });
   /** Tap-to-inspect: hide the enlarged card for the current selection. */
   let inspectorHidden = $state(false);
+  /** The face-up hands at game's end fold away on request; a new game unfolds them. */
+  let revealFolded = $state(false);
+  $effect(() => { if (view?.phase !== "finished") revealFolded = false; });
   $effect(() => {
     void selectedCard?.instanceId;
     inspectorHidden = false;
@@ -3140,14 +3143,19 @@
       {/if}
 
       {#if view.phase === "finished" && view.revealedHands}
-        <div class="final-reveal" aria-label="all hands revealed">
+        <div class="final-reveal" class:folded={revealFolded} aria-label="all hands revealed">
           <div class="reveal-head">
             The hands, face-up
-            <button class="stamp tiny"
+            <span class="reveal-tools">
-              onclick={() => (local.active ? local.buildReplay() : net.requestFullReplay())}>
+              <button class="stamp tiny"
-              ⟲ Watch the whole game</button>
+                onclick={() => (local.active ? local.buildReplay() : net.requestFullReplay())}>
+                ⟲ Watch the whole game</button>
+              <button class="stamp tiny" onclick={() => (revealFolded = !revealFolded)}
+                aria-expanded={!revealFolded}>
+                {revealFolded ? "▸ Show the hands" : "▾ Put them away"}</button>
+            </span>
           </div>
-          {#each view.players as p (p.id)}
+          {#each revealFolded ? [] : view.players as p (p.id)}
             <div class="reveal-row">
               <span class="reveal-name" class:reveal-winner={p.id === view.winner}>
                 {p.id === view.winner ? "🏆 " : ""}{p.id}
@@ -4332,17 +4340,24 @@
     max-width: 11rem;
   }
 
+  /* The reveal scrolls inside its own frame: the table's bottom row grows
+   * to fit it, and four hands of cards would otherwise take the board's row. */
   .final-reveal {
     background: #efe8d4;
     border: 1px solid #b3a687;
     border-radius: 6px;
     padding: 0.7rem 0.9rem;
     margin-bottom: 0.6rem;
+    max-height: 38dvh;
+    overflow-y: auto;
   }
+  .final-reveal.folded { max-height: none; overflow: visible; }
+  .final-reveal.folded .reveal-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
   .reveal-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex-wrap: wrap;
     gap: 0.5rem;
     font-family: "Oswald", sans-serif;
     font-size: 0.8rem;
@@ -4353,6 +4368,7 @@
     padding-bottom: 0.2rem;
     margin-bottom: 0.5rem;
   }
+  .reveal-tools { display: flex; flex-wrap: wrap; gap: 0.3rem; }
   .reveal-row { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.5rem; }
   .reveal-name {
     font-family: "Courier Prime", monospace;