{% extends "base.html" %}

{% block title %}Kammer I: Der Goldene Ring-Flug · Hogwarts Escape{% endblock %}

{% block content %}
<div class="parchment-scroll">
    <h1 class="parchment-title">🧹 Kammer I: Der Goldene Ring-Flug ⭕</h1>
    <p class="riddle-poem" style="font-size: 1.25rem; margin: 0.5rem 0;">
        "Schwinge dich auf deinen Rennbesen über den Dächern von Hogwarts!<br>
        Durchfliege die magisch schwebenden goldenen Ringe, halte die Combo aufrecht<br>
        und meistere den Parcours von Madam Hooch, um die nächste Pforte zu öffnen!"
    </p>
</div>

<div class="canvas-wrapper">
    <div class="game-hud">
        <div>⏱️ Zeit: <strong id="timerVal">0s</strong></div>
        <div>⭕ Ringe: <strong id="ringsVal" style="color: #ffd700;">0/12</strong></div>
        <div>✨ Punkte: <strong id="scoreVal">0</strong></div>
        <div id="comboVal" style="color: #00ffff; font-weight: bold; min-width: 80px;"></div>
    </div>

    <canvas id="broomCanvas"></canvas>
</div>

<!-- Mobile Flight Cockpit & D-Pad -->
<div class="mobile-flight-cockpit">
    <div class="dpad-box">
        <button type="button" id="mBtnUp" class="dpad-btn dpad-up" aria-label="Hoch">▲</button>
        <div class="dpad-middle">
            <button type="button" id="mBtnLeft" class="dpad-btn dpad-left" aria-label="Links">◀</button>
            <div class="dpad-core">✨</div>
            <button type="button" id="mBtnRight" class="dpad-btn dpad-right" aria-label="Rechts">▶</button>
        </div>
        <button type="button" id="mBtnDown" class="dpad-btn dpad-down" aria-label="Runter">▼</button>
    </div>

    <div class="mobile-flight-actions">
        <button type="button" id="mBtnBoost" class="dpad-boost-btn">
            ⚡ TURBO
        </button>
        <div class="touch-hint">
            💡 <em>Ziehe den Besen einfach mit dem Finger direkt von Ring zu Ring!</em>
        </div>
    </div>
</div>

<div class="dungeon-card" style="margin-top: 1.5rem;">
    <p id="statusMsg" style="text-align: center; font-size: 1.15rem; color: var(--gold); margin-bottom: 0.8rem;">
        🎮 <strong>Steuerung:</strong> Wische mit dem Finger über das Spielfeld oder nutze Pfeiltasten / D-Pad zum Fliegen · <strong>Turbo</strong> für rasanten Schub!
    </p>
    <p style="text-align: center; color: var(--text-dim); font-size: 0.95rem;">
        Sammle 12 Ringe, um den Parcours abzuschließen. Schnelligkeit und Combos bringen Zusatzpunkte!
    </p>
</div>

<div style="text-align: center; margin-top: 1rem;">
    <a href="/duel" class="nav-link" style="color: var(--text-dim);">Direkt weiter zum Zauberspruch-Duell 🪄 ➔</a>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/broom.js?v=3.0"></script>
{% endblock %}