document.addEventListener("DOMContentLoaded", function () {
    const coin = document.getElementById("coin");
    const resultPanel = document.getElementById("result-panel");

    const outcome = coin.dataset.result; // "H" or "T"
    const isWin = coin.dataset.win === "True";

    // Start coin spin
    setTimeout(() => {
        if (outcome === "H") {
            coin.style.transform = "rotateY(720deg)";
        } else {
            coin.style.transform = "rotateY(900deg)";
        }
    }, 200);

    // Reveal result + confetti after spin
    setTimeout(() => {
        resultPanel.classList.add("show");

        if (isWin) {
            launchConfetti();
        }
    }, 2200); // must match spin duration
});

function launchConfetti() {
    const container = document.getElementById("confetti-container");

    for (let i = 0; i < 120; i++) {
        const confetti = document.createElement("div");
        confetti.classList.add("confetti");

        confetti.style.left = Math.random() * 100 + "vw";
        confetti.style.animationDelay = Math.random() * 1.5 + "s";
        confetti.style.backgroundColor = randomColor();

        container.appendChild(confetti);

        setTimeout(() => confetti.remove(), 3000);
    }
}

function randomColor() {
    const colors = ["#FFD700", "#FF4C4C", "#4CAF50", "#2196F3", "#9C27B0"];
    return colors[Math.floor(Math.random() * colors.length)];
}