Let the player choose a court before the match

Three courts, picked on a second start-screen stage: CENTRE COURT (grass),
TERRE ROUGE (clay) and THE SLAB (hard). A court is a row in config.COURTS and
four PNGs — render() never learns their names.

Each row carries two palettes, because every court still rots: what "drained"
means on orange clay is not what it means on green lawn. Mow stripes became a
flag rather than a colour — recolouring the lawn and leaving the bands on still
read as grass. Bounce is two numbers copied into TUNE on selection, so the three
bounce sites in gameplay.js and the T panel stay untouched: grass skids low and
fast, clay sits up and drags, hard is the old baseline.

Per-court crowd sheets and ad strips. Each court's clap frame is generated from
its OWN seated sheet, not from x_crowd2 — pairing one court's crowd with
another's applause cross-fades between two different crowds.

The picker is a second panel in the existing #intro overlay, rows built from the
table. Last pick is remembered and comes up pre-highlighted; 1..N or Enter on a
keyboard.

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

index.html

@@ -76,6 +76,22 @@
   #build { margin: 10px 0 0; font-size: 9px; color: #5a6270; letter-spacing: 0.5px; }
   #intro .start { margin-top: 18px; color: #e0cc72; font-weight: bold; letter-spacing: 1px; animation: blink 1.1s step-end infinite; }
   @keyframes blink { 50% { opacity: 0.25; } }
+  /* court select — the intro's second stage. One overlay, two panels, .picking swaps them, so the
+     backdrop and the card frame never flash between screens. */
+  #courts { display: none; }
+  #intro.picking #splash { display: none; }
+  #intro.picking #courts { display: block; animation: drop 0.3s ease-out; }
+  #courts h2 { margin: 0 0 14px; font: 400 11px Silkscreen, monospace; color: #e0cc72; letter-spacing: 2px; }
+  /* a row, not a stacked tile: three 3:2 tiles stacked fill a phone twice over, and the art still
+     reads at this size. -webkit-tap-highlight-color kills iOS's blue flash over the pixel art. */
+  #courts button { display: flex; align-items: center; gap: 12px; width: min(340px, 84vw);
+                   margin: 0 auto 8px; padding: 6px; background: rgba(255,255,255,0.04);
+                   border: 2px solid #3b4354; color: inherit; font: inherit; text-align: left;
+                   cursor: pointer; -webkit-tap-highlight-color: transparent; }
+  #courts button.on { border-color: #e0cc72; background: rgba(224,204,114,0.10); }
+  #courts img { width: 108px; height: 72px; display: block; image-rendering: pixelated; flex: none; }
+  #courts b { display: block; font: 400 11px Silkscreen, monospace; color: #dfe6f2; letter-spacing: 0.5px; }
+  #courts i { display: block; margin-top: 5px; font: 400 9px Silkscreen, monospace; color: #8a96ab; font-style: normal; }
 </style>
 </head>
 <body>
@@ -84,19 +100,23 @@
 <div id="hint">move: WASD/arrows &nbsp;·&nbsp; serve/swing: SPACE &nbsp;·&nbsp; aim: hold a direction while swinging &nbsp;·&nbsp; T: tuning panel</div>
 <div id="intro">
   <div class="card">
-    <img class="logo" src="assets/logo.png" alt="Splatter Tennis">
+    <div id="splash">
+      <img class="logo" src="assets/logo.png" alt="Splatter Tennis">
 
-    <p class="slogan">Fifteen. Thirty. Forty. <b>Dead.</b></p>
-    <div class="how">
-      <p><span>👆</span> tap — serve + swing</p>
-      <p><span>👉</span> flick — aimed shot</p>
-      <p><span>✋</span> drag — run <em>(auto-run is on)</em></p>
-      <p class="kb"><span>⌨️</span> WASD / arrows + SPACE</p>
+      <p class="slogan">Fifteen. Thirty. Forty. <b>Dead.</b></p>
+      <div class="how">
+        <p><span>👆</span> tap — serve + swing</p>
+        <p><span>👉</span> flick — aimed shot</p>
+        <p><span>✋</span> drag — run <em>(auto-run is on)</em></p>
+        <p class="kb"><span>⌨️</span> WASD / arrows + SPACE</p>
+      </div>
+      <p class="start">TAP TO START</p>
+      <p id="build"></p>
     </div>
-    <p class="start">TAP TO START</p>
-    <p id="build"></p>
+    <!-- rows are built from config.COURTS in main.js: adding a court is a table row, never markup -->
+    <div id="courts"><h2>CHOOSE YOUR COURT</h2></div>
   </div>
 </div>
-<script type="module" src="main.js?v=80"></script>
+<script type="module" src="main.js?v=81"></script>
 </body>
 </html>