{% extends "base.html" %}

{% block title %}Escape Gemeistert! Der Stein der Weisen ist in Sicherheit!{% endblock %}

{% block content %}
<div class="parchment-scroll" style="text-align: center;">
    <h1 class="parchment-title" style="font-size: 2.3rem;">⚡ ESCAPE GEMEISTERT! ⚡</h1>
    <div style="font-size: 5rem; margin: 1rem 0; filter: drop-shadow(0 0 25px #ff0055); animation: stonePulse 2s infinite alternate;">
        💎
    </div>
    <style>
        @keyframes stonePulse {
            0% { transform: scale(1); filter: drop-shadow(0 0 15px #e63946); }
            100% { transform: scale(1.12); filter: drop-shadow(0 0 35px #ff0055); }
        }
    </style>
    <p class="riddle-poem" style="font-size: 1.4rem;">
        "Der eisige Kälteschleier der dritten Phiole trug dich unbeschadet durch das schwarze Feuer.<br>
        Dahinter stand der goldene Spiegel Nerhegeb...<br>
        Und tief in deiner Tasche spürst du plötzlich ein schweres, pulsierendes Gewicht:<br>
        <strong>Der Stein der Weisen ist in Sicherheit!</strong>"
    </p>
</div>

<div class="dungeon-card" style="text-align: center; max-width: 650px; margin: 0 auto 2rem auto;">
    <h2 style="color: var(--gold); margin-bottom: 1rem;">📜 Hogwarts Escape Urkunde</h2>
    <p style="color: var(--text-dim); line-height: 1.7; margin-bottom: 1.5rem;">
        Du hast bewiesen, dass Mut, Flugkunst auf dem Besen und unbestechliche Logik stärker sind als jede dunkle Magie.
        Professor Dumbledore und das gesamte Kollegium von Hogwarts sprechen dir ihre höchste Anerkennung aus!
    </p>

    <div style="background: rgba(229, 185, 72, 0.1); border: 2px dashed var(--gold); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.5rem;">
        <div style="font-size: 1.2rem; color: var(--gold); font-weight: bold; margin-bottom: 0.5rem;">
            Auszeichnung: Retter des Steins der Weisen
        </div>
        <div style="color: var(--text-light); font-size: 0.95rem;">
            Besenflug gemeistert: <strong>{% if state.broom_solved %}Ja ({{ state.broom_score }} Pkt){% else %}Übersprungen{% endif %}</strong><br>
            Snapes Flammenkammer gelöst: <strong>Ja (Flasche III)</strong>
        </div>
    </div>

    <div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
        <a href="https://quiz.dev.waiswuaschd.de" class="btn-magical" target="_blank" rel="noopener">
            📜 Zum großen Hogwarts-Quiz ↗
        </a>
        <button onclick="restartEscape()" class="btn-control" style="font-size: 1rem; padding: 0.6rem 1.2rem;">
            🔄 Nochmal spielen
        </button>
    </div>
</div>

<script>
async function restartEscape() {
    await fetch('/api/reset', { method: 'POST' });
    window.location.href = '/';
}
</script>
{% endblock %}