(() => {
    let timer = null, count = 4, msgArea = null;
    let correctCircle = null;
    let gameStarted = false;

    window.addEventListener('DOMContentLoaded', () => {
        msgArea = document.getElementById('message');
        const startButton = document.getElementById('startButton');
        startButton.addEventListener('click', startGame);

        const circles = document.querySelectorAll('.circle');
        circles.forEach(circle => {
            circle.addEventListener('click', () => checkCircle(circle));
        });
    });

    function startGame() {
        if (gameStarted) return; 
        gameStarted = true;
        count = 4;
        correctCircle = Math.floor(Math.random() * 10) + 1;
        countdown();
        document.getElementById('startButton').disabled = true; 
    }

    function countdown() {
        count--;
        msgArea.innerText = `爆発まで 残り${count}秒`;
        if (count == 0) {
            gameOver();
        } else {
            timer = setTimeout(countdown, 1000);
        }
    }

    function checkCircle(circle) {
        if (!gameStarted) return;
        if (parseInt(circle.textContent) === correctCircle) {
            stop();
        }
    }

    function gameOver() {
        clearTimeout(timer);
        alert("あーあ");
        document.body.style.background = "#ff0000";
        msgArea.innerText = `GAME OVER`;
        msgArea.style.fontSize = "600%";
        msgArea.style.fontWeight = "bold";
        disableAllCircles();
    }

    function stop() {
        clearTimeout(timer);
        document.body.style.background = "yellow";
        msgArea.innerText = "GAME CLEAR";
        msgArea.style.fontSize = "600%";
        msgArea.style.fontWeight = "bold";
        disableAllCircles();
    }

    function disableAllCircles() {
        let circles = document.querySelectorAll(".circle");
        circles.forEach(circle => {
            circle.style.pointerEvents = "none";
            circle.style.opacity = "0.5";
        });
    }
})();