{% 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.15rem; margin: 0.3rem 0;">
        "Lockharts Käfig ist zerbrochen! Banne <strong>10 Wichtel mit dem Einfrier-Zauber <em>»Immobilus!«</em> ❄️</strong>!<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>

    <!-- Arena Container with Center Start Overlay -->
    <div style="position: relative; width: 100%;">
        <!-- Start & Restart Overlay (Directly over the arena!) -->
        <div id="startOverlay" class="arena-start-overlay">
            <div style="font-size: 2.8rem; margin-bottom: 0.4rem;">🧚⚡❄️</div>
            <h3 style="color: var(--gold); margin: 0 0 0.4rem 0; font-size: 1.4rem;">Bist du bereit?</h3>
            <p style="color: var(--text-light); font-size: 0.95rem; margin: 0 0 1.25rem 0; text-align: center; max-width: 280px;">
                Tippe schnell auf die blauen Wichtel (🧚), um sie einzufrieren! Verschone Neville (👦)!
            </p>
            <button type="button" id="startPixieBtn" class="btn-magical" style="padding: 0.9rem 2.2rem; font-size: 1.25rem;" onclick="startPixieHunt()">
                ⚡ Jagd starten!
            </button>
        </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>
    </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=2.0"></script>
{% endblock %}