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>

main.js

@@ -78,22 +78,22 @@ const TUT = [
   { pose: 1, say: ["I'm <em>MARVIN</em>. I mop the court.",
                    "Lately there is a great deal more to mop.",
                    "Let me show you how this goes."] },
-  { pose: 2, shot: 'court_grass', say: ["First it is just <em>TENNIS</em>.",
+  { pose: 2, shot: 'tut_serve', say: ["First it is just <em>TENNIS</em>.",
                    "<em>TAP</em> once to toss, tap again to serve.",
                    "<em>FLICK</em> toward where you want it.",
                    "<em>DRAG</em> to run — though he mostly runs himself."] },
   { pose: 4, say: ["Then, at some point, the other fellow...",
                    "stops being the other fellow.",
                    "Nobody stops the match. Nobody ever does."] },
-  { pose: 2, shot: 'x_howto', say: ["Now you do not rally. You <em>AIM</em>.",
+  { pose: 2, shot: 'tut_aim', say: ["Now you do not rally. You <em>AIM</em>.",
                    "<em>PULL BACK</em> from your man and let go.",
                    "The further you pull, the harder it lands.",
                    "A soft one only makes them cross."] },
-  { pose: 2, shot: 'w_bomb', say: ["I bring tins out to the rack down there.",
+  { pose: 2, shot: 'tut_rack', say: ["I bring tins out to the rack down there.",
                    "<em>BOMBS</em>, <em>TRIPLES</em>, <em>FIRE</em>, and the <em>GUN</em>.",
                    "Tap the rack to load one, then serve it.",
                    "Do try not to hit me with them."] },
-  { pose: 3, say: ["Sometimes the umpire calls order back.",
+  { pose: 3, shot: 'tut_duel', say: ["Sometimes the umpire calls order back.",
                    "One point, tennis rules, against one of them.",
                    "The lines are live again. Do not miss."] },
   { pose: 1, say: ["That is the lot. Mind the deep ones.",
@@ -102,12 +102,14 @@ const TUT = [
 ];
 let tutPage = 0;
 const tSay = document.getElementById('tSay'), tMarvin = document.getElementById('tMarvin');
+const tShot = document.getElementById('tShot');
 const tDots = document.getElementById('tDots'), tNext = document.getElementById('tNext');
 function drawTut() {
   const p = TUT[tutPage];
-  tMarvin.src = `assets/marvin${p.pose}.png?v=91`;
-  tSay.innerHTML = (p.shot ? `<img class="shot" src="assets/${p.shot}.png?v=91" alt="">` : '')
-    + p.say.map(l => `<p>${l}</p>`).join('');
+  tMarvin.src = `assets/marvin${p.pose}.png?v=92`;
+  tShot.style.display = p.shot ? 'block' : 'none';
+  if (p.shot) tShot.src = `assets/${p.shot}.png?v=93`;
+  tSay.innerHTML = p.say.map(l => `<p>${l}</p>`).join('');
   tDots.textContent = TUT.map((_, i) => i === tutPage ? '●' : '·').join('');
   tNext.textContent = tutPage === TUT.length - 1 ? 'DONE' : 'NEXT';
 }