The mode buttons became posters: four bright banner scenes, captions on top

Oliver's design call for the setup screen: the mode buttons should POP — a
bright full-bleed background symbolising each game mode, the description
written over it. Four scenes rolled through the _famroll OpenRouter route,
each anchored on its mode's own sprite for style, no text baked in:

  CLASSIC   a sunny sports-poster serve under a blue summer sky
  ZOMBIE    the turned opponent at an acid-green floodlit night net
  CUP       the champion's silhouette looming over the gold trophy
  GORE      the horde pouring over the net into a blood-red sunset

Installed as mode_*.png at a third of the 2K roll, quantised to 128 colours
(2.1 MB of menu art became 265 KB; pixel art quantises for free). The button
is the banner now: art + scrim gradient as one background stack, caption
bottom-left with a text shadow, and the unpicked modes sit desaturated and
dimmed so the chosen one is the thing that glows — the menu's own "one bright
thing means selected" rule, applied to pictures. The sprite-tile row and its
`tile` field are gone from MODES; raw 2K rolls kept in _refcheck/modebtn for
re-cuts. SPRV 114 -> 115, main.js v229. Verified in the browser: draw, select,
summary line, no console errors.

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

index.html

@@ -219,16 +219,25 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
                 letter-spacing: 1px; }
   /* 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. */
-  /* MODE tiles reuse the court row wholesale — same box, same selected state. Only the picture
-     differs: a court tile is a photo of a court and crops fine, a mode tile is a SPRITE and must be
-     shown whole, so it gets `contain` and a dark plate to stand on. */
-  #modeList img { object-fit: contain !important; background: rgba(0,0,0,0.35); }
-  #courtList button.court, #modeList button.court { display: flex; align-items: center; gap: 11px; width: 100%;
+  /* MODE buttons are the BANNER row: the whole button is a bright scene of its mode (main.js sets
+     the art + a scrim gradient as the background stack) with the caption written over the bottom.
+     Unpicked buttons sit dimmed and desaturated so the chosen mode is the one that glows — the
+     same "one bright thing means selected" rule the menu palette already follows. */
+  #modeList button.mode { display: flex; align-items: flex-end; width: 100%; min-height: 78px;
+                   margin: 0 0 8px; padding: 7px 9px; background-size: cover; background-position: center 30%;
+                   image-rendering: pixelated; border: 2px solid var(--line); color: inherit; font: inherit;
+                   text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
+                   filter: saturate(0.45) brightness(0.62); transition: filter 0.15s; }
+  #modeList button.mode.on { border-color: var(--acid); filter: none; }
+  #modeList b { text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,0.9); }
+  #modeList i { color: var(--cream); opacity: 0.8; margin-bottom: 0;
+                   text-shadow: 0 1px 0 #000, 0 0 6px rgba(0,0,0,0.9); }
+  #courtList button.court { display: flex; align-items: center; gap: 11px; width: 100%;
                    margin: 0 0 8px; padding: 7px; background: var(--panel);
                    border: 2px solid var(--line); color: inherit; font: inherit; text-align: left;
                    cursor: pointer; -webkit-tap-highlight-color: transparent; }
-  #courtList button.court.on, #modeList button.court.on { border-color: var(--acid); background: rgba(188,212,85,0.09); }
-  #courtList img, #modeList img { width: 92px; height: 66px; display: block; image-rendering: pixelated; flex: none;
+  #courtList button.court.on { border-color: var(--acid); background: rgba(188,212,85,0.09); }
+  #courtList img { width: 92px; height: 66px; display: block; image-rendering: pixelated; flex: none;
                    object-fit: cover; }
   #courtList .cb, #modeList .cb { flex: 1; min-width: 0; }
   #courtList b, #modeList b { display: block; font: 400 12px Silkscreen, monospace; color: var(--cream); letter-spacing: 0.5px; }
@@ -431,6 +440,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
     </div>
   </div>
 </div>
-<script type="module" src="src/main.js?v=228"></script>
+<script type="module" src="src/main.js?v=229"></script>
 </body>
 </html>