feat: Add audio assets, UI escape room polish, requirements, and INSTALL.md

app/templates/brew.html

@@ -39,13 +39,16 @@
 <div class="brew-container">
     <!-- Recipe Instruction Scroll -->
     <div class="recipe-book">
-        <span id="stepBadge" class="recipe-step-badge">Schritt 1: Zutaten zugeben</span>
+        <span id="stepBadge" class="recipe-step-badge">Schritt 1: Zutaten dosieren</span>
         <h3 id="stepInstruction" style="color: var(--gold); margin: 0.25rem 0; font-size: 1.25rem;">
-            Gib die 4 Essenzen in den Kessel!
+            Dosiere die 3 Essenzen nach Snapes Rezeptur!
         </h3>
-        <p id="stepSubtext" style="color: var(--text-dim); font-size: 0.9rem; margin: 0;">
-            Tippe auf die Zutaten unten, um sie in den Kessel zu werfen.
+        <p id="stepSubtext" style="color: var(--text-dim); font-size: 0.9rem; margin: 0 0 0.4rem 0;">
+            Löse Snapes Rätselnotiz, um die Mengenangaben für Felix Felicis herauszufinden.
         </p>
+        <button type="button" class="btn-subtle" style="font-size: 0.9rem; border-color: var(--gold); color: var(--gold); padding: 0.4rem 0.9rem;" onclick="openRecipeRiddleModal()">
+            📜 Snapes Rezeptur-Notiz öffnen
+        </button>
     </div>
 
     <!-- The SVG Cauldron Stage -->
@@ -125,36 +128,81 @@
         </svg>
     </div>
 
-    <!-- Step 1: Ingredient Shelf & Counter Bar -->
-    <div id="step1Wrapper" style="width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;">
-        <div style="font-size: 0.9rem; color: var(--gold); font-weight: bold;">
-            🧪 Essenzen im Kessel: <span id="totalIngredientsCount">0</span> / 4
+    <!-- Step 1: Ingredient Dosage Shelf & +/- Controls -->
+    <div id="step1Wrapper" style="width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.75rem;">
+        <div style="font-size: 0.95rem; color: var(--gold); font-weight: bold; text-align: center;">
+            ⚗️ Dosiere die Essenzen laut Snapes Notiz:
         </div>
-        <div id="ingredientsShelf" class="ingredients-shelf">
-            <button type="button" class="ingredient-btn" id="ingDragon" onclick="addIngredient('dragon')">
-                <span class="ing-icon">🐉</span>
-                <span class="ing-name">Drachenblut</span>
-                <span class="ing-count" id="countDragon">0 / 2</span>
-            </button>
-            <button type="button" class="ingredient-btn" id="ingMandrake" onclick="addIngredient('mandrake')">
-                <span class="ing-icon">🌿</span>
-                <span class="ing-name">Alraunenblatt</span>
-                <span class="ing-count" id="countMandrake">0 / 1</span>
-            </button>
-            <button type="button" class="ingredient-btn" id="ingStar" onclick="addIngredient('star')">
-                <span class="ing-icon">✨</span>
-                <span class="ing-name">Sternenstaub</span>
-                <span class="ing-count" id="countStar">0 / 1</span>
-            </button>
+        <div class="dose-grid">
+            <!-- Dragon Blood -->
+            <div class="dose-card">
+                <span style="font-size: 2.2rem;">🐉</span>
+                <strong style="color: var(--text-light); font-size: 0.85rem;">Drachenblut</strong>
+                <div class="dose-controls">
+                    <button type="button" class="dose-btn" onclick="adjustDose('dragon', -1)">-</button>
+                    <span id="doseValDragon" class="dose-val">0</span>
+                    <button type="button" class="dose-btn" onclick="adjustDose('dragon', 1)">+</button>
+                </div>
+            </div>
+            <!-- Mandrake -->
+            <div class="dose-card">
+                <span style="font-size: 2.2rem;">🌿</span>
+                <strong style="color: var(--text-light); font-size: 0.85rem;">Alraune</strong>
+                <div class="dose-controls">
+                    <button type="button" class="dose-btn" onclick="adjustDose('mandrake', -1)">-</button>
+                    <span id="doseValMandrake" class="dose-val">0</span>
+                    <button type="button" class="dose-btn" onclick="adjustDose('mandrake', 1)">+</button>
+                </div>
+            </div>
+            <!-- Star Dust -->
+            <div class="dose-card">
+                <span style="font-size: 2.2rem;">✨</span>
+                <strong style="color: var(--text-light); font-size: 0.85rem;">Sternenstaub</strong>
+                <div class="dose-controls">
+                    <button type="button" class="dose-btn" onclick="adjustDose('star', -1)">-</button>
+                    <span id="doseValStar" class="dose-val">0</span>
+                    <button type="button" class="dose-btn" onclick="adjustDose('star', 1)">+</button>
+                </div>
+            </div>
         </div>
+        <button type="button" id="brewVerifyBtn" class="btn-magical" style="padding: 0.85rem 1.8rem; font-size: 1.1rem; width: 100%; max-width: 340px;" onclick="verifyAndMixIngredients()">
+            🧪 Essenzen in den Kessel geben & prüfen
+        </button>
     </div>
 
-    <!-- Step 2: Stir Control Panel -->
-    <div id="stirPanel" style="display: none; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%;">
-        <button type="button" id="stirBtn" class="btn-magical" style="padding: 0.9rem 1.8rem; font-size: 1.15rem; width: 100%; max-width: 320px;" onclick="doStir()">
-            🥄 Kessel umrühren! (<span id="stirCount">0</span> / 3)
-        </button>
-        <span style="color: var(--text-dim); font-size: 0.85rem;">Tippe auf den Button, um den Sud umzurühren</span>
+    <!-- Step 2: Two-Way Stirring Gauge (Links ↺ und Rechts ↻) -->
+    <div id="stirPanel" style="display: none; flex-direction: column; align-items: center; gap: 0.75rem; width: 100%;">
+        <div class="stir-gauge-wrapper">
+            <div style="font-size: 0.95rem; color: var(--gold); font-weight: bold; text-align: center;">
+                🥄 Rühr-Takt: <span id="stirPhaseLabel" style="color: #4cc9f0;">↺ LINKS (Phase 1)</span>
+            </div>
+            <div class="stir-track">
+                <div class="stir-target-zone"></div>
+                <div id="stirIndicatorBar" class="stir-indicator-bar"></div>
+            </div>
+            <div style="display: flex; justify-content: space-between; width: 100%; font-size: 0.78rem; color: var(--text-dim);">
+                <span>Zu träge</span>
+                <span style="color: #2ecc71; font-weight: bold;">Ideal (40% - 75%)</span>
+                <span>Zu wild!</span>
+            </div>
+            <div style="font-size: 0.9rem; color: var(--text-light); font-weight: bold;">
+                Takt gehalten: <strong id="stirTimerVal" style="color: var(--gold);">0.0</strong> / 3.0s
+            </div>
+        </div>
+
+        <div class="stir-buttons-row">
+            <button type="button" id="btnStirLeft" class="stir-action-btn active-target" onclick="stirTap('left')">
+                <span style="font-size: 1.6rem;">↺</span>
+                <span>Linksherum</span>
+            </button>
+            <button type="button" id="btnStirRight" class="stir-action-btn" onclick="stirTap('right')">
+                <span style="font-size: 1.6rem;">↻</span>
+                <span>Rechtsherum</span>
+            </button>
+        </div>
+        <span style="color: var(--text-dim); font-size: 0.82rem; text-align: center;">
+            Tippe rhythmisch, um den Balken im grünen Idealbereich zu halten!
+        </span>
     </div>
 
     <!-- Step 3: Heat Control Panel -->
@@ -179,6 +227,41 @@
         </button>
     </div>
 
+    <!-- Snape Reprimand Modal -->
+    <div id="snapeReprimandModal" class="snape-reprimand-modal">
+        <div class="snape-card">
+            <div class="snape-avatar">🧙‍♂️</div>
+            <span style="display: inline-block; background: rgba(142, 68, 173, 0.25); border: 1px solid #8e44ad; color: #d2b4de; font-size: 0.8rem; font-weight: bold; padding: 0.2rem 0.75rem; border-radius: 20px; text-transform: uppercase;">
+                Professor Severus Snape
+            </span>
+            <h3 style="color: #e74c3c; margin: 0.5rem 0 0.2rem 0; font-size: 1.35rem;">Kläglicher Fehltritt!</h3>
+            <div id="snapeReprimandText" class="snape-quote-box">
+                »Kläglich. Sogar ein Bergtroll mit verbundenen Augen hätte die Mengen besser ergründet.«
+            </div>
+            <button type="button" class="btn-magical" style="padding: 0.75rem 1.6rem; font-size: 1.05rem;" onclick="closeSnapeModal()">
+                🧹 Kessel säubern (Evanesco) & neu ansetzen
+            </button>
+        </div>
+    </div>
+
+    <!-- Recipe Riddle Parchment Modal -->
+    <div id="recipeRiddleModal" class="snape-reprimand-modal">
+        <div class="snape-card" style="border-color: var(--gold); box-shadow: 0 0 45px rgba(229, 185, 72, 0.4);">
+            <div style="font-size: 3.2rem; margin-bottom: 0.3rem;">📜✨</div>
+            <h3 style="color: var(--gold); margin: 0.3rem 0; font-size: 1.4rem;">Snapes Felix-Felicis-Rezeptur</h3>
+            <div class="snape-quote-box" style="border-color: var(--gold);">
+                <em>»Drei Essenzen verlangt das flüssige Gold:<br><br>
+                • 🐉 <strong>Drachenblut:</strong> Die Köpfe des dreiköpfigen Wächters Fluffy (3 Tropfen)<br>
+                • 🌿 <strong>Alraunenblatt:</strong> Harrys treue Gefährten am Gryffindor-Tisch (Ron & Hermine = 2 Blätter)<br>
+                • ✨ <strong>Sternenstaub:</strong> Der eine Siegelring des Alchemisten (1 Prise)<br><br>
+                <strong>Rühren:</strong> 3 Sekunden gleichmäßig LINKS (↺), danach 3 Sekunden RECHTS (↻)! Zu hektisch oder zu heiß zerstört den Sud augenblicklich!«</em>
+            </div>
+            <button type="button" class="btn-magical" style="padding: 0.75rem 1.8rem; font-size: 1.05rem;" onclick="closeRecipeRiddleModal()">
+                ➔ Verstanden, zum Kessel
+            </button>
+        </div>
+    </div>
+
     <!-- Success Container -->
     <div id="successPanel" style="display: none; text-align: center; margin-top: 1rem; width: 100%;">
         <div class="dungeon-card" style="border-color: #2ecc71;">
@@ -199,5 +282,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="/static/js/brew.js?v=5.0"></script>
+<script src="/static/js/brew.js?v=6.0"></script>
 {% endblock %}