{% extends "base.html" %}

{% block title %}Kammer III: Die Zaubertrank-Brauküche · Hogwarts Escape{% endblock %}

{% block content %}
<div class="parchment-scroll">
    <h1 class="parchment-title">⚗️ Kammer III: Die Zaubertrank-Brauküche ⚗️</h1>
    <p class="riddle-poem" style="font-size: 1.15rem; margin: 0.3rem 0;">
        "Snapes massiver Kupferkessel dampft im Halbdunkel des Kerkers.<br>
        Um das Tor zu öffnen, musst du das flüssige Gold des Glücks brauen: <strong>Felix Felicis</strong>!"
    </p>
</div>

<div class="brew-container">
    <!-- Recipe Instruction Scroll -->
    <div class="recipe-book">
        <span id="stepBadge" class="recipe-step-badge">Schritt 1: Zutaten zugeben</span>
        <h3 id="stepInstruction" style="color: var(--gold); margin: 0.25rem 0; font-size: 1.25rem;">
            Gib die 4 Essenzen in den Kessel!
        </h3>
        <p id="stepSubtext" style="color: var(--text-dim); font-size: 0.9rem; margin: 0;">
            Tippe auf die Zutaten unten, um sie in den Kessel zu werfen.
        </p>
    </div>

    <!-- The SVG Cauldron Stage -->
    <div class="cauldron-visual-container" id="cauldronZone">
        <svg id="cauldronSvg" viewBox="0 0 320 280" class="cauldron-svg">
            <defs>
                <!-- Liquid Gradient (dynamic color) -->
                <radialGradient id="liquidGrad" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stop-color="#2ecc71" id="gradStop1" />
                    <stop offset="65%" stop-color="#16a085" id="gradStop2" />
                    <stop offset="100%" stop-color="#0b3b30" id="gradStop3" />
                </radialGradient>
                
                <!-- Cauldron Iron Body -->
                <radialGradient id="cauldronBodyGrad" cx="35%" cy="30%" r="70%">
                    <stop offset="0%" stop-color="#4a4d52" />
                    <stop offset="45%" stop-color="#242629" />
                    <stop offset="100%" stop-color="#111214" />
                </radialGradient>
                
                <!-- Rim Gradient -->
                <linearGradient id="rimGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                    <stop offset="0%" stop-color="#60646c" />
                    <stop offset="50%" stop-color="#303236" />
                    <stop offset="100%" stop-color="#151618" />
                </linearGradient>

                <!-- Fire Gradient -->
                <linearGradient id="fireGrad" x1="0%" y1="100%" x2="0%" y2="0%">
                    <stop offset="0%" stop-color="#e74c3c" />
                    <stop offset="60%" stop-color="#f39c12" />
                    <stop offset="100%" stop-color="#f1c40f" />
                </linearGradient>
            </defs>

            <!-- Fire Underneath -->
            <g id="cauldronFlames" class="animated-flames">
                <path d="M 85 265 Q 105 215 120 250 Q 140 195 160 250 Q 180 200 200 250 Q 220 215 235 265 Z" fill="url(#fireGrad)" opacity="0.9" />
                <path d="M 110 265 Q 135 220 160 230 Q 185 220 210 265 Z" fill="#ffeaa7" opacity="0.85" />
            </g>

            <!-- Cauldron Feet -->
            <rect x="75" y="240" width="18" height="25" rx="5" fill="#151618" />
            <rect x="227" y="240" width="18" height="25" rx="5" fill="#151618" />
            <rect x="151" y="245" width="18" height="22" rx="5" fill="#111214" />

            <!-- Cauldron Big Belly -->
            <ellipse cx="160" cy="180" rx="115" ry="85" fill="url(#cauldronBodyGrad)" stroke="#1a1a1a" stroke-width="4" />

            <!-- Cauldron Gold Handles -->
            <path d="M 38 135 Q 18 160 38 185" fill="none" stroke="#d4af37" stroke-width="7" stroke-linecap="round" />
            <path d="M 282 135 Q 302 160 282 185" fill="none" stroke="#d4af37" stroke-width="7" stroke-linecap="round" />

            <!-- Cauldron Outer Rim -->
            <ellipse cx="160" cy="105" rx="100" ry="24" fill="url(#rimGrad)" stroke="#1a1a1a" stroke-width="4" />

            <!-- Potion Fluid Surface -->
            <ellipse id="liquidSurface" cx="160" cy="106" rx="88" ry="18" fill="url(#liquidGrad)" />

            <!-- Bubbles in Liquid -->
            <g id="potionBubbles">
                <circle cx="135" cy="105" r="4" fill="#ffffff" opacity="0.6" class="bubble-anim b1" />
                <circle cx="170" cy="108" r="5" fill="#ffffff" opacity="0.5" class="bubble-anim b2" />
                <circle cx="155" cy="103" r="3" fill="#ffffff" opacity="0.7" class="bubble-anim b3" />
                <circle cx="190" cy="105" r="4" fill="#ffffff" opacity="0.5" class="bubble-anim b4" />
                <circle cx="120" cy="107" r="3" fill="#ffffff" opacity="0.6" class="bubble-anim b5" />
            </g>

            <!-- Animated Stirring Spoon -->
            <g id="stirSpoon" style="display: none;">
                <path d="M 160 25 L 160 115" stroke="#8b5a2b" stroke-width="8" stroke-linecap="round" />
                <ellipse cx="160" cy="115" rx="16" ry="9" fill="#a0522d" />
            </g>

            <!-- Dropped Ingredient Animation Container -->
            <text id="dropItemAnim" x="160" y="80" font-size="28" text-anchor="middle" style="display: none;"></text>
        </svg>
    </div>

    <!-- Step 1: Ingredient Shelf & Counter Bar -->
    <div id="step1Wrapper" style="width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.6rem;">
        <div style="font-size: 0.9rem; color: var(--gold); font-weight: bold;">
            🧪 Essenzen im Kessel: <span id="totalIngredientsCount">0</span> / 4
        </div>
        <div id="ingredientsShelf" class="ingredients-shelf">
            <button type="button" class="ingredient-btn" id="ingDragon" onclick="addIngredient('dragon')">
                <span class="ing-icon">🐉</span>
                <span class="ing-name">Drachenblut</span>
                <span class="ing-count" id="countDragon">0 / 2</span>
            </button>
            <button type="button" class="ingredient-btn" id="ingMandrake" onclick="addIngredient('mandrake')">
                <span class="ing-icon">🌿</span>
                <span class="ing-name">Alraunenblatt</span>
                <span class="ing-count" id="countMandrake">0 / 1</span>
            </button>
            <button type="button" class="ingredient-btn" id="ingStar" onclick="addIngredient('star')">
                <span class="ing-icon">✨</span>
                <span class="ing-name">Sternenstaub</span>
                <span class="ing-count" id="countStar">0 / 1</span>
            </button>
        </div>
    </div>

    <!-- Step 2: Stir Control Panel -->
    <div id="stirPanel" style="display: none; flex-direction: column; align-items: center; gap: 0.5rem; width: 100%;">
        <button type="button" id="stirBtn" class="btn-magical" style="padding: 0.9rem 1.8rem; font-size: 1.15rem; width: 100%; max-width: 320px;" onclick="doStir()">
            🥄 Kessel umrühren! (<span id="stirCount">0</span> / 3)
        </button>
        <span style="color: var(--text-dim); font-size: 0.85rem;">Tippe auf den Button, um den Sud umzurühren</span>
    </div>

    <!-- Step 3: Heat Control Panel -->
    <div id="heatPanel" class="heat-control-panel">
        <div style="color: var(--text-light); font-size: 0.95rem; text-align: center;">
            🌡️ Halte die Temperatur mit dem Blasebalg im grünen Bereich:
        </div>
        <div class="temp-bar-container">
            <div class="temp-ideal-zone" style="left: 45%; width: 40%;"></div>
            <div id="tempIndicator" class="temp-indicator"></div>
        </div>
        <div style="display: flex; justify-content: space-between; width: 100%; max-width: 320px; font-size: 0.8rem; color: var(--text-dim);">
            <span>Kalt</span>
            <span style="color: #2ecc71; font-weight: bold;">Ideal (45% - 85%)</span>
            <span>Zu heiß!</span>
        </div>
        <div style="color: var(--gold); font-weight: bold; margin-top: 0.25rem;">
            Ideale Hitze gehalten: <span id="heatTimer">0.0</span> / 3.0s
        </div>
        <button type="button" id="bellowsBtn" class="bellows-btn" onclick="pumpHeat()">
            🔥 Blasebalg pumpen!
        </button>
    </div>

    <!-- Success Container -->
    <div id="successPanel" 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;">
                Felix Felicis vollendet!
            </h2>
            <p style="color: var(--text-light); max-width: 500px; margin: 0 auto 1.25rem auto;">
                Der Kessel erstrahlt in gleißendem Gold! Eine Phiole des reinen flüssigen Glücks wandert in deinen <strong>Zauberbeutel</strong>.
            </p>
            <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
                <a href="/cryptex" class="btn-magical">Zur nächsten Kammer: Das Drehschloss 🔐➔</a>
                <a href="/" class="btn-control">Zurück zur Übersicht 🏰</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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