The setup became a wizard: one decision per screen, tap advances

"the mode setup is really overwhelming now" — three posters plus a sub-row
plus player tiles plus court meters was a wall. Discussed, Oliver picked the
wizard with tap-advance over next-buttons and the accordion: PICK A GAME
(three posters, now 148px tall — alone on a screen they get to be posters),
then the mode's own second step only when it has one (classic: DIFFICULTY
chips stacked tall; zombie tennis: ARCADE and THE TOURNAMENT as full posters;
gore skips straight through), then MATCH SETUP holding player + court +
SERVE UP with the mode riding the summary footer.

Tapping selects AND advances — one decision per screen is the wizard's whole
promise, and a NEXT under a single row of choices is a second tap for nothing.
Back walks the chain the way it came (who-and-where returns to the second
step only when the mode has one). Every step comes up pre-selected from last
time, so a returning player is three taps from serving. Three new stages on
the intro's existing data-stage switcher; splash Enter goes to 'mode' now.

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

index.html

@@ -140,11 +140,13 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
   /* ONE overlay, four panels, swapped by #intro[data-stage]. Keeping the backdrop and the card frame
      alive across every screen is the point — a screen that unmounts the whole overlay flashes the
      court through between menus. */
-  #splash, #setup, #stats, #ranks, #newbest, #secret, #bosses { display: none; }
+  #splash, #setup, #stats, #ranks, #newbest, #secret, #bosses, #stmode, #stsub { display: none; }
   #intro[data-stage="splash"] #splash { display: flex; flex-direction: column; flex: 1; }
   /* flex COLUMN, not block: it is what lets the footer's margin-top:auto reach the bottom of a
      screen whose content does not fill it */
   #intro[data-stage="setup"]  #setup,
+  #intro[data-stage="mode"]   #stmode,
+  #intro[data-stage="modesub"] #stsub,
   #intro[data-stage="stats"]  #stats,
   #intro[data-stage="ranks"]  #ranks,
   #intro[data-stage="secret"] #secret,
@@ -235,16 +237,15 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
      at cream-on-crowd was the report from the first live look */
   #modeList i, #modeSub i { color: #fff; font-size: 10px; margin-bottom: 0;
                    text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 0 0 7px #000; }
-  /* THE SECOND STEP (config.MENU): the picked poster's own choices, inset so they read as its
-     children. Sub-mode cards are the same poster at ~2/3 height, centred on their scene rather
-     than bottom-anchored (a 64px window off the bottom of these scenes is all court and shins);
-     the difficulty chips are plain acid-outline buttons — art for EASY/MEDIUM/HARD would be
-     forced, and the chip row reads faster anyway. */
-  #modeSub { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 14px; margin: 0 0 8px; }
-  #modeSub:empty { display: none; }
-  #modeSub button.mode.sm { flex: 1 1 100%; min-height: 64px; margin: 0; background-position: center; }
-  #modeSub button.chip { flex: 1; padding: 12px 0; background: var(--panel); border: 2px solid var(--line);
-                   color: var(--cream); font: 400 11px Silkscreen, monospace; letter-spacing: 1px;
+  /* THE SECOND STEP (config.MENU) has its own SCREEN in the wizard: sub-mode cards are
+     full-height posters centred on their scene, and the difficulty chips are plain acid-outline
+     buttons stacked tall — art for EASY/MEDIUM/HARD would be forced, and the chip reads faster. */
+  /* alone on their own screens, the posters get room to be posters */
+  #stmode button.mode, #modeSub button.mode { min-height: 148px; }
+  #modeSub { display: flex; flex-wrap: wrap; gap: 8px; }
+  #modeSub button.mode { background-position: center; }
+  #modeSub button.chip { flex: 1 1 100%; padding: 22px 0; background: var(--panel); border: 2px solid var(--line);
+                   color: var(--cream); font: 400 13px Silkscreen, monospace; letter-spacing: 2px;
                    cursor: pointer; -webkit-tap-highlight-color: transparent; }
   #modeSub button.chip.on { border-color: var(--acid); color: var(--acid); background: rgba(188,212,85,0.09); }
   #courtList button.court { display: flex; align-items: center; gap: 11px; width: 100%;
@@ -378,14 +379,24 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
     </div>
     <!-- tour tiles and court rows are both built from tables in main.js (config.TOURS / config.COURTS):
          adding either is a table row, never markup -->
+    <!-- THE SETUP IS A WIZARD now (Oliver: one screen of posters + chips + tiles + meters was
+         "really overwhelming"). Three stages, tap advances: the mode posters, then the mode's own
+         second step when it has one (classic: difficulty, zombie tennis: arcade or the cup), then
+         who-and-where with SERVE UP. Every step comes up pre-selected from last time, so a
+         returning player is three taps from serving. -->
+    <div id="stmode">
+      <div class="hdr"><button class="chev" id="mBack">&lsaquo;</button><h2>PICK A GAME</h2></div>
+      <div id="modeList"></div>
+    </div>
+    <div id="stsub">
+      <div class="hdr"><button class="chev" id="subBack">&lsaquo;</button><h2 id="subTitle">DIFFICULTY</h2></div>
+      <div id="modeSub"></div>
+    </div>
     <div id="setup">
       <div class="hdr"><button class="chev" id="sBack">&lsaquo;</button><h2>MATCH SETUP</h2></div>
-      <h3>01 · MODE</h3>
-      <div id="modeList"></div>
-      <div id="modeSub"></div>
-      <h3>02 · PLAYER</h3>
+      <h3>01 · PLAYER</h3>
       <div id="tours"></div>
-      <h3>03 · COURT</h3>
+      <h3>02 · COURT</h3>
       <div id="courtList"></div>
       <div class="foot">
         <p id="sSum"></p>
@@ -456,6 +467,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
     </div>
   </div>
 </div>
-<script type="module" src="src/main.js?v=233"></script>
+<script type="module" src="src/main.js?v=234"></script>
 </body>
 </html>