Umbau zu "Wanted!"-Minigame

- Neues Spielprinzip: Fahndungsplakat + Feld voller Fuesse/Deko, gesuchten Fuss
  antippen bevor Timer ablaeuft; sofort neue Runde mit anderer Farbe.
- Progression: Raster -> wild verteilt -> Bewegung (2-3 Gruppen -> einzeln),
  Anzahl + Tempo steigen mit Score.
- Farben: 8 klar unterscheidbare Fuss-Farben (kein Braun/Hautton-Doppel) ->
  die gesuchte Farbe kommt garantiert nur EINMAL vor.
- Serverseitige Rangliste (data/leaderboard.json), Top 10 auf der Startseite,
  Name einmalig abgefragt + in localStorage gecacht.
- Reset per Befehl: npm run reset-stats
- Server stark vereinfacht (/api/feet, /api/leaderboard, /api/score); Pan/Zoom-,
  Wimmelbild- und Szenen-Generator-Code entfernt.
- WANTED-Plakat groesser, Timer schlanker, Startseite sauber zentriert.

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

public/index.html

@@ -1,53 +1,70 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
-<title>fuesse.sexy — finde die Füße</title>
+<title>fuesse.sexy — WANTED!</title>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='88'>🦶</text></svg>" />
 <link rel="stylesheet" href="/css/style.css" />
 
-<div id="game">
-  <!-- "Gesucht"-Leiste -->
-  <header id="legend">
-    <div class="legend-label">
-      <span class="brand">fuesse<span class="brand-dot">.</span>sexy</span>
-      <span class="legend-sub">Finde diese Füße:</span>
+<div id="app">
+  <!-- ===== Startseite ===== -->
+  <section id="home">
+    <div class="home-inner">
+      <h1 class="brand">fuesse<span class="brand-dot">.</span>sexy</h1>
+      <p class="tagline"><b>WANTED!</b> — schnapp dir den gesuchten Fuß, bevor die Zeit abläuft.</p>
+      <button id="play-btn" class="big-btn">▶ Spielen</button>
+
+      <div class="board">
+        <h2>🏆 Rangliste</h2>
+        <ol id="leaderboard" class="leaderboard"></ol>
+      </div>
+
+      <button id="change-name" class="link-btn">Name ändern</button>
     </div>
-    <div id="legend-items"></div>
-    <div id="legend-counter" class="legend-counter">0 / 3</div>
-  </header>
+  </section>
 
-  <!-- Die "Karte" (Wimmelbild) -->
-  <main id="stage">
-    <div id="world">
-      <img id="scene-img" alt="Wimmelbild" draggable="false" />
-    </div>
+  <!-- ===== Spiel ===== -->
+  <section id="game" class="hidden">
+    <header id="hud">
+      <div class="wanted-poster">
+        <div class="wanted-title">WANTED</div>
+        <div class="wanted-foot"><img id="wanted-img" alt="gesuchter Fuß" draggable="false" /></div>
+        <div class="wanted-reward">schnapp ihn!</div>
+      </div>
+      <div id="hud-right">
+        <div class="score-box">Score <span id="score">0</span></div>
+        <div id="timer-wrap"><div id="timer-bar"></div></div>
+      </div>
+    </header>
 
-    <div id="category-name" class="category-name"></div>
+    <main id="field"></main>
+    <div id="feedback"></div>
+  </section>
 
-    <!-- Zoom-Steuerung -->
-    <div id="controls">
-      <button id="zoom-in" title="Reinzoomen" aria-label="Reinzoomen">+</button>
-      <button id="zoom-out" title="Rauszoomen" aria-label="Rauszoomen">−</button>
-      <button id="reset-view" title="Ansicht zurücksetzen" aria-label="Ansicht zurücksetzen">⟲</button>
-    </div>
+  <!-- ===== Game Over ===== -->
+  <div id="gameover" class="hidden">
+    <div class="go-card">
+      <div class="go-emoji">🦶⏱️</div>
+      <h2>Zeit um!</h2>
+      <p class="go-score">Score: <span id="final-score">0</span></p>
 
-    <!-- Lade-Spinner -->
-    <div id="loading" class="hidden">
-      <div class="spinner"></div>
-    </div>
+      <div id="name-ask" class="hidden">
+        <label for="name-input">Dein Name für die Rangliste:</label>
+        <div class="name-row">
+          <input id="name-input" maxlength="20" placeholder="Name" autocomplete="off" />
+          <button id="save-score" class="big-btn small">OK</button>
+        </div>
+      </div>
 
-    <!-- Treffer/Daneben-Feedback -->
-    <div id="toast"></div>
-  </main>
+      <div class="board tight">
+        <h2>🏆 Rangliste</h2>
+        <ol id="go-leaderboard" class="leaderboard"></ol>
+      </div>
 
-  <!-- Gewinn-Overlay -->
-  <div id="win-overlay" class="hidden">
-    <div class="win-card">
-      <div class="win-emoji">🦶🎉</div>
-      <h2>Alle Füße gefunden!</h2>
-      <button id="next-scene">Weiter →</button>
+      <div class="go-actions">
+        <button id="play-again" class="big-btn">▶ Nochmal</button>
+        <button id="to-home" class="link-btn">Startseite</button>
+      </div>
     </div>
   </div>
 </div>
 
-<script src="/vendor/panzoom.min.js"></script>
 <script type="module" src="/js/app.js"></script>