<!-- Combat Defeat Screen -->

<div style="text-align: center; padding: 2rem;">
    <div style="font-size: 3rem; margin-bottom: 1rem;">&#128128;</div>
    <h2 style="color: #ef4444; margin-bottom: 1rem;">Defeat</h2>
    <p style="color: #d1d5db; margin-bottom: 2rem;">You have been defeated in battle...</p>

    <!-- Penalties -->
    {% if gold_lost and gold_lost > 0 %}
    <div style="background: rgba(127, 29, 29, 0.3); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem;">
        <div style="color: #fecaca;">
            <span style="color: #ef4444; font-weight: 600;">-{{ gold_lost }} gold</span> lost
        </div>
    </div>
    {% endif %}

    <p style="color: #9ca3af; font-size: 0.9rem; margin-bottom: 2rem;">
        Your progress has been saved. You can try again or return to town.
    </p>

    <!-- Actions -->
    <div style="display: flex; gap: 1rem; justify-content: center;">
        <a href="{{ url_for('dev.combat_hub') }}"
           style="padding: 0.75rem 1.5rem; background: #ef4444; color: white; border-radius: 6px; text-decoration: none;">
            Try Again
        </a>
        <a href="{{ url_for('dev.story_hub') }}"
           style="padding: 0.75rem 1.5rem; background: #6b7280; color: white; border-radius: 6px; text-decoration: none;">
            Return to Town
        </a>
    </div>
</div>
