feat: hide recap creation behind five goldfish logo taps

Replace the visible create button with a secret tap gesture that still
opens the PIN-protected recap flow.

Co-authored-by: Cursor <cursoragent@cursor.com>

public/app.js

@@ -130,15 +130,43 @@ function wirePinForm() {
   });
 }
 
-function wireCreate() {
+const GOLDFISH_TAPS = 5;
-  document.getElementById("newRecapBtn").addEventListener("click", async () => {
+const GOLDFISH_RESET_MS = 2000;
-    try {
+
-      await waitForPinLogin();
+async function openCreateFlow() {
-      openCreateModal();
+  try {
-    } catch {
+    await waitForPinLogin();
-      /* cancelled */
+    openCreateModal();
+  } catch {
+    /* cancelled */
+  }
+}
+
+function wireGoldfishSecret() {
+  const logo = document.getElementById("goldfishLogo");
+  let taps = 0;
+  let resetTimer = null;
+
+  logo.addEventListener("click", () => {
+    taps += 1;
+    logo.classList.add("logoWiggle");
+    window.setTimeout(() => logo.classList.remove("logoWiggle"), 300);
+
+    if (resetTimer) window.clearTimeout(resetTimer);
+    resetTimer = window.setTimeout(() => {
+      taps = 0;
+    }, GOLDFISH_RESET_MS);
+
+    if (taps >= GOLDFISH_TAPS) {
+      taps = 0;
+      if (resetTimer) window.clearTimeout(resetTimer);
+      openCreateFlow();
     }
   });
+}
+
+function wireCreate() {
+  wireGoldfishSecret();
   document.getElementById("createCancel").addEventListener("click", () => createModal.close());
   document.getElementById("createForm").addEventListener("submit", async (e) => {
     e.preventDefault();

public/index.html

@@ -18,13 +18,12 @@
     <header class="hero">
       <div class="heroInner">
         <div class="logoRow">
-          <img src="/icon.svg" alt="" class="logo" width="56" height="56">
+          <img src="/icon.svg" alt="" class="logo" id="goldfishLogo" width="56" height="56" title="Goldfish Recap">
           <div>
             <h1>Goldfish Recap</h1>
             <p class="tagline">Second Screen? Kein Problem. Dein Gehirn hat abgespeichert: nein. Wir: ja.</p>
           </div>
         </div>
-        <button type="button" class="btn btn-primary" id="newRecapBtn">+ Neues Recap</button>
       </div>
     </header>
 

public/styles.css

@@ -58,6 +58,24 @@ a {
 
 .logo {
   filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  transition: transform 0.15s;
+}
+
+.logo:active {
+  transform: scale(0.92);
+}
+
+.logoWiggle {
+  animation: goldfishWiggle 0.3s ease;
+}
+
+@keyframes goldfishWiggle {
+  0%, 100% { transform: rotate(0deg); }
+  25% { transform: rotate(-8deg) scale(1.05); }
+  75% { transform: rotate(8deg) scale(1.05); }
 }
 
 .hero h1 {