I am currently developing a Keno betting script for use on nanogames.io and would like you to help me enhance it by adding new features, design improvements, and better functionality. Below is the script I’m working with (insert your script here).

Key Upgrades Needed:

1. User Interface (UI) Design:

	•	Dark Theme: Implement a visually appealing dark mode for the Keno interface with color contrast adjustments.
	•	Responsiveness: Optimize for mobile devices (especially iPhones), ensuring the interface is touch-friendly.
	•	Gradient Buttons & Borders: Add slight gradients to buttons with dark borders for a modern look.
	•	Improved Layout: Arrange the game elements efficiently, ensuring ease of access across devices.

2. New Functionalities:

	•	Place Single Bet Button: Add a “Place Single Bet” button, allowing users to place just one bet at a time with a single click.
	•	“Only Change on Hit” Toggle: Implement a toggle option that, when enabled, ensures the heatmap only recalculates after a winning bet. If there’s no win, the heatmap remains unchanged.
	•	King of the Hill Feature: This feature provides a precise heatmap that focuses on smaller portions of the Keno board instead of the full board for more precise analysis. Users will be able to select specific sections like:
	•	Full
	•	TopHalf
	•	BottomHalf
	•	Left
	•	Right
	•	TopLeftNine
	•	TopRightNine
	•	Middle
	•	BottomRightNine
	•	BottomLeftNine
	•	Auto Sector: Automatically selects the hottest/coldest sections based on recent occurrences or misses.
Ensure this feature is visually appealing and integrates seamlessly without affecting the website’s functionality.
	•	Autovault Feature: Add an autovaulting feature that automatically transfers profits to a vault based on user-defined thresholds.
	•	Recommended Bet Feature: Implement a system that provides bet recommendations based on recent game data, helping users make more informed bets.

3. Practical Enhancements:

	•	Bet History Panel: Add a collapsible panel showing recent bets, payouts, and results.
	•	Touch Support for Mobile: Ensure all elements work seamlessly on mobile devices.
	•	Hotkeys Support: Implement hotkeys for quick actions like adjusting bet size or starting/stopping autoplay.

4. Backend Improvements:

	•	Optimized Performance: Ensure the script runs smoothly on both desktop and mobile platforms.
	•	Error Handling: Add error handling for scenarios like network issues or invalid inputs.
	•	Async Support: Ensure all betting actions and API calls are handled asynchronously.

Special Instructions:

	•	The King of the Hill feature should provide precise analysis by tracking specific portions of the Keno board based on the sections selected by the user. The Auto Sector option should dynamically pick the hottest or coldest sections based on recent data and user settings.
	•	Make the entire script functional by simply pasting it into the JavaScript console on nanogames.io. This should not interfere with any existing website functionality.
	•	Be thorough in the response, explaining why certain features or improvements were implemented the way they were. Ensure no critical functionality is left out or omitted for brevity.

My Existing Script:


(function() {
    // Load jQuery if not already loaded
    if (typeof jQuery === 'undefined') {
        var script = document.createElement('script');
        script.src = "https://code.jquery.com/jquery-3.6.0.min.js";
        script.onload = function() {
            console.log("jQuery loaded.");
            initializeScript();
        };
        document.head.appendChild(script);
    } else {
        initializeScript();
    }

    function initializeScript() {
        var popupHtml = `
        <div id="injectedHtml">
            <div class="divContentContainer" style="top:0;left:0;z-index:2000;background-color: white;position: fixed !important;z-index: 1000 !important; color:black; width: 100%; max-width: 400px;">
                <div>
                    <table width='100%' style="table-layout: fixed;">
                        <tr>
                            <td style="color: black;background-color: grey;text-align: center;">
                                <a id='aCollasp' style="cursor:pointer;color: black;font-weight: bold;" onclick='$("#divContent").toggle();'>Keno Hit Map show/hide</a>
                            </td>
                            <td style="color:black;background-color: grey;text-align: center;cursor: pointer;border: solid 1px black;">
                                <a id="aClosePopup" title='Close Popup' onclick='$("#injectedHtml").toggle();' style="color:black;font-weight:bold">X</a>
                            </td>
                        </tr>
                    </table>
                </div>
                <div id='divContent'>
                    <table style="width: 100%;">
                        ${[...Array(8).keys()].map(i => `<tr>${[...Array(5).keys()].map(j => `<td id='num${i*5 + j + 1}' style='border: 1px solid black; text-align: center;'>${i*5 + j + 1}</td>`).join('')}</tr>`).join('')}
                    </table>
                    <table style="width: 100%; margin-top: 10px;">
                        <tr>
                            <td colspan="2">
                                <input type='radio' id='rbColdMap' name="TemperatureMap" value="coldMap" checked="checked" onchange="ColorBasedOnHitHouse()">
                                <label for="rbColdMap">Coldest Numbers</label>
                                <input type='radio' id='rbHotMap' name="TemperatureMap" value="hotMap" onchange="ColorBasedOnHitHouse()">
                                <label for="rbHotMap">Hottest Numbers</label>
                            </td>
                        </tr>
                        <tr>
                            <td>Auto Strategy type:</td>
                            <td>
                                <select id='kenoGameType' onchange='GameTypeChanged()' style="width: 100%;">
                                    <option value='coldest'>top X coldest numbers.</option>
                                    <option value='hotest'>top X hottest numbers.</option>
                                    <option value='random'>X random numbers.</option>
                                    <option value='alternate'>Switch from hottest to coldest each win.</option>
                                    <option value='both'>top X pairs of 1 hot 1 cold.</option>
                                    <option value='pick'>pick your own numbers</option>
                                </select>
                            </td>
                        </tr>
                        <tr id='manualInput' style="display:none;">
                            <td>Enter your numbers separated by a comma</td>
                            <td><input title="Enter your numbers (ie. 1,5,40;5,15,19)" id="manualInputNumbers" type="text" value="" style="width: 100%;"/></td>
                        </tr>
                        <tr id='newRandomSkipGroup' style="display:none;">
                            <td>Pick new Random number instead of min betting to skip:</td>
                            <td><input id="newRandomSkip" type="checkbox" checked="checked" /></td>
                        </tr>
                        <tr id='numbersToPick'>
                            <td>Number of numbers to pick: </td>
                            <td><input id="numOfNums" type="text" value="1" style="width: 100%;"/></td>
                        </tr>
                        <tr>
                            <td>Number of games to play:</td>
                            <td><input type='text' id='numberOfGames' value='200' style="width: 100%;"></input></td>
                        </tr>
                        <tr>
                            <td>Base Bet: Use game input.</td>
                        </tr>
                        <tr>
                            <td>Use B2B:</td>
                            <td><input id="useb2b" type="checkbox" /></td>
                        </tr>
                        <tr>
                            <td>Percentage of bankroll for base bet:</td>
                            <td><input type='text' title='Will be ignored if set to 0.' id='baseBetPercentage' value='0.0' style="width: 100%;"></input></td>
                        </tr>
                        <tr>
                            <td colspan="2">On Win:<label><input id="resetOnWin" type="checkbox" checked="checked" onchange="handleResetCheckbox('resetOnWin', 'onWinMultiplier')"/>Reset On Win</label> or <label>Multiply By: </label><input id="onWinMultiplier" type="text" value="" disabled style="width: 100%;"></input></td>
                        </tr>
                        <tr>
                            <td colspan="2">On Lose:<label><input id="resetOnLose" type="checkbox" onchange="handleResetCheckbox('resetOnLose', 'onLoseMultiplier')" />Reset On Lose</label> or <label>Multiply By: </label><input id="onLoseMultiplier" type="text" value="1.35" style="width: 100%;"></input></td>
                        </tr>
                        <tr>
                            <td colspan="2" title="Number of losses before we min bet until next number.">Max Losses before skip: <label><input id="maxLossesBeforeSkip" type="text" value="10" style="width: 100%;"></input></td>
                        </tr>
                        <tr>
                            <td colspan="2" title="Amount in Coin of loss before we stop.">Stop Loss Amount: <input id="stopLossCoinAmount" type="text" value="20" style="width: 100%;"></input> Restart From Base <input id='stopLossResetFromBase' type='checkbox' checked='checked' /> Reset seed <input id='stopLossResetSeed' type='checkbox' checked='checked' /></td>
                        </tr>
                        <tr>
                            <td colspan="2">Game Number: <label id="lblGameNumber"></label></td>
                        </tr>
                        <tr>
                            <td colspan="2">Net Profit: <label id="lblNetProfit"></label></td>
                        </tr>
                        <tr>
                            <td colspan="2">Current Lose Streak: <label id="lblCurrentLose"></label></td>
                        </tr>
                        <tr>
                            <td colspan="2">Biggest Lose Streak: <label id="lblBiggestLoseStreak"></label></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <button class="styled" onclick="StartGames()" style="width: 100%; padding: 10px; font-size: 16px;">Start</button>
                                <button id="stopButton" class="styled" onclick="Stop()" style="width: 100%; padding: 10px; font-size: 16px;">Stop</button>
                            </td>
                        </tr>
                    </table>        
                </div>
            </div>
        </div>`;

        var gameObject;

        function InitializeCommonVariables() {
            SetGameObject();
            initializeHtml();
        }

        function SetGameObject() {
            gameObject = dg; // Set to the actual game object
        }

        function initializeHtml() {
            $("body").append(popupHtml);
        }

        var lastHit = [];
        var isLastHitInitialized = false;
        var startingBalance = 0;

        function InitializeLastHitVariable() {
            for (let j = 0; j < 40; j++) {
                lastHit.push({ number: j + 1, gamesSinceLastHit: 0, numberOfTimesHit: 0 });
            }
        }

        dg.on('betEnd', (r) => {
            AddGameResultsToLastHit(dg.myBets[0].gameValue.result);
            ColorBasedOnHitHouse();
            let profitAmount = (r.amount * r.odds) - r.amount;
            VaultWin(profitAmount);
        });

        function AddGameResultsToLastHit(gameResults) {
            let results = gameResults.split(',');

            if (results.length < 10) {
                console.log("Something is wrong there should always be 10 numbers picked.");
                return;
            }

            lastHit.sort((a, b) => a.number - b.number);

            for (let i = 0; i < 40; i++) {
                let number = lastHit[i].number.toString();

                if (results.includes(number)) {
                    lastHit[i].gamesSinceLastHit = 0;
                    lastHit[i].numberOfTimesHit += 1;
                } else {
                    lastHit[i].gamesSinceLastHit += 1;
                }
            }
        }

        function ColorBasedOnHitHouse() {
            if ($('#rbColdMap')[0].checked) {
                lastHit.forEach(function(item) {
                    let cellId = 'num' + item.number.toString();
                    let colorValue = 255 - (item.gamesSinceLastHit * 5);
                    let rgbstring = "rgb(" + [colorValue, colorValue, 255].join(',') + ")";
                    document.getElementById(cellId).style.backgroundColor = rgbstring;
                });
            } else {
                lastHit.forEach(function(item) {
                    let cellId = 'num' + item.number.toString();
                    let colorValue = 255 - (item.numberOfTimesHit * 5);
                    let rgbstring = "rgb(" + [255, colorValue, colorValue].join(',') + ")";
                    document.getElementById(cellId).style.backgroundColor = rgbstring;
                });
            }
        }

        function InitializeLastHitFromHistory() {
            let startingIndex = dg.myBets.length - 1;

            while (startingIndex >= 0) {
                if (dg.myBets[startingIndex] != null) {
                    AddGameResultsToLastHit(dg.myBets[startingIndex].gameValue.result);
                }
                console.log("Adding results from MyBets[" + startingIndex + "].");
                startingIndex -= 1;
                isLastHitInitialized = true;
            }
            ColorBasedOnHitHouse();
        }

        var currentNumGame = 0;
        var baseBet = 0;
        var currentBet = 0;
        var b2bBet = 0;
        var currentLoseStreak = 0;
        var currentLossSinceLastWin = 0;
        var maxLoseStreak = 0;
        var isStopRequested = false;
        var useHotestForAlternate = false;
        var useb2b = false;
        var stopLossAmount = 0;

        function Stop() {
            if (isStopRequested) {
                $('#stopButton').text('Stop');
                isStopRequested = false;
                PlayOneGame();
            } else {
                isStopRequested = true;
                $('#stopButton').text('Resume');
            }
        }

        async function StartGames() {
            $('#stopButton').text('Stop');
            isStopRequested = false;
            startingBalance = ss.wallet.dict[ss.wallet.current].amount;
            baseBet = dg.amount;
            baseBet = GetBaseBet();
            currentBet = baseBet;
            currentNumGame = 0;
            currentLoseStreak = 0;
            currentLossSinceLastWin = 0;
            await PlayOneGame();
        }

        function GetBaseBet() {
            let percentageValue = $('#baseBetPercentage').val();
            if (percentageValue > 0) {
                let currentBalance = ss.wallet.dict[ss.wallet.current].amount;
                return currentBalance * (percentageValue / 100.0);
            } else {
                return baseBet;
            }
        }

        function GetNetProfit() {
            let netProfit = ss.wallet.dict[ss.wallet.current].amount - startingBalance;
            return netProfit.toFixed(8);
        }

        function GameTypeChanged() {
            let gameType = document.getElementById('kenoGameType').value;
            if (gameType == "pick") {
                $('#manualInput').show();
                $('#numbersToPick').hide();
            } else {
                $('#manualInput').hide();
                $('#numbersToPick').show();
            }
            if (gameType == "random") {
                $('#newRandomSkipGroup').show();
            } else {
                $('#newRandomSkipGroup').hide();
            }
        }

        function handleResetCheckbox(checkboxId, textboxId) {
            if (document.getElementById(checkboxId).checked) {
                $('#' + textboxId).val("");
                $('#' + textboxId).attr('disabled', 'disabled');
            } else {
                $('#' + textboxId).removeAttr('disabled')
            }
        }

        async function PlayOneGame() {
            if (!isStopRequested && (currentNumGame < Number.parseInt($('#numberOfGames').val()) || Number.parseInt($('#numberOfGames').val() == 0))) {
                let numberToChoose = Number.parseInt($('#numOfNums').val());
                let gameType = document.getElementById('kenoGameType').value;
                if (gameType != 'random') {
                    dg.clearSelect();
                }
                let coldest = lastHit.slice();
                let hotest = lastHit.slice();
                let maxLossesBefore = Number.parseInt($('#maxLossesBeforeSkip').val());
                coldest.sort((a, b) => b.gamesSinceLastHit - a.gamesSinceLastHit);
                hotest.sort((a, b) => b.numberOfTimesHit - a.numberOfTimesHit);
                switch (gameType) {
                    case "coldest":
                        SelectNumbers(coldest, numberToChoose);
                        break;
                    case "hotest":
                        SelectNumbers(hotest, numberToChoose);
                        break;
                    case "both":
                        SelectNumbers(coldest, numberToChoose);
                        SelectNumbers(hotest, numberToChoose);
                        break;
                    case "random":
                        if (LastBetIsWin() || currentNumGame == 0) {
                            dg.clearSelect();
                            let selectedNums = new Set();
                            while (selectedNums.size < numberToChoose) {
                                selectedNums.add(GetRandomInt(1, 40));
                            }
                            selectedNums.forEach((item) => { dg.addItem(item); });
                        }
                        if (currentLoseStreak > 0 && currentLoseStreak % maxLossesBefore == 0 && $('#newRandomSkip')[0].checked) {
                            dg.clearSelect();
                            let selectedNums = new Set();
                            while (selectedNums.size < numberToChoose) {
                                selectedNums.add(GetRandomInt(1, 40));
                            }
                            selectedNums.forEach((item) => { dg.addItem(item); });
                        }
                        break;
                    case "alternate":
                        if (useHotestForAlternate) {
                            SelectNumbers(hotest, numberToChoose);
                        } else {
                            SelectNumbers(coldest, numberToChoose);
                        }
                        break;
                    case "pick":
                        let manualInputNumbers = $.map($('#manualInputNumbers').val().toString().split(','), Number);
                        SelectNumbers(manualInputNumbers, manualInputNumbers.length);
                        break;
                    default:
                        break;
                }
                if (b2bBet > 0) {
                    dg.bet(b2bBet).then(async function() {
                        currentNumGame += 1;
                        b2bBet = 0;
                        await HandleGameResults();
                        $('#lblGameNumber').text(currentNumGame);
                        $('#lblNetProfit').text(GetNetProfit());
                        $('#lblCurrentLose').text(currentLoseStreak);
                        $('#lblBiggestLoseStreak').text(maxLoseStreak);
                        PlayOneGame();
                    });
                } else {
                    dg.bet(currentBet).then(async function() {
                        currentNumGame += 1;
                        await HandleGameResults();
                        $('#lblGameNumber').text(currentNumGame);
                        $('#lblNetProfit').text(GetNetProfit());
                        $('#lblCurrentLose').text(currentLoseStreak);
                        $('#lblBiggestLoseStreak').text(maxLoseStreak);
                        PlayOneGame();
                    });
                }
            }
        }

        function LastBetIsWin() {
            let lastGame = dg.myBets[0];
            return (lastGame.profitAmount > 0);
        }

        var b2b = false;
        async function HandleGameResults() {
            let lastGame = dg.myBets[0];
            stopLossAmount = Number.parseInt($('#stopLossCoinAmount').val());

            if (lastGame.profitAmount > 0) {
                useHotestForAlternate = !useHotestForAlternate;
                currentLossSinceLastWin = 0;
                if (document.getElementById('resetOnWin').checked) {
                    currentBet = GetBaseBet();
                    dg.setAmount(dg.amount.mul(0).add(currentBet));
                } else {
                    let multiplierstring = $('#onWinMultiplier').val();
                    if (multiplierstring.length > 0) {
                        let multiplier = Number.parseFloat(multiplierstring);
                        currentBet = currentBet * multiplier;
                    }
                }
                currentLoseStreak = 0;
                if (!b2b && document.getElementById('useb2b').checked) {
                    b2b = true;
                    b2bBet = dg.amount.mul(0).add(lastGame.profitAmount);
                    dg.setAmount(dg.amount.mul(0).add(lastGame.profitAmount));
                    return;
                }
            } else if (lastGame.profitAmount < 0) {
                currentLoseStreak++;
                currentLossSinceLastWin = Number.parseFloat(currentLossSinceLastWin) + Number.parseFloat(currentBet);
                if (currentLoseStreak > maxLoseStreak) {
                    maxLoseStreak = currentLoseStreak;
                }
                if (document.getElementById('resetOnLose').checked) {
                    currentBet = GetBaseBet();
                } else {
                    let multiplierstring = $('#onLoseMultiplier').val();
                    let maxLossesBeforeSkip = $('#maxLossesBeforeSkip').val();
                    let gameType = document.getElementById('kenoGameType').value;
                    if (currentLoseStreak >= maxLossesBeforeSkip && (gameType != "random" || !$('#newRandomSkip')[0].checked)) {
                        currentBet = dg.minAmount.toNumber();
                    } else {
                        if (multiplierstring.length > 0) {
                            let multiplier = Number.parseFloat(multiplierstring);
                            currentBet = currentBet * multiplier;
                        }
                    }
                }
            }
            let combined = Number.parseFloat(currentLossSinceLastWin) + Number.parseFloat(currentBet);
            if (combined >= stopLossAmount) {
                if (document.getElementById('stopLossResetFromBase').checked) {
                    currentBet = GetBaseBet();
                } else {
                    isStopRequested = true;
                }
                if (document.getElementById('stopLossResetSeed').checked) {
                    await KenoResetSeed();
                }
            }
            b2b = false;
            dg.setAmount(dg.amount.mul(0).add(currentBet));
        }

        function isObject(objValue) {
            return objValue && typeof objValue === 'object' && objValue.constructor === Object;
        }

        function SelectNumbers(arrayOfNumbers, numberToSelect) {
            for (let i = 0; i < numberToSelect; i++) {
                if (isObject(arrayOfNumbers[i])) {
                    dg.addItem(arrayOfNumbers[i].number);
                } else {
                    dg.addItem(arrayOfNumbers[i]);
                }
            }
        }

        function GetRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        setTimeout(function() {
            dg.loadMybet().then(function() {
                InitializeLastHitVariable();
                InitializeLastHitFromHistory();
            });
        }, 5000);
    }
})();



const cssStyles = `
.menu-tab {
    position: fixed;
    left: 10px;
    top: 30%;
    transform: translateY(-50%);
    background-color: #333;
    border: 1px solid #666;
    border-radius: 0 5px 5px 0;
    padding: 8px;
    z-index: 9999;
}

.tab-button {
    cursor: pointer;
    font-weight: bold;
    color: #fff;
}

.menu-tab.open .tab-content {
    display: block;
}

.menu-tab .tab-content {
    display: none;
    background-color: #222;
    border-radius: 0 5px 5px 0;
}

.menu-header {
    padding: 10px;
    background-color: #444;
    color: #fff;
    cursor: move;
}

.menu-title {
    padding: 10px;
    background-color: #444;
    color: #fff;
    text-align: center;
}

.menu-content {
    padding: 10px;
    text-align: center;
}

.menu-footer {
    padding: 10px;
    border-top: 1px solid #666;
    text-align: center;
}

.menu-footer button {
    background-color: #444;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.menu-footer button:hover {
    background-color: #555;
}
`;

const popupHtml = `
<div id="injectedHtml">
    <div class="divContentContainer" style="top:0;left:0;z-index:2000;background-color: white;position: absolute !important;z-index: 1000 !important; color:black;">
        <div>
            <table width='100%'>
                <tr>
                    <td style="color: black;background-color: grey;text-align: center;">
                        <a id='aCollasp' style="cursor:pointer;color: black;font-weight: bold;" onclick='$("#divContent").toggle();'>Keno Hit Map show/hide</a>
                    </td>
					<td style="color:black;background-color: grey;text-align: center;cursor: pointer;border: solid 1px black;"><a id="aClosePopup" title='Close Popup (can be restored in the extension window or by renavigating to the page.)' onclick='$("#injectedHtml").toggle();' style="color:black;font-weight:bold">X</a></td>
                </tr>
            </table>
        </div>
        <div id='divContent'>
        <table>
            <tr>
                <td id='num1' style='border: 1px solid black;'>1</td>
				<td id='num2' style='border: 1px solid black;'>2</td>
				<td id='num3' style='border: 1px solid black;'>3</td>
				<td id='num4' style='border: 1px solid black;'>4</td>
				<td id='num5' style='border: 1px solid black;'>5</td>            
            </tr>
			<tr>
                <td id='num6' style='border: 1px solid black;'>6</td>
				<td id='num7' style='border: 1px solid black;'>7</td>
				<td id='num8' style='border: 1px solid black;'>8</td>
				<td id='num9' style='border: 1px solid black;'>9</td>
				<td id='num10' style='border: 1px solid black;'>10</td>            
            </tr>
			<tr>
                <td id='num11' style='border: 1px solid black;'>11</td>
				<td id='num12' style='border: 1px solid black;'>12</td>
				<td id='num13' style='border: 1px solid black;'>13</td>
				<td id='num14' style='border: 1px solid black;'>14</td>
				<td id='num15' style='border: 1px solid black;'>15</td>            
            </tr>
			<tr>
                <td id='num16' style='border: 1px solid black;'>16</td>
				<td id='num17' style='border: 1px solid black;'>17</td>
				<td id='num18' style='border: 1px solid black;'>18</td>
				<td id='num19' style='border: 1px solid black;'>19</td>
				<td id='num20' style='border: 1px solid black;'>20</td>            
            </tr>
			<tr>
                <td id='num21' style='border: 1px solid black;'>21</td>
				<td id='num22' style='border: 1px solid black;'>22</td>
				<td id='num23' style='border: 1px solid black;'>23</td>
				<td id='num24' style='border: 1px solid black;'>24</td>
				<td id='num25' style='border: 1px solid black;'>25</td>            
            </tr>
			<tr>
                <td id='num26' style='border: 1px solid black;'>26</td>
				<td id='num27' style='border: 1px solid black;'>27</td>
				<td id='num28' style='border: 1px solid black;'>28</td>
				<td id='num29' style='border: 1px solid black;'>29</td>
				<td id='num30' style='border: 1px solid black;'>30</td>            
            </tr>
			<tr>
                <td id='num31' style='border: 1px solid black;'>31</td>
				<td id='num32' style='border: 1px solid black;'>32</td>
				<td id='num33' style='border: 1px solid black;'>33</td>
				<td id='num34' style='border: 1px solid black;'>34</td>
				<td id='num35' style='border: 1px solid black;'>35</td>            
            </tr>
			<tr>
                <td id='num36' style='border: 1px solid black;'>26</td>
				<td id='num37' style='border: 1px solid black;'>27</td>
				<td id='num38' style='border: 1px solid black;'>38</td>
				<td id='num39' style='border: 1px solid black;'>39</td>
				<td id='num40' style='border: 1px solid black;'>40</td>            
            </tr>
        </table>
        <table>
			<tr>
				<input type='radio' id='rbColdMap' name="TemperatureMap" value="coldMap" checked="checked" onchange="ColorBasedOnHitHouse()"><label for="coldMap">Coldest Numbers</label>
				<input type='radio' id='rbHotMap' name="TemperatureMap" value="hotMap" onchange="ColorBasedOnHitHouse()"><label for="hotMap">Hottest Numbers</label>
				</tr>
            <tr>
                <td>Auto Strategy type:</td>
				<td>
					<select id='kenoGameType' onchange='GameTypeChanged()'>
						<option value='coldest'>top X coldest numbers.</option>
						<option value='hotest'>top X hotest numbers.</option>
						<option value='random'>X random numbers.</option>
                        <option value='alternate'>Switch from hotest to coldest each win.</option>
						<option value='both'>top X pairs of 1 hot 1 cold.</option>
						<option value='pick'>pick your own numbers</option>
					</select>
				</td>
            </tr>
			<tr id='manualInput' style="display:none;">
				<td>Enter your numbers seperated by a comma</td><td><input title="Enter your numbers  (ie. 1,5,40;5,15,19)" id="manualInputNumbers" type="text" value="" /></td>
			</tr>
			<tr id='newRandomSkipGroup' style="display:none;">
                <td>Pick new Random number instead of min betting to skip:</td>
                <td><input id="newRandomSkip" type="checkbox" checked="checked" /></td>
            </tr>
            <tr id='numbersToPick'>
                <td>Number of numbers to pick: </td><td><input id="numOfNums" type="text" value="1" /></td>
            </tr>
            <tr>
                <td>Number of games to play:</td>
                <td><input type='text' id='numberOfGames' value='200'></input></td>
            </tr>
            <tr>
				<td>Base Bet: Use game input.</td>
			</tr>
            <tr>
                <td>Use B2B:</td>
                <td><input id="useb2b" type="checkbox" /></td>
            </tr>
            <tr>
                <td>Percentage of bankroll for base bet:</td>
                <td><input type='text' title='Will be ignore if set to 0.' id='baseBetPercentage' value='0.0'></input></td>
            </tr>
			<tr>
				<td colspan="2">On Win:<label><input id="resetOnWin" type="checkbox" checked="checked" onchange="handleResetCheckbox('resetOnWin', 'onWinMultiplier')"/>Reset On Win</label> or <label>Multiply By: </label><input id="onWinMultiplier" type="text" value="" disabled></input></td>
			</tr>
			<tr>
				<td colspan="2">On Lose:<label><input id="resetOnLose" type="checkbox" onchange="handleResetCheckbox('resetOnLose', 'onLoseMultiplier')" />Reset On Lose</label> or <label>Multiply By: </label><input id="onLoseMultiplier" type="text" value="1.35"></input></td>
			</tr>
            <tr>
				<td colspan="2" title="Number of losses before we min bet until next number.">Max Losses before skip: <label><input id="maxLossesBeforeSkip" type="text" value="10"></input></td>
			</tr>
			<tr>
				<td colspan="2" title="Amount in Coin of loss before we stop.">Stop Loss Amount: <input id="stopLossCoinAmount" type="text" value="20"></input> Restart From Base <input id='stopLossResetFromBase' type='checkbox' checked='checked' /> Reset seed <input id='stopLossResetSeed' type='checkbox' checked='checked' /></td>
			</tr>
            <tr>
                <td colspan="2">Game Number: <label id="lblGameNumber"></label></td>
            </tr>
            <tr>
                <td colspan="2">Net Profit: <label id="lblNetProfit"></label></td>
            </tr>
            <tr>
                <td colspan="2">current Lose Streak: <label id="lblCurrentLose"></label></td>
            </tr>
            <tr>
                <td colspan="2">Biggest Lose Streak: <label id="lblBiggestLoseStreak"></label></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button class="styled" onclick="StartGames()" >Start</button>
                    <button id="stopButton" class="styled" onclick="Stop()">Stop</button>
                </td>
            </tr>
        </table>        
    </div>

</div></div>`;

const htmlContent = `
<div id="customMenu" class="menu-tab mobile">
    <div class="menu-header" ontouchstart="toggleMenu()">Menu</div>
    <div class="tab-content">
        <div class="menu-title">Goomba's Nano Bot v1.02</div>
        <div class="menu-content">
            <select id="autoVaultDropdown" onchange="toggleAutobetMenu()">
                <option value="autovault">Autovault Settings</option>
                <option value="autobet">Autobet Settings</option>
                <option value="button">Button Settings</option>
                <option value="turbo">Turbo Betting</option>
            </select>
            <br>
            <label for="intervalInput">Interval (ms):</label>
            <input type="number" id="intervalInput">
            <br>
            <label for="maxCoinsInput">Max Coins:</label>
            <input type="number" id="maxCoinsInput">
            <br>
            <button class="tab-button" onclick="updateSettings()">Update</button>
        </div>
        <div class="menu-footer">
            <button onclick="toggleMenu()">Close</button>
        </div>
    </div>
    <div id="autobetMenu" class="tab-content">
        ${popupHtml}
    </div>
</div>
`;

const scriptContent = `
function toggleMenu() {
    var menuContent = document.querySelector(".menu-tab.mobile .tab-content");
    menuContent.style.display = (menuContent.style.display === "block") ? "none" : "block";
}

function toggleAutobetMenu() {
    var autobetMenu = document.getElementById("autobetMenu");
    var dropdownValue = document.getElementById("autoVaultDropdown").value;
    if (dropdownValue === "autobet") {
        autobetMenu.style.display = "block";
    } else {
        autobetMenu.style.display = "none";
    }
}

function updateSettings() {
    var dropdownValue = document.getElementById("autoVaultDropdown").value;
    var intervalInput = document.getElementById("intervalInput").value;
    var maxCoinsInput = document.getElementById("maxCoinsInput").value;

    // Update settings here
    console.log("Selected Settings: " + dropdownValue);
    console.log("Interval: " + intervalInput);
    console.log("Max Coins: " + maxCoinsInput);
}
`;

// Inject CSS styles
const styleTag = document.createElement("style");
styleTag.textContent = cssStyles;
document.head.appendChild(styleTag);

// Inject HTML content
const menuDiv = document.createElement("div");
menuDiv.innerHTML = htmlContent;
document.body.appendChild(menuDiv);

// Inject JavaScript functionality
const scriptTag = document.createElement("script");
scriptTag.textContent = scriptContent;
document.body.appendChild(scriptTag);

Thank you for helping me enhance this script. I look forward to seeing the improved version with all these new features