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

{{ block content }}

<div id="confetti-container"></div>

<div class="game-wrapper">

    <div class="game-header">
        <h2>
            🎲
            {{ if en }}
                Game Result
            {{ else }}
                Hasil Permainan
            {{ endif }}
        </h2>
    </div>

    <div class="coin-scene">
        <div id="coin"
             class="coin"
             data-result="{{ coin }}"
             data-win="{{ win }}">
            <div class="coin-face heads">
                <img src="{{ static 'Coin_Head2.png' }}" alt="Heads">
            </div>
            <div class="coin-face tails">
                <img src="{{ static 'Coin_Tail2.png' }}" alt="Tails">
            </div>
        </div>
    </div>

    <!-- Result Panel -->
    <div id="result-panel" class="result-panel hidden">

        <div class="result-card">

            <p class="result-text">
                {{ if en }}
                    The coin landed on:
                {{ else }}
                    Koin jatuh pada:
                {{ endif }}

                <strong>
                    {{ if coin == 'H' }}
                        {{ if en }}Head{{ else }}Kepala{{ endif }}
                    {{ else }}
                        {{ if en }}Tail{{ else }}Ekor{{ endif }}
                    {{ endif }}
                </strong>
            </p>

            {{ if win }}
                <p class="result-win">
                    🎉
                    {{ if en }}
                        You won this round!
                    {{ else }}
                        Anda memenangkan ronde ini!
                    {{ endif }}
                </p>
            {{ else }}
                <p class="result-lose">
                    💥
                    {{ if en }}
                        You lost this round.
                    {{ else }}
                        Anda kalah di ronde ini.
                    {{ endif }}
                </p>
            {{ endif }}

            <div class="balance-box">
                {{ if en }}
                    Balance
                {{ else }}
                    Saldo
                {{ endif }}

                <div class="balance-amount">
                    {{ balance }}
                </div>
            </div>
        </div>

        <br><br>

        <div class="result-card">

            <p class="result-text">
                {{ if en }}
                    Your bet:
                {{ else }}
                    Taruhan Anda:
                {{ endif }}

                <strong>{{ player.bet_amount }}</strong>
            </p>

            {{ if win }}

                <p>
                    Payoff:
                    {{ multiplier }} ×
                    {{ if en }}
                        bet
                    {{ else }}
                        taruhan
                    {{ endif }}
                </p>

                <p>
                    {{ if en }}
                        You receive:
                    {{ else }}
                        Anda menerima:
                    {{ endif }}

                    <strong>{{ round_payoff }}</strong>
                </p>

            {{ else }}

                <p>
                    {{ if en }}
                        You lose:
                    {{ else }}
                        Anda kehilangan:
                    {{ endif }}

                    <strong>{{ player.bet_amount }}</strong>
                </p>

            {{ endif }}

            <div class="next-btn">
                {{ next_button }}
            </div>
        </div>

    </div>
</div>

<script src="{{ static 'coin_flip.js' }}"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>

<script>
window.onload = function () {

    const roundKey = "bret_effect_round_{{ player.round_number }}";

    // Prevent replay only for THIS round
    if (sessionStorage.getItem(roundKey)) return;
    sessionStorage.setItem(roundKey, 'true');

    setTimeout(function () {

        {{ if win }}

            // 🎉 DOUBLE BURST (WIN)
            confetti({
                particleCount: 300,
                spread: 120,
                startVelocity: 45,
                origin: { y: 0.6 }
            });

            setTimeout(() => {
                confetti({
                    particleCount: 200,
                    spread: 180,
                    startVelocity: 35,
                    origin: { y: 0.55 }
                });
            }, 250);

        {{ else }}

            // 💥 FLASH IGNITION
            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.55 }
            });

            // 🔥 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.55 }
                });
            }, 120);

            // ✨ EMBERS
            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.55 }
                });
            }, 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.6 }
                });
            }, 380);

        {{ endif }}

    }, 2200); // match coin spin duration
};
</script>

{{ endblock }}