The designer's rulings, one tap from the card

Tom Jolly's 2002 Rules FAQ settled three table disputes this week
from a text file only I could read. Now it lives in the game: 95
cards gained their FAQ sections (extracted verbatim from the official
document, alias-matched — Slime, Mistbody, Buck and friends resolved
to their proper cards), joining the handful already present for 102
cards with rulings in all. The card faces stay pure card text; an
"Official FAQ" button appears under any enlarged card that has
rulings — the hand inspector, the peek overlay, and as an FAQ chip in
the card library — opening a booklet modal with the rulings and their
provenance: "the cards overrule the rules, and the designer overrules
the table."

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

packages/web/src/App.svelte

@@ -2,6 +2,7 @@
   import { attentionLabel, net, spellName } from "./net.svelte";
   import Board from "./Board.svelte";
   import { PLAYER_COLORS, wizardColor } from "./colors";
+  import Faq from "./Faq.svelte";
   import Card from "./Card.svelte";
   import Help from "./Help.svelte";
   import Replay from "./Replay.svelte";
@@ -29,6 +30,8 @@
   /** Leafing through the face-up discard pile. */
   let showDiscards = $state(false);
   let chatDraft = $state("");
+  /** Card whose official FAQ rulings are open. */
+  let faqCardId = $state<string | null>(null);
   let helpTab = $state<"play" | "rules" | "cards" | "about" | "tally">("play");
   let hotseatCount = $state(2);
   let setupName = $state("");
@@ -768,9 +771,16 @@
       <button class="inspector-close" onclick={() => { peekCard = null; peekCreatureId = null; }} aria-label="hide card">×</button>
       <div class="inspector-card"><Card card={peekCard} /></div>
       {#if peekNote}<div class="peek-note">{peekNote}</div>{/if}
+      {#if cardDef(peekCard.cardId).faqRulings.length > 0}
+        <button class="faq-link" onclick={() => (faqCardId = peekCard!.cardId)}>Official FAQ</button>
+      {/if}
     </div>
   {/if}
 
+  {#if faqCardId}
+    <Faq cardId={faqCardId} onclose={() => (faqCardId = null)} />
+  {/if}
+
   {#if showHelp}
     <Help initialTab={helpTab} stats={net.stats} onstats={() => net.requestStats()} onclose={() => (showHelp = false)} />
   {/if}
@@ -1329,6 +1339,9 @@
           <div class="inspector-card">
             <Card card={selectedCard} />
           </div>
+          {#if cardDef(selectedCard.cardId).faqRulings.length > 0}
+            <button class="faq-link" onclick={() => (faqCardId = selectedCard!.cardId)}>Official FAQ</button>
+          {/if}
         </div>
       {/if}
 
@@ -1972,6 +1985,21 @@
   }
   .discard-empty { font-family: "Caveat", cursive; color: #8a7a5e; font-size: 1.1rem; }
 
+  .faq-link {
+    display: block;
+    margin: 0.35rem 0 0 auto;
+    background: #2b2218;
+    color: #e8dfc6;
+    border: none;
+    border-radius: 3px;
+    font-family: "Oswald", sans-serif;
+    font-size: 0.62rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+  }
+  .faq-link:hover { background: #43331f; }
   .peek-note {
     margin-top: 0.4rem;
     background: #2b2218;