From b23a3a8aaf6a06a1b4f57a8e30753f8feda4f678 Mon Sep 17 00:00:00 2001
From: Oliver Rieger <or@4morgen.de>
Date: Sat, 1 Aug 2026 17:44:21 +0200
Subject: [PATCH] Turn the theme up, and let START GAME catch the light
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Menu theme 0.5 -> 0.65.

The gold frame comes off START GAME — both buttons share the one slate border
now, so the pair reads as a pair, and a light sweeps across the START plate
instead: over in ~0.8s, then still for the rest of a 4.5s cycle. The sweep is a
::after with pointer-events:none so it can never eat the tap, and it is off
under prefers-reduced-motion.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 audio.js   |  2 +-
 index.html | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/audio.js b/audio.js
index 8137b7a..90e8961 100644
--- a/audio.js
+++ b/audio.js
@@ -120,7 +120,7 @@ export const zombieMusic = () => loopBed('zombie-mode.m4a', 800, 0.2, 20.47077);
 // — which is the loopEnd, because the decoded buffer is NOT (measured 48.0174 s in Chrome; see the
 // padding note in loopBed). Re-encode the file and you must re-measure that number:
 //   fetch(f).then(r=>r.arrayBuffer()).then(a=>new AudioContext().decodeAudioData(a)).then(b=>b.duration)
-export const menuMusic = () => loopBed('background-music.m4a', 30, 0.5, 48);
+export const menuMusic = () => loopBed('background-music.m4a', 30, 0.65, 48);
 
 // duck a bed to silence (out=true) or back to its base level over `secs` — the sudden-death duel mutes the music
 function fadeBed(file, out, secs = 0.7) {
diff --git a/index.html b/index.html
index 83fe3f1..55f9d45 100644
--- a/index.html
+++ b/index.html
@@ -97,7 +97,18 @@
   .btn.plate, .btn.plate2 { padding: 15px 10px; font-size: 15px; letter-spacing: 2px;
                             background-size: 100% 100%; background-repeat: no-repeat;
                             image-rendering: pixelated; text-shadow: 0 2px 0 rgba(0,0,0,0.9); }
-  .btn.plate  { background-image: url('assets/btn_start.png?v=94'); color: #f7ecb8; }
+  /* No gold frame on START any more — the sweep below is what draws the eye, and the two buttons
+     now share one border so the pair reads as a pair. */
+  .btn.plate  { background-image: url('assets/btn_start.png?v=94'); color: #f7ecb8;
+                border-color: #3b4354; position: relative; overflow: hidden; }
+  /* a light passing over the sign: across in ~0.8s, then still for the rest of the cycle.
+     pointer-events:none so the sweep can never eat the tap. */
+  .btn.plate::after { content: ''; position: absolute; inset: 0; pointer-events: none;
+                      background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.34) 50%,
+                                                  transparent 58%);
+                      transform: translateX(-140%); animation: shine 4.5s ease-in-out infinite; }
+  @keyframes shine { 0% { transform: translateX(-140%); } 18%, 100% { transform: translateX(140%); } }
+  @media (prefers-reduced-motion: reduce) { .btn.plate::after { animation: none; opacity: 0; } }
   .btn.plate2 { background-image: url('assets/btn_tut.png?v=94'); color: #d6dfec; }
   .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
@@ -139,7 +150,7 @@
     <div id="splash">
       <img class="logo" src="assets/logo.png" alt="Splatter Tennis">
       <p class="slogan">Fifteen. Thirty. Forty. <b>Dead.</b></p>
-      <button class="btn go plate" id="mStart">START GAME</button>
+      <button class="btn plate" id="mStart">START GAME</button>
       <button class="btn plate2" id="mTut">TUTORIAL</button>
       <p id="build"></p>
     </div>
@@ -168,6 +179,6 @@
     </div>
   </div>
 </div>
-<script type="module" src="main.js?v=95"></script>
+<script type="module" src="main.js?v=96"></script>
 </body>
 </html>