In-game help: how-to-play guide, the 6e rules, and a card library

"Help & rules" in the masthead (lobby and table alike) opens a paper
booklet with three tabs: How To Play (the client's own controls —
moving, casting, attaching numbers and modifiers, fighting, turns,
transfers), The Rules (the 6th edition rules condensed faithfully
from the verified rulebook transcription, exact numbers throughout,
with a Jolly Games colophon), and a Card Library — all 135 playable
cards rendered as the real card faces, searchable by name or text,
each labeled with its quantity and set. Escape closes.

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

packages/web/src/App.svelte

@@ -2,6 +2,7 @@
   import { net } from "./net.svelte";
   import Board from "./Board.svelte";
   import Card from "./Card.svelte";
+  import Help from "./Help.svelte";
   import { allCardDefs, cardDef, isNumberCard, SIDES, stepTarget, cellKey } from "@wizwar/engine";
   import type { CardInstance, Side } from "@wizwar/engine";
 
@@ -11,6 +12,7 @@
   let name = $state("");
   let joinCode = $state("");
   let claimPhrase = $state("");
+  let showHelp = $state(false);
   let drawCount = $state(2);
   let withExpansion = $state(true);
   /** Your creature selected for movement/attacks. */
@@ -453,11 +455,18 @@
       <button class="mast-leave" onclick={() => net.requestTransferCode()}>transfer seat</button>
       <button class="mast-leave" onclick={() => net.leave()}>leave table</button>
     {/if}
+    <button class="mast-leave" class:mast-help-solo={!net.roomId} onclick={() => (showHelp = true)}>
+      help &amp; rules
+    </button>
     <span class="mast-status" class:offline={net.status !== "connected"}>
       {net.status === "connected" ? "" : "reconnecting…"}
     </span>
   </header>
 
+  {#if showHelp}
+    <Help onclose={() => (showHelp = false)} />
+  {/if}
+
   {#if net.error}
     <div class="toast" role="alert">{net.error}</div>
   {/if}
@@ -796,6 +805,7 @@
     cursor: pointer;
   }
   .mast-leave:hover { color: #d8d2c0; }
+  .mast-help-solo { margin-left: auto; }
 
   .toast {
     background: #6d2119;