Three table manners: Safari replays, docked creature cards, a quiet hand

Safari collapsed the replay board to nothing: an svg with only a
viewBox has no intrinsic size there, and inside the replay's
max-height flex column WebKit sized it 0x0 while Chrome inferred the
ratio and filled the frame. Explicit width/height attributes (doubled,
so the CSS max-* caps still govern the display size) give every engine
the same answer — verified 560x560 in both WebKit and Chromium, with
the main board-zone rendering unchanged.

Commanding your own creature no longer opens the centered card peek —
a modal squarely blocks the squares you are about to march it across.
The card now docks in the paper rail with its live stats, the one
place a card enlarges outside the center of the table. Enemy creatures
and idle peeks keep the modal; they ask nothing of the board.

And once an object is pocketed, the hand goes visibly quiet: cards dim
and refuse selection instead of walking you through target-picking
toward an engine refusal, with a rail slip saying what remains (draw
and end the turn). Counters, chaos shields, and discards still play —
an ambush sprung by the very pickup must be answerable.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

packages/web/src/Board.svelte

@@ -149,8 +149,13 @@
   });
 </script>
 
+<!-- Explicit width/height give the svg an intrinsic size: Safari cannot
+     derive one from the viewBox alone and collapses the board to 0x0 inside
+     a max-height flex column. Doubled so CSS max-* caps still govern. -->
 <svg
   viewBox={`-8 -8 ${view.board.width * CELL + 16} ${view.board.height * CELL + 16}`}
+  width={(view.board.width * CELL + 16) * 2}
+  height={(view.board.height * CELL + 16) * 2}
   class="board"
 >
   <!-- floor -->