{% extends "base.html" %}

{% block title %}Kammer IV: Das Runen-Drehschloss der Gründer · Hogwarts Escape{% endblock %}

{% 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>
</div>

<div class="cryptex-container">
    <!-- Status / Feedback Toast -->
    <div id="cryptexFeedback" style="display: none; padding: 0.6rem 1rem; border-radius: 8px; font-weight: bold; text-align: center; width: 100%;">
    </div>

    <!-- The 4-Dial Cryptex Box -->
    <div class="cryptex-box">
        <div class="cryptex-frame-line"></div>
        <div class="cryptex-rings-row">
            <!-- Dial 0 -->
            <div class="cryptex-dial" id="dialCol0">
                <button type="button" class="dial-step-btn" onclick="stepDial(0, -1)" aria-label="Vorheriges Symbol">▲</button>
                <div class="dial-cylinder" id="cylinder0" onclick="stepDial(0, 1)">
                    <div class="dial-symbol" id="sym0">🦁</div>
                    <div class="dial-label" id="lbl0">Löwe</div>
                </div>
                <button type="button" class="dial-step-btn" onclick="stepDial(0, 1)" aria-label="Nächstes Symbol">▼</button>
            </div>

            <!-- Dial 1 -->
            <div class="cryptex-dial" id="dialCol1">
                <button type="button" class="dial-step-btn" onclick="stepDial(1, -1)" aria-label="Vorheriges Symbol">▲</button>
                <div class="dial-cylinder" id="cylinder1" onclick="stepDial(1, 1)">
                    <div class="dial-symbol" id="sym1">☀️</div>
                    <div class="dial-label" id="lbl1">Sonne</div>
                </div>
                <button type="button" class="dial-step-btn" onclick="stepDial(1, 1)" aria-label="Nächstes Symbol">▼</button>
            </div>

            <!-- Dial 2 -->
            <div class="cryptex-dial" id="dialCol2">
                <button type="button" class="dial-step-btn" onclick="stepDial(2, -1)" aria-label="Vorheriges Symbol">▲</button>
                <div class="dial-cylinder" id="cylinder2" onclick="stepDial(2, 1)">
                    <div class="dial-symbol" id="sym2">💧</div>
                    <div class="dial-label" id="lbl2">Wasser</div>
                </div>
                <button type="button" class="dial-step-btn" onclick="stepDial(2, 1)" aria-label="Nächstes Symbol">▼</button>
            </div>

            <!-- Dial 3 -->
            <div class="cryptex-dial" id="dialCol3">
                <button type="button" class="dial-step-btn" onclick="stepDial(3, -1)" aria-label="Vorheriges Symbol">▲</button>
                <div class="dial-cylinder" id="cylinder3" onclick="stepDial(3, 1)">
                    <div class="dial-symbol" id="sym3">🗝️</div>
                    <div class="dial-label" id="lbl3">Schlüssel</div>
                </div>
                <button type="button" class="dial-step-btn" onclick="stepDial(3, 1)" aria-label="Nächstes Symbol">▼</button>
            </div>
        </div>
    </div>

    <!-- Unlock Action Button -->
    <div style="margin-top: 0.5rem; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;">
        <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>
    </div>

    <!-- Success Panel -->
    <div id="cryptexSuccess" style="display: none; text-align: center; margin-top: 1rem; width: 100%;">
        <div class="dungeon-card" style="border-color: #2ecc71;">
            <div style="font-size: 3rem; margin-bottom: 0.5rem;">🗝️✨🏆</div>
            <h2 style="color: var(--gold); font-size: 1.8rem; margin-bottom: 0.5rem;">
                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>.
            </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>
                <a href="/" class="btn-control">Zurück zur Übersicht 🏰</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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