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


{{ block title }}
<div style="text-align:center; color: blue;">

    {{ if is_en }}
        Final Results - Practice Rounds
    {{ else }}
        Hasil<br/>
        <b>Ronde Latihan</b>
    {{ endif }}

</div>
{{ endblock }}


{{ block content }}

<div class="card card-info">

    {{ if Constants.num_rounds == 1 }}
        {{ include 'b1_bret_trial/results_1_round.html' }}
    {{ else }}
        {{ include 'b1_bret_trial/results_multi_round.html' }}
    {{ 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 }}