<title>Spin-off of "Bee Swarm Simulator"</title> <style> body { overflow: hidden; margin: 0; font-family: 'Comic Sans MS', Comic Sans, trebuchet ms; user-select: none; }

    input {
        height: 24px;
        outline: none;
        background-color: rgb(255, 255, 255);
        border: none;
        transition-duration: 0.4s;
        border-radius: 5px;
    }

    button {
        width: 60px;
        height: 30px;
        transition-duration: 0.4s;
        border-radius: 8px;
        font-size: 16px;
        background-color: rgb(255, 255, 255);
    }

    button:hover {
        cursor: pointer;
        border-radius: 13px;
        background-color: rgb(150, 255, 205);
    }

    #purchaseButton {
        transition-duration: 0s;
        border: none;
    }

    #purchaseButton:hover {
        outline: 2px solid rgb(0, 0, 0, 0.4);
    }

    #leftShopButton:hover,
    #rightShopButton:hover {
        outline: 2px solid rgb(0, 0, 0, 0.4);
    }

    #gl-canvas,
    #tex-canvas {
        display: none;
    }

    #ui-canvas {
        position: fixed;
        left: 0;
        top: 0;
        z-index: -3;
    }

    div::-webkit-scrollbar {
        width: 5px;
        height: 8px;
        background-color: rgb(0, 0, 0, 0);
    }

    div::-webkit-scrollbar-thumb {
        background: rgb(120, 120, 120);
        border-radius: 10px;
    }

    #roboActiveUpgrades::-webkit-scrollbar {
        width: 5px;
        height: 8px;
        background-color: rgb(0, 0, 0, 0);
    }

    #roboActiveUpgrades::-webkit-scrollbar-thumb {
        background: rgb(40, 80, 40);
        border-radius: 10px;
    }

    #inventoryButton:hover,
    #questButton:hover,
    #beesButton:hover,
    #settingsButton:hover,
    #beequipButton:hover,
    #catalogButton:hover {
        transition-duration: 0.4s;
        background-color: rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }

    #feedThisAmount {
        margin-top: 50px;
        margin-left: 5px;
        transition-duration: 0s;
        border-radius: 6px;
        position: fixed;
        background-color: rgb(0, 200, 0);
        border: none;
        color: rgb(255, 255, 255);
        font-size: 17px;
        font-family: trebuchet ms;
    }

    #feedUntilGifted {
        margin-top: 100px;
        margin-left: 160px;
        transition-duration: 0s;
        border-radius: 6px;
        position: fixed;
        background-color: rgb(255, 200, 0);
        border: none;
        color: rgb(255, 255, 255);
        font-size: 16.5px;
        width: 135px;
        font-family: trebuchet ms;
    }

    #feedThisAmount:hover {
        background-color: rgb(0, 170, 0);
    }

    #feedAmount,
    #blenderCraftAmount,
    #shrineAmount {
        margin-top: 50px;
        margin-left: 75px;
        transition-duration: 0s;
        border-radius: 6px;
        position: fixed;
        background-color: rgb(0, 30, 205);
        border: none;
        color: rgb(255, 255, 255);
        font-size: 17px;
        font-family: arial;
        height: 19px;
        width: 200px;
        padding: 5px;
        padding-left: 10px;
    }

    #cancelFeeding {
        margin-top: 100px;
        margin-left: 5px;
        transition-duration: 0s;
        border-radius: 6px;
        position: fixed;
        background-color: rgb(255, 30, 30);
        border: none;
        color: rgb(255, 255, 255);
        font-size: 17px;
        width: 70px;
        font-family: trebuchet ms;
    }

    #cancelFeeding:hover {
        background-color: rgb(200, 0, 0);
    }

    #actionHoverDarken:hover {
        background-color: rgb(0, 0, 0, 0.3);
    }

    #blenderX {
        background-color: rgb(255, 0, 0);
        transition-duration: 0s;
    }

    #blenderX:hover {
        background-color: rgb(200, 0, 0);
    }

    #leftBlenderButton,
    #rightBlenderButton {
        background-color: rgb(30, 90, 255);
    }

    #blenderCraft {
        background-color: rgb(0, 170, 0);
        transition-duration: 0s;
    }

    #blenderCraft:hover {
        background-color: rgb(0, 100, 0);
    }

    #leftBlenderButton:hover,
    #rightBlenderButton:hover {
        background-color: rgb(19, 54, 150);
    }

    #blenderSpeed,
    #blenderEnd {
        transition-duration: 0s;
    }

    #shrineX:hover {
        background-color: rgb(200, 0, 0);
    }

    #shrineX {
        background-color: rgb(255, 0, 0);
    }

    #shrineDonate {
        background-color: rgb(0, 190, 0);
    }

    #shrineDonate:hover {
        cursor: pointer;
        background-color: rgb(0, 140, 0);
    }

    #shrineLeft:hover,
    #shrineRight:hover {
        cursor: pointer;
        background: rgb(0, 0, 0, 0.1);
    }

    svg {
        pointer-events: auto;
    }

    #gearInfoList {
        display: inline;
    }

    /* Styling for the new honey dispenser elements */
    #honey-dispenser-container {
        position: fixed;
        bottom: 20px;
        left: 20px;
        z-index: 10;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
</style>

<!-- Honey Dispenser UI -->
<div id="honey-dispenser-container">
    <h3>Honey Dispenser</h3>
    <p>Current Honey: <span id="honey-count">0</span></p>
    <button onclick="giveHoney()">Dispense Honey</button>
</div>

<!-- Your existing BSS UI elements -->
<div id='abilityUI' style='margin:5px;padding:0px;margin-top:35px;position:fixed;pointer-events:none;'>
    <div id='gearInfoList'></div>

    <svg id='inspireCoconutsPassive' style='width:30px;height:30px;display:none;'>
        <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle>
        <circle cx='16' cy='14' r='8' fill='rgb(150,75,0)' stroke='rgb(0,0,0)' stroke-width='1'></circle>
        <circle cx='18' cy='15' r='1.5' fill='rgb(94, 51, 7)'></circle>
        <circle cx='13' cy='12' r='1.5' fill='rgb(94, 51, 7)'></circle>
        <circle cx='18' cy='11' r='1.5' fill='rgb(94, 51, 7)'></circle>
        <path d='M0.00000 3.00000L4.70228 6.47214L2.85317 0.92705L7.60845 -2.47214L1.76336 -2.42705L0.00000 -8.00000L-1.76336 -2.42705L-7.60845 -2.47214L-2.85317 0.92705L-4.70228 6.47214Z' transform='translate(12,19) scale(0.75,0.75)' fill='rgb(255,255,0)' stroke='rgb(200,200,0)'></path>
        <rect id='inspireCoconutsPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect>
        <text id='inspireCoconutsPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text>
    </svg>

    <svg id='emergencyCoconutShieldPassive' style='width:30px;height:30px;display:none;'>
        <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle>
        <circle cx='15' cy='15' r='11' fill='rgb(255,255,255,0.5)'></circle>
        <circle cx='15' cy='15' r='8' fill='rgb(150,75,0)' stroke='rgb(0,0,0)' stroke-width='1'></circle>
        <circle cx='17' cy='16' r='1.5' fill='rgb(94, 51, 7)'></circle>
        <circle cx='12' cy='13' r='1.5' fill='rgb(94, 51, 7)'></circle>
        <circle cx='17' cy='12' r='1.5' fill='rgb(94, 51, 7)'></circle>
        <rect id='emergencyCoconutShieldPassive_cooldown' width='30' height='0' style='fill:rgb(0,0,0);' opacity='0.45'></rect>
        <text id='emergencyCoconutShieldPassive_amount' x='29' y='29' style='font-family:tahoma;font-size:12px;' text-anchor='end' fill='rgb(255,255,255)'></text>
    </svg>

    <svg id='coconutHastePassive' style='width:30px;height:30px;display:none;'>
        <circle cx='15' cy='15' r='14' fill='rgb(115,163,0)' stroke='rgb(0,0,0)' stroke-width='2'></circle>
        <circle cx='15' cy='15' r='8' fill='rgb(150,75,0)' stroke='rgb(0,0,0)' stroke-width='1'></circle>
        <circle cx='17' cy='16' r='1.5' fill='rgb(94, 51, 7)'></circle>
        <circle cx='12' cy='13' r='1.5' fill='rgb(94, 51, 7)'></circle>
        <circle cx='17' cy='12' r='1.5' fill='rgb(94, 51, 7)'></circle>
        <g transform='translate(6,3) scale(0.75,0.75)'>
            <path d='M18 9L15 21M12 26L15 21M16 26L15 21M11 11L16 15'></path>
            <path d='M23 15L16 15'></path>
        </g>
    </svg>

</div>

<!-- The honey dispenser script -->
<script>
    // Use BigInt for very large numbers to avoid precision issues
    let honey = BigInt(0); 
    const honeyPerDispense = BigInt(1_000_000_000_000); // 1 trillion
    const cooldownTime = 1000; // 1 second in milliseconds
    let lastDispenseTime = 0;

    function giveHoney() {
        const currentTime = new Date().getTime();
        
        if (currentTime - lastDispenseTime >= cooldownTime) {
            lastDispenseTime = currentTime;
            honey += honeyPerDispense;
            
            // Update the display element with the ID 'honey-count'
            const honeyCountElement = document.getElementById("honey-count");
            if (honeyCountElement) {
                honeyCountElement.innerText = formatBigInt(honey);
            }
            
            console.log(`Dispensed 1 trillion honey. Total honey: ${honey}`);
        } else {
            console.log("Dispenser is on cooldown. Please wait.");
        }
    }

    // Helper function to format the large number with commas for readability
    function formatBigInt(bigIntValue) {
        return bigIntValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    }
</script>

<!-- The original game script from your code -->
<script>
    // Placeholder for the main function, as it was in your original code
    function main() {
        // Your existing game initialization code would go here
        console.log("BSS spin-off is running.");
    }
</script>