{{ 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>🎲 Coin Flip Result</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">
                The coin landed on:
                <strong>
                    {{ if coin == 'H' }}Heads{{ else }}Tails{{ endif }}
                </strong>
            </p>

            {{ if win }}
                <p class="result-win">🎉 You won this round!</p>
            {{ else }}
                <p class="result-lose">💥 You lost this round.</p>
            {{ endif }}

            <div class="balance-box">
                Balance
                <div class="balance-amount">
                    {{ participant.vars.balance }}
                </div>
            </div>
        </div>

<br><br>

        <div class="result-card">
            <p class="result-text">
                Your bet:
                <strong>{{ player.bet_amount }}</strong>
            </p>

            {{ if win }}

                <p>
                    Payout: {{ multiplier }} × bet
                </p>

                <p>
                    You receive:
                    <strong>{{ player.round_payoff }}</strong>
                </p>

            {{ else }}

                <p>
                    You lose:
                    <strong>{{ player.bet_amount }}</strong>
                </p>

            {{ endif }}

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

<!-- Hidden until animation ends -->

</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 (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.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 (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.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 }}