Overhaul: Golden ring flight course and magic spell dueling mini-game with mobile gestures

app/templates/duel.html

@@ -0,0 +1,43 @@
+{% extends "base.html" %}
+
+{% block title %}Kammer II: Das Zauberspruch-Duell · Hogwarts Escape{% endblock %}
+
+{% block content %}
+<div class="parchment-scroll">
+    <h1 class="parchment-title">🪄 Kammer II: Das Zauberspruch-Duell ⚡</h1>
+    <p class="riddle-poem" style="font-size: 1.25rem; margin: 0.5rem 0;">
+        "Eine uralte verzauberte Rüstung bewacht die Pforte zur Flammenkammer.<br>
+        Zücke deinen Zauberstab! Verbinde die leuchtenden Runensterne mit dem Finger oder der Maus,<br>
+        um mächtige Hogwarts-Zaubersprüche zu entfesseln und die Rüstung zu bezwingen!"
+    </p>
+</div>
+
+<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>
+
+    <canvas id="spellCanvas" style="touch-action: none; -webkit-user-select: none; user-select: none; width: 100%; display: block;"></canvas>
+</div>
+
+<div class="dungeon-card" style="margin-top: 1.5rem; text-align: center;">
+    <p id="spellDesc" style="font-size: 1.15rem; color: var(--gold); margin-bottom: 0.6rem;">
+        Verbinde die leuchtenden Runensterne von 1 bis 4, um den Zauber zu wirken!
+    </p>
+    <p style="color: var(--text-dim); font-size: 0.95rem;">
+        💡 <em>Tipp: Ziehe deinen Finger oder die Maus flüssig durch die nummerierten Sterne auf dem Bildschirm.</em>
+    </p>
+</div>
+
+<div style="text-align: center; margin-top: 1.5rem;">
+    <a href="/bottles" class="btn-magical">
+        Direkt weiter zu Snapes Flammenkammer 🧪 ➔
+    </a>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="/static/js/duel.js?v=1.0"></script>
+{% endblock %}