{% extends "base.html" %}

{% block title %}Kammer V: Wichtel-Panik · Hogwarts Escape{% endblock %}

{% block content %}
<div class="parchment-scroll">
    <h1 class="parchment-title">🧚 Kammer V: Wichtel-Panik 🧚</h1>
    <p class="riddle-poem" style="font-size: 1.25rem;">
        "Lockharts Eisenkäfig ist aufgeplatzt! Ein Schwarm frecher kornischer Wichtel wirbelt durch den Raum.<br>
        Banne <strong>10 Wichtel mit dem Einfrier-Zauber <em>»Immobilus!«</em> ❄️</strong> mit schnellen Fingern!<br>
        <span style="color: #e74c3c;">Vorsicht: Tippe nicht auf Neville Longbottom (👦), der an der Decke baumelt!</span>"
    </p>
</div>

<div class="pixies-container">
    <!-- Top HUD Bar -->
    <div class="pixies-hud">
        <div>
            🧚 Gefangen: <strong id="pixieScore" style="color: var(--gold); font-size: 1.3rem;">0</strong> / 10
        </div>
        <div>
            ⏳ Zeit: <strong id="pixieTimer" style="color: #3498db; font-size: 1.3rem;">35</strong>s
        </div>
    </div>

    <!-- 3x3 Magical Grid Arena -->
    <div class="pixies-arena" id="pixieArena">
        <!-- Hole 0 -->
        <div class="pixie-hole" data-idx="0">
            <span class="hole-decor">📚</span>
            <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>
        <!-- Hole 2 -->
        <div class="pixie-hole" data-idx="2">
            <span class="hole-decor">🕯️</span>
            <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>
        <!-- Hole 4 -->
        <div class="pixie-hole" data-idx="4">
            <span class="hole-decor">📦</span>
            <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>
        <!-- Hole 6 -->
        <div class="pixie-hole" data-idx="6">
            <span class="hole-decor">📜</span>
            <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>
        <!-- Hole 8 -->
        <div class="pixie-hole" data-idx="8">
            <span class="hole-decor">🕰️</span>
            <div class="pixie-target" id="target8">🧚</div>
        </div>
    </div>

    <!-- Start & Status Overlay -->
    <div id="startOverlay" style="text-align: center; margin-top: 0.5rem; width: 100%;">
        <button type="button" id="startPixieBtn" class="btn-magical" style="padding: 0.9rem 2.2rem; font-size: 1.25rem;" onclick="startPixieHunt()">
            ⚡ Jagd beginnen!
        </button>
    </div>

    <!-- Success Panel -->
    <div id="pixieSuccess" 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;">
                Ruhe im Klassenzimmer!
            </h2>
            <p style="color: var(--text-light); max-width: 500px; margin: 0 auto 1.25rem auto;">
                Alle Wichtel sind mit <em>Immobilus</em> eingefroren und sicher im <strong>Wichtelglas</strong> verwahrt. Der Weg zu Snapes Flammenkammer liegt frei!
            </p>
            <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
                <a href="/bottles" class="btn-magical">Zur Flammenkammer (Snapes Flaschen) 🧪➔</a>
                <a href="/" class="btn-control">Zurück zur Übersicht 🏰</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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