{{ block title }}
    Final Results
{{ endblock }}

{{ block content }}
<style>
    .final-card {
        text-align: center;
        padding: 32px 28px;
        background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        margin-bottom: 20px;
    }
    .final-card h2 {
        font-size: 22px;
        font-weight: 700;
        color: #1e293b;
        margin-top: 0;
        margin-bottom: 6px;
    }
    .final-card .subtitle {
        font-size: 14px;
        color: #64748b;
        margin-bottom: 24px;
    }
    .final-stats {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .final-stat {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 18px 28px;
        min-width: 140px;
    }
    .final-stat .f-label {
        font-size: 12px;
        color: #64748b;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }
    .final-stat .f-value {
        font-size: 28px;
        font-weight: 700;
        color: #1e293b;
    }
    .final-stat .f-value.score  { color: #16a34a; }
    .final-stat .f-value.profit { color: #1d4ed8; }
</style>

<div class="final-card">
    <h2>&#127881; Simulation Complete</h2>
    <p class="subtitle">Here's how you performed across all 5 rounds.</p>
    <div class="final-stats">
        <div class="final-stat">
            <div class="f-label">Average Score</div>
            <div class="f-value score">{{ average_score }}%</div>
        </div>
        <div class="final-stat">
            <div class="f-label">Average Profit</div>
            <div class="f-value profit">${{ average_profit }}</div>
        </div>
    </div>
</div>

{{ next_button }}

{{ endblock }}