Polish: Fix pixie visibility bug, add flight ready countdown, SVG cauldron redesign, and upgrade riddles

app/templates/base.html

@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=MedievalSharp&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/static/css/escape.css?v=3.0">
+    <link rel="stylesheet" href="/static/css/escape.css?v=4.0">
     {% block head %}{% endblock %}
 </head>
 <body>

app/templates/brew.html

@@ -6,8 +6,8 @@
 <div class="parchment-scroll">
     <h1 class="parchment-title">⚗️ Kammer III: Die Zaubertrank-Brauküche ⚗️</h1>
     <p class="riddle-poem" style="font-size: 1.15rem; margin: 0.3rem 0;">
-        "Snapes Kupferkessel dampft im Halbdunkel des Kerkers.<br>
-        Braue das flüssige Gold des Glücks: <strong>Felix Felicis</strong>!"
+        "Snapes massiver Kupferkessel dampft im Halbdunkel des Kerkers.<br>
+        Um das Tor zu öffnen, musst du das flüssige Gold des Glücks brauen: <strong>Felix Felicis</strong>!"
     </p>
 </div>
 
@@ -23,44 +23,113 @@
         </p>
     </div>
 
-    <!-- The Cauldron Stage -->
-    <div class="cauldron-wrapper" id="cauldronZone">
-        <!-- Interactive Stir Ring Overlay -->
-        <div id="stirCircle" class="stir-circle">
-            <span class="stir-arrow-hint">🥄</span>
-        </div>
+    <!-- The SVG Cauldron Stage -->
+    <div class="cauldron-visual-container" id="cauldronZone">
+        <svg id="cauldronSvg" viewBox="0 0 320 280" class="cauldron-svg">
+            <defs>
+                <!-- Liquid Gradient (dynamic color) -->
+                <radialGradient id="liquidGrad" cx="50%" cy="50%" r="50%">
+                    <stop offset="0%" stop-color="#2ecc71" id="gradStop1" />
+                    <stop offset="65%" stop-color="#16a085" id="gradStop2" />
+                    <stop offset="100%" stop-color="#0b3b30" id="gradStop3" />
+                </radialGradient>
+                
+                <!-- Cauldron Iron Body -->
+                <radialGradient id="cauldronBodyGrad" cx="35%" cy="30%" r="70%">
+                    <stop offset="0%" stop-color="#4a4d52" />
+                    <stop offset="45%" stop-color="#242629" />
+                    <stop offset="100%" stop-color="#111214" />
+                </radialGradient>
+                
+                <!-- Rim Gradient -->
+                <linearGradient id="rimGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+                    <stop offset="0%" stop-color="#60646c" />
+                    <stop offset="50%" stop-color="#303236" />
+                    <stop offset="100%" stop-color="#151618" />
+                </linearGradient>
 
-        <div class="cauldron-pot">
-            <div id="potionSurface" class="potion-surface"></div>
-        </div>
-        <div class="cauldron-fire">🔥</div>
+                <!-- Fire Gradient -->
+                <linearGradient id="fireGrad" x1="0%" y1="100%" x2="0%" y2="0%">
+                    <stop offset="0%" stop-color="#e74c3c" />
+                    <stop offset="60%" stop-color="#f39c12" />
+                    <stop offset="100%" stop-color="#f1c40f" />
+                </linearGradient>
+            </defs>
+
+            <!-- Fire Underneath -->
+            <g id="cauldronFlames" class="animated-flames">
+                <path d="M 85 265 Q 105 215 120 250 Q 140 195 160 250 Q 180 200 200 250 Q 220 215 235 265 Z" fill="url(#fireGrad)" opacity="0.9" />
+                <path d="M 110 265 Q 135 220 160 230 Q 185 220 210 265 Z" fill="#ffeaa7" opacity="0.85" />
+            </g>
+
+            <!-- Cauldron Feet -->
+            <rect x="75" y="240" width="18" height="25" rx="5" fill="#151618" />
+            <rect x="227" y="240" width="18" height="25" rx="5" fill="#151618" />
+            <rect x="151" y="245" width="18" height="22" rx="5" fill="#111214" />
+
+            <!-- Cauldron Big Belly -->
+            <ellipse cx="160" cy="180" rx="115" ry="85" fill="url(#cauldronBodyGrad)" stroke="#1a1a1a" stroke-width="4" />
+
+            <!-- Cauldron Gold Handles -->
+            <path d="M 38 135 Q 18 160 38 185" fill="none" stroke="#d4af37" stroke-width="7" stroke-linecap="round" />
+            <path d="M 282 135 Q 302 160 282 185" fill="none" stroke="#d4af37" stroke-width="7" stroke-linecap="round" />
+
+            <!-- Cauldron Outer Rim -->
+            <ellipse cx="160" cy="105" rx="100" ry="24" fill="url(#rimGrad)" stroke="#1a1a1a" stroke-width="4" />
+
+            <!-- Potion Fluid Surface -->
+            <ellipse id="liquidSurface" cx="160" cy="106" rx="88" ry="18" fill="url(#liquidGrad)" />
+
+            <!-- Bubbles in Liquid -->
+            <g id="potionBubbles">
+                <circle cx="135" cy="105" r="4" fill="#ffffff" opacity="0.6" class="bubble-anim b1" />
+                <circle cx="170" cy="108" r="5" fill="#ffffff" opacity="0.5" class="bubble-anim b2" />
+                <circle cx="155" cy="103" r="3" fill="#ffffff" opacity="0.7" class="bubble-anim b3" />
+                <circle cx="190" cy="105" r="4" fill="#ffffff" opacity="0.5" class="bubble-anim b4" />
+                <circle cx="120" cy="107" r="3" fill="#ffffff" opacity="0.6" class="bubble-anim b5" />
+            </g>
+
+            <!-- Animated Stirring Spoon -->
+            <g id="stirSpoon" style="display: none;">
+                <path d="M 160 25 L 160 115" stroke="#8b5a2b" stroke-width="8" stroke-linecap="round" />
+                <ellipse cx="160" cy="115" rx="16" ry="9" fill="#a0522d" />
+            </g>
+
+            <!-- Dropped Ingredient Animation Container -->
+            <text id="dropItemAnim" x="160" y="80" font-size="28" text-anchor="middle" style="display: none;"></text>
+        </svg>
     </div>
 
-    <!-- Step 1: Ingredient Shelf -->
-    <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>
+    <!-- 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
+        </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>
     </div>
 
-    <!-- Step 2: Stir Control Panel (Mobile Friendly!) -->
+    <!-- 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 oder wische über den Kessel</span>
+        <span style="color: var(--text-dim); font-size: 0.85rem;">Tippe auf den Button, um den Sud umzurühren</span>
     </div>
 
     <!-- Step 3: Heat Control Panel -->
@@ -69,12 +138,12 @@
             🌡️ Halte die Temperatur mit dem Blasebalg im grünen Bereich:
         </div>
         <div class="temp-bar-container">
-            <div class="temp-ideal-zone"></div>
+            <div class="temp-ideal-zone" style="left: 45%; width: 40%;"></div>
             <div id="tempIndicator" class="temp-indicator"></div>
         </div>
         <div style="display: flex; justify-content: space-between; width: 100%; max-width: 320px; font-size: 0.8rem; color: var(--text-dim);">
             <span>Kalt</span>
-            <span style="color: #2ecc71; font-weight: bold;">Ideal (50% - 85%)</span>
+            <span style="color: #2ecc71; font-weight: bold;">Ideal (45% - 85%)</span>
             <span>Zu heiß!</span>
         </div>
         <div style="color: var(--gold); font-weight: bold; margin-top: 0.25rem;">
@@ -105,5 +174,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="/static/js/brew.js?v=2.0"></script>
+<script src="/static/js/brew.js?v=3.0"></script>
 {% endblock %}

app/templates/broom.html

@@ -21,6 +21,19 @@
     </div>
 
     <canvas id="broomCanvas" style="touch-action: none; -webkit-user-select: none; user-select: none; width: 100%; display: block;"></canvas>
+
+    <!-- Start Flight Overlay -->
+    <div id="broomStartOverlay" class="flight-start-overlay">
+        <div style="font-size: 2.8rem; margin-bottom: 0.3rem;">🧹✨⭕</div>
+        <h3 style="color: var(--gold); font-size: 1.45rem; margin: 0 0 0.4rem 0;">Bereit zum Abflug?</h3>
+        <p style="color: var(--text-light); font-size: 0.95rem; margin: 0 0 1.2rem 0; text-align: center; max-width: 300px;">
+            Fliege durch <strong>12 magische Ringe</strong>!<br>
+            Steuere per Daumen über das Spielfeld oder mit dem Steuerkreuz unten.
+        </p>
+        <button type="button" id="startFlightBtn" class="btn-magical" style="padding: 0.85rem 2.2rem; font-size: 1.2rem;" onclick="startFlight()">
+            ⚡ Flug starten!
+        </button>
+    </div>
 </div>
 
 <!-- Mobile Flight Cockpit & D-Pad -->

app/templates/cryptex.html

@@ -4,18 +4,25 @@
 
 {% block content %}
 <div class="parchment-scroll">
-    <h1 class="parchment-title">🔐 Kammer IV: Das Runen-Drehschloss 🔐</h1>
-    <p class="riddle-poem" style="font-size: 1.15rem; margin: 0.3rem 0;">
-        "Vor dir ragt das Tresortor der vier Gründer mit vier rotierenden Messingwalzen.<br>
-        <em>»Der <strong>Löwe</strong> wacht am Himmelstor,<br>
-        wo nachts die <strong>Silbersichel</strong> glimmt,<br>
-        das ew’ge <strong>Feuer</strong> niemals stirbt,<br>
-        bis der <strong>Zauberstab</strong> die Siegel bricht.«</em>"
-    </p>
+    <h1 class="parchment-title">🔐 Kammer IV: Das Runen-Drehschloss der Gründer 🔐</h1>
+    <div style="font-family: 'Caveat', cursive; font-size: 1.25rem; line-height: 1.6; color: #efe5cb; text-align: left; padding: 0.25rem 0.5rem;">
+        <em>
+        »Vier Siegel schloss der Gründer Rat, bevor man je die Schatzkammer betrat.<br>
+        Kein Zauber bricht das Schloss, wenn du die Verse nicht ergründest:<br><br>
+        <strong>I. Das Wappentier von Godric:</strong><br>
+        Nicht die verschlagene Natter der Kerker, nicht der kluge Rabe, nicht der emsige Dachs – wer krönt mit goldener Mähne den Mut der Tapfersten?<br><br>
+        <strong>II. Das Gestirn der Gezeiten:</strong><br>
+        Nicht das sengende Mittagslicht, nicht der stumme Polarstern, nicht der jähe Blitz – welcher silberne Wanderer herrscht über die stille Nacht?<br><br>
+        <strong>III. Das verzehrende Element:</strong><br>
+        Es löscht keinen Durst, wurzelt in keinem Boden, weht nicht wie der Wind – es frisst gierig Holz, tanzt in Glut und stirbt im Wasser.<br><br>
+        <strong>IV. Das Werkzeug des Meisters:</strong><br>
+        Nicht das Schloss selbst, nicht das alte Pergament, nicht die Glasphiole – welches Instrument aus Holz und Phönixfeder schlägt die Funken?«
+        </em>
+    </div>
 </div>
 
 <div class="cryptex-container">
-    <!-- Status / Feedback Toast -->
+    <!-- Feedback Toast -->
     <div id="cryptexFeedback" style="display: none; padding: 0.6rem 1rem; border-radius: 8px; font-weight: bold; text-align: center; width: 100%;">
     </div>
 
@@ -70,7 +77,7 @@
         <button type="button" id="unlockCryptexBtn" class="btn-magical" style="padding: 0.9rem 2.2rem; font-size: 1.25rem; width: 100%; max-width: 320px;" onclick="checkCryptex()">
             🔓 Siegel entriegeln
         </button>
-        <span style="color: var(--text-dim); font-size: 0.85rem;">Tippe auf ▲/▼ oder wische auf den Walzen</span>
+        <span style="color: var(--text-dim); font-size: 0.85rem;">Tippe auf ▲/▼ oder wische über die Walzen</span>
     </div>
 
     <!-- Success Panel -->
@@ -81,7 +88,7 @@
                 Das Tor der Gründer steht offen!
             </h2>
             <p style="color: var(--text-light); max-width: 500px; margin: 0 auto 1.25rem auto;">
-                Die Messingbolzen schnappen lautstark zurück! Der uralte <strong>Schlüssel der Gründer</strong> wandert in deinen <strong>Zauberbeutel</strong>.
+                Mit Scharfsinn hast du alle 4 Verse entschlüsselt! Die massiven Bolzen schnappen auf und der uralte <strong>Schlüssel der Gründer</strong> liegt in deinem <strong>Zauberbeutel</strong>.
             </p>
             <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
                 <a href="/pixies" class="btn-magical">Zur nächsten Prüfung: Wichtel-Panik 🧚➔</a>
@@ -93,5 +100,5 @@
 {% endblock %}
 
 {% block scripts %}
-<script src="/static/js/cryptex.js?v=2.0"></script>
+<script src="/static/js/cryptex.js?v=3.0"></script>
 {% endblock %}

app/templates/duel.html

@@ -14,8 +14,8 @@
 <div class="canvas-wrapper">
     <div class="game-hud">
         <div>🪄 Spruch: <strong id="spellName" style="color: var(--gold);">Flipendo ⚡</strong></div>
-        <div id="spellProgress" style="color: #4cc9f0; font-weight: bold;">Zauberspruch 1 von 3</div>
-        <div>🛡️ Ziel: <span id="dummyHp">3 Zauber übrig</span></div>
+        <div id="spellProgress" style="color: #4cc9f0; font-weight: bold;">Zauberspruch 1 von 4</div>
+        <div>🛡️ Ziel: <span id="dummyHp">4 Zauber übrig</span></div>
     </div>
 
     <canvas id="spellCanvas" style="touch-action: none; -webkit-user-select: none; user-select: none; width: 100%; display: block;"></canvas>

app/templates/pixies.html

@@ -41,47 +41,47 @@
             <!-- Hole 0 -->
             <div class="pixie-hole" data-idx="0">
                 <span class="hole-decor">📚</span>
-                <div class="pixie-target" id="target0">🧚</div>
+                <div class="pixie-target" id="target0"></div>
             </div>
             <!-- Hole 1 -->
             <div class="pixie-hole" data-idx="1">
                 <span class="hole-decor">🗝️</span>
-                <div class="pixie-target" id="target1">🧚</div>
+                <div class="pixie-target" id="target1"></div>
             </div>
             <!-- Hole 2 -->
             <div class="pixie-hole" data-idx="2">
                 <span class="hole-decor">🕯️</span>
-                <div class="pixie-target" id="target2">🧚</div>
+                <div class="pixie-target" id="target2"></div>
             </div>
             <!-- Hole 3 -->
             <div class="pixie-hole" data-idx="3">
                 <span class="hole-decor">🧪</span>
-                <div class="pixie-target" id="target3">🧚</div>
+                <div class="pixie-target" id="target3"></div>
             </div>
             <!-- Hole 4 -->
             <div class="pixie-hole" data-idx="4">
                 <span class="hole-decor">📦</span>
-                <div class="pixie-target" id="target4">🧚</div>
+                <div class="pixie-target" id="target4"></div>
             </div>
             <!-- Hole 5 -->
             <div class="pixie-hole" data-idx="5">
                 <span class="hole-decor">🪟</span>
-                <div class="pixie-target" id="target5">🧚</div>
+                <div class="pixie-target" id="target5"></div>
             </div>
             <!-- Hole 6 -->
             <div class="pixie-hole" data-idx="6">
                 <span class="hole-decor">📜</span>
-                <div class="pixie-target" id="target6">🧚</div>
+                <div class="pixie-target" id="target6"></div>
             </div>
             <!-- Hole 7 -->
             <div class="pixie-hole" data-idx="7">
                 <span class="hole-decor">🕸️</span>
-                <div class="pixie-target" id="target7">🧚</div>
+                <div class="pixie-target" id="target7"></div>
             </div>
             <!-- Hole 8 -->
             <div class="pixie-hole" data-idx="8">
                 <span class="hole-decor">🕰️</span>
-                <div class="pixie-target" id="target8">🧚</div>
+                <div class="pixie-target" id="target8"></div>
             </div>
         </div>
     </div>