You pick your own kit and your own skin, and the blood stays red

Testers asked for some control over how their player looks. From behind — the
only way you ever see him — there are two things worth controlling, and neither
needs a single new asset: the kit and the skin are one hue-bucket pixel pass over
the sheets already loaded, cached per frame and built on first draw.

The buckets are measured, not guessed, and three neighbours had to be fenced off
one at a time: the shirt's warm HIGHLIGHTS (which spattered the man with mud on
every dark pick), the drawn BLOOD on the death frames (which turned the pool
brown — the worst bug this file could ship), and the women's HAIR, which is the
same hue as his shorts and cannot be told apart from it by any rule. Her set is
played in whites and has no kit to dye, so it is flagged out and the row says so
rather than silently doing nothing.

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

index.html

@@ -222,6 +222,17 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
   #tours button.on { border-color: var(--acid); background: rgba(188,212,85,0.09); }
   #tours img { height: 88px; width: auto; display: block; image-rendering: pixelated; }
   #tours b { font: 400 11px Silkscreen, monospace; color: var(--cream); letter-spacing: 0.5px; }
+  /* KIT and SKIN: a row of colour squares. That is the whole UI — the pick has no meters and no art
+     to show, and a labelled tile per colour would be five times the screen for a choice you make by
+     looking at the colour. The selected one's NAME rides in the h3 on the right, the same slot the
+     draw screen puts its state in, so nothing on the row is unlabelled. */
+  .swrow { display: flex; gap: 7px; }
+  .swrow button { flex: 1; aspect-ratio: 1; min-width: 0; padding: 0; border: 2px solid var(--line);
+                  cursor: pointer; -webkit-tap-highlight-color: transparent; }
+  .swrow button.on { border-color: var(--acid); box-shadow: inset 0 0 0 2px var(--ink); }
+  /* a tour played in whites has nothing to dye — the row stays visible so the screen does not jump,
+     but it reads as unavailable and the header says why */
+  .swrow.dead { opacity: 0.32; pointer-events: none; filter: saturate(0.25); }
   /* THE BOSS PICKER (back room). Two columns of portraits, because you pick a boss by looking at
      him — the tile is mostly art. Same plate as the tour tiles above; the grid is what makes ten
      of them fit on a phone. */
@@ -455,7 +466,13 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
       <div class="hdr"><button class="chev" id="sBack">&lsaquo;</button><h2>MATCH SETUP</h2></div>
       <h3>01 · PLAYER</h3>
       <div id="tours"></div>
-      <h3>02 · COURT</h3>
+      <!-- KIT and SKIN. Both rows are built in main.js from config.KITS/SKINS, so a colour added
+           there needs no markup — the same rule the tour tiles and the court rows follow. -->
+      <h3>02 · KIT<span id="kitName"></span></h3>
+      <div id="kitRow" class="swrow"></div>
+      <h3>03 · SKIN<span id="skinName"></span></h3>
+      <div id="skinRow" class="swrow"></div>
+      <h3>04 · COURT</h3>
       <div id="courtList"></div>
       <div class="foot">
         <p id="sSum"></p>
@@ -547,6 +564,6 @@ if (location.hostname !== 'splatter-tennis.wuwi.one') {
     </div>
   </div>
 </div>
-<script type="module" src="src/main.js?v=262"></script>
+<script type="module" src="src/main.js?v=263"></script>
 </body>
 </html>