<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive Bingo Caller Preview</title>
    <style>
        /* Scoped Styles within #bingo-caller-container to prevent CSS conflicts */
        #bingo-caller-container {
            font-family: Arial, sans-serif;
            background-color: #0D1B2A; /* Dark Blue Background */
            color: #FFD700; /* Yellow Text and Accents */
            text-align: center;
            padding: 20px;
            margin: 0;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }

        #bingo-caller-container h1 {
            font-size: 3em;
            margin-bottom: 20px;
            color: #FFD700;
        }

        #bingo-caller-container #current-number {
            font-size: 3em;
            margin: 20px 0;
            padding: 20px;
            background-color: #1B263B; /* Slightly Lighter Blue for Contrast */
            color: #FFD700;
            border-radius: 10px;
            display: inline-block;
            min-width: 200px;
        }

        #bingo-caller-container #controls {
            margin: 20px 0;
        }

        #bingo-caller-container .button {
            padding: 12px 24px;
            font-size: 1.2em;
            border: none;
            border-radius: 5px;
            background-color: #FFD700; /* Yellow Buttons */
            color: #0D1B2A; /* Dark Blue Text */
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            margin: 5px;
        }

        #bingo-caller-container .button:hover {
            background-color: #FFC300; /* Slightly Darker Yellow on Hover */
            transform: scale(1.05);
        }

        #bingo-caller-container #remaining {
            margin-top: 15px;
            font-size: 1.3em;
            color: #FFD700;
        }

        /* Called Numbers Section */
        #bingo-caller-container #called-numbers-container {
            margin: 20px auto;
            max-width: 1000px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .letter-row {
            width: 100%;
            margin: 10px 0;
            display: flex;
            align-items: flex-start;
            justify-content: center;
        }

        .letter-row h3 {
            width: 60px;
            margin: 0;
            text-align: center;
            font-size: 2.5em;
            color: #FFD700;
            flex-shrink: 0;
        }

        .numbers {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            flex: 1;
            gap: 5px;
        }

        .number {
            background-color: #FFD700;
            color: #0D1B2A;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.3em;
            box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
        }

        /* Responsive Design */
        @media (max-width: 800px) {
            #bingo-caller-container h1 {
                font-size: 2.5em;
            }

            #bingo-caller-container #current-number {
                font-size: 2.5em;
                min-width: 150px;
            }

            #bingo-caller-container .button {
                padding: 10px 20px;
                font-size: 1em;
            }

            #bingo-caller-container .number {
                width: 45px;
                height: 45px;
                font-size: 1em;
            }

            .letter-row h3 {
                font-size: 2em;
            }
        }

        @media (max-width: 600px) {
            #bingo-caller-container .letter-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .letter-row h3 {
                width: auto;
                margin-bottom: 5px;
                font-size: 1.8em;
            }

            .numbers {
                justify-content: flex-start;
            }

            .number {
                width: 40px;
                height: 40px;
                font-size: 1em;
            }
        }
    </style>
</head>
<body>

    <div id="bingo-caller-container">
        <!-- Title -->
        <h1>Interactive Bingo Caller</h1>

        <!-- Current Number Display -->
        <div id="current-number">--</div>

        <!-- Control Buttons -->
        <div id="controls">
            <button class="button" id="call-number">Call Next Number</button>
            <button class="button" id="reset-game">Reset Game</button>
        </div>

        <!-- Remaining Numbers -->
        <div id="remaining">Remaining Numbers: 75</div>

        <!-- Called Numbers Organized by Rows -->
        <h2 style="color: #FFD700;">Called Numbers:</h2>
        <div id="called-numbers-container">
            <!-- B Row -->
            <div class="letter-row" id="B-row">
                <h3>B</h3>
                <div class="numbers" id="B-numbers"></div>
            </div>
            <!-- I Row -->
            <div class="letter-row" id="I-row">
                <h3>I</h3>
                <div class="numbers" id="I-numbers"></div>
            </div>
            <!-- N Row -->
            <div class="letter-row" id="N-row">
                <h3>N</h3>
                <div class="numbers" id="N-numbers"></div>
            </div>
            <!-- G Row -->
            <div class="letter-row" id="G-row">
                <h3>G</h3>
                <div class="numbers" id="G-numbers"></div>
            </div>
            <!-- O Row -->
            <div class="letter-row" id="O-row">
                <h3>O</h3>
                <div class="numbers" id="O-numbers"></div>
            </div>
        </div>
    </div>

    <script>
        (function() {
            const totalNumbers = 75;
            let numbers = Array.from({length: totalNumbers}, (_, i) => i + 1);
            let calledNumbers = {
                B: [],
                I: [],
                N: [],
                G: [],
                O: []
            };

            // DOM Elements
            const titleElem = document.querySelector('#bingo-caller-container h1');
            const currentNumberElem = document.getElementById('current-number');
            const calledNumbersContainers = {
                B: document.getElementById('B-numbers'),
                I: document.getElementById('I-numbers'),
                N: document.getElementById('N-numbers'),
                G: document.getElementById('G-numbers'),
                O: document.getElementById('O-numbers'),
            };
            const callButton = document.getElementById('call-number');
            const resetButton = document.getElementById('reset-game');
            const remainingElem = document.getElementById('remaining');

            // Function to get the corresponding letter for a number
            function getLetter(number) {
                if (number >= 1 && number <= 15) return 'B';
                if (number >= 16 && number <= 30) return 'I';
                if (number >= 31 && number <= 45) return 'N';
                if (number >= 46 && number <= 60) return 'G';
                if (number >= 61 && number <= 75) return 'O';
                return '';
            }

            function updateRemaining() {
                remainingElem.textContent = `Remaining Numbers: ${numbers.length}`;
            }

            function callNextNumber() {
                if (numbers.length === 0) {
                    alert("All numbers have been called!");
                    return;
                }
                const randomIndex = Math.floor(Math.random() * numbers.length);
                const number = numbers.splice(randomIndex, 1)[0];
                const letter = getLetter(number);
                calledNumbers[letter].push(number);
                // Sort the numbers for this letter
                calledNumbers[letter].sort((a, b) => a - b);
                currentNumberElem.textContent = `${letter}${number}`;
                displayCalledNumber(letter, number);
                updateRemaining();
            }

            function displayCalledNumber(letter, number) {
                const container = calledNumbersContainers[letter];
                const numberDiv = document.createElement('div');
                numberDiv.classList.add('number');
                numberDiv.textContent = `${letter}${number}`;

                // Find the correct position to insert the numberDiv to keep numbers sorted
                const existingNumbers = Array.from(container.getElementsByClassName('number'))
                                            .map(div => parseInt(div.textContent.substring(1)));
                let inserted = false;

                for (let i = 0; i < existingNumbers.length; i++) {
                    if (number < existingNumbers[i]) {
                        container.insertBefore(numberDiv, container.children[i]);
                        inserted = true;
                        break;
                    }
                }

                if (!inserted) {
                    container.appendChild(numberDiv);
                }
            }

            function resetGame() {
                if (confirm("Are you sure you want to reset the game?")) {
                    numbers = Array.from({length: totalNumbers}, (_, i) => i + 1);
                    // Reset calledNumbers object
                    calledNumbers = {
                        B: [],
                        I: [],
                        N: [],
                        G: [],
                        O: []
                    };
                    currentNumberElem.textContent = '--';
                    // Clear all called numbers from each row
                    Object.values(calledNumbersContainers).forEach(container => {
                        container.innerHTML = '';
                    });
                    updateRemaining();
                }
            }

            // Event Listeners
            callButton.addEventListener('click', callNextNumber);
            resetButton.addEventListener('click', resetGame);

            // Initialize
            updateRemaining();
        })();
    </script>

</body>
</html>