About: the story of the game, told on the box lid

A handwritten "about this game — a labor of love" link on the box lid
opens a new About tab in the booklet: what Wiz-War is, that Tom Jolly
created it in 1983, that this is a faithful reproduction of the
out-of-print Chessex sixth edition (with its one expansion) that Eric
and his friends played for countless hours in the early nineties —
rebuilt from that very copy, card by photographed card, wall by
verified wall, with the original hand-inked token art. It names Steve
Jackson Games as the current rightsholder, states plainly that this
is an unofficial, non-commercial fan work made with love and
admiration, and closes by pointing anyone the game delights toward
the edition currently in print and a real table.

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

packages/web/src/App.svelte

@@ -15,6 +15,7 @@
   let joinCode = $state("");
   let claimPhrase = $state("");
   let showHelp = $state(false);
+  let helpTab = $state<"play" | "rules" | "cards" | "about">("play");
   let hotseatCount = $state(2);
   let setupName = $state("");
   let setupColor = $state(0);
@@ -526,7 +527,7 @@
       <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)}>
+    <button class="mast-leave" class:mast-help-solo={!net.roomId} onclick={() => { helpTab = "play"; showHelp = true; }}>
       help &amp; rules
     </button>
     <span class="mast-status" class:offline={net.status !== "connected"}>
@@ -535,7 +536,7 @@
   </header>
 
   {#if showHelp}
-    <Help onclose={() => (showHelp = false)} />
+    <Help initialTab={helpTab} onclose={() => (showHelp = false)} />
   {/if}
 
   {#if net.catchUp && net.catchUp.length > 0}
@@ -608,6 +609,9 @@
       <div class="boxlid-inner">
         <div class="boxlid-title">Wiz-War</div>
         <div class="boxlid-tag">A game of magical combat in a stone labyrinth</div>
+        <button class="about-link" onclick={() => { helpTab = "about"; showHelp = true; }}>
+          about this game — a labor of love
+        </button>
         <label class="field">
           <span>Your wizard's name</span>
           <input bind:value={name} maxlength="20" placeholder="e.g. Mordecai" />
@@ -1144,8 +1148,20 @@
   .boxlid-tag {
     font-size: 0.95rem;
     color: #6b5a41;
-    margin: 0.5rem 0 1.4rem;
+    margin: 0.5rem 0 0.4rem;
   }
+  .about-link {
+    background: none;
+    border: none;
+    font-family: "Caveat", cursive;
+    font-size: 1.05rem;
+    color: #8a6d3f;
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    cursor: pointer;
+    margin-bottom: 1.2rem;
+  }
+  .about-link:hover { color: #43331f; }
   .field { display: block; text-align: left; margin-bottom: 1rem; }
   .field span {
     display: block;