The lobby leads with your wizard, then fills the table

Pick your color first; then one section, "Fill the table", holds the
invite link, the roster, and the computer wizards, with a line saying
friends, automatons, or a mix all count toward the two to six. Abandon
sits below Start on its own line.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

packages/web/src/App.svelte

@@ -2095,8 +2095,28 @@
     <section class="boxlid">
       <div class="boxlid-inner">
         <div class="boxlid-title small">Room {net.roomId}</div>
-        <div class="lobby-head">Invite friends</div>
+        {#if !net.spectating}
-        <div class="boxlid-tag">Share the code — or the link. Two to six wizards enter the maze.</div>
+          <div class="lobby-head">Your color</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]}
+              <button
+                class="standee"
+                class:current={net.you != null && net.roomColors[net.you] === c}
+                class:taken={takenBy !== undefined && takenBy !== net.you}
+                disabled={takenBy !== undefined && takenBy !== net.you}
+                style:--ring={PLAYER_COLORS[c]}
+                onclick={() => net.pickColor(c)}
+                aria-label={`wizard color ${c + 1}${takenBy && takenBy !== net.you ? ` (taken by ${takenBy})` : ""}`}
+              >
+                <img src={tokenArt(`wizard-${c}`, "players")} alt="" />
+              </button>
+            {/each}
+          </div>
+        {/if}
+        <div class="lobby-head">Fill the table</div>
+        <div class="boxlid-tag">Two to six wizards enter the maze — friends by code or link,
+          computer wizards seated below, or a mix of both.</div>
         <div class="invite-row">
           <code class="invite-link">{inviteLink}</code>
           <button class="stamp tiny" onclick={copyInvite}>{inviteCopied ? "copied!" : "copy link"}</button>
@@ -2119,39 +2139,19 @@
           {/each}
         </ul>
         {#if net.spectating}
-        <p class="waiting">👁 You watch from the Peanut Gallery. Waiting for the boards to flip…</p>
+          <p class="waiting">👁 You watch from the Peanut Gallery. Waiting for the boards to flip…</p>
-        {#if net.players.length < 6}
-          <div class="gallery-join">
-            <input bind:value={name} maxlength="20" placeholder="e.g. Mordecai" aria-label="your wizard's name" />
-            <button class="stamp" disabled={!name.trim()}
-              onclick={() => { setPref("wizardName", name.trim()); net.join(net.roomId!, name.trim()); }}>
-              …or take a seat
-            </button>
-          </div>
-        {/if}
-        {:else}
-        <div class="lobby-head">Your color</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]}
-            <button
-              class="standee"
-              class:current={net.you != null && net.roomColors[net.you] === c}
-              class:taken={takenBy !== undefined && takenBy !== net.you}
-              disabled={takenBy !== undefined && takenBy !== net.you}
-              style:--ring={PLAYER_COLORS[c]}
-              onclick={() => net.pickColor(c)}
-              aria-label={`wizard color ${c + 1}${takenBy && takenBy !== net.you ? ` (taken by ${takenBy})` : ""}`}
-            >
-              <img src={tokenArt(`wizard-${c}`, "players")} alt="" />
-            </button>
-          {/each}
-        </div>
-        {#if net.you === net.hostId}
-          <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="gallery-join">
+              <input bind:value={name} maxlength="20" placeholder="e.g. Mordecai" aria-label="your wizard's name" />
+              <button class="stamp" disabled={!name.trim()}
+                onclick={() => { setPref("wizardName", name.trim()); net.join(net.roomId!, name.trim()); }}>
+                …or take a seat
+              </button>
+            </div>
+          {/if}
+        {:else if net.you === net.hostId}
+          {#if net.players.length < 6}
+            <div class="lobby-head">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">
@@ -2183,10 +2183,11 @@
           {#if net.players.length < 2}
             <div class="begin-hint">Seat a computer wizard, or invite a friend, and the boards can flip.</div>
           {/if}
+          <button class="stamp tiny abandon" title="dissolve this room for everyone"
+            onclick={() => net.abandonRoom()}>abandon room</button>
         {:else}
           <p class="waiting">Waiting for {net.hostId} to flip the boards…</p>
         {/if}
-        {/if}
       </div>
     </section>
   {:else if view}
@@ -3185,6 +3186,7 @@
   .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; }
+  .stamp.tiny.abandon { display: block; margin: 0.9rem auto 0; }
   .about-link {
     background: none;
     border: none;