{{ block styles }}
<link href="{{ static 'bret/css/custom.css' }}" rel="stylesheet"/>
{{ endblock }}

{{ block title }}
<div style="text-align:center; color: blue;">
    {{ if en }}
        Final Results <br>
        (Real Rounds)
    {{ else }}
        Hasil Akhir <br>
        (Ronde Sebenarnya)
    {{ endif }}
</div>
{{ endblock }}

{{ block content }}

<div class="card card-info">

    {{ if Constants.num_rounds == 1 }}
        {{ include Constants.results_1_round_template }}
    {{ else }}
        {{ include Constants.results_multi_round_template }}
    {{ endif }}

</div>

<!-- Confetti / explosion -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

<script>
window.onload = function () {

    // Prevent replay on refresh
    // if (sessionStorage.getItem('bret_effect_played')) return;
    // sessionStorage.setItem('bret_effect_played', 'true');

    {{ if total_payoff > 0 }}

        // 🎉 Celebration
        confetti({
            particleCount: 3500,
            spread: 3600,
            startVelocity: 80,
            gravity: 1.4,
            scalar: 1.2,
            origin: { x: 0.5, y: 0.5 }
        });

    {{ else }}

        // 💥 FLASH IGNITION (white-hot core)
        confetti({
            particleCount: 80,
            spread: 360,
            startVelocity: 20,
            ticks: 30,
            gravity: 0.4,
            scalar: 1.4,
            shapes: ['circle'],
            colors: ['#ffffff', '#fff3b0'],
            origin: { x: 0.5, y: 0.15 }
        });

        // 🔥 MAIN FIREBALL
        setTimeout(() => {
            confetti({
                particleCount: 240,
                spread: 360,
                startVelocity: 10,
                gravity: 1.1,
                ticks: 90,
                decay: 0.92,
                scalar: 1.2,
                shapes: ['circle'],
                colors: ['#ff2a00', '#ff6a00', '#ffaa00'],
                origin: { x: 0.5, y: 0.15 }
            });
        }, 120);

        // ✨ EMBERS (afterburn sparks)
        setTimeout(() => {
            confetti({
                particleCount: 140,
                spread: 180,
                startVelocity: 8,
                gravity: 1.4,
                ticks: 120,
                decay: 0.95,
                scalar: 0.6,
                shapes: ['circle'],
                colors: ['#ff4500', '#ffae00'],
                origin: { x: 0.5, y: 0.15 }
            });
        }, 260);

        // 🌫 SMOKE / DEBRIS FALL
        setTimeout(() => {
            confetti({
                particleCount: 160,
                spread: 100,
                startVelocity: 8,
                gravity: 2.0,
                ticks: 160,
                decay: 0.96,
                scalar: 1.0,
                shapes: ['circle'],
                colors: ['#555555', '#333333', '#111111'],
                origin: { x: 0.5, y: 0.2 }
            });
        }, 380);

    {{ endif }}
};
</script>

<br/>

{{ next_button }}

{{ endblock }}