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

{{ block title }}
<div style="text-align:center;">
Hasil<br/>
<b style="color: blue;">Ronde Latihan</b>
</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 }}