{% extends "base.html" %}

{% block title %}Kammer VI: Snapes Flaschenrätsel & Flammenkammer · Hogwarts Escape{% endblock %}

{% block content %}
<div class="parchment-scroll">
    <h1 class="parchment-title">🧪 Kammer VI: Snapes Flaschenrätsel & Flammenkammer 🔥</h1>
    
    <div class="riddle-poem">
        "Gefahr liegt vor euch, die Rettung zurück,
        Zwei von uns helfen euch, habt ihr das Glück,
        Eine von sieben führt euch hindurch,
        Eine bringt den, der sie trinkt, sicher zurück,
        Zwei von ihnen enthalten nur Brennnesselwein,
        Drei sind tödlich, schenkt ihr sie ein.
        Wählt oder bleibt auf ewig hier stehen,
        Vier Hinweise helfen euch, alles zu sehen:

        1. So schlau sich das Gift auch zu tarnen mag,
           stets steht es zur Linken vom Wein im Gelag.
        2. Verschieden sind jene am Ende der Reih',
           doch wollt ihr nach vorn, ist keines getreu.
        3. Wie ihr deutlich seht, sind alle verschieden groß,
           weder Zwerg noch Riese birgt des Todes Los.
        4. Die Zweite von links und die Zweite von rechts
           sind Zwillinge im Geschmack des Geflechts,
           obwohl sie dem Auge ganz ungleich erscheinen."
    </div>
</div>

{% if is_locked and lock_info %}
<div class="chamber-lock-banner">
    <div class="chamber-lock-icon">🔒</div>
    <h2 class="chamber-lock-title">Kammer Versiegelt!</h2>
    <p class="chamber-lock-desc">
        {{ lock_info.reason }}
    </p>
    <div class="chamber-req-box">
        <div class="chamber-req-icon">{{ lock_info.item_icon }}</div>
        <div class="chamber-req-info">
            <strong>{{ lock_info.item_name }}</strong>
            <span>Erforderlich aus: {{ lock_info.from_chamber }}</span>
        </div>
    </div>
    <div class="chamber-lock-actions">
        <a href="{{ lock_info.from_url }}" class="btn-magical">
            ➔ Zu {{ lock_info.from_chamber }} gehen
        </a>
        <a href="?alohomora=1" class="alohomora-link">
            ✨ Zauberspruch »Alohomora« wirken (Prüfung für Spielleiter / Tester freischalten)
        </a>
    </div>
</div>
{% endif %}

<div class="flame-chamber-arena">
    <!-- The Two Flaming Portals -->
    <div class="flame-wall-container">
        <!-- Purple Fire (Retreat) -->
        <div class="flame-gate purple">
            <div class="flame-icon-animated" style="color: #c77dff;">🟣🔥</div>
            <h3 style="color: #e0aaff; margin: 0.5rem 0;">Violette Flammen</h3>
            <p style="font-size: 0.85rem; color: #d8bbff;">Der Rückweg in den Besenraum</p>
        </div>

        <!-- Black Fire (Advance to the Stone) -->
        <div class="flame-gate black">
            <div class="flame-icon-animated" style="color: #7b2cbf;">🖤🔥</div>
            <h3 style="color: #ffd700; margin: 0.5rem 0;">Schwarze Flammen</h3>
            <p style="font-size: 0.85rem; color: #c4b5fd;">Das Tor zur Kammer des Steins der Weisen!</p>
        </div>
    </div>

    <!-- The 7 Bottles Table -->
    <div class="bottles-table-wrapper">
        <h4 style="text-align: center; color: var(--gold); margin-bottom: 0.5rem;">
            🖐️ Wähle oder schiebe die Flaschen auf den Sockeln (Drag & Drop / Klick):
        </h4>
        <p style="text-align: center; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 1.25rem;">
            Nutze die Notiz-Dropdowns unter jeder Flasche, um deine logische Deduktion festzuhalten!
        </p>

        <div class="bottles-table" id="bottlesTable">
            <!-- Bottle 1 (Poison) -->
            <div class="bottle-slot" data-index="1">
                <svg class="bottle-svg" width="46" height="90" viewBox="0 0 50 100">
                    <!-- Amber Medium Bottle -->
                    <rect x="20" y="5" width="10" height="15" fill="#5c4033" rx="2" />
                    <rect x="18" y="0" width="14" height="6" fill="#8B4513" rx="2" />
                    <path d="M15,25 Q5,35 5,55 L5,90 Q5,98 15,98 L35,98 Q45,98 45,90 L45,55 Q45,35 35,25 Z" fill="#964B00" opacity="0.85"/>
                    <path d="M15,25 Q5,35 5,55 L5,90 Q5,98 15,98 L35,98 Q45,98 45,90 L45,55 Q45,35 35,25 Z" stroke="#e5b948" stroke-width="1.5" fill="none"/>
                    <ellipse cx="25" cy="65" rx="8" ry="12" fill="#582900" opacity="0.6"/>
                </svg>
                <div class="bottle-pedestal">I</div>
                <select class="bottle-tag-select">
                    <option value="">? Notiz</option>
                    <option value="poison">💀 Gift</option>
                    <option value="wine">🍷 Wein</option>
                    <option value="ahead">🔥 Vorwärts</option>
                    <option value="back">🟣 Zurück</option>
                </select>
            </div>

            <!-- Bottle 2 (Nettle Wine) -->
            <div class="bottle-slot" data-index="2">
                <svg class="bottle-svg" width="42" height="110" viewBox="0 0 50 120">
                    <!-- Green Slim Flacon -->
                    <rect x="20" y="5" width="10" height="20" fill="#5c4033" rx="2" />
                    <rect x="17" y="0" width="16" height="6" fill="#8B4513" rx="2" />
                    <path d="M18,30 L10,50 L10,110 Q10,118 25,118 Q40,118 40,110 L40,50 L32,30 Z" fill="#2d6a4f" opacity="0.85"/>
                    <path d="M18,30 L10,50 L10,110 Q10,118 25,118 Q40,118 40,110 L40,50 L32,30 Z" stroke="#e5b948" stroke-width="1.5" fill="none"/>
                    <ellipse cx="25" cy="75" rx="6" ry="18" fill="#1b4332" opacity="0.6"/>
                </svg>
                <div class="bottle-pedestal">II</div>
                <select class="bottle-tag-select">
                    <option value="">? Notiz</option>
                    <option value="poison">💀 Gift</option>
                    <option value="wine">🍷 Wein</option>
                    <option value="ahead">🔥 Vorwärts</option>
                    <option value="back">🟣 Zurück</option>
                </select>
            </div>

            <!-- Bottle 3 (AHEAD - The Dwarf / Smallest!) -->
            <div class="bottle-slot" data-index="3">
                <svg class="bottle-svg" width="36" height="58" viewBox="0 0 40 65">
                    <!-- Tiny Cobalt Vial (The Dwarf!) -->
                    <rect x="16" y="4" width="8" height="10" fill="#c0c0c0" rx="1" />
                    <path d="M14,16 Q8,24 8,36 L8,55 Q8,62 20,62 Q32,62 32,55 L32,36 Q32,24 26,16 Z" fill="#0077b6" opacity="0.9"/>
                    <path d="M14,16 Q8,24 8,36 L8,55 Q8,62 20,62 Q32,62 32,55 L32,36 Q32,24 26,16 Z" stroke="#00ffff" stroke-width="2" fill="none"/>
                    <circle cx="20" cy="40" r="5" fill="#90e0ef" opacity="0.8"/>
                </svg>
                <div class="bottle-pedestal" style="border-color: #00ffff; color: #00ffff;">III (Zwerg)</div>
                <select class="bottle-tag-select">
                    <option value="">? Notiz</option>
                    <option value="poison">💀 Gift</option>
                    <option value="wine">🍷 Wein</option>
                    <option value="ahead">🔥 Vorwärts</option>
                    <option value="back">🟣 Zurück</option>
                </select>
            </div>

            <!-- Bottle 4 (Poison) -->
            <div class="bottle-slot" data-index="4">
                <svg class="bottle-svg" width="48" height="96" viewBox="0 0 50 100">
                    <!-- Triangular Potion Flask -->
                    <rect x="20" y="5" width="10" height="15" fill="#4a3525" rx="2" />
                    <polygon points="20,22 5,88 45,88 30,22" fill="#52b788" opacity="0.85"/>
                    <polygon points="20,22 5,88 45,88 30,22" stroke="#e5b948" stroke-width="1.5" fill="none"/>
                    <circle cx="25" cy="60" r="7" fill="#2d6a4f" opacity="0.7"/>
                </svg>
                <div class="bottle-pedestal">IV</div>
                <select class="bottle-tag-select">
                    <option value="">? Notiz</option>
                    <option value="poison">💀 Gift</option>
                    <option value="wine">🍷 Wein</option>
                    <option value="ahead">🔥 Vorwärts</option>
                    <option value="back">🟣 Zurück</option>
                </select>
            </div>

            <!-- Bottle 5 (Poison) -->
            <div class="bottle-slot" data-index="5">
                <svg class="bottle-svg" width="50" height="102" viewBox="0 0 60 110">
                    <!-- Bulbous Violet Bottle -->
                    <rect x="25" y="5" width="10" height="20" fill="#3b2b1e" rx="2" />
                    <circle cx="30" cy="65" r="25" fill="#7209b7" opacity="0.85"/>
                    <circle cx="30" cy="65" r="25" stroke="#e5b948" stroke-width="1.5" fill="none"/>
                    <circle cx="30" cy="65" r="10" fill="#3a0ca3" opacity="0.6"/>
                </svg>
                <div class="bottle-pedestal">V</div>
                <select class="bottle-tag-select">
                    <option value="">? Notiz</option>
                    <option value="poison">💀 Gift</option>
                    <option value="wine">🍷 Wein</option>
                    <option value="ahead">🔥 Vorwärts</option>
                    <option value="back">🟣 Zurück</option>
                </select>
            </div>

            <!-- Bottle 6 (Nettle Wine) -->
            <div class="bottle-slot" data-index="6">
                <svg class="bottle-svg" width="44" height="114" viewBox="0 0 50 120">
                    <!-- Tall Slender Green Bottle (Twin of 2) -->
                    <rect x="20" y="5" width="10" height="18" fill="#5c4033" rx="2" />
                    <rect x="17" y="0" width="16" height="6" fill="#8B4513" rx="2" />
                    <path d="M19,25 Q12,45 12,80 L12,110 Q12,116 25,116 Q38,116 38,110 L38,80 Q38,45 31,25 Z" fill="#2d6a4f" opacity="0.85"/>
                    <path d="M19,25 Q12,45 12,80 L12,110 Q12,116 25,116 Q38,116 38,110 L38,80 Q38,45 31,25 Z" stroke="#e5b948" stroke-width="1.5" fill="none"/>
                    <ellipse cx="25" cy="80" rx="7" ry="20" fill="#1b4332" opacity="0.6"/>
                </svg>
                <div class="bottle-pedestal">VI</div>
                <select class="bottle-tag-select">
                    <option value="">? Notiz</option>
                    <option value="poison">💀 Gift</option>
                    <option value="wine">🍷 Wein</option>
                    <option value="ahead">🔥 Vorwärts</option>
                    <option value="back">🟣 Zurück</option>
                </select>
            </div>

            <!-- Bottle 7 (BACK - The Giant / Largest!) -->
            <div class="bottle-slot" data-index="7">
                <svg class="bottle-svg" width="60" height="135" viewBox="0 0 70 140">
                    <!-- Giant Round Carafe (The Giant!) -->
                    <rect x="27" y="8" width="16" height="25" fill="#8B4513" rx="3" />
                    <rect x="24" y="0" width="22" height="10" fill="#b08968" rx="3" />
                    <path d="M22,35 Q5,55 5,95 Q5,135 35,135 Q65,135 65,95 Q65,55 48,35 Z" fill="#b5179e" opacity="0.85"/>
                    <path d="M22,35 Q5,55 5,95 Q5,135 35,135 Q65,135 65,95 Q65,55 48,35 Z" stroke="#f72585" stroke-width="2" fill="none"/>
                    <ellipse cx="35" cy="95" rx="16" ry="22" fill="#560bad" opacity="0.6"/>
                </svg>
                <div class="bottle-pedestal" style="border-color: #f72585; color: #ff70a6;">VII (Riese)</div>
                <select class="bottle-tag-select">
                    <option value="">? Notiz</option>
                    <option value="poison">💀 Gift</option>
                    <option value="wine">🍷 Wein</option>
                    <option value="ahead">🔥 Vorwärts</option>
                    <option value="back">🟣 Zurück</option>
                </select>
            </div>
        </div>
    </div>

    <!-- Selection & Drinking Actions -->
    <div style="text-align: center; margin-top: 1.5rem;">
        <div id="selectedBottleInfo" style="font-size: 1.15rem; color: var(--gold); margin-bottom: 1.25rem;">
            👆 <em>Klicke auf eine der 7 Flaschen auf dem Altar, um sie zu prüfen und zu trinken.</em>
        </div>

        <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
            <button id="btnDrinkAhead" class="btn-magical" disabled style="background: linear-gradient(135deg, #1b092b, #431272, #7209b7); color: #fff; border: 1px solid #ffd700;">
                🖤 Trank trinken & durch das SCHWARZE FEUER (Vorwärts zum Stein)
            </button>
            <button id="btnDrinkBack" class="btn-magical" disabled style="background: linear-gradient(135deg, #2b0938, #5e1178, #9d4edd); color: #fff; border: 1px solid #c77dff;">
                🟣 Trank trinken & durch die VIOLETTEN FLAMMEN (Zurück)
            </button>
        </div>
    </div>
</div>

<!-- Hermine's Logic Notebook (Collapsible Clues) -->
<div class="dungeon-card" style="margin-top: 2rem;">
    <details>
        <summary style="cursor: pointer; font-size: 1.2rem; color: var(--gold); font-weight: bold;">
            📖 Hermines Logik-Spickzettel & Denkhilfe öffnen (Hier klicken)
        </summary>
        <div style="margin-top: 1rem; line-height: 1.8; color: var(--text-light); font-size: 1rem;">
            <p><strong>Die 4 genialen Schlussfolgerungen aus Snapes Versen:</strong></p>
            <ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
                <li><strong>Hinweis 4:</strong> Flasche II und VI schmecken identisch (Zwillinge). Da es nur 2 Brennnesselweine gibt, sind II und VI zwingend der Wein!</li>
                <li><strong>Hinweis 1:</strong> Links neben jedem Wein steht immer Gift. Daher müssen Flasche I (links von II) und Flasche V (links von VI) Gift sein!</li>
                <li><strong>Hinweis 2:</strong> Flasche I und VII sind unterschiedlich. Da I Gift ist, kann VII kein Gift sein. Außerdem bringt keines der beiden Enden vorwärts.</li>
                <li><strong>Hinweis 3:</strong> Weder der <strong>Zwerg (Flasche III)</strong> noch der <strong>Riese (Flasche VII)</strong> bergen Gift. Da Flasche III die Vorwärts-Flasche ist, führt nur sie durch das schwarze Feuer! Flasche VII bringt dich durch die violetten Flammen sicher zurück.</li>
            </ul>
        </div>
    </details>
</div>

<div style="text-align: center; margin-top: 1.5rem;">
    <a href="/sliding" class="btn-control" style="display: inline-flex; margin: 0 auto;">
        🧩 Zum mechanischen Alchemie-Schieberätsel ➔
    </a>
</div>
{% endblock %}

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