Draw the tutorial properly, and put the logo and gore on the menu

The tutorial was borrowing a court tile, the in-game how-to icon and a weapon
icon, none of which were drawn to be looked at. Four purpose-made 2:1 panels
now: the serve with a tapping hand, the slingshot pull with chevrons into a
zombie, the weapon rack, and the floodlit duel. They get the full card width
above Marvin instead of being squeezed into the text column beside him.

The menu wears the title logo instead of a Silkscreen headline, and the two
buttons wear generated plates — START GAME bloodied, TUTORIAL nearly clean.
The lettering stays Silkscreen on top: generated type is a lottery and would
not match the rest of the HUD.

Two things the art needed. Quantise the panels at 128 colours, not 64 — big
flat fields with saturated accents is where a small palette shows, and 64
turned the tennis ball beige. And find a plate by its BRIGHT BORDER, never by
the corner colour: one plate came back on a near-black margin, the other on a
transparency checkerboard that differs from itself everywhere and matched the
whole canvas.

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

index.html

@@ -93,6 +93,15 @@
          font: 400 12px Silkscreen, monospace; letter-spacing: 1px; cursor: pointer;
          -webkit-tap-highlight-color: transparent; }
   .btn.go { border-color: #e0cc72; color: #e0cc72; }
+  /* The two menu buttons wear generated plates. The LETTERING stays Silkscreen on top rather than
+     being drawn into the art: generated type is a lottery and would not match the rest of the HUD.
+     A text-shadow is what keeps it readable where a drip runs behind it. */
+  .btn.plate, .btn.plate2 { border: none; padding: 16px 10px; background-size: 100% 100%;
+                            background-repeat: no-repeat; image-rendering: pixelated;
+                            text-shadow: 0 2px 0 rgba(0,0,0,0.85); }
+  .btn.plate  { background-image: url('assets/btn_start.png?v=92'); color: #f4e6a6; }
+  .btn.plate2 { background-image: url('assets/btn_tut.png?v=92'); color: #cfd8e6; }
+  #menu .logo { width: min(280px, 70vw); margin-bottom: 22px; }
   .btn.back { font-size: 10px; padding: 9px 10px; color: #8a96ab; }
   /* 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. */
@@ -112,8 +121,10 @@
   #tutorial .say { flex: 1; }
   #tutorial .say p { margin: 0 0 10px; font: 400 10px Silkscreen, monospace; color: #dfe6f2; line-height: 1.9; }
   #tutorial .say em { color: #e0cc72; font-style: normal; }
-  #tutorial .shot { display: block; max-width: 100%; max-height: 108px; margin: 0 0 8px;
-                    image-rendering: pixelated; }
+  /* the panel is 2:1 and it is the point of the page, so it gets the full card width above the
+     Marvin row rather than being squeezed into the text column beside him */
+  #tutorial .shot { display: block; width: min(360px, 88vw); margin: 0 auto 12px;
+                    image-rendering: pixelated; border: 2px solid #2a3140; }
   #tutorial .dots { margin: 14px 0 10px; font: 400 10px Silkscreen, monospace; color: #5a6270; letter-spacing: 3px; }
   #tutorial .acts { display: flex; gap: 8px; width: min(340px, 84vw); margin: 0 auto; }
   #tutorial .acts .btn { margin: 0; flex: 1; }
@@ -139,9 +150,10 @@
       <p id="build"></p>
     </div>
     <div id="menu">
-      <h2>SPLATTER TENNIS</h2>
-      <button class="btn go" id="mStart">START GAME</button>
-      <button class="btn" id="mTut">TUTORIAL</button>
+      <!-- the logo IS the menu's headline; the title screen's own art, not a word set in Silkscreen -->
+      <img class="logo" src="assets/logo.png" alt="Splatter Tennis">
+      <button class="btn go plate" id="mStart">START GAME</button>
+      <button class="btn plate2" id="mTut">TUTORIAL</button>
     </div>
     <!-- court rows are built from config.COURTS in main.js: adding a court is a table row, never markup -->
     <div id="courts">
@@ -155,6 +167,7 @@
     <!-- tutorial pages are built from a table in main.js -->
     <div id="tutorial">
       <h2>HOW IT WORKS</h2>
+      <img class="shot" id="tShot" alt="">
       <div class="page">
         <img class="marvin" id="tMarvin" src="assets/marvin1.png" alt="">
         <div class="say" id="tSay"></div>
@@ -167,6 +180,6 @@
     </div>
   </div>
 </div>
-<script type="module" src="main.js?v=91"></script>
+<script type="module" src="main.js?v=93"></script>
 </body>
 </html>