Hi,  can you modify this script so it is even better functionality than its current, and lets focus on making it optimized  for mobile use, as single script that is initialized via web console on iphone browser  and injected into the current page. improve the ui,  and add features that could be more useful to the menu. make sure to give it a vast amount of settings and make it practical for use. var popupHtml = `
<style>
body {
  background-color: #1b1e23;
  color: #f05f57;
  font-family: 'Montserrat', sans-serif;
}

.divContentContainer {
  background-color: #23262c;
  border-radius: 8px;
  padding: 20px;
  max-width: 550px;
  margin: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

td {
  border: 1px solid #34383e;
  padding: 10px;
  color: #a1f08f;
  text-align: center;
  font-size: 14px;
}

button.styled {
  background: linear-gradient(to right, #66bb6a, #43b309);
  border: none;
  color: #ffffff;
  padding: 12px 28px;
  text-align: center;
  font-size: 16px;
  margin: 5px 0;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}

button.styled:hover {
  background: linear-gradient(to right, #43b309, #66bb6a);
}

#injectedHtml {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
}

#injectedHtml a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

#injectedHtml .header {
  background-color: #2b2f35;
  padding: 10px;
  border-bottom: 1px solid #34383e;
  text-align: center;
}

#injectedHtml .header a {
  color: #f05f57;
  margin-right: 15px;
}

#injectedHtml #divContent {
  margin-top: 10px;
}

input[type="text"], select {
  width: 100%;
  padding: 8px;
  margin: 4px 0;
  box-sizing: border-box;
  background-color: #2b2f35;
  border: 1px solid #3e444a;
  color: #ffffff;
  border-radius: 5px;
}

input[type="checkbox"] {
  margin-left: 10px;
}

label {
  font-size: 14px;
  color: #ffffff;
}

tr td {
  width: 20%;
}

</style>
<div id="injectedHtml">
  <div class="divContentContainer">
    <div class="header">
      <a id='aCollasp' onclick='$("#divContent").toggle();'>Keno Hit Map Show/Hide</a>
      <a id="aClosePopup" onclick='$("#injectedHtml").toggle();'>X</a>
    </div>
    <div id='divContent'>
      <table>
        <tr>
          <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td>
        </tr>
        <tr>
          <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
        </tr>
        <tr>
          <td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
        </tr>
        <tr>
          <td>16</td><td>17</td><td>18</td><td>19</td><td>20</td>
        </tr>
        <tr>
          <td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
        </tr>
        <tr>
          <td>26</td><td>27</td><td>28</td><td>29</td><td>30</td>
        </tr>
        <tr>
          <td>31</td><td>32</td><td>33</td><td>34</td><td>35</td>
        </tr>
        <tr>
          <td>36</td><td>37</td><td>38</td><td>39</td><td>40</td>
        </tr>
      </table>
      <table>
        <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 Hottest Numbers</option>
              <option value='random'>X Random Numbers</option>
              <option value='alternate'>Alternate Hot & Cold</option>
              <option value='both'>Top X Pairs of Hot & Cold</option>
              <option value='pick'>Pick Your Own Numbers</option>
            </select>
          </td>
        </tr>
        <tr>
          <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 id='numberOfGames' type="text" value="200" /></td>
        </tr>
        <!-- Continue with the other inputs like the original layout -->
      </table>
      <div style="text-align:center;">
        <button class="styled" onclick="StartGames()">Start</button>
        <button id="stopButton" class="styled" onclick="Stop()">Stop</button>
      </div>
    </div>
  </div>
</div>`;
async function KenoResetSeed() {
  var nextSeedResult = await fetch(
    "https://" +
      window.location.host +
      "/api/single/game/seed/KenoSingle/next-hash/",
    {
      headers: {
        accept: "application/json, text/plain, */*",
        "accept-language": "en",
        "sec-ch-ua":
          '"Not_A Brand";v="99", "Microsoft Edge";v="109", "Chromium";v="109"',
        "sec-ch-ua-mobile": "?0",
        "sec-ch-ua-platform": '"Windows"',
        "sec-fetch-dest": "empty",
        "sec-fetch-mode": "cors",
        "sec-fetch-site": "same-origin",
      },
      referrer: "https://" + window.location.host + "/game/keno",
      referrerPolicy: "strict-origin-when-cross-origin",
      body: null,
      method: "GET",
      mode: "cors",
      credentials: "include",
    }
  ).then((res) => res.clone().json());

  var currentSeed = nextSeedResult.data.currentSeedHash;
  var nextSeedId = nextSeedResult.data.nextSeedHash;
  var nounce = nextSeedResult.data.currentSeedHash.maxNonce;

  await DoSeedChange(nextSeedId.clientSeed, "KenoSingle", nextSeedId.seedId);
}

function InitializeCommonVariables() {
  SetGameObject();
  HandleUISettings();
  initializeHtml();
  $(".divContentContainer").draggable({
    appendTo: "body",
    zIndex: 1000,
  });
}

function SetGameObject() {
  gameObject = dg;
}

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

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

function InitializeLastHitVariable() {
  for (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 < 10) {
    console.log("Something is wrong there should always be 10 numbers picked.");
  }

  lastHit.sort(function (a, b) {
    return a.number - b.number;
  });

  for (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 stop is already requested then we should treat this like a resume
  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;
  // initialize this with thats in the field in case they don't use percentage of wallet.
  baseBet = dg.amount;
  baseBet = GetBaseBet();
  currentBet = baseBet;
  currentNumGame = 0;
  currentLoseStreak = 0;
  currentLossSinceLastWin = 0;
  await PlayOneGame();
}

console.log("here please");
var countUpNumber = 1;

async function StartCountUp(numberToSelect, sizeOfStep) {
  startingBalance = ss.wallet.dict[ss.wallet.current].amount;
  baseBet = dg.amount.toNumber();
  currentBet = baseBet;
  currentNumGame = 0;
  currentLoseStreak = 0;
  countUpNumber = 1;
  CountUpStep(sizeOfStep, numberToSelect);
}

async function CountUpStep(sizeOfStep, numberToSelect) {
  if (countUpNumber <= 40) {
    dg.clearSelect();

    for (i = 0; i < numberToSelect; i++) {
      let numberToPick = countUpNumber + i;
      if (numberToPick > 40) {
        numberToPick = numberToPick - 40;
      }

      dg.addItem(numberToPick);
    }

    await dg.bet(currentBet).then(function () {
      currentNumGame += 1;
      countUpNumber += sizeOfStep;
      //Update the stats.
      $("#lblGameNumber").text(currentNumGame);
      $("#lblNetProfit").text(GetNetProfit());
      CountUpStep(sizeOfStep, numberToSelect);
    });
  }
}

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();
    }

    // clone these first then we will sort them.
    let coldest = lastHit.slice();
    let hotest = lastHit.slice();
    let maxLossesBefore = Number.parseInt($("#maxLossesBeforeSkip").val());

    coldest.sort(function (a, b) {
      return b.gamesSinceLastHit - a.gamesSinceLastHit;
    });

    hotest.sort(function (a, b) {
      return 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();

        //Update the stats.
        $("#lblGameNumber").text(currentNumGame);
        $("#lblNetProfit").text(GetNetProfit());
        $("#lblCurrentLose").text(currentLoseStreak);
        $("#lblBiggestLoseStreak").text(maxLoseStreak);
        PlayOneGame();
      });
    } else {
      dg.bet(currentBet).then(async function () {
        currentNumGame += 1;

        await HandleGameResults();

        //Update the stats.
        $("#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;
    // handle win here
    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;
    }

    // handle loss here.
    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;
        }
      }
    }
  } else {
    // We do nothing here since we broke even.
  }
  let combined =
    Number.parseFloat(currentLossSinceLastWin) + Number.parseFloat(currentBet);
  console.log(currentLossSinceLastWin + " + " + currentBet + " = " + combined);
  if (combined >= stopLossAmount) {
    if (document.getElementById("stopLossResetFromBase").checked) {
      currentBet = GetBaseBet();
    } else {
      isStopRequested = true;
    }

    if (document.getElementById("stopLossResetSeed").checked) {
      await KenoResetSeed();
    }
  }

  b2b = false;
  // Set the current bet back to the ui so it knows what we will bet.
  dg.setAmount(dg.amount.mul(0).add(currentBet));
}

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

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

function returnNumbersInColdestFirstOrder() {
  return lastHit.sort(function (a, b) {
    return b.gamesSinceLastHit - a.gamesSinceLastHit;
  });
}

setTimeout(function () {
  dg.loadMybet().then(function () {
    InitializeLastHitVariable();
    InitializeLastHitFromHistory();
    $(".divContentContainer").draggable();
  });
}, 5000);

var numleft = 0;
var stopRequested = false;

function StartGames2() {
  StartGames3(Number.parseInt($("#numberOfGames").val()));
}

async function StartGames3(numGames) {
  numleft = numGames;

  for (i = 0; i < numGames; i++) {
    await retry(200);
  }
}

async function retry(delay) {
  if (!stopRequested) {
    dg.clearSelect();
    dg.addItem(GetRandomInt(1, 40));
    return dg
      .handleBet()
      .then(function (r) {
        numleft--;
        console.log(numleft);
      })
      .catch(function (err) {
        console.log(err);
        return delayAsync(200).then(retry(200));
      });
  } else {
    return;
  }
}

async function delayAsync(timeMs) {
  return new Promise(function (resolve) {
    setTimeout(resolve, timeMs);
  });
}

InitializeCommonVariables();