db-gn 1.0.7 → 1.1.0

package/v2.html

@@ -257,6 +257,219 @@
             cursor: not-allowed;
         }
 
+        #autoclick-menu {
+            position: fixed;
+            z-index: 60;
+            display: none;
+            flex-direction: column;
+            gap: 4px;
+            min-width: 240px;
+            max-width: 320px;
+            max-height: 60vh;
+            overflow-y: auto;
+            padding: 6px;
+            background: rgba(30, 26, 46, 0.97);
+            border: 2px solid rgba(176, 0, 230, 0.45);
+            border-radius: 10px;
+            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
+            backdrop-filter: blur(6px);
+            font-family: 'Comic Sans MS', sans-serif;
+        }
+
+        #autoclick-menu.open {
+            display: flex;
+        }
+
+        #autoclick-menu .ac-item {
+            appearance: none;
+            border: 0;
+            background: none;
+            font-family: inherit;
+            font-size: 15px;
+            text-align: left;
+            color: #fff;
+            padding: 9px 10px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background 0.15s ease, color 0.15s ease;
+        }
+
+        #autoclick-menu .ac-item:hover:not(:disabled),
+        #autoclick-menu .ac-item:focus-visible {
+            background: rgba(176, 0, 230, 0.35);
+            outline: none;
+        }
+
+        #autoclick-menu .ac-item:disabled {
+            opacity: 0.4;
+            cursor: not-allowed;
+        }
+
+        #autoclick-menu .ac-new {
+            font-weight: 700;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 6px 6px 0 0;
+        }
+
+        #autoclick-menu .ac-list {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
+        #autoclick-menu .ac-row {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            padding: 2px 4px 2px 0;
+        }
+
+        #autoclick-menu .ac-row.off .ac-name,
+        #autoclick-menu .ac-row.off .ac-loc {
+            opacity: 0.45;
+        }
+
+        #autoclick-menu .ac-name {
+            flex: 1;
+            appearance: none;
+            border: 0;
+            background: none;
+            font-family: inherit;
+            font-size: 15px;
+            text-align: left;
+            color: #fff;
+            padding: 7px 8px;
+            border-radius: 6px;
+            cursor: text;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        #autoclick-menu .ac-name:hover,
+        #autoclick-menu .ac-name:focus-visible {
+            background: rgba(176, 0, 230, 0.35);
+            outline: none;
+        }
+
+        #autoclick-menu .ac-name-input {
+            flex: 1;
+            min-width: 0;
+            font-family: inherit;
+            font-size: 15px;
+            color: #fff;
+            padding: 6px 7px;
+            border-radius: 6px;
+            border: 1px solid rgba(176, 0, 230, 0.7);
+            background: rgba(0, 0, 0, 0.35);
+            outline: none;
+        }
+
+        #autoclick-menu .ac-loc {
+            flex: none;
+            appearance: none;
+            border: 0;
+            background: none;
+            font-family: inherit;
+            font-size: 13px;
+            color: rgba(255, 255, 255, 0.6);
+            padding: 4px 6px;
+            border-radius: 6px;
+            cursor: pointer;
+        }
+
+        #autoclick-menu .ac-loc:hover {
+            background: rgba(176, 0, 230, 0.35);
+            color: #fff;
+        }
+
+        #autoclick-menu .ac-all {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+            margin-bottom: 2px;
+            padding-bottom: 6px;
+        }
+
+        #autoclick-menu .ac-all-label {
+            flex: 1;
+            padding: 4px 8px;
+            font-size: 14px;
+            font-weight: 700;
+            color: rgba(255, 255, 255, 0.85);
+        }
+
+        #autoclick-menu .ac-switch {
+            flex: none;
+            appearance: none;
+            border: 0;
+            width: 34px;
+            height: 18px;
+            padding: 0;
+            border-radius: 999px;
+            background: rgba(255, 255, 255, 0.25);
+            cursor: pointer;
+            position: relative;
+            transition: background 0.15s ease;
+        }
+
+        #autoclick-menu .ac-switch.on {
+            background: rgba(0, 220, 120, 0.85);
+        }
+
+        #autoclick-menu .ac-switch:disabled {
+            opacity: 0.35;
+            cursor: not-allowed;
+        }
+
+        #autoclick-menu .ac-knob {
+            position: absolute;
+            top: 3px;
+            left: 3px;
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: #fff;
+            transition: transform 0.15s ease;
+        }
+
+        #autoclick-menu .ac-switch.on .ac-knob {
+            transform: translateX(16px);
+        }
+
+        #autoclick-menu .ac-remove {
+            appearance: none;
+            border: 0;
+            background: none;
+            color: rgba(255, 255, 255, 0.6);
+            font-family: inherit;
+            font-size: 18px;
+            line-height: 1;
+            padding: 6px 8px;
+            border-radius: 6px;
+            cursor: pointer;
+        }
+
+        #autoclick-menu .ac-remove:hover {
+            background: rgba(255, 60, 60, 0.3);
+            color: #fff;
+        }
+
+        #autoclick-menu .ac-group {
+            padding: 8px 10px 2px;
+            font-size: 13px;
+            font-weight: 700;
+            color: rgba(214, 140, 255, 0.9);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        #autoclick-menu .ac-empty {
+            padding: 9px 10px;
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.55);
+        }
+
         .autoclick-overlay {
             position: absolute;
             inset: 0;
@@ -292,6 +505,14 @@
             z-index: 51;
         }
 
+        .autoclick-marker.paused {
+            border-color: rgba(255, 255, 255, 0.55);
+        }
+
+        .autoclick-marker.paused::after {
+            background: rgba(255, 255, 255, 0.55);
+        }
+
         .autoclick-marker::after {
             content: "";
             position: absolute;
@@ -413,10 +634,122 @@
 
         .main-content {
             min-height: 100%;
-            padding: 20px 22px 50px;
+            /* extra bottom room so the fixed corner links never sit on content */
+            padding: 20px 22px 80px;
             position: relative;
         }
 
+        /* Pinned to the viewport, so the row holds its corner while the list
+           scrolls. Lives inside #home-pane so it hides along with it. */
+        #game-context-menu {
+            position: fixed;
+            z-index: 60;
+            display: none;
+            flex-direction: column;
+            min-width: 210px;
+            padding: 6px;
+            background: rgba(30, 26, 46, 0.97);
+            border: 2px solid rgba(176, 0, 230, 0.45);
+            border-radius: 10px;
+            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
+            backdrop-filter: blur(6px);
+            font-family: 'Comic Sans MS', sans-serif;
+        }
+
+        #game-context-menu.open {
+            display: flex;
+        }
+
+        #game-context-menu .ctx-item {
+            appearance: none;
+            border: 0;
+            background: none;
+            font-family: inherit;
+            font-size: 15px;
+            text-align: left;
+            color: #fff;
+            padding: 9px 10px;
+            border-radius: 6px;
+            cursor: pointer;
+            transition: background 0.15s ease, color 0.15s ease;
+        }
+
+        #game-context-menu .ctx-item:hover,
+        #game-context-menu .ctx-item:focus-visible {
+            background: rgba(176, 0, 230, 0.35);
+            color: #fff;
+            outline: none;
+        }
+
+        #corner-links {
+            position: fixed;
+            right: 20px;
+            bottom: 14px;
+            z-index: 5;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-end;
+            align-items: baseline;
+            gap: 6px 20px;
+        }
+
+        .corner-link {
+            display: inline-flex;
+            align-items: baseline;
+            gap: 6px;
+            margin: 0;
+            padding: 0;
+            border: 0;
+            background: none;
+            font-family: 'Comic Sans MS', sans-serif;
+            font-size: 16px;
+            line-height: 1.4;
+            cursor: pointer;
+            color: rgba(255, 255, 255, 0.6);
+            text-decoration: none;
+            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
+            transition: color 0.2s ease;
+        }
+
+        /* Underline lives on the text itself: text-decoration on an inline-flex
+           container does not reliably reach its flex items. It stays
+           transparent until hover/focus so the row reads clean at rest. */
+        .corner-link span {
+            text-decoration: underline;
+            text-decoration-color: transparent;
+            text-decoration-thickness: 1px;
+            text-underline-offset: 3px;
+            transition: color 0.2s ease, text-decoration-color 0.2s ease;
+        }
+
+        #github-link svg {
+            width: 17px;
+            height: 17px;
+            flex-shrink: 0;
+            /* nudge the icon down so it sits on the text baseline */
+            transform: translateY(2px);
+        }
+
+        .corner-link:hover,
+        .corner-link:focus-visible {
+            color: #d98cff;
+        }
+
+        .corner-link:hover span,
+        .corner-link:focus-visible span {
+            text-decoration-color: #d98cff;
+        }
+
+        #github-link:visited {
+            color: rgba(255, 255, 255, 0.6);
+        }
+
+        #github-link:visited:hover {
+            color: #d98cff;
+        }
+
+
+
 
         /* ==========================================================================
        6. Typography & Headings
@@ -609,112 +942,6 @@
             font-size: 20px;
         }
 
-        .recent-pane {
-            height: 100%;
-            overflow-y: auto;
-            box-sizing: border-box;
-            padding: 32px 20px 48px;
-            color: white;
-            background: linear-gradient(135deg, #2e3244 30%, #561a86 100%);
-            background-attachment: fixed;
-        }
-
-        .recent-inner {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        .recent-header {
-            text-align: center;
-            margin-bottom: 8px;
-            font-size: 32px;
-            font-weight: bold;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-        }
-
-        .recent-subheader {
-            text-align: center;
-            margin: 0 0 24px;
-            font-size: 15px;
-            color: rgba(255, 255, 255, 0.55);
-            padding-bottom: 18px;
-            border-bottom: 3px solid rgba(255, 255, 255, 0.15);
-        }
-
-        .recent-list {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-            gap: 12px;
-        }
-
-        .recent-card {
-            display: flex;
-            align-items: center;
-            gap: 14px;
-            width: 100%;
-            padding: 14px 16px;
-            box-sizing: border-box;
-            text-align: left;
-            font-size: 16px;
-            font-weight: 500;
-            color: white;
-            background: rgba(255, 255, 255, 0.08);
-            border: 2px solid rgba(255, 255, 255, 0.12);
-            border-radius: 12px;
-            cursor: pointer;
-            backdrop-filter: blur(5px);
-            transition: all 0.25s ease;
-        }
-
-        .recent-card:hover {
-            background: rgba(176, 0, 230, 0.25);
-            border-color: rgba(176, 0, 230, 0.7);
-            transform: translateY(-2px);
-            box-shadow: 0 6px 15px rgba(176, 0, 230, 0.35);
-        }
-
-        .recent-card:active {
-            transform: translateY(0);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        }
-
-        .recent-rank {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-            width: 32px;
-            height: 32px;
-            border-radius: 50%;
-            background: rgba(0, 0, 0, 0.3);
-            border: 1px solid rgba(255, 255, 255, 0.15);
-            font-size: 14px;
-            color: rgba(255, 255, 255, 0.6);
-        }
-
-        .recent-card:hover .recent-rank {
-            color: white;
-            border-color: rgba(255, 255, 255, 0.5);
-        }
-
-        .recent-name {
-            flex: 1;
-            min-width: 0;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        .recent-empty {
-            text-align: center;
-            padding: 60px 20px;
-            color: rgba(255, 255, 255, 0.5);
-            font-size: 17px;
-            line-height: 1.7;
-            border: 2px dashed rgba(255, 255, 255, 0.15);
-            border-radius: 14px;
-        }
-
         .runner-pane {
             display: flex;
             flex-direction: column;
@@ -771,6 +998,24 @@
             background: #006094;
         }
 
+        .runner-check {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-top: 10px;
+            color: rgba(255, 255, 255, 0.85);
+            font-size: 14px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .runner-check input {
+            width: 16px;
+            height: 16px;
+            accent-color: #03a5fc;
+            cursor: pointer;
+        }
+
         .runner-frame {
             width: 100%;
             height: 100%;
@@ -780,13 +1025,9 @@
         }
 
         /* Common layout configuration for external operational utility keys */
-        #open-runner-btn,
         #open-proxy-btn,
         #force-open-proxy-btn,
-        #open-form-btn,
-        #doc-btn,
-        #open-recent-btn,
-        #open-bookmarklet-runner-btn {
+        #doc-btn {
             font-family: Comic Sans MS, sans-serif;
             background: none;
             border: 2px solid rgba(176, 0, 230 0.25);
@@ -801,12 +1042,8 @@
             margin-left: 8px;
         }
 
-        #open-runner-btn:hover,
         #open-proxy-btn:hover,
-        #open-form-btn:hover,
-        #doc-btn:hover,
-        #open-recent-btn:hover,
-        #open-bookmarklet-runner-btn:hover {
+        #doc-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 6px 15px rgba(176, 0, 230, 0.4);
         }
@@ -851,7 +1088,7 @@
             }
 
             .main-content {
-                padding: 16px 12px 42px;
+                padding: 16px 12px 110px;
             }
 
             .runner-grid {
@@ -875,62 +1112,6 @@
                     Made by a Turtle
                 </h2>
 
-                <h2 class="subheading">
-                    Documentation:
-                    <button id="doc-btn" onclick="
-                        fetch('https://cdn.jsdelivr.net/gh/ltorl/dancing-bunny@latest/docs/documentation.html')
-                        .then(response => response.text())
-                        .then(text => {
-                            const newWin = window.open('about:blank', '_blank');
-                            if (newWin) {
-                                newWin.document.open();
-                                newWin.document.write(text);
-                                newWin.document.close();
-                            }
-                        });">
-                        Dancing Bunny GN Doc
-                    </button>
-                </h2>
-
-                <h2 class="subheading">
-                    Run HTML Code:
-                    <button id="open-runner-btn" class="btn-outline">Open Code Runner</button>
-                </h2>
-
-                <h2 class="subheading">
-                    Run Bookmarklet Code:
-                    <button id="open-bookmarklet-runner-btn" style="line-height: 2; margin-left: 8px;">
-                        Open Bookmarklet Runner
-                    </button>
-                </h2>
-
-                <!--
-                <h2 class="subheading">
-                    Other Apps:
-                    <select id="proxy-selector">
-                        <option value="https://truffled.lol/">Truffled</option>
-                        <option value="https://incog.works/">Incognito</option>
-                        <option value="https://gointospace.app/">Interstellar</option>
-                        <option value="https://anura.pro/">Anura</option>
-                        <option value="https://definitelyscience.com/">Definitely Science</option>
-                    </select>
-
-                    <button class="btn-outline" id="open-proxy-btn" onclick="openSelectedProxy()">Open</button>
-                    <button class="btn-outline" onclick="openSelectedProxyForceIframe()" id="force-open-proxy-btn">Force
-                        Iframe</button>
-                </h2>
-                -->
-
-                <h2 class="subheading">
-                    Recently Played:
-                    <button id="open-recent-btn" class="btn-outline">Open Recent Games</button>
-                </h2>
-
-                <h2 class="subheading">
-                    Make a sugestion:
-                    <button id="open-form-btn" class="btn-outline">Open Form</button>
-                </h2>
-
                 <br /><br />
 
                 <div class="search-container">
@@ -940,6 +1121,20 @@
 
                 <div id="sections-container"></div>
             </div>
+
+            <div id="corner-links">
+                <button type="button" id="open-runner-btn" class="corner-link"><span>HTML Runner</span></button>
+                <button type="button" id="open-bookmarklet-runner-btn" class="corner-link"><span>Bookmarklet Runner</span></button>
+                <button type="button" id="open-form-btn" class="corner-link"><span>Make a Suggestion</span></button>
+                <a id="github-link" class="corner-link" href="https://github.com/ltorl/dancing-bunny" target="_blank" rel="noopener noreferrer"
+                    title="View the source on GitHub" aria-label="View the source on GitHub">
+                    <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
+                        <path fill="currentColor"
+                            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+                    </svg>
+                    <span>Github</span>
+                </a>
+            </div>
         </div>
     </div>
 
@@ -971,7 +1166,7 @@
         const MUTE_KEY = "dancing-bunny-muted-v1";
         const RECENT_KEY = "dancing-bunny-recent-v1";
         const BGRUN_KEY = "dancing-bunny-bgrun-v1";
-        const RECENT_MAX = 20;
+        const RECENT_MAX = 15;
 
         // When true, game tabs keep rendering (and therefore keep running) while
         // another tab is on screen. Turning it off pauses them to save CPU.
@@ -1016,7 +1211,7 @@
         function recordRecent(file) {
             recent = [file, ...recent.filter(f => f !== file)].slice(0, RECENT_MAX);
             saveRecent();
-            renderRecentPane();
+            renderRecentSection();
         }
 
         function saveMute() {
@@ -1080,9 +1275,9 @@
             btn.id = "autoclick-btn";
             btn.type = "button";
             btn.innerHTML = ICON_AUTOCLICK;
-            btn.title = "Auto Clicker";
-            btn.setAttribute("aria-label", "Auto Clicker");
-            btn.onclick = toggleAutoclick;
+            btn.title = "Auto Clickers";
+            btn.setAttribute("aria-label", "Auto Clickers");
+            btn.onclick = toggleAutoclickMenu;
             tabBar.appendChild(btn);
         }
 
@@ -1105,11 +1300,21 @@
 
         function applyBackgroundRunState() {
             document.body.classList.toggle("no-bg-run", !bgRunEnabled);
+
+            document.querySelectorAll("iframe").forEach(frame => {
+                try {
+                    frame.contentWindow?.postMessage({ type: "OFF_TAB_RUN", enabled: bgRunEnabled }, "*");
+                    if (typeof frame.contentWindow?.__setOffTabRun === "function") {
+                        frame.contentWindow.__setOffTabRun(bgRunEnabled);
+                    }
+                } catch (e) { }
+            });
+
             const btn = document.getElementById("bgrun-btn");
             if (btn) {
                 btn.classList.toggle("off", !bgRunEnabled);
                 btn.title = bgRunEnabled
-                    ? "Background games: ON (they keep running on other tabs)"
+                    ? "Background games: ON (they keep running on other subtabs and while this browser tab is hidden)"
                     : "Background games: OFF (paused when not visible)";
                 btn.setAttribute("aria-label", btn.title);
                 btn.setAttribute("aria-pressed", bgRunEnabled ? "true" : "false");
@@ -1191,9 +1396,66 @@
            background games keep getting clicked; only an unplaced picker is
            cancelled when you leave its tab. */
 
-        const AUTOCLICK_INTERVAL_MS = 100;
+        const AUTOCLICK_INTERVAL_MS = 1;
 
-        const autoclickers = new Map(); // tab id -> clicker state
+        // clicker id -> clicker state. A tab can hold any number of them.
+        const autoclickers = new Map();
+        let autoclickSeq = 0;
+
+        /* Placed clickers survive closing a game: tab id -> [{ name, x, y }].
+           Only the spots are kept, never the on/off state, so a reopened game
+           always comes back with every clicker switched off. */
+        const CLICKERS_KEY = "dancing-bunny-clickers-v1";
+        let savedClickers = {};
+        try {
+            const parsed = JSON.parse(localStorage.getItem(CLICKERS_KEY) || "{}");
+            if (parsed && typeof parsed === "object") savedClickers = parsed;
+        } catch (e) { savedClickers = {}; }
+
+        function persistClickers() {
+            try { localStorage.setItem(CLICKERS_KEY, JSON.stringify(savedClickers)); } catch (e) { }
+        }
+
+        function saveClickersForTab(tabId) {
+            if (!tabId) return;
+            const placed = clickersForTab(tabId)
+                .filter(c => c.mode === "running")
+                .map(c => ({ name: c.name, x: c.x, y: c.y }));
+            if (placed.length) savedClickers[tabId] = placed;
+            else delete savedClickers[tabId];
+            persistClickers();
+        }
+
+        /* Rebuilds a game's saved clickers onto a freshly loaded iframe. They
+           come back parked (off) with their markers in place. */
+        function restoreClickersForTab(tabId, panel, iframe) {
+            const saved = savedClickers[tabId];
+            if (!Array.isArray(saved) || saved.length === 0) return;
+
+            saved.forEach((entry, i) => {
+                if (!entry || typeof entry.x !== "number" || typeof entry.y !== "number") return;
+                const clicker = {
+                    id: `ac-${++autoclickSeq}`,
+                    tabId,
+                    name: entry.name || `Clicker ${i + 1}`,
+                    enabled: false,
+                    panel,
+                    iframe,
+                    overlay: null,
+                    marker: null,
+                    timer: null,
+                    x: entry.x,
+                    y: entry.y,
+                    mode: "running"
+                };
+                autoclickers.set(clicker.id, clicker);
+                clicker.fire = makeClickerFire(clicker);
+                placeClickerMarker(clicker);
+            });
+
+            setAutoclickButtonState();
+            refreshAutoclickMenu();
+        }
 
         function panelTabId(panel) {
             if (!panel || !panel.id.startsWith("panel-")) return null;
@@ -1207,145 +1469,443 @@
             return iframe ? { id: panelTabId(panel), panel, iframe } : null;
         }
 
-        function currentAutoclicker() {
+        function clickersForTab(tabId) {
+            return [...autoclickers.values()].filter(c => c.tabId === tabId);
+        }
+
+        function currentAutoclickers() {
             const target = activeGamePanel();
-            return target ? autoclickers.get(target.id) || null : null;
+            return target ? clickersForTab(target.id) : [];
         }
 
         function runningAutoclickCount() {
             let count = 0;
-            autoclickers.forEach(c => { if (c.mode === "running") count++; });
+            autoclickers.forEach(c => { if (c.mode === "running" && c.enabled) count++; });
             return count;
         }
 
         function setAutoclickButtonState() {
             const btn = document.getElementById("autoclick-btn");
             if (!btn) return;
-            const current = currentAutoclicker();
-            const mode = current ? current.mode : "off";
-            const elsewhere = runningAutoclickCount() - (mode === "running" ? 1 : 0);
+            const mine = currentAutoclickers();
+            const arming = mine.some(c => c.mode === "arming");
+            const runningHere = mine.filter(c => c.mode === "running" && c.enabled).length;
+            const elsewhere = runningAutoclickCount() - runningHere;
+
+            btn.classList.toggle("arming", arming);
+            btn.classList.toggle("running", runningHere > 0);
+
+            let title =
+                arming ? "Auto Clicker: pick a spot (Esc to cancel)" :
+                    runningHere > 0 ? `Auto Clickers: ${runningHere} running on this tab` :
+                        "Auto Clickers";
+            if (elsewhere > 0) {
+                title += ` ‧ ${elsewhere} running in background`;
+            }
+            btn.title = title;
+            btn.setAttribute("aria-label", title);
+            btn.setAttribute("aria-pressed", (arming || runningHere > 0) ? "true" : "false");
+            btn.classList.toggle("background-active", runningHere === 0 && !arming && elsewhere > 0);
+        }
+
+        function stopAutoclick(clicker, opts = {}) {
+            if (!clicker) return;
+            if (clicker.timer) clearInterval(clicker.timer);
+            clicker.timer = null;
+            clicker.overlay?.remove();
+            clicker.marker?.remove();
+            clicker.overlay = null;
+            clicker.marker = null;
+            clicker.mode = "off";
+            autoclickers.delete(clicker.id);
+            // Closing a tab tears its clickers down but must not forget them.
+            if (!opts.keepSaved) saveClickersForTab(clicker.tabId);
+            setAutoclickButtonState();
+            refreshAutoclickMenu();
+        }
+
+        function stopAutoclickForPanel(panel) {
+            const id = panelTabId(panel);
+            if (!id) return;
+            clickersForTab(id).forEach(c => stopAutoclick(c, { keepSaved: true }));
+        }
+
+        // A picker that never got a spot shouldn't linger on a tab you left.
+        function cancelArmingAutoclickers() {
+            [...autoclickers.values()].forEach(clicker => {
+                if (clicker.mode === "arming") stopAutoclick(clicker);
+            });
+        }
+
+        function armAutoclick() {
+            const target = activeGamePanel();
+            if (!target) {
+                const btn = document.getElementById("autoclick-btn");
+                if (btn) {
+                    const prev = btn.title;
+                    btn.title = "Open a game tab first";
+                    setTimeout(() => { btn.title = prev; }, 1500);
+                }
+                return;
+            }
+
+            const clicker = {
+                id: `ac-${++autoclickSeq}`,
+                tabId: target.id,
+                name: `Clicker ${clickersForTab(target.id).length + 1}`,
+                enabled: true,
+                panel: target.panel,
+                iframe: target.iframe,
+                overlay: null,
+                marker: null,
+                timer: null,
+                x: 0,
+                y: 0,
+                mode: "arming"
+            };
+            autoclickers.set(clicker.id, clicker);
+
+            const overlay = document.createElement("div");
+            overlay.className = "autoclick-overlay";
+            overlay.innerHTML = `<div class="autoclick-hint">Click a spot to auto-click ‧ Esc to cancel</div>`;
+            overlay.addEventListener("click", (e) => {
+                const rect = clicker.iframe.getBoundingClientRect();
+                startAutoclick(clicker, e.clientX - rect.left, e.clientY - rect.top);
+            });
+            overlay.addEventListener("contextmenu", (e) => { e.preventDefault(); stopAutoclick(clicker); });
+
+            clicker.overlay = overlay;
+            target.panel.appendChild(overlay);
+            setAutoclickButtonState();
+        }
+
+        function makeClickerFire(clicker) {
+            return () => {
+                const frame = clicker.iframe;
+                // The game was closed or reloaded out from under us.
+                if (!frame || !frame.isConnected) { stopAutoclick(clicker, { keepSaved: true }); return; }
+                try {
+                    frame.contentWindow?.postMessage(
+                        { type: "AUTO_CLICK", x: clicker.x, y: clicker.y }, "*"
+                    );
+                } catch (e) { }
+            };
+        }
+
+        function placeClickerMarker(clicker) {
+            clicker.marker?.remove();
+            const marker = document.createElement("div");
+            marker.className = "autoclick-marker";
+            marker.classList.toggle("paused", !clicker.enabled);
+
+            // A hidden panel measures as 0x0; the frame fills the panel anyway,
+            // so fall back to the raw coordinates.
+            const rect = clicker.iframe.getBoundingClientRect();
+            const panelRect = clicker.panel.getBoundingClientRect();
+            const offsetX = rect.width ? rect.left - panelRect.left : 0;
+            const offsetY = rect.height ? rect.top - panelRect.top : 0;
+            marker.style.left = `${offsetX + clicker.x}px`;
+            marker.style.top = `${offsetY + clicker.y}px`;
+
+            clicker.marker = marker;
+            clicker.panel.appendChild(marker);
+        }
+
+        function startAutoclick(clicker, x, y) {
+            clicker.overlay?.remove();
+            clicker.overlay = null;
+            clicker.x = x;
+            clicker.y = y;
+            clicker.mode = "running";
+
+            placeClickerMarker(clicker);
+            clicker.fire = makeClickerFire(clicker);
+
+            if (clicker.enabled) {
+                clicker.fire();
+                clicker.timer = setInterval(clicker.fire, AUTOCLICK_INTERVAL_MS);
+            }
+            saveClickersForTab(clicker.tabId);
+            setAutoclickButtonState();
+            refreshAutoclickMenu();
+        }
+
+        /* Switching a clicker off parks it: the spot is kept, only the firing
+           stops, so it can be switched back on without picking again. */
+        function setClickerEnabled(clicker, enabled) {
+            if (!clicker || clicker.enabled === enabled) return;
+            clicker.enabled = enabled;
+
+            if (!enabled) {
+                if (clicker.timer) clearInterval(clicker.timer);
+                clicker.timer = null;
+            } else if (clicker.mode === "running" && !clicker.timer && clicker.fire) {
+                clicker.fire();
+                clicker.timer = setInterval(clicker.fire, AUTOCLICK_INTERVAL_MS);
+            }
+
+            clicker.marker?.classList.toggle("paused", !enabled);
+            setAutoclickButtonState();
+        }
+
+        /* ---------------- Auto clicker menu ----------------
+           The toolbar button opens a list: a "New Auto Clicker" action on top,
+           then the clickers themselves. On a game tab only that game's clickers
+           are listed; on the home tab every clicker is listed under its game. */
+
+        function ensureAutoclickMenu() {
+            let menu = document.getElementById("autoclick-menu");
+            if (menu) return menu;
+
+            menu = document.createElement("div");
+            menu.id = "autoclick-menu";
+            menu.setAttribute("role", "menu");
+            document.body.appendChild(menu);
+
+            document.addEventListener("mousedown", (e) => {
+                if (!isAutoclickMenuOpen()) return;
+                if (menu.contains(e.target)) return;
+                if (e.target.closest("#autoclick-btn")) return;
+                closeAutoclickMenu();
+            });
+            window.addEventListener("resize", closeAutoclickMenu);
+            window.addEventListener("blur", closeAutoclickMenu);
+
+            return menu;
+        }
+
+        function isAutoclickMenuOpen() {
+            return !!document.getElementById("autoclick-menu")?.classList.contains("open");
+        }
+
+        function closeAutoclickMenu() {
+            document.getElementById("autoclick-menu")?.classList.remove("open");
+        }
+
+        function clickerLocationLabel(clicker) {
+            if (clicker.mode === "arming") return "picking a spot…";
+            return `${Math.round(clicker.x)}, ${Math.round(clicker.y)}`;
+        }
+
+        function tabTitleFor(tabId) {
+            return tabs.get(tabId)?.title || "Game";
+        }
+
+        /* A small on/off switch. `state` is the current value; `onToggle` gets
+           the value it was flipped to. */
+        function makeAutoclickSwitch(state, label, onToggle, disabled = false) {
+            const sw = document.createElement("button");
+            sw.type = "button";
+            sw.className = "ac-switch";
+            sw.setAttribute("role", "switch");
+            sw.setAttribute("aria-checked", state ? "true" : "false");
+            sw.setAttribute("aria-label", label);
+            sw.title = label;
+            sw.classList.toggle("on", !!state);
+            sw.disabled = disabled;
+            sw.innerHTML = `<span class="ac-knob"></span>`;
+            sw.onclick = () => { onToggle(!state); };
+            return sw;
+        }
+
+        /* Clicking a clicker's name swaps it for a text field. Enter or blur
+           commits, Escape puts the old name back. */
+        function startClickerRename(clicker, nameBtn) {
+            const input = document.createElement("input");
+            input.type = "text";
+            input.className = "ac-name-input";
+            input.value = clicker.name;
+            input.maxLength = 40;
+
+            let done = false;
+            const finish = (save) => {
+                if (done) return;
+                done = true;
+                if (save) {
+                    const next = input.value.replace(/\s+/g, " ").trim();
+                    if (next && next !== clicker.name) {
+                        clicker.name = next;
+                        saveClickersForTab(clicker.tabId);
+                    }
+                }
+                nameBtn.textContent = clicker.name;
+                input.replaceWith(nameBtn);
+            };
+
+            input.addEventListener("keydown", (e) => {
+                e.stopPropagation();
+                if (e.key === "Enter") { e.preventDefault(); finish(true); }
+                else if (e.key === "Escape") { e.preventDefault(); finish(false); }
+            });
+            input.addEventListener("blur", () => finish(true));
+
+            nameBtn.replaceWith(input);
+            input.focus();
+            input.select();
+        }
+
+        function makeAutoclickRow(clicker) {
+            const row = document.createElement("div");
+            row.className = "ac-row";
+            row.classList.toggle("off", !clicker.enabled);
+
+            const nameBtn = document.createElement("button");
+            nameBtn.type = "button";
+            nameBtn.className = "ac-name";
+            nameBtn.textContent = clicker.name;
+            nameBtn.title = "Click to rename";
+            nameBtn.onclick = () => startClickerRename(clicker, nameBtn);
+
+            const loc = document.createElement("button");
+            loc.type = "button";
+            loc.className = "ac-loc";
+            loc.textContent = clickerLocationLabel(clicker);
+            loc.title = "Go to this clicker's tab";
+            loc.onclick = () => {
+                closeAutoclickMenu();
+                if (tabs.has(clicker.tabId)) activateTab(clicker.tabId);
+            };
 
-            btn.classList.toggle("arming", mode === "arming");
-            btn.classList.toggle("running", mode === "running");
+            const sw = makeAutoclickSwitch(clicker.enabled, `Turn ${clicker.name} ${clicker.enabled ? "off" : "on"}`, (on) => {
+                setClickerEnabled(clicker, on);
+                renderAutoclickMenu();
+            });
 
-            let title =
-                mode === "arming" ? "Auto Clicker: pick a spot (Esc to cancel)" :
-                    mode === "running" ? "Auto Clicker: running on this tab (click to stop)" :
-                        "Auto Clicker";
-            if (elsewhere > 0) {
-                title += ` \u2027 ${elsewhere} running in background`;
-            }
-            btn.title = title;
-            btn.setAttribute("aria-label", title);
-            btn.setAttribute("aria-pressed", mode !== "off" ? "true" : "false");
-            btn.classList.toggle("background-active", mode === "off" && elsewhere > 0);
-        }
+            const remove = document.createElement("button");
+            remove.type = "button";
+            remove.className = "ac-remove";
+            remove.textContent = "×";
+            remove.title = "Delete this auto clicker";
+            remove.setAttribute("aria-label", "Delete this auto clicker");
+            remove.onclick = () => { stopAutoclick(clicker); };
 
-        function stopAutoclick(clicker = currentAutoclicker()) {
-            if (!clicker) return;
-            if (clicker.timer) clearInterval(clicker.timer);
-            clicker.timer = null;
-            clicker.overlay?.remove();
-            clicker.marker?.remove();
-            clicker.overlay = null;
-            clicker.marker = null;
-            clicker.mode = "off";
-            autoclickers.delete(clicker.id);
-            setAutoclickButtonState();
+            row.appendChild(nameBtn);
+            row.appendChild(loc);
+            row.appendChild(sw);
+            row.appendChild(remove);
+            return row;
         }
 
-        function stopAutoclickForPanel(panel) {
-            const id = panelTabId(panel);
-            const clicker = id ? autoclickers.get(id) : null;
-            if (clicker) stopAutoclick(clicker);
-        }
+        /* The "all of this game's clickers" switch: on only when every clicker
+           in the group is on. */
+        function makeAutoclickAllRow(label, clickers) {
+            const row = document.createElement("div");
+            row.className = "ac-row ac-all";
 
-        // A picker that never got a spot shouldn't linger on a tab you left.
-        function cancelArmingAutoclickers() {
-            autoclickers.forEach(clicker => {
-                if (clicker.mode === "arming") stopAutoclick(clicker);
-            });
+            const text = document.createElement("span");
+            text.className = "ac-all-label";
+            text.textContent = label;
+
+            const allOn = clickers.length > 0 && clickers.every(c => c.enabled);
+            const sw = makeAutoclickSwitch(allOn, `Turn all ${label.toLowerCase()} ${allOn ? "off" : "on"}`, (on) => {
+                clickers.forEach(c => setClickerEnabled(c, on));
+                renderAutoclickMenu();
+            }, clickers.length === 0);
+
+            row.appendChild(text);
+            row.appendChild(sw);
+            return row;
         }
 
-        function armAutoclick() {
+        function renderAutoclickMenu() {
+            const menu = ensureAutoclickMenu();
+            menu.innerHTML = "";
+
             const target = activeGamePanel();
-            if (!target) {
-                const btn = document.getElementById("autoclick-btn");
-                if (btn) {
-                    const prev = btn.title;
-                    btn.title = "Open a game tab first";
-                    setTimeout(() => { btn.title = prev; }, 1500);
-                }
-                return;
+
+            const newBtn = document.createElement("button");
+            newBtn.type = "button";
+            newBtn.className = "ac-item ac-new";
+            newBtn.textContent = "New Auto Clicker";
+            if (target) {
+                newBtn.onclick = () => { closeAutoclickMenu(); armAutoclick(); };
+            } else {
+                newBtn.disabled = true;
+                newBtn.title = "Open a game tab first";
             }
+            menu.appendChild(newBtn);
 
-            const clicker = {
-                id: target.id,
-                panel: target.panel,
-                iframe: target.iframe,
-                overlay: null,
-                marker: null,
-                timer: null,
-                x: 0,
-                y: 0,
-                mode: "arming"
-            };
-            autoclickers.set(clicker.id, clicker);
+            const list = document.createElement("div");
+            list.className = "ac-list";
 
-            const overlay = document.createElement("div");
-            overlay.className = "autoclick-overlay";
-            overlay.innerHTML = `<div class="autoclick-hint">Click a spot to auto-click \u2027 Esc to cancel</div>`;
-            overlay.addEventListener("click", (e) => {
-                const rect = clicker.iframe.getBoundingClientRect();
-                startAutoclick(clicker, e.clientX - rect.left, e.clientY - rect.top);
-            });
-            overlay.addEventListener("contextmenu", (e) => { e.preventDefault(); stopAutoclick(clicker); });
+            if (target) {
+                // On a game tab: just this game's clickers, with a master switch.
+                const mine = clickersForTab(target.id);
+                list.appendChild(makeAutoclickAllRow("All Clickers", mine));
+                if (mine.length === 0) {
+                    list.appendChild(makeAutoclickEmpty("No auto clickers on this game."));
+                } else {
+                    mine.forEach(clicker => list.appendChild(makeAutoclickRow(clicker)));
+                }
+            } else {
+                // On the home tab: everything, grouped under its game's name,
+                // each group with its own master switch.
+                const byTab = new Map();
+                autoclickers.forEach(clicker => {
+                    if (!byTab.has(clicker.tabId)) byTab.set(clicker.tabId, []);
+                    byTab.get(clicker.tabId).push(clicker);
+                });
 
-            clicker.overlay = overlay;
-            target.panel.appendChild(overlay);
-            setAutoclickButtonState();
+                if (byTab.size === 0) {
+                    list.appendChild(makeAutoclickEmpty("No auto clickers running."));
+                } else {
+                    byTab.forEach((clickers, tabId) => {
+                        const header = document.createElement("div");
+                        header.className = "ac-group";
+                        header.textContent = tabTitleFor(tabId);
+                        list.appendChild(header);
+                        list.appendChild(makeAutoclickAllRow("All", clickers));
+                        clickers.forEach(clicker => list.appendChild(makeAutoclickRow(clicker)));
+                    });
+                }
+            }
+
+            menu.appendChild(list);
         }
 
-        function startAutoclick(clicker, x, y) {
-            clicker.overlay?.remove();
-            clicker.overlay = null;
-            clicker.x = x;
-            clicker.y = y;
-            clicker.mode = "running";
+        /* Live updates skip the redraw while a name is being typed. */
+        function refreshAutoclickMenu() {
+            const menu = document.getElementById("autoclick-menu");
+            if (!menu || !menu.classList.contains("open")) return;
+            if (menu.querySelector(".ac-name-input")) return;
+            renderAutoclickMenu();
+        }
 
-            const marker = document.createElement("div");
-            marker.className = "autoclick-marker";
-            const rect = clicker.iframe.getBoundingClientRect();
-            const panelRect = clicker.panel.getBoundingClientRect();
-            marker.style.left = `${rect.left - panelRect.left + x}px`;
-            marker.style.top = `${rect.top - panelRect.top + y}px`;
-            clicker.marker = marker;
-            clicker.panel.appendChild(marker);
+        function makeAutoclickEmpty(text) {
+            const empty = document.createElement("div");
+            empty.className = "ac-empty";
+            empty.textContent = text;
+            return empty;
+        }
 
-            const fire = () => {
-                const frame = clicker.iframe;
-                // The game was closed or reloaded out from under us.
-                if (!frame || !frame.isConnected) { stopAutoclick(clicker); return; }
-                try {
-                    frame.contentWindow?.postMessage(
-                        { type: "AUTO_CLICK", x: clicker.x, y: clicker.y }, "*"
-                    );
-                } catch (e) { }
-            };
+        function openAutoclickMenu() {
+            const btn = document.getElementById("autoclick-btn");
+            const menu = ensureAutoclickMenu();
+            renderAutoclickMenu();
+            menu.classList.add("open");
 
-            fire();
-            clicker.timer = setInterval(fire, AUTOCLICK_INTERVAL_MS);
-            setAutoclickButtonState();
+            if (!btn) return;
+            const anchor = btn.getBoundingClientRect();
+            const rect = menu.getBoundingClientRect();
+            const margin = 8;
+            let left = anchor.right - rect.width;
+            let top = anchor.bottom + 6;
+            left = Math.max(margin, Math.min(left, window.innerWidth - rect.width - margin));
+            top = Math.max(margin, Math.min(top, window.innerHeight - rect.height - margin));
+            menu.style.left = `${left}px`;
+            menu.style.top = `${top}px`;
         }
 
-        function toggleAutoclick() {
-            const current = currentAutoclicker();
-            if (current) stopAutoclick(current);
-            else armAutoclick();
+        function toggleAutoclickMenu() {
+            if (isAutoclickMenuOpen()) closeAutoclickMenu();
+            else openAutoclickMenu();
         }
 
         document.addEventListener("keydown", (e) => {
-            if (e.key === "Escape") stopAutoclick();
+            if (e.key !== "Escape") return;
+            if (document.activeElement?.classList.contains("ac-name-input")) return;
+            closeAutoclickMenu();
+            cancelArmingAutoclickers();
         });
 
         (function protectTabIdentity() {
@@ -1455,6 +2015,7 @@
 
         function activateTab(id) {
             setTabStatus(id, null);
+            closeAutoclickMenu();
             cancelArmingAutoclickers();
             setActiveTabButton(id);
             setActivePanel(id);
@@ -1668,6 +2229,138 @@
             return `${muteScript}${html}`;
         }
 
+        /* Browsers freeze requestAnimationFrame and clamp timers once the whole
+           browser tab is hidden, which stalls idle/clicker games even though our
+           in-page subtabs keep them mounted. This shim keeps them ticking off-tab
+           by driving their callbacks from a Web Worker's clock instead. It only
+           takes over while the page is hidden, so visible games run on the real
+           rAF, and it dies with the page like anything else. */
+        function injectOffTabSupport(html, enabled = true) {
+            const script = `
+<script>
+(function() {
+  if (window.__OFF_TAB_TICKER) return;
+  window.__OFF_TAB_TICKER = true;
+
+  var TICK_MS = 16;
+  var enabled = ${enabled ? "true" : "false"};
+
+  window.addEventListener("message", function(e) {
+    var data = e.data;
+    if (data && data.type === "OFF_TAB_RUN") enabled = !!data.enabled;
+  });
+  window.__setOffTabRun = function(value) { enabled = !!value; };
+
+  function hidden() { return document.visibilityState === "hidden"; }
+  function active() { return enabled && hidden(); }
+
+  /* Worker timers keep running at full rate in a backgrounded page far longer
+     than page timers do; setInterval is the fallback when Workers are blocked. */
+  var tickHandlers = [];
+  function onTick() {
+    for (var i = 0; i < tickHandlers.length; i++) {
+      try { tickHandlers[i](); } catch (e) {}
+    }
+  }
+
+  try {
+    var workerSrc = "var id=null;onmessage=function(e){if(e.data==='start'){if(id===null)id=setInterval(function(){postMessage(0);}," + TICK_MS + ");}else{clearInterval(id);id=null;}};";
+    var worker = new Worker(URL.createObjectURL(new Blob([workerSrc], { type: "text/javascript" })));
+    worker.onmessage = onTick;
+    worker.postMessage("start");
+  } catch (e) {
+    setInterval(onTick, TICK_MS);
+  }
+
+  /* ---------- requestAnimationFrame ---------- */
+  var nativeRaf = window.requestAnimationFrame && window.requestAnimationFrame.bind(window);
+  var nativeCaf = window.cancelAnimationFrame && window.cancelAnimationFrame.bind(window);
+
+  if (nativeRaf) {
+    var SHIM_BASE = 1000000000;   // keep our ids clear of the native ones
+    var nextRafId = SHIM_BASE;
+    var rafQueue = new Map();
+
+    window.requestAnimationFrame = function(cb) {
+      if (!active()) return nativeRaf(cb);
+      var id = nextRafId++;
+      rafQueue.set(id, cb);
+      return id;
+    };
+
+    window.cancelAnimationFrame = function(id) {
+      if (id >= SHIM_BASE) { rafQueue.delete(id); return; }
+      if (nativeCaf) nativeCaf(id);
+    };
+
+    tickHandlers.push(function() {
+      if (rafQueue.size === 0) return;
+      var due = rafQueue;
+      rafQueue = new Map();
+      var stamp = performance.now();
+      due.forEach(function(cb) {
+        try { cb(stamp); } catch (e) {}
+      });
+    });
+  }
+
+  /* ---------- setTimeout / setInterval ---------- */
+  var nativeSetTimeout = window.setTimeout.bind(window);
+  var nativeClearTimeout = window.clearTimeout.bind(window);
+  var nativeSetInterval = window.setInterval.bind(window);
+  var nativeClearInterval = window.clearInterval.bind(window);
+
+  var TIMER_BASE = 2000000000;
+  var nextTimerId = TIMER_BASE;
+  var timers = new Map();
+
+  function schedule(fn, delay, args, repeating) {
+    var wait = Math.max(0, Number(delay) || 0);
+    var id = nextTimerId++;
+    timers.set(id, { fn: fn, args: args, due: performance.now() + wait, every: repeating ? wait : null });
+    return id;
+  }
+
+  window.setTimeout = function(fn, delay) {
+    var args = Array.prototype.slice.call(arguments, 2);
+    if (!active() || typeof fn !== "function") return nativeSetTimeout.apply(window, arguments);
+    return schedule(fn, delay, args, false);
+  };
+
+  window.setInterval = function(fn, delay) {
+    var args = Array.prototype.slice.call(arguments, 2);
+    if (!active() || typeof fn !== "function") return nativeSetInterval.apply(window, arguments);
+    return schedule(fn, delay, args, true);
+  };
+
+  window.clearTimeout = function(id) {
+    if (id >= TIMER_BASE) { timers.delete(id); return; }
+    nativeClearTimeout(id);
+  };
+
+  window.clearInterval = function(id) {
+    if (id >= TIMER_BASE) { timers.delete(id); return; }
+    nativeClearInterval(id);
+  };
+
+  tickHandlers.push(function() {
+    if (timers.size === 0) return;
+    var now = performance.now();
+    timers.forEach(function(timer, id) {
+      if (now < timer.due) return;
+      if (timer.every === null) timers.delete(id);
+      else timer.due = now + timer.every;
+      try { timer.fn.apply(window, timer.args); } catch (e) {}
+    });
+  });
+})();
+<\/script>`;
+
+            if (/<\/body>/i.test(html)) return html.replace(/<\/body>/i, `${script}</body>`);
+            if (/<\/head>/i.test(html)) return html.replace(/<\/head>/i, `${script}</head>`);
+            return `${html}${script}`;
+        }
+
         function injectAutoclickSupport(html) {
             const clickScript = `
 <script>
@@ -1741,6 +2434,164 @@
                 e.preventDefault();
                 openGameTab(file, { background: true });
             });
+            el.addEventListener("contextmenu", (e) => {
+                e.preventDefault();
+                openGameContextMenu(e, file);
+            });
+        }
+
+        /* ---------------- right-click menu ---------------- */
+
+        let ctxMenu = null;
+
+        function hideGameContextMenu() {
+            if (ctxMenu) ctxMenu.classList.remove("open");
+        }
+
+        function ensureGameContextMenu() {
+            if (ctxMenu) return ctxMenu;
+
+            ctxMenu = document.createElement("div");
+            ctxMenu.id = "game-context-menu";
+            ctxMenu.setAttribute("role", "menu");
+            document.body.appendChild(ctxMenu);
+
+            // Any interaction outside the menu dismisses it.
+            document.addEventListener("mousedown", (e) => {
+                if (ctxMenu.classList.contains("open") && !ctxMenu.contains(e.target)) hideGameContextMenu();
+            });
+            document.addEventListener("keydown", (e) => {
+                if (e.key === "Escape") hideGameContextMenu();
+            });
+            window.addEventListener("resize", hideGameContextMenu);
+            window.addEventListener("blur", hideGameContextMenu);
+            document.addEventListener("scroll", hideGameContextMenu, true);
+
+            return ctxMenu;
+        }
+
+        function openGameContextMenu(e, file) {
+            const menu = ensureGameContextMenu();
+            menu.innerHTML = "";
+
+            const items = [
+                ["Open", () => openGameTab(file)],
+                ["Open Game in New Subtab", () => openGameTab(file, { background: true })],
+                ["Open Game in New Tab", () => openGameInNewWindow(file)],
+            ];
+
+            items.forEach(([label, action]) => {
+                const item = document.createElement("button");
+                item.type = "button";
+                item.className = "ctx-item";
+                item.setAttribute("role", "menuitem");
+                item.textContent = label;
+                item.onclick = () => { hideGameContextMenu(); action(); };
+                menu.appendChild(item);
+            });
+
+            // Show first so the box has a measurable size, then clamp on-screen.
+            menu.classList.add("open");
+            menu.style.left = "0px";
+            menu.style.top = "0px";
+            const rect = menu.getBoundingClientRect();
+            const x = Math.min(e.clientX, window.innerWidth - rect.width - 8);
+            const y = Math.min(e.clientY, window.innerHeight - rect.height - 8);
+            menu.style.left = `${Math.max(8, x)}px`;
+            menu.style.top = `${Math.max(8, y)}px`;
+
+            const first = menu.querySelector(".ctx-item");
+            if (first) first.focus();
+        }
+
+        /* Plain fetch across the proxy list — the in-tab loader logs its progress
+           into the tab, but a popup has nowhere to put that. */
+        async function fetchGameSource(file) {
+            const encoded = encodeURIComponent(normalizeFileName(file));
+            for (const base of GAME_BASES) {
+                try {
+                    const response = await fetch(`${base}${encoded}?t=${Date.now()}`);
+                    if (!response.ok) continue;
+                    const text = await response.text();
+                    const clean = text.trim().toLowerCase();
+                    if (clean === "404: not found" || clean === "not found" || clean.includes("404 page not found")) continue;
+                    return { text, base };
+                } catch (e) { /* try the next proxy */ }
+            }
+            return null;
+        }
+
+        /* Opens the game in a real browser tab on about:blank, wearing the home
+           tab's title and favicon rather than the game's. */
+        async function openGameInNewWindow(file) {
+            const win = window.open("about:blank", "_blank");
+            if (!win) {
+                alert("The popup was blocked. Allow popups for this page to open games in a new tab.");
+                return;
+            }
+
+            const title = displayNameFromFile(file);
+            const icons = [...document.querySelectorAll("link[rel='icon']")].map(l => l.outerHTML).join("\n");
+
+            win.document.write(`<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>New tab</title>
+${icons}
+<style>
+    html, body { margin: 0; height: 100%; background: linear-gradient(135deg, #2e3244 30%, #561a86 100%); }
+    iframe { border: 0; display: block; width: 100%; height: 100%; }
+    #loading { display: grid; place-items: center; height: 100%; color: #fff; font-family: 'Comic Sans MS', sans-serif; font-size: 20px; }
+</style>
+</head>
+<body><div id="loading">Loading ${sanitizeTitle(title)}...</div>
+<script>
+    // Same trick as the main page: re-append the icon links so the browser
+    // picks the favicon back up after the document is written.
+    function refreshFavicon() {
+        const existingIcons = document.querySelectorAll("link[rel='icon']");
+        existingIcons.forEach(oldIcon => {
+            const newIcon = oldIcon.cloneNode(true);
+            oldIcon.remove();
+            document.head.appendChild(newIcon);
+        });
+    }
+    setTimeout(refreshFavicon, 51);
+<\/script>
+</body>
+</html>`);
+            win.document.close();
+
+            // document.write resets the title in some browsers; pin it afterwards.
+            try { win.document.title = "New tab"; } catch (err) { }
+
+            recordRecent(file);
+
+            const source = await fetchGameSource(file);
+            if (win.closed) return;
+
+            const loading = win.document.getElementById("loading");
+
+            if (!source) {
+                if (loading) {
+                    loading.textContent = `Failed to load ${sanitizeTitle(title)}.`;
+                    loading.style.color = "#ff5555";
+                }
+                return;
+            }
+
+            let html = injectOffTabSupport(injectAutoclickSupport(injectMuteSupport(source.text, isMuted)), bgRunEnabled);
+            html = injectBaseHref(html, source.base);
+
+            if (loading) loading.remove();
+            const iframe = win.document.createElement("iframe");
+            iframe.srcdoc = html;
+            iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-modals");
+            iframe.referrerPolicy = "no-referrer";
+            win.document.body.appendChild(iframe);
+
+            try { win.refreshFavicon && win.setTimeout(win.refreshFavicon, 51); } catch (err) { }
         }
 
         async function openGameTab(file, opts = {}) {
@@ -1821,7 +2672,7 @@
 
                 if (!text) throw new Error("All proxy servers failed, were skipped, or the file does not exist.");
 
-                let html = injectAutoclickSupport(injectMuteSupport(text, isMuted));
+                let html = injectOffTabSupport(injectAutoclickSupport(injectMuteSupport(text, isMuted)), bgRunEnabled);
                 html = injectBaseHref(html, successBase);
 
                 tab.panel.innerHTML = "";
@@ -1832,6 +2683,7 @@
                 iframe.referrerPolicy = "no-referrer";
                 applyMuteToIframe(iframe);
                 tab.panel.appendChild(iframe);
+                restoreClickersForTab(id, tab.panel, iframe);
                 setTabStatus(id, isTabActive(id) ? null : "ready");
 
             } catch (err) {
@@ -1845,14 +2697,119 @@
             }
         }
 
+        /* Pulls the text of the code's own <title> tag, entities decoded. */
+        function extractDocTitle(htmlCode) {
+            const match = /<title[^>]*>([\s\S]*?)<\/title>/i.exec(htmlCode || "");
+            if (!match) return "";
+            const decoder = document.createElement("textarea");
+            decoder.innerHTML = match[1];
+            return decoder.value.replace(/\s+/g, " ").trim();
+        }
+
+        function escapeHtmlText(text) {
+            return String(text)
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;");
+        }
+
+        /* The home tab's own favicon links, as markup. */
+        function homeIconsHtml() {
+            return [...document.querySelectorAll("link[rel='icon']")].map(l => l.outerHTML).join("\n");
+        }
+
+        /* Icon links declared in the code. Relative hrefs are dropped: the popup
+           lives on about:blank, so they would resolve to nothing. */
+        function extractIconLinksHtml(htmlCode) {
+            const links = [];
+            const tagPattern = /<link\b[^>]*>/gi;
+            let tag;
+            while ((tag = tagPattern.exec(htmlCode || "")) !== null) {
+                const text = tag[0];
+                const rel = /\brel\s*=\s*("([^"]*)"|'([^']*)'|([^\s>]+))/i.exec(text);
+                const relValue = rel ? (rel[2] ?? rel[3] ?? rel[4] ?? "") : "";
+                if (!/\bicon\b/i.test(relValue)) continue;
+                const href = /\bhref\s*=\s*("([^"]*)"|'([^']*)'|([^\s>]+))/i.exec(text);
+                const hrefValue = href ? (href[2] ?? href[3] ?? href[4] ?? "").trim() : "";
+                if (!/^(data:|https?:|\/\/)/i.test(hrefValue)) continue;
+                links.push(text);
+            }
+            return links.join("\n");
+        }
+
+        /* Runs the typed HTML in a real browser tab. With cloaking on (or when the
+           code declares no title/icon of its own) the tab wears the home page's
+           title and favicon instead. */
+        function openHtmlInNewWindow(htmlCode, keepCloaking) {
+            const win = window.open("about:blank", "_blank");
+            if (!win) {
+                alert("The popup was blocked. Allow popups for this page to open code in a new tab.");
+                return;
+            }
+
+            const codeTitle = keepCloaking ? "" : extractDocTitle(htmlCode);
+            const codeIcons = keepCloaking ? "" : extractIconLinksHtml(htmlCode);
+            const title = codeTitle || "New tab";
+            const icons = codeIcons || homeIconsHtml();
+
+            const prepared = injectBaseHref(
+                injectOffTabSupport(injectAutoclickSupport(injectMuteSupport(htmlCode, isMuted)), bgRunEnabled),
+                document.baseURI
+            );
+
+            win.document.write(`<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>${escapeHtmlText(title)}</title>
+${icons}
+<style>
+    html, body { margin: 0; height: 100%; background: #fff; }
+    iframe { border: 0; display: block; width: 100%; height: 100%; }
+</style>
+</head>
+<body>
+<script>
+    // Same trick as the main page: re-append the icon links so the browser
+    // picks the favicon back up after the document is written.
+    function refreshFavicon() {
+        const existingIcons = document.querySelectorAll("link[rel='icon']");
+        existingIcons.forEach(oldIcon => {
+            const newIcon = oldIcon.cloneNode(true);
+            oldIcon.remove();
+            document.head.appendChild(newIcon);
+        });
+    }
+    setTimeout(refreshFavicon, 51);
+<\/script>
+</body>
+</html>`);
+            win.document.close();
+
+            // document.write resets the title in some browsers; pin it afterwards.
+            try { win.document.title = title; } catch (err) { }
+
+            const iframe = win.document.createElement("iframe");
+            iframe.srcdoc = prepared;
+            iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms allow-popups allow-modals");
+            iframe.referrerPolicy = "no-referrer";
+            win.document.body.appendChild(iframe);
+
+            try { win.refreshFavicon && win.setTimeout(win.refreshFavicon, 51); } catch (err) { }
+        }
+
         function openHtmlPreviewTab(htmlCode) {
             const id = "html-preview";
-            const title = "HTML Code";
+            const title = extractDocTitle(htmlCode) || "HTML Code";
 
             const prepared = injectBaseHref(injectAutoclickSupport(injectMuteSupport(htmlCode, isMuted)), document.baseURI);
 
             if (tabs.has(id)) {
                 const existing = tabs.get(id);
+                existing.title = title;
+                const label = existing.button.querySelector(".tab-title");
+                if (label) label.textContent = sanitizeTitle(title);
                 existing.panel.innerHTML = "";
                 const iframe = document.createElement("iframe");
                 iframe.className = "game-frame";
@@ -1894,82 +2851,6 @@
             activateTab(id);
         }
 
-        function renderRecentPane() {
-            const list = document.getElementById("recent-list");
-            if (!list) return;
-
-            list.innerHTML = "";
-
-            const count = document.getElementById("recent-count");
-
-            if (recent.length === 0) {
-                list.style.display = "block";
-                if (count) count.textContent = " ";
-                const empty = document.createElement("div");
-                empty.className = "recent-empty";
-                empty.textContent = "No games played yet";
-                list.appendChild(empty);
-                return;
-            }
-
-            list.style.display = "";
-            if (count) count.textContent = ` `;
-
-            recent.forEach((file, i) => {
-                const card = document.createElement("button");
-                card.className = "recent-card";
-                card.dataset.file = file;
-                bindGameLauncher(card, file);
-
-                const rank = document.createElement("span");
-                rank.className = "recent-rank";
-                rank.textContent = i + 1;
-
-                const name = document.createElement("span");
-                name.className = "recent-name";
-                name.textContent = displayNameFromFile(file);
-                name.title = name.textContent;
-
-                card.appendChild(rank);
-                card.appendChild(name);
-                list.appendChild(card);
-            });
-        }
-
-        function openRecentGamesTab() {
-            const id = "recent-games";
-            const title = "Recent Games";
-
-            if (tabs.has(id)) { activateTab(id); renderRecentPane(); return; }
-
-            const button = createTabButton(id, title, true);
-            tabBar.insertBefore(button, tabBarAnchor());
-
-            const panel = document.createElement("div");
-            panel.className = "panel game-pane static-pane";
-            panel.id = `panel-${id}`;
-
-            const wrapper = document.createElement("div");
-            wrapper.className = "recent-pane";
-            wrapper.innerHTML = `
-    <div class="recent-inner">
-      <h2 class="recent-header">Recently Played</h2>
-      <p class="recent-subheader" id="recent-count"></p>
-      <div class="recent-list" id="recent-list"></div>
-    </div>
-  `;
-
-            panel.appendChild(wrapper);
-            contentArea.appendChild(panel);
-
-            const tab = { id, title, button, panel };
-            tabs.set(id, tab);
-            tabOrder.push(id);
-            activateTab(id);
-
-            renderRecentPane();
-        }
-
         function openRunnerTab() {
             const id = "runner";
             const title = "HTML Runner";
@@ -2004,9 +2885,14 @@
 &lt;/body&gt;
 &lt;/html&gt;</textarea>
         <div class="runner-controls">
-          <button id="runner-run-btn">Open in New Tab</button>
+          <button id="runner-run-btn">Open in New Subtab</button>
+          <button id="runner-newtab-btn">Open in New Tab</button>
           <button id="runner-clear-btn">Clear</button>
         </div>
+        <label class="runner-check" for="runner-cloak">
+          <input type="checkbox" id="runner-cloak" checked>
+          <span>Keep Cloaking</span>
+        </label>
       </div>
     </div>
   `;
@@ -2021,12 +2907,18 @@
 
             const code = panel.querySelector("#runner-code");
             const runBtn = panel.querySelector("#runner-run-btn");
+            const newTabBtn = panel.querySelector("#runner-newtab-btn");
+            const cloakBox = panel.querySelector("#runner-cloak");
             const clearBtn = panel.querySelector("#runner-clear-btn");
 
             runBtn.onclick = () => {
                 openHtmlPreviewTab(code.value);
             };
 
+            newTabBtn.onclick = () => {
+                openHtmlInNewWindow(code.value, cloakBox.checked);
+            };
+
             clearBtn.onclick = () => {
                 code.value = "";
             };
@@ -2052,6 +2944,7 @@
                 <textarea class="runner-textarea" placeholder="Paste your bookmarklet javascript: here..."></textarea>
                 <div class="runner-controls">
                     <button class="run-btn">Run Bookmarklet</button>
+                    <button class="clear-btn">Clear</button>
                 </div>
             </div>
         </div>
@@ -2059,6 +2952,11 @@
 
             const textarea = tab.panel.querySelector(".runner-textarea");
             const runBtn = tab.panel.querySelector(".run-btn");
+            const clearBtn = tab.panel.querySelector(".clear-btn");
+
+            clearBtn.addEventListener("click", () => {
+                textarea.value = "";
+            });
 
             runBtn.addEventListener("click", () => {
                 let code = textarea.value.trim();
@@ -2134,13 +3032,44 @@
             const container = document.getElementById("sections-container");
             const firstRealSection = container.firstElementChild;
             container.insertBefore(section, firstRealSection);
+
+            filterGames();
+        }
+
+        function renderRecentSection() {
+            const container = document.getElementById("sections-container");
+            if (!container) return;
+
+            const existing = document.getElementById("section-recent");
+            if (existing) existing.remove();
+
+            const recentSidebarBtn = document.getElementById("sidebar-recent");
+            if (recentSidebarBtn) recentSidebarBtn.style.opacity = recent.length > 0 ? "1" : "0.3";
+
+            if (recent.length === 0) return;
+
+            const section = document.createElement("div");
+            section.className = "letter-section"; section.id = "section-recent";
+
+            const header = document.createElement("div");
+            header.className = "letter-header"; header.textContent = "Recently Played"; section.appendChild(header);
+
+            const buttonsContainer = document.createElement("div");
+            buttonsContainer.className = "buttons-container";
+            recent.forEach(file => buttonsContainer.appendChild(makeGameRow(file)));
+            section.appendChild(buttonsContainer);
+
+            const fav = document.getElementById("section-fav");
+            container.insertBefore(section, fav ? fav.nextElementSibling : container.firstElementChild);
+
+            filterGames();
         }
 
         function generateSidebar(allChars, filesByChar) {
             const sidebar = document.getElementById("sidebar"); sidebar.innerHTML = "";
 
             const searchBtn = document.createElement("button");
-            searchBtn.className = "sidebar-btn"; searchBtn.textContent = "Search";
+            searchBtn.className = "sidebar-btn"; searchBtn.textContent = "search";
             searchBtn.onclick = () => document.getElementById("gameSearch").scrollIntoView({ behavior: "smooth", block: "end" });
             sidebar.appendChild(searchBtn);
 
@@ -2153,6 +3082,15 @@
             };
             sidebar.appendChild(favBtn);
 
+            const recentBtn = document.createElement("button");
+            recentBtn.className = "sidebar-btn"; recentBtn.id = "sidebar-recent"; recentBtn.textContent = "recent";
+            recentBtn.style.opacity = recent.length > 0 ? "1" : "0.3";
+            recentBtn.onclick = () => {
+                const section = document.getElementById("section-recent");
+                if (section) section.scrollIntoView({ behavior: "smooth", block: "start" });
+            };
+            sidebar.appendChild(recentBtn);
+
             allChars.forEach((char) => {
                 if (char === "Search") return;
                 const btn = document.createElement("button");
@@ -2200,11 +3138,12 @@
                 section.appendChild(buttonsContainer); container.appendChild(section);
             });
 
-            generateSidebar(sidebarChars, filesByChar); renderFavoritesSection();
+            generateSidebar(sidebarChars, filesByChar); renderFavoritesSection(); renderRecentSection();
         }
 
         function filterGames() {
             const input = document.getElementById("gameSearch");
+            if (!input) return;
             const filter = input.value.toLowerCase();
             const sections = document.querySelectorAll(".letter-section");
 
@@ -2226,7 +3165,6 @@
         }
 
         document.getElementById("open-runner-btn").addEventListener("click", openRunnerTab);
-        document.getElementById("open-recent-btn").addEventListener("click", openRecentGamesTab);
 
         async function fetchAndInjectProxy(targetUrl, tab, title, id) {
             const logArea = tab.panel.querySelector(`#logs-${id}`);
@@ -2361,6 +3299,13 @@
 
         document.getElementById("open-form-btn").addEventListener("click", openFormTab);
 
+        // Ask the browser to show its native "Leave site?" prompt on close/reload.
+        window.addEventListener("beforeunload", (e) => {
+            e.preventDefault();
+            e.returnValue = "";
+            return "";
+        });
+
         function initWhenReady() {
             if (typeof files === "undefined") {
                 setTimeout(initWhenReady, 50); return;