From a7c55819ca9c997c9e130c9dcf65f58e7e655128 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Thu, 3 Sep 2026 18:48:05 -0400
Subject: [PATCH] The lobby says the plain words beside the flavor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two evening arrivals created a room and left in the lobby: one never
seated anyone, one seated a bot and never pressed the button. The card
led with "share the link" as if company were required, the row of
temperaments had no word saying they were computer opponents, and the
start button said only "Flip the boards".

Now the card has three headings — Invite friends, Your colour, Or seat
a computer wizard — with one line on what a hunter, berserker, and
worrier do; the start button says Start the game with "flip the
boards · N wizards" beneath; and while it is disabled a line says what
would enable it.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
---
 packages/web/src/App.svelte | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte
index d092e15..1edebfe 100644
--- a/packages/web/src/App.svelte
+++ b/packages/web/src/App.svelte
@@ -1931,6 +1931,7 @@
       <div class="handoff-card">
         <div class="handoff-eyebrow">wizard {local.setup.names.length + 1} of {local.setup.count}</div>
         <div class="handoff-name setup-title">What is your name?</div>
+        <div class="lobby-head">Your colour</div>
         <div class="standee-row" role="group" aria-label="choose your wizard">
           {#each [0, 1, 2, 3, 4, 5] as c (c)}
             {@const taken = local.setup.colors.includes(c)}
@@ -2094,6 +2095,7 @@
     <section class="boxlid">
       <div class="boxlid-inner">
         <div class="boxlid-title small">Room {net.roomId}</div>
+        <div class="lobby-head">Invite friends</div>
         <div class="boxlid-tag">Share the code — or the link. Two to six wizards enter the maze.</div>
         <div class="invite-row">
           <code class="invite-link">{inviteLink}</code>
@@ -2128,6 +2130,7 @@
           </div>
         {/if}
         {:else}
+        <div class="lobby-head">Your colour</div>
         <div class="standee-row" role="group" aria-label="choose your wizard">
           {#each [0, 1, 2, 3, 4, 5] as c (c)}
             {@const takenBy = Object.entries(net.roomColors).find(([, v]) => v === c)?.[0]}
@@ -2148,6 +2151,9 @@
           <button class="stamp tiny abandon" title="dissolve this room for everyone"
             onclick={() => net.abandonRoom()}>abandon room</button>
           {#if net.players.length < 6}
+            <div class="lobby-head">Or seat a computer wizard</div>
+            <div class="boxlid-tag">An automaton plays a full seat by the rules — a hunter goes for treasure,
+              a berserker for blood, a worrier for the shadows between; mystery deals one at random.</div>
             <span class="bot-row">
               <span class="bot-label">⚙ seat a</span>
               <select class="tier-pick" bind:value={botTier} aria-label="automaton difficulty"
@@ -2167,12 +2173,16 @@
             Include Expansion Set #1 — monsters &amp; wands
           </label>
           <button
-            class="stamp big"
+            class="stamp big begin"
             disabled={net.players.length < 2 || net.players.length > 6}
             onclick={() => net.start(withExpansion)}
           >
-            Flip the boards ({net.players.length} wizard{net.players.length === 1 ? "" : "s"})
+            Start the game
+            <span class="sub">flip the boards · {net.players.length} wizard{net.players.length === 1 ? "" : "s"}</span>
           </button>
+          {#if net.players.length < 2}
+            <div class="begin-hint">Seat a computer wizard, or invite a friend, and the boards can flip.</div>
+          {/if}
         {:else}
           <p class="waiting">Waiting for {net.hostId} to flip the boards…</p>
         {/if}
@@ -3164,6 +3174,17 @@
     color: #6b5a41;
     margin: 0.5rem 0 0.4rem;
   }
+  .lobby-head {
+    font-family: "Oswald", sans-serif;
+    text-transform: uppercase;
+    letter-spacing: 0.14em;
+    font-size: 0.72rem;
+    color: #8a6d3f;
+    margin: 1.1rem 0 0;
+  }
+  .stamp.big.begin { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
+  .stamp.big.begin .sub { font-size: 0.68rem; letter-spacing: 0.1em; opacity: 0.75; margin-top: 0.15rem; }
+  .begin-hint { font-size: 0.85rem; color: #8a6d3f; margin-top: 0.4rem; }
   .about-link {
     background: none;
     border: none;