Einstellungen: Knopf zum Zurücksetzen des Spielstands mit Bestätigung

src/lib/screens/SettingsScreen.svelte

@@ -1,9 +1,18 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition';
+  import { fade, scale } from 'svelte/transition';
   import { settings, ROUND_SECONDS_OPTIONS, setRoundSeconds, toggleSound } from '../stores/settings';
+  import { resetProgress } from '../stores/progress';
   import { goHome } from '../stores/route';
   import { play } from '../audio/soundManager';
   import IconButton from '../components/shared/IconButton.svelte';
+
+  let confirming = $state(false);
+
+  function doReset() {
+    play('tap');
+    resetProgress();
+    confirming = false;
+  }
 </script>
 
 <div class="screen" in:fade={{ duration: 220 }}>
@@ -66,13 +75,52 @@
       </button>
     </div>
   </section>
+
+  <section class="reset-row">
+    <button class="reset-btn" type="button" onclick={() => { play('tap'); confirming = true; }} aria-label="Spielstand zurücksetzen">
+      <svg width="38" height="38" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M4 7 H24" />
+        <path d="M11 7 V4 H17 V7" />
+        <path d="M6 7 L7.4 24 H20.6 L22 7" />
+        <path d="M11.5 11 V20 M16.5 11 V20" />
+      </svg>
+    </button>
+  </section>
 </div>
 
+{#if confirming}
+  <div class="overlay" transition:fade={{ duration: 150 }}>
+    <div class="dialog" in:scale={{ start: 0.85, duration: 200 }}>
+      <svg class="warn" width="84" height="84" viewBox="0 0 28 28" aria-hidden="true">
+        <path d="M14 3 L27 26 L1 26 Z" fill="#ffcf33" stroke="#c79a2a" stroke-width="1.5" stroke-linejoin="round" />
+        <rect x="12.7" y="9.5" width="2.6" height="8.5" rx="1.3" fill="#5a4500" />
+        <circle cx="14" cy="22" r="1.7" fill="#5a4500" />
+      </svg>
+      <div class="dialog-actions">
+        <button class="dlg cancel" type="button" onclick={() => { play('tap'); confirming = false; }} aria-label="Abbrechen">
+          <svg width="40" height="40" viewBox="0 0 40 40" aria-hidden="true">
+            <path d="M12 12 L28 28 M28 12 L12 28" stroke="currentColor" stroke-width="4" stroke-linecap="round" />
+          </svg>
+        </button>
+        <button class="dlg confirm" type="button" onclick={doReset} aria-label="Endgültig löschen">
+          <svg width="40" height="40" viewBox="0 0 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="M4 7 H24" />
+            <path d="M11 7 V4 H17 V7" />
+            <path d="M6 7 L7.4 24 H20.6 L22 7" />
+            <path d="M11.5 11 V20 M16.5 11 V20" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
 <style>
   .screen {
+    position: relative;
     height: 100%;
     display: grid;
-    grid-template-rows: auto 1fr 1fr;
+    grid-template-rows: auto 1fr 1fr auto;
     padding: 16px;
     gap: 18px;
     color: var(--c-text-on-dark);
@@ -81,6 +129,53 @@
     display: flex;
     justify-content: flex-end;
   }
+  .reset-row {
+    display: flex;
+    justify-content: center;
+  }
+  .reset-btn {
+    display: grid;
+    place-items: center;
+    width: 84px;
+    height: 84px;
+    border-radius: 20px;
+    background: rgba(255, 107, 107, 0.85);
+    color: #fff;
+    transition: transform 0.08s ease, background 0.15s ease;
+  }
+  .reset-btn:active { transform: scale(0.94); }
+
+  .overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(8, 14, 34, 0.72);
+    display: grid;
+    place-items: center;
+    z-index: 10;
+  }
+  .dialog {
+    display: grid;
+    justify-items: center;
+    gap: 24px;
+    padding: 28px;
+  }
+  .dialog-actions {
+    display: flex;
+    gap: 28px;
+  }
+  .dlg {
+    width: 88px;
+    height: 88px;
+    border-radius: 50%;
+    color: #fff;
+    display: grid;
+    place-items: center;
+    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22);
+    transition: transform 0.1s ease;
+  }
+  .dlg:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.22); }
+  .dlg.cancel { background: #6b7a99; }
+  .dlg.confirm { background: var(--c-rocket-body); }
   .setting {
     display: grid;
     grid-template-columns: 80px 1fr;

src/lib/stores/progress.ts

@@ -26,3 +26,9 @@ export function recordResult(target: Target, stage: Stage, timeMs?: number): voi
   progress.update((p) => recordRun(p, target, stage, date, timeMs));
   lastRun.set({ target, stage, date });
 }
+
+// Setzt den kompletten Spielstand (alle Highscores) zurück.
+export function resetProgress(): void {
+  progress.set(emptyProgress());
+  lastRun.set(null);
+}