diff --git a/Auto-Image.js b/Auto-Image.js
index 41db943..4200f49 100644
--- a/Auto-Image.js
+++ b/Auto-Image.js
@@ -43,12 +43,11 @@
       "209,128,81": "Dark Beige", "255,197,165": "Light Beige", "109,100,63": "Dark Stone", "148,140,107": "Stone",
       "205,197,158": "Light Stone", "51,57,65": "Dark Slate", "109,117,141": "Slate", "179,185,209": "Light Slate",
     },
-    // --- CORRECTED PAID COLORS ---
-    // Corresponds to IDs 32-61 from the main palette
     PAID_COLORS: new Set([
-        "125,199,255", "77,49,184", "107,80,246", "153,177,251", "74,66,132", "122,113,196", "181,174,241", "170,56,185", "224,159,249", "203,0,122",
-        "236,31,128", "243,141,169", "155,82,73", "209,128,120", "250,182,164", "104,70,52", "149,104,42", "219,164,99", "123,99,82", "156,132,107",
-        "214,181,148", "209,128,81", "248,178,119", "255,197,165", "109,100,63", "148,140,107", "205,197,158", "51,57,65", "109,117,141", "179,185,209"
+      "170,170,170", "165,14,30", "250,128,114", "228,92,26", "156,132,49", "197,173,49", "232,212,95", "74,107,58",
+      "90,148,74", "132,197,115", "15,121,159", "187,250,242", "125,199,255", "77,49,184", "74,66,132", "122,113,196",
+      "181,174,241", "155,82,73", "209,128,120", "250,182,164", "219,164,99", "123,99,82", "156,132,107", "214,181,148",
+      "209,128,81", "255,197,165", "109,100,63", "148,140,107", "205,197,158", "51,57,65", "109,117,141", "179,185,209",
     ]),
     // --- END: Color data ---
     // Optimized CSS Classes for reuse
@@ -177,6 +176,7 @@
   const TEXT = {
     en: {
     title: "WPlace Auto-Image",
+    toggleOverlay: "Toggle Overlay",
     scanColors: "Scan Colors",
     uploadImage: "Upload Image",
     resizeImage: "Resize Image",
@@ -552,57 +552,256 @@
     language: "en",
     paintingSpeed: CONFIG.PAINTING_SPEED.DEFAULT, // pixels per second
     cooldownChargeThreshold: CONFIG.COOLDOWN_CHARGE_THRESHOLD,
-    // --- NEW: Overlay state ---
-    overlayCanvas: null,
-    overlayCtx: null,
-    gameCanvas: null,
   }
 
   // Placeholder for the resize preview update function
   let _updateResizePreview = () => {};
 
-  // Turnstile token handling (promise-based) inspired by external logic
-  let turnstileToken = null
-  let _resolveToken = null
-  let tokenPromise = new Promise((resolve) => { _resolveToken = resolve })
-
-  function setTurnstileToken(t) {
-    if (_resolveToken) {
-      _resolveToken(t)
-      _resolveToken = null
+  // --- OVERLAY UPDATE: New OverlayManager class to handle all overlay logic ---
+  class OverlayManager {
+    constructor() {
+        this.isEnabled = false;
+        this.startCoords = null; // { region: {x, y}, pixel: {x, y} }
+        this.imageBitmap = null;
+        this.chunkedTiles = new Map(); // Map<"tileX,tileY", ImageBitmap>
+        this.tileSize = 1000;
     }
-    turnstileToken = t
-  }
 
-  async function ensureToken() {
-    if (!turnstileToken) {
-      updateUI("captchaNeeded", "error")
-      Utils.showAlert(Utils.t("captchaNeeded"), "error")
-      try { await tokenPromise } catch (_) {}
+    toggle() {
+        this.isEnabled = !this.isEnabled;
+        console.log(`Overlay ${this.isEnabled ? 'enabled' : 'disabled'}.`);
+        return this.isEnabled;
     }
-    return turnstileToken
-  }
 
-  // Intercept fetch to capture Turnstile token from pixel placement requests
-  const originalFetch = window.fetch
-  window.fetch = async (url, options) => {
-    if (typeof url === "string" && url.includes("https://backend.wplace.live/s0/pixel/")) {
-      try {
-        const payload = JSON.parse(options.body)
-        if (payload.t) {
-          console.log("✅ Turnstile Token Captured:", payload.t)
-          setTurnstileToken(payload.t)
-          if (document.querySelector("#statusText")?.textContent.includes("CAPTCHA")) {
-            Utils.showAlert("Token captured successfully! You can start the bot now.", "success")
-            updateUI("colorsFound", "success", { count: state.availableColors.length })
-          }
+    enable() { this.isEnabled = true; }
+    disable() { this.isEnabled = false; }
+    clear() {
+        this.disable();
+        this.imageBitmap = null;
+        this.chunkedTiles.clear();
+    }
+
+    async setImage(imageBitmap) {
+        this.imageBitmap = imageBitmap;
+        if (this.imageBitmap && this.startCoords) {
+            await this.processImageIntoChunks();
         }
-      } catch (_) { /* ignore */ }
     }
-    return originalFetch(url, options)
-  }
 
-  // LANGUAGE DETECTION
+    async setPosition(startPosition, region) {
+        if (!startPosition || !region) {
+            this.startCoords = null;
+            this.chunkedTiles.clear();
+            return;
+        }
+        this.startCoords = { region, pixel: startPosition };
+        if (this.imageBitmap) {
+            await this.processImageIntoChunks();
+        }
+    }
+
+    // --- OVERLAY UPDATE: Simplified chunking logic for solid, semi-transparent overlay ---
+    async processImageIntoChunks() {
+        if (!this.imageBitmap || !this.startCoords) return;
+
+        this.chunkedTiles.clear();
+        const { width: imageWidth, height: imageHeight } = this.imageBitmap;
+        const { x: startPixelX, y: startPixelY } = this.startCoords.pixel;
+        const { x: startRegionX, y: startRegionY } = this.startCoords.region;
+
+        const endPixelX = startPixelX + imageWidth;
+        const endPixelY = startPixelY + imageHeight;
+
+        const startTileX = startRegionX + Math.floor(startPixelX / this.tileSize);
+        const startTileY = startRegionY + Math.floor(startPixelY / this.tileSize);
+        const endTileX = startRegionX + Math.floor(endPixelX / this.tileSize);
+        const endTileY = startRegionY + Math.floor(endPixelY / this.tileSize);
+        
+        for (let ty = startTileY; ty <= endTileY; ty++) {
+            for (let tx = startTileX; tx <= endTileX; tx++) {
+                const tileKey = `${tx},${ty}`;
+
+                // Calculate the portion of the image that overlaps with this tile
+                const imgStartX = (tx - startRegionX) * this.tileSize - startPixelX;
+                const imgStartY = (ty - startRegionY) * this.tileSize - startPixelY;
+
+                // Crop coordinates within the source image
+                const sX = Math.max(0, imgStartX);
+                const sY = Math.max(0, imgStartY);
+                const sW = Math.min(imageWidth - sX, this.tileSize - (sX - imgStartX));
+                const sH = Math.min(imageHeight - sY, this.tileSize - (sY - imgStartY));
+                
+                if (sW <= 0 || sH <= 0) continue;
+
+                // Destination coordinates on the new chunk canvas
+                const dX = Math.max(0, -imgStartX);
+                const dY = Math.max(0, -imgStartY);
+
+                const chunkCanvas = new OffscreenCanvas(this.tileSize, this.tileSize);
+                const chunkCtx = chunkCanvas.getContext('2d');
+                chunkCtx.imageSmoothingEnabled = false;
+
+                chunkCtx.drawImage(this.imageBitmap, sX, sY, sW, sH, dX, dY, sW, sH);
+                
+                const chunkBitmap = await chunkCanvas.transferToImageBitmap();
+                this.chunkedTiles.set(tileKey, chunkBitmap);
+            }
+        }
+        
+        console.log(`Overlay processed into ${this.chunkedTiles.size} chunks.`);
+    }
+
+    // --- OVERLAY UPDATE: Simplified compositing logic for solid, semi-transparent overlay ---
+    async processAndRespondToTileRequest(eventData) {
+        const { endpoint, blobID, blobData } = eventData;
+        
+        let finalBlob = blobData;
+
+        if (this.isEnabled && this.chunkedTiles.size > 0) {
+            const tileMatch = endpoint.match(/(\d+)\/(\d+)\.png/);
+            if (tileMatch) {
+                const tileX = parseInt(tileMatch[1], 10);
+                const tileY = parseInt(tileMatch[2], 10);
+                const tileKey = `${tileX},${tileY}`;
+
+                const chunkBitmap = this.chunkedTiles.get(tileKey);
+                if (chunkBitmap) {
+                    try {
+                        const originalTileBitmap = await createImageBitmap(blobData);
+                        const canvas = new OffscreenCanvas(originalTileBitmap.width, originalTileBitmap.height);
+                        const ctx = canvas.getContext('2d');
+                        ctx.imageSmoothingEnabled = false;
+
+                        // Draw original tile first
+                        ctx.drawImage(originalTileBitmap, 0, 0);
+                        
+                        // Set opacity and draw our solid overlay chunk on top
+                        ctx.globalAlpha = 0.6;
+                        ctx.drawImage(chunkBitmap, 0, 0);
+
+                        finalBlob = await canvas.convertToBlob({ type: 'image/png' });
+                    } catch (e) {
+                        console.error("Error compositing overlay:", e);
+                    }
+                }
+            }
+        }
+
+        // Send the (possibly modified) blob back to the injected script
+        window.postMessage({
+            source: 'auto-image-overlay',
+            blobID: blobID,
+            blobData: finalBlob
+        }, '*');
+    }
+}
+
+const overlayManager = new OverlayManager();
+
+// Turnstile token handling (promise-based) inspired by external logic
+let turnstileToken = null
+let _resolveToken = null
+let tokenPromise = new Promise((resolve) => { _resolveToken = resolve })
+
+function setTurnstileToken(t) {
+  if (_resolveToken) {
+    _resolveToken(t)
+    _resolveToken = null
+  }
+  turnstileToken = t
+}
+
+async function ensureToken() {
+  if (!turnstileToken) {
+    updateUI("captchaNeeded", "error")
+    Utils.showAlert(Utils.t("captchaNeeded"), "error")
+    try { await tokenPromise } catch (_) {}
+  }
+  return turnstileToken
+}
+
+function inject(callback) {
+    const script = document.createElement('script');
+    script.textContent = `(${callback})();`;
+    document.documentElement?.appendChild(script);
+    script.remove();
+}
+
+inject(() => {
+    const fetchedBlobQueue = new Map();
+
+    window.addEventListener('message', (event) => {
+        const { source, blobID, blobData } = event.data;
+        if (source === 'auto-image-overlay' && blobID && blobData) {
+            const callback = fetchedBlobQueue.get(blobID);
+            if (typeof callback === 'function') {
+                callback(blobData);
+            }
+            fetchedBlobQueue.delete(blobID);
+        }
+    });
+
+    const originalFetch = window.fetch;
+    window.fetch = async function(...args) {
+        const response = await originalFetch.apply(this, args);
+        const url = (args[0] instanceof Request) ? args[0].url : args[0];
+
+        if (typeof url === "string") {
+            if (url.includes("https://backend.wplace.live/s0/pixel/")) {
+                try {
+                    const payload = JSON.parse(args[1].body);
+                    if (payload.t) {
+                        console.log("✅ Turnstile Token Captured:", payload.t);
+                         window.postMessage({ source: 'turnstile-capture', token: payload.t }, '*');
+                    }
+                } catch (_) { /* ignore */ }
+            }
+            
+            const contentType = response.headers.get('content-type') || '';
+            if (contentType.includes('image/png') && url.includes('.png')) {
+                 const cloned = response.clone();
+                 return new Promise(async (resolve) => {
+                     const blobUUID = crypto.randomUUID();
+                     const originalBlob = await cloned.blob();
+                     
+                     fetchedBlobQueue.set(blobUUID, (processedBlob) => {
+                         resolve(new Response(processedBlob, {
+                             headers: cloned.headers,
+                             status: cloned.status,
+                             statusText: cloned.statusText
+                         }));
+                     });
+
+                     window.postMessage({
+                         source: 'auto-image-tile',
+                         endpoint: url,
+                         blobID: blobUUID,
+                         blobData: originalBlob,
+                     }, '*');
+                 });
+            }
+        }
+        
+        return response;
+    };
+});
+
+window.addEventListener('message', (event) => {
+    const { source, endpoint, blobID, blobData, token } = event.data;
+
+    if (source === 'auto-image-tile' && endpoint && blobID && blobData) {
+        overlayManager.processAndRespondToTileRequest(event.data);
+    }
+
+    if (source === 'turnstile-capture' && token) {
+        setTurnstileToken(token);
+        if (document.querySelector("#statusText")?.textContent.includes("CAPTCHA")) {
+            Utils.showAlert("Token captured successfully! You can start the bot now.", "success");
+            updateUI("colorsFound", "success", { count: state.availableColors.length });
+        }
+    }
+});
+
   async function detectLanguage() {
     try {
       const response = await fetch("https://backend.wplace.live/me", {
@@ -629,11 +828,9 @@
         return null;
     },
 
-    // Optimized DOM creation helpers
     createElement: (tag, props = {}, children = []) => {
       const element = document.createElement(tag)
 
-      // Set properties efficiently
       Object.entries(props).forEach(([key, value]) => {
         if (key === 'style' && typeof value === 'object') {
           Object.assign(element.style, value)
@@ -646,7 +843,6 @@
         }
       })
 
-      // Append children efficiently
       if (typeof children === 'string') {
         element.textContent = children
       } else if (Array.isArray(children)) {
@@ -662,7 +858,6 @@
       return element
     },
 
-    // Create button with common styling
     createButton: (id, text, icon, onClick, style = CONFIG.CSS_CLASSES.BUTTON_PRIMARY) => {
       const button = Utils.createElement('button', {
         id: id,
@@ -732,7 +927,6 @@
 
     colorDistance: (a, b) => Math.sqrt(Math.pow(a[0] - b[0], 2) + Math.pow(a[1] - b[1], 2) + Math.pow(a[2] - b[2], 2)),
 
-    // The color metric from colour-converter.js for higher accuracy
     findClosestPaletteColor: (r, g, b, palette) => {
         let menorDist = Infinity;
         let cor = [0, 0, 0];
@@ -841,19 +1035,15 @@
     calculateEstimatedTime: (remainingPixels, charges, cooldown) => {
       if (remainingPixels <= 0) return 0
 
-      // Calculate time based on painting speed (pixels per second)
       const paintingSpeedDelay = state.paintingSpeed > 0 ? (1000 / state.paintingSpeed) : 1000
-      const timeFromSpeed = remainingPixels * paintingSpeedDelay // ms
+      const timeFromSpeed = remainingPixels * paintingSpeedDelay
 
-      // Calculate time based on charges and cooldown
       const cyclesNeeded = Math.ceil(remainingPixels / Math.max(charges, 1))
-      const timeFromCharges = cyclesNeeded * cooldown // ms
+      const timeFromCharges = cyclesNeeded * cooldown
 
-      // Return the maximum of both calculations (the limiting factor)
       return Math.max(timeFromSpeed, timeFromCharges)
     },
 
-    // Save/Load Progress Functions
     saveProgress: () => {
       try {
         const progressData = {
@@ -909,10 +1099,8 @@
 
     restoreProgress: (savedData) => {
       try {
-        // Restore state
         Object.assign(state, savedData.state)
 
-        // Restore image data
         if (savedData.imageData) {
           state.imageData = {
             ...savedData.imageData,
@@ -920,7 +1108,6 @@
           }
         }
 
-        // Restore painted map
         if (savedData.paintedMap) {
           state.paintedMap = savedData.paintedMap.map((row) => Array.from(row))
         }
@@ -1106,10 +1293,8 @@
   const colorCache = new Map()
 
   function findClosestColor(targetRgb, availableColors) {
-    // Create cache key from RGB values
     const cacheKey = `${targetRgb[0]},${targetRgb[1]},${targetRgb[2]}`
 
-    // Check cache first
     if (colorCache.has(cacheKey)) {
       return colorCache.get(cacheKey)
     }
@@ -1126,23 +1311,18 @@
     let minDistance = Number.POSITIVE_INFINITY
     let closestColorId = availableColors[0]?.id || 1
 
-    // Use optimized loop for better performance
     for (let i = 0; i < availableColors.length; i++) {
       const color = availableColors[i]
       const distance = Utils.colorDistance(targetRgb, color.rgb)
       if (distance < minDistance) {
         minDistance = distance
         closestColorId = color.id
-
-        // If perfect match, break early
         if (distance === 0) break
       }
     }
 
-    // Cache the result for future use
     colorCache.set(cacheKey, closestColorId)
 
-    // Limit cache size to prevent memory leaks
     if (colorCache.size > 10000) {
       const firstKey = colorCache.keys().next().value
       colorCache.delete(firstKey)
@@ -1156,7 +1336,6 @@
   let updateStats = () => {}
   let updateDataButtons = () => {}
 
-  // --- START: Color Palette Functions ---
   function updateActiveColorPalette() {
       state.activeColorPalette = [];
       const activeSwatches = document.querySelectorAll('.wplace-color-swatch.active');
@@ -1166,7 +1345,6 @@
               state.activeColorPalette.push(rgb);
           });
       }
-      // If the resize dialog is open, update its preview
       if (document.querySelector('.resize-container')?.style.display === 'block') {
           _updateResizePreview();
       }
@@ -1191,7 +1369,6 @@
       freeContainer.innerHTML = '';
       paidContainer.innerHTML = '';
 
-      // Create a unique set of colors to avoid duplicates
       const uniqueColors = [...new Set(CONFIG.COLOR_PALETTE.map(JSON.stringify))].map(JSON.parse);
 
       uniqueColors.forEach(rgb => {
@@ -1209,7 +1386,6 @@
 
           const nameLabel = Utils.createElement('span', { className: 'wplace-color-item-name' }, name);
 
-          // Default state: free are active, paid are not
           if (!isPaid) {
               swatch.classList.add('active');
           }
@@ -1229,18 +1405,13 @@
           }
       });
 
-      // Add event listeners for master buttons
       container.querySelector('#selectAllFreeBtn')?.addEventListener('click', () => toggleAllColors(true, false));
       container.querySelector('#unselectAllFreeBtn')?.addEventListener('click', () => toggleAllColors(false, false));
       container.querySelector('#selectAllPaidBtn')?.addEventListener('click', () => toggleAllColors(true, true));
       container.querySelector('#unselectAllPaidBtn')?.addEventListener('click', () => toggleAllColors(false, true));
 
-      // Set the initial state
       updateActiveColorPalette();
   }
-  // --- END: Color Palette Functions ---
-
-    // --- START: Auto-CAPTCHA Solver ---
     async function handleCaptcha() {
         return new Promise(async (resolve, reject) => {
             if (!CONFIG.AUTO_CAPTCHA_ENABLED) {
@@ -1248,23 +1419,19 @@
             }
 
             try {
-                // Set a timeout for the entire operation
                 const timeoutPromise = Utils.sleep(20000).then(() => reject(new Error("Auto-CAPTCHA timed out.")));
 
                 const solvePromise = (async () => {
-                    // 1. Find and click the main "Paint" button on the screen
                     const mainPaintBtn = await Utils.waitForSelector('button.btn.btn-primary.btn-lg, button.btn-primary.sm\\:btn-xl', 200, 10000);
                     if (!mainPaintBtn) throw new Error("Could not find the main paint button.");
                     mainPaintBtn.click();
                     await Utils.sleep(500);
 
-                    // 2. Select the transparent color to avoid wasting a real color
                     const transBtn = await Utils.waitForSelector('button#color-0', 200, 5000);
                     if (!transBtn) throw new Error("Could not find the transparent color button.");
                     transBtn.click();
                     await Utils.sleep(500);
 
-                    // 3. Find the canvas and simulate a click
                     const canvas = await Utils.waitForSelector('canvas', 200, 5000);
                     if (!canvas) throw new Error("Could not find the canvas element.");
 
@@ -1280,7 +1447,6 @@
                     canvas.dispatchEvent(new KeyboardEvent('keyup', { key: ' ', code: 'Space', bubbles: true }));
                     await Utils.sleep(500);
 
-                    // 4. Find and click the confirmation button
                     let confirmBtn = await Utils.waitForSelector('button.btn.btn-primary.btn-lg, button.btn.btn-primary.sm\\:btn-xl');
                     if (!confirmBtn) {
                         const allPrimary = Array.from(document.querySelectorAll('button.btn-primary'));
@@ -1289,7 +1455,6 @@
                     if (!confirmBtn) throw new Error("Could not find the confirmation button.");
                     confirmBtn.click();
 
-                    // The fetch interceptor will capture the token. We wait for it.
                     await tokenPromise;
                     resolve();
                 })();
@@ -1302,56 +1467,11 @@
             }
         });
     }
-    // --- END: Auto-CAPTCHA Solver ---
-
-  // --- START: Overlay Management ---
-  async function initializeOverlay() {
-      state.gameCanvas = await Utils.waitForSelector('canvas');
-      if (!state.gameCanvas || document.getElementById('wplace-overlay-canvas')) {
-          console.log("Overlay not initialized (game canvas not found or overlay exists).");
-          return; // Already initialized or game canvas not found
-      }
-
-      state.overlayCanvas = document.createElement('canvas');
-      state.overlayCanvas.id = 'wplace-overlay-canvas';
-      state.overlayCtx = state.overlayCanvas.getContext('2d');
-
-      // Style the overlay
-      state.overlayCanvas.style.position = 'absolute';
-      state.overlayCanvas.style.pointerEvents = 'none';
-      state.overlayCanvas.style.zIndex = '1'; // Just above the game canvas
-      state.overlayCanvas.style.display = 'none';
-      state.overlayCanvas.style.imageRendering = 'pixelated'; // Keep pixels sharp
-
-      // Insert it into the DOM, right after the game canvas
-      state.gameCanvas.parentElement.insertBefore(state.overlayCanvas, state.gameCanvas.nextSibling);
-
-      const syncOverlay = () => {
-          if (!state.gameCanvas || !state.overlayCanvas) return;
-          // The canvas element's width/height attributes are the resolution
-          // The style width/height are the display size, but transform handles that.
-          state.overlayCanvas.width = state.gameCanvas.width;
-          state.overlayCanvas.height = state.gameCanvas.height;
-          // Copy position and transform to align perfectly
-          state.overlayCanvas.style.top = state.gameCanvas.offsetTop + 'px';
-          state.overlayCanvas.style.left = state.gameCanvas.offsetLeft + 'px';
-          state.overlayCanvas.style.transform = state.gameCanvas.style.transform;
-      };
-
-      // Use a MutationObserver to watch for style changes (pan/zoom)
-      const observer = new MutationObserver(syncOverlay);
-      observer.observe(state.gameCanvas, { attributes: true, attributeFilter: ['style', 'width', 'height'] });
-
-      syncOverlay(); // Initial sync
-      console.log("✅ Overlay Initialized.");
-  }
-  // --- END: Overlay Management ---
 
 
   async function createUI() {
     await detectLanguage()
 
-    // Clean up existing UI elements to prevent duplicates
     const existingContainer = document.getElementById("wplace-image-bot-container")
     const existingStats = document.getElementById("wplace-stats-container")
     const existingSettings = document.getElementById("wplace-settings-container")
@@ -1680,7 +1800,7 @@
             ? `linear-gradient(135deg, ${theme.accent} 0%, #4a4a4a 100%)`
             : theme.accent
         };
-        ${CONFIG.currentTheme === "Classic Autobot" ? `border: 1px solid rgba(255,255,255,0.1);` : ""}
+        ${CONFIG.currentTheme === "Classic Autobot" ? "border: 1px solid rgba(255,255,255,0.1);" : ""}
       }
 
       ${
@@ -1794,6 +1914,11 @@
       .wplace-btn:disabled::before {
         display: none;
       }
+      
+      .wplace-btn-overlay.active {
+        background: linear-gradient(135deg, #29b6f6 0%, #8e2de2 100%);
+        box-shadow: 0 0 15px #8e2de2;
+      }
 
       .wplace-stats {
         background: ${CONFIG.currentTheme === "Classic Autobot" ? "rgba(255,255,255,0.03)" : theme.secondary};
@@ -1827,7 +1952,6 @@
         color: ${theme.highlight};
       }
 
-      /* Styles for the new color display in stats */
       .wplace-colors-section {
         margin-top: 10px;
         padding-top: 8px;
@@ -1977,7 +2101,7 @@
           CONFIG.currentTheme === "Classic Autobot" ? "0 0 20px rgba(0,0,0,0.5)" : "0 0 30px rgba(0, 255, 65, 0.5)"
         };
         width: 90%;
-        max-width: 700px; /* Increased width */
+        max-width: 700px;
         max-height: 90%;
         overflow: auto;
         font-family: ${theme.fontFamily};
@@ -1995,7 +2119,7 @@
       }
 
       .resize-preview {
-        max-width: none; /* Allow image to exceed wrapper for zoom */
+        max-width: none;
         transition: transform 0.1s ease;
         image-rendering: pixelated;
         image-rendering: -moz-crisp-edges;
@@ -2052,7 +2176,7 @@
       }
       
       .resize-zoom-controls {
-        grid-column: 1 / -1; /* Span full width */
+        grid-column: 1 / -1;
         display: flex;
         align-items: center;
         gap: 10px;
@@ -2076,10 +2200,9 @@
         z-index: 9999;
         display: none;
       }
-      /* --- START: Color Palette Styles --- */
       .wplace-color-grid {
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); /* Wider columns for name */
+        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
         gap: 10px;
         padding-top: 8px;
       }
@@ -2136,9 +2259,7 @@
         background: rgba(255,255,255,0.1);
         margin: 8px 0;
       }
-      /* --- END: Color Palette Styles --- */
 
-        /* Cooldown slider styles */
         .wplace-cooldown-control {
             margin-top: 8px;
         }
@@ -2174,7 +2295,6 @@
       ${
         CONFIG.currentTheme === "Neon Retro"
           ? `
-      /* Retro checkbox styling */
       input[type="checkbox"] {
         -webkit-appearance: none;
         -moz-appearance: none;
@@ -2202,12 +2322,10 @@
         font-weight: bold;
       }
 
-      /* Icon styling for retro feel */
       .fas, .fa {
         filter: drop-shadow(0 0 3px currentColor);
       }
 
-      /* Speed Control Styles */
       .wplace-speed-control {
         margin-top: 12px;
         padding: 12px;
@@ -2290,7 +2408,6 @@
         opacity: 0.8;
       }
 
-      /* Settings Window Styles */
       #wplace-settings-container {
         position: fixed;
         top: 50%;
@@ -2602,6 +2719,12 @@
                 <span>${Utils.t("stopPainting")}</span>
               </button>
             </div>
+            <div class="wplace-row single">
+                <button id="toggleOverlayBtn" class="wplace-btn wplace-btn-overlay" disabled>
+                    <i class="fas fa-eye"></i>
+                    <span>${Utils.t("toggleOverlay")}</span>
+                </button>
+            </div>
           </div>
         </div>
 
@@ -2933,7 +3056,6 @@
           background: #4a5568;
         }
 
-        /* Dragging state styles */
         .wplace-dragging {
           opacity: 0.9;
           box-shadow: 0 30px 60px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.2);
@@ -2956,11 +3078,11 @@
       <h3 style="margin-top: 0; color: ${theme.text}">${Utils.t("resizeImage")}</h3>
       <div class="resize-controls">
         <label>
-          ${Utils.t("width")}: <span id="widthValue">0</span>px
+          Width: <span id="widthValue">0</span>px
           <input type="range" id="widthSlider" class="resize-slider" min="10" max="500" value="100">
         </label>
         <label>
-          ${Utils.t("height")}: <span id="heightValue">0</span>px
+          Height: <span id="heightValue">0</span>px
           <input type="range" id="heightSlider" class="resize-slider" min="10" max="500" value="100">
         </label>
         <label style="display: flex; align-items: center;">
@@ -2982,7 +3104,6 @@
           <img id="resizePreview" class="resize-preview" src="" alt="Resized image preview will appear here.">
       </div>
 
-      <!-- START: Moved Color Palette -->
       <div class="wplace-section" id="color-palette-section" style="margin-top: 15px;">
           <div class="wplace-section-title">
               <i class="fas fa-palette"></i>&nbsp;Color Palette
@@ -3001,7 +3122,6 @@
               <div id="colors-paid" class="wplace-color-grid"></div>
           </div>
       </div>
-      <!-- END: Moved Color Palette -->
 
       <div class="resize-buttons">
         <button id="downloadPreviewBtn" class="wplace-btn wplace-btn-primary">
@@ -3027,11 +3147,7 @@
     document.body.appendChild(resizeContainer)
     document.body.appendChild(statsContainer)
     document.body.appendChild(settingsContainer)
-    
-    // --- NEW: Initialize the canvas overlay ---
-    initializeOverlay();
 
-    // Query all UI elements after appending to DOM
     const uploadBtn = container.querySelector("#uploadBtn")
     const resizeBtn = container.querySelector("#resizeBtn")
     const selectPosBtn = container.querySelector("#selectPosBtn")
@@ -3044,6 +3160,7 @@
     const minimizeBtn = container.querySelector("#minimizeBtn")
     const compactBtn = container.querySelector("#compactBtn")
     const statsBtn = container.querySelector("#statsBtn")
+    const toggleOverlayBtn = container.querySelector("#toggleOverlayBtn");
     const statusText = container.querySelector("#statusText")
     const progressBar = container.querySelector("#progressBar")
     const statsArea = statsContainer.querySelector("#statsArea")
@@ -3053,7 +3170,6 @@
     const cooldownSlider = container.querySelector("#cooldownSlider");
     const cooldownValue = container.querySelector("#cooldownValue");
 
-    // Check if all elements are found
     if (!uploadBtn || !selectPosBtn || !startBtn || !stopBtn) {
       console.error("Some UI elements not found:", {
         uploadBtn: !!uploadBtn,
@@ -3073,7 +3189,6 @@
 
     const header = container.querySelector(".wplace-header")
 
-    // Use the shared makeDraggable function for consistency
     makeDraggable(container)
 
     function makeDraggable(element) {
@@ -3084,7 +3199,6 @@
       let isDragging = false
       const header = element.querySelector(".wplace-header") || element.querySelector(".wplace-settings-header")
 
-      // Check if header exists to prevent null error
       if (!header) {
         console.warn("No draggable header found for element:", element)
         return
@@ -3098,10 +3212,8 @@
         e.preventDefault()
         isDragging = true
 
-        // Get current position
         const rect = element.getBoundingClientRect()
 
-        // Remove transform and set absolute position
         element.style.transform = "none"
         element.style.top = rect.top + "px"
         element.style.left = rect.left + "px"
@@ -3112,7 +3224,6 @@
         document.onmouseup = closeDragElement
         document.onmousemove = elementDrag
 
-        // Prevent text selection during drag
         document.body.style.userSelect = "none"
       }
 
@@ -3128,7 +3239,6 @@
         let newTop = element.offsetTop - pos2
         let newLeft = element.offsetLeft - pos1
 
-        // Boundary checking to keep UI within viewport
         const rect = element.getBoundingClientRect()
         const maxTop = window.innerHeight - rect.height
         const maxLeft = window.innerWidth - rect.width
@@ -3149,13 +3259,9 @@
       }
     }
 
-    // Make stats container draggable
     makeDraggable(statsContainer)
-
-    // Make main container draggable
     makeDraggable(container)
 
-    // Stats window functionality
     if (statsBtn && closeStatsBtn) {
       statsBtn.addEventListener("click", () => {
         const isVisible = statsContainer.style.display !== "none"
@@ -3176,7 +3282,6 @@
         statsBtn.title = "Show Stats"
       })
 
-      // Refresh charges button
       if (refreshChargesBtn) {
         refreshChargesBtn.addEventListener("click", async () => {
           refreshChargesBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>'
@@ -3194,7 +3299,6 @@
       }
     }
 
-    // Settings window functionality
     const settingsBtn = container.querySelector("#settingsBtn")
     const closeSettingsBtn = settingsContainer.querySelector("#closeSettingsBtn")
     const applySettingsBtn = settingsContainer.querySelector("#applySettingsBtn");
@@ -3204,14 +3308,12 @@
       settingsBtn.addEventListener("click", () => {
         const isVisible = settingsContainer.style.display !== "none"
         if (isVisible) {
-          // Add fade out animation
           settingsContainer.style.animation = "settingsFadeOut 0.3s ease-out forwards"
           setTimeout(() => {
             settingsContainer.style.display = "none"
             settingsContainer.style.animation = ""
           }, 300)
         } else {
-          // Reset position to center before showing
           settingsContainer.style.top = "50%"
           settingsContainer.style.left = "50%"
           settingsContainer.style.transform = "translate(-50%, -50%)"
@@ -3221,12 +3323,10 @@
       })
 
       closeSettingsBtn.addEventListener("click", () => {
-        // Add fade out animation
         settingsContainer.style.animation = "settingsFadeOut 0.3s ease-out forwards"
         setTimeout(() => {
           settingsContainer.style.display = "none"
           settingsContainer.style.animation = ""
-          // Reset position for next time
           settingsContainer.style.top = "50%"
           settingsContainer.style.left = "50%"
           settingsContainer.style.transform = "translate(-50%, -50%)"
@@ -3236,14 +3336,11 @@
       applySettingsBtn.addEventListener("click", () => {
         saveBotSettings();
         Utils.showAlert(Utils.t("settingsSaved"), "success");
-        // Close settings window after applying
         closeSettingsBtn.click();
       });
 
-      // Make settings window draggable
       makeDraggable(settingsContainer)
 
-      // Language selector event listener
       const languageSelect = settingsContainer.querySelector("#languageSelect")
       if (languageSelect) {
         languageSelect.addEventListener("change", (e) => {
@@ -3251,18 +3348,13 @@
           state.language = newLanguage
           localStorage.setItem('wplace_language', newLanguage)
 
-          // Refresh the UI to apply new language
           setTimeout(() => {
-            // Hide settings first
             settingsContainer.style.display = "none"
-
-            // Recreate UI with new language (cleanup is handled in createUI)
             createUI()
           }, 100)
         })
       }
 
-      // Theme selector event listener
       const themeSelect = settingsContainer.querySelector("#themeSelect")
       if (themeSelect) {
         themeSelect.addEventListener("change", (e) => {
@@ -3271,7 +3363,6 @@
         })
       }
 
-      // Theme customization event listeners
       const primaryColor = settingsContainer.querySelector("#primaryColor")
       const primaryColorText = settingsContainer.querySelector("#primaryColorText")
       const secondaryColor = settingsContainer.querySelector("#secondaryColor")
@@ -3283,7 +3374,6 @@
       const applyChangesBtn = settingsContainer.querySelector("#applyThemeChanges")
       const resetDefaultsBtn = settingsContainer.querySelector("#resetThemeDefaults")
 
-      // Color input synchronization
       if (primaryColor && primaryColorText) {
         primaryColor.addEventListener("input", (e) => {
           primaryColorText.value = e.target.value
@@ -3317,20 +3407,17 @@
         })
       }
 
-      // Border radius slider
       if (borderRadiusSlider && borderRadiusValue) {
         borderRadiusSlider.addEventListener("input", (e) => {
           borderRadiusValue.textContent = e.target.value + "px"
         })
       }
 
-      // Apply theme changes
       if (applyChangesBtn) {
         applyChangesBtn.addEventListener("click", () => {
           const currentTheme = getCurrentTheme()
           const currentThemeName = CONFIG.currentTheme
 
-          // Get all values
           const newValues = {
             primary: primaryColorText?.value || currentTheme.primary,
             secondary: secondaryColorText?.value || currentTheme.secondary,
@@ -3343,13 +3430,11 @@
             }
           }
 
-          // Update theme
           CONFIG.THEMES[currentThemeName] = {
             ...currentTheme,
             ...newValues
           }
 
-          // Save and apply
           saveThemePreference()
           setTimeout(() => {
             settingsContainer.style.display = "none"
@@ -3358,13 +3443,10 @@
         })
       }
 
-      // Reset to defaults
       if (resetDefaultsBtn) {
         resetDefaultsBtn.addEventListener("click", () => {
-          // Reset to original theme values (you'll need to store defaults)
           const confirmReset = confirm("Reset theme to default settings?")
           if (confirmReset) {
-            // Reload original theme (this is a simplified approach)
             location.reload()
           }
         })
@@ -3383,7 +3465,6 @@
     const cancelResize = resizeContainer.querySelector("#cancelResize")
     const downloadPreviewBtn = resizeContainer.querySelector("#downloadPreviewBtn");
 
-    // Compact mode functionality
     if (compactBtn) {
       compactBtn.addEventListener("click", () => {
         container.classList.toggle("wplace-compact")
@@ -3399,7 +3480,6 @@
       })
     }
 
-    // Minimize functionality
     if (minimizeBtn) {
       minimizeBtn.addEventListener("click", () => {
         state.minimized = !state.minimized
@@ -3414,11 +3494,18 @@
           minimizeBtn.innerHTML = '<i class="fas fa-minus"></i>'
           minimizeBtn.title = "Minimize"
         }
-        saveBotSettings() // Save minimize state
+        saveBotSettings()
       })
     }
+    
+    if (toggleOverlayBtn) {
+        toggleOverlayBtn.addEventListener('click', () => {
+            const isEnabled = overlayManager.toggle();
+            toggleOverlayBtn.classList.toggle('active', isEnabled);
+            Utils.showAlert(`Overlay ${isEnabled ? 'enabled' : 'disabled'}.`, 'info');
+        });
+    }
 
-    // Initialize UI state based on current state
     if (state.minimized) {
       container.classList.add("wplace-minimized")
       content.classList.add("wplace-hidden")
@@ -3435,7 +3522,6 @@
       }
     }
 
-    // Save progress functionality
     if (saveBtn) {
       saveBtn.addEventListener("click", () => {
         if (!state.imageLoaded) {
@@ -3453,7 +3539,6 @@
       })
     }
 
-    // Load progress functionality
     if (loadBtn) {
       loadBtn.addEventListener("click", () => {
         const savedData = Utils.loadProgress()
@@ -3463,7 +3548,6 @@
           return
         }
 
-        // Show confirmation dialog
         const confirmLoad = confirm(
           `${Utils.t("savedDataFound")}\n\n` +
             `Saved: ${new Date(savedData.timestamp).toLocaleString()}\n` +
@@ -3477,11 +3561,9 @@
             Utils.showAlert(Utils.t("dataLoaded"), "success")
             updateDataButtons()
 
-            // Check charges immediately after loading auto-save
             updateStats()
 
             if (!state.colorsChecked) {
-              // Re-run color check automatically if loaded data is missing it
                 uploadBtn.disabled = false;
             } else {
                 uploadBtn.disabled = false;
@@ -3498,7 +3580,6 @@
       })
     }
 
-    // Save to file functionality
     if (saveToFileBtn) {
       saveToFileBtn.addEventListener("click", () => {
         const success = Utils.saveProgressToFile()
@@ -3511,7 +3592,6 @@
       })
     }
 
-    // Load from file functionality
     if (loadFromFileBtn) {
       loadFromFileBtn.addEventListener("click", async () => {
         try {
@@ -3521,10 +3601,8 @@
             Utils.showAlert(Utils.t("fileLoaded"), "success")
             updateDataButtons()
 
-            // Check charges immediately after loading file
             await updateStats()
 
-            // Auto-enable buttons after loading from file
             if (state.colorsChecked) {
               uploadBtn.disabled = false
               selectPosBtn.disabled = false
@@ -3560,14 +3638,12 @@
         const { charges, cooldown, max } = await WPlaceService.getCharges();
         state.currentCharges = Math.floor(charges);
         state.cooldown = cooldown;
-        state.maxCharges = Math.floor(max) > 1 ? Math.floor(max) : state.maxCharges; // Update max charges if we get a valid number
+        state.maxCharges = Math.floor(max) > 1 ? Math.floor(max) : state.maxCharges;
 
-        // Update cooldown slider max value if it has changed
         if (cooldownSlider.max != state.maxCharges) {
             cooldownSlider.max = state.maxCharges;
         }
 
-        // --- Generate HTML for Image-Specific Stats ---
         let imageStatsHTML = '';
         if (state.imageLoaded) {
             const progress = state.totalPixels > 0 ? Math.round((state.paintedPixels / state.totalPixels) * 100) : 0;
@@ -3591,7 +3667,6 @@
             `;
         }
 
-        // --- Generate HTML for Available Colors ---
         let colorSwatchesHTML = '';
         if (state.colorsChecked) {
             colorSwatchesHTML = state.availableColors.map(color => {
@@ -3600,7 +3675,6 @@
             }).join('');
         }
 
-        // --- Combine all stats and update the panel ---
         statsArea.innerHTML = `
             ${imageStatsHTML}
             <div class="wplace-stat-item">
@@ -3618,33 +3692,28 @@
         `;
     }
 
-    // Helper function to update data management buttons
     updateDataButtons = () => {
       const hasImageData = state.imageLoaded && state.imageData
       saveBtn.disabled = !hasImageData
       saveToFileBtn.disabled = !hasImageData
     }
 
-    // Initialize data buttons state
     updateDataButtons()
 
     function showResizeDialog(processor) {
-        if (state.overlayCanvas) {
-            state.overlayCanvas.style.display = 'block';
-        }
         const { width, height } = processor.getDimensions();
         const aspectRatio = width / height;
 
         widthSlider.value = width;
         heightSlider.value = height;
-        widthSlider.max = width * 2; // Set a reasonable max
-        heightSlider.max = height * 2; // Set a reasonable max
+        widthSlider.max = width * 2;
+        heightSlider.max = height * 2;
         widthValue.textContent = width;
         heightValue.textContent = height;
         zoomSlider.value = 1;
         paintWhiteToggle.checked = state.paintWhitePixels;
 
-        _updateResizePreview = () => {
+        _updateResizePreview = async () => {
             const newWidth = parseInt(widthSlider.value, 10);
             const newHeight = parseInt(heightSlider.value, 10);
             const zoomLevel = parseFloat(zoomSlider.value);
@@ -3666,7 +3735,7 @@
                 const r = data[i], g = data[i + 1], b = data[i + 2], a = data[i + 3];
 
                 if (a < CONFIG.TRANSPARENCY_THRESHOLD || (!state.paintWhitePixels && Utils.isWhitePixel(r, g, b))) {
-                    data[i + 3] = 0; // Make transparent
+                    data[i + 3] = 0;
                     continue;
                 }
 
@@ -3677,22 +3746,11 @@
                 data[i + 3] = 255;
             }
             tempCtx.putImageData(imgData, 0, 0);
-
-            // Update the preview image in the dialog
             resizePreview.src = tempCanvas.toDataURL();
             resizePreview.style.transform = `scale(${zoomLevel})`;
-
-            // --- NEW: Update the main canvas overlay ---
-            if (state.overlayCanvas && state.overlayCtx && state.startPosition) {
-                state.overlayCtx.clearRect(0, 0, state.overlayCanvas.width, state.overlayCanvas.height);
-                state.overlayCtx.globalAlpha = 0.6; // Make it semi-transparent
-                state.overlayCtx.imageSmoothingEnabled = false;
-                
-                // Draw the preview canvas onto the overlay at the selected start position
-                state.overlayCtx.drawImage(tempCanvas, state.startPosition.x, state.startPosition.y);
-                
-                state.overlayCtx.globalAlpha = 1.0;
-            }
+            
+            const finalImageBitmap = await createImageBitmap(tempCanvas);
+            await overlayManager.setImage(finalImageBitmap);
         };
 
         const onWidthInput = () => {
@@ -3718,7 +3776,7 @@
         widthSlider.addEventListener("input", onWidthInput);
         heightSlider.addEventListener("input", onHeightInput);
 
-        confirmResize.onclick = () => {
+        confirmResize.onclick = async () => {
             const newWidth = parseInt(widthSlider.value, 10);
             const newHeight = parseInt(heightSlider.value, 10);
             const newPixels = processor.resize(newWidth, newHeight);
@@ -3739,6 +3797,11 @@
             state.totalPixels = totalValidPixels;
             state.paintedPixels = 0;
 
+            const finalImageBitmap = await createImageBitmap(processor.canvas);
+            await overlayManager.setImage(finalImageBitmap);
+            overlayManager.enable();
+            toggleOverlayBtn.classList.add('active');
+
             updateStats();
             updateUI("resizeSuccess", "success", { width: newWidth, height: newHeight });
             closeResizeDialog();
@@ -3755,30 +3818,24 @@
 
         resizeOverlay.style.display = "block";
         resizeContainer.style.display = "block";
-        _updateResizePreview(); // Initial preview
+        _updateResizePreview();
     }
 
     function closeResizeDialog() {
-        if (state.overlayCanvas) {
-            state.overlayCtx.clearRect(0, 0, state.overlayCanvas.width, state.overlayCanvas.height);
-            state.overlayCanvas.style.display = 'none';
-        }
         resizeOverlay.style.display = "none";
         resizeContainer.style.display = "none";
-        _updateResizePreview = () => {}; // Clear the function to prevent memory leaks
+        _updateResizePreview = () => {};
     }
 
     if (uploadBtn) {
       uploadBtn.addEventListener("click", async () => {
-        // --- NEW LOGIC: Check for colors FIRST ---
         const availableColors = Utils.extractAvailableColors();
         if (availableColors.length < 10) {
             updateUI("noColorsFound", "error");
             Utils.showAlert(Utils.t("noColorsFound"), "error");
-            return; // Stop the function here
+            return;
         }
 
-        // --- If check passes, run the rest of the logic ---
         if (!state.colorsChecked) {
             state.availableColors = availableColors;
             state.colorsChecked = true;
@@ -3790,7 +3847,7 @@
         try {
           updateUI("loadingImage", "default")
           const imageSrc = await Utils.createImageUploader()
-          if (!imageSrc) { // User cancelled the file dialog
+          if (!imageSrc) { 
               updateUI("colorsFound", "success", { count: state.availableColors.length });
               return;
           }
@@ -3823,6 +3880,12 @@
           state.imageLoaded = true
           state.lastPosition = { x: 0, y: 0 }
 
+          const imageBitmap = await createImageBitmap(processor.img);
+          await overlayManager.setImage(imageBitmap);
+          overlayManager.enable();
+          toggleOverlayBtn.disabled = false;
+          toggleOverlayBtn.classList.add('active');
+
           resizeBtn.disabled = false
           saveBtn.disabled = false
 
@@ -3859,9 +3922,7 @@
         Utils.showAlert(Utils.t("selectPositionAlert"), "info")
         updateUI("waitingPosition", "default")
 
-        const originalFetch = window.fetch
-
-        window.fetch = async (url, options) => {
+        const tempFetch = async (url, options) => {
           if (
             typeof url === "string" &&
             url.includes("https://backend.wplace.live/s0/pixel/") &&
@@ -3889,6 +3950,8 @@
                   }
                   state.lastPosition = { x: 0, y: 0 }
 
+                  await overlayManager.setPosition(state.startPosition, state.region);
+
                   if (state.imageLoaded) {
                     startBtn.disabled = false
                   }
@@ -3907,6 +3970,9 @@
           return originalFetch(url, options)
         }
 
+        const originalFetch = window.fetch;
+        window.fetch = tempFetch;
+
         setTimeout(() => {
           if (state.selectingPosition) {
             window.fetch = originalFetch
@@ -3918,15 +3984,13 @@
       })
     }
 
-    // Function to start painting (can be called programmatically)
     async function startPainting() {
       if (!state.imageLoaded || !state.startPosition || !state.region) {
         updateUI("missingRequirements", "error")
         return false
       }
-  // Ensure we have a valid token before starting
-  await ensureToken()
-  if (!turnstileToken) return false
+      await ensureToken()
+      if (!turnstileToken) return false
 
       state.running = true
       state.stopFlag = false
@@ -3936,6 +4000,7 @@
       selectPosBtn.disabled = true
       resizeBtn.disabled = true
       saveBtn.disabled = true
+      toggleOverlayBtn.disabled = true;
 
       updateUI("startPaintingMsg", "success")
 
@@ -3958,6 +4023,7 @@
         } else {
           startBtn.disabled = false
         }
+        toggleOverlayBtn.disabled = false;
       }
     }
 
@@ -3972,7 +4038,6 @@
         stopBtn.disabled = true
         updateUI("paintingStopped", "warning")
 
-        // Auto save when stopping
         if (state.imageLoaded && state.paintedPixels > 0) {
           Utils.saveProgress()
           Utils.showAlert(Utils.t("autoSaved"), "success")
@@ -3980,7 +4045,6 @@
       })
     }
 
-    // Check for saved progress on startup
     const checkSavedProgress = () => {
       const savedData = Utils.loadProgress()
       if (savedData && savedData.state.paintedPixels > 0) {
@@ -3997,24 +4061,19 @@
       }
     }
 
-    // Check for saved progress after a short delay to let UI settle
     setTimeout(checkSavedProgress, 1000)
 
-    // Cooldown slider event listener
     if (cooldownSlider && cooldownValue) {
         cooldownSlider.addEventListener("input", (e) => {
             const threshold = parseInt(e.target.value);
             state.cooldownChargeThreshold = threshold;
             cooldownValue.textContent = threshold;
-            saveBotSettings(); // Save immediately on change for convenience
+            saveBotSettings();
         });
     }
 
-    // Settings listeners are inside the settings button block...
-    // Let's call loadBotSettings here to apply saved settings.
     loadBotSettings();
     
-    // --- Initialize Color Palette UI ---
     initializeColorPalette(resizeContainer);
   }
 
@@ -4058,16 +4117,13 @@
               continue;
           }
 
-      // Step 1: Quantize source pixel to the user's selected palette (with white bias)
       let targetRgb;
       if (Utils.isWhitePixel(r, g, b)) {
-        // Force pure white for white-ish pixels to avoid drifting to yellowish tones
         targetRgb = [255, 255, 255];
       } else {
         targetRgb = Utils.findClosestPaletteColor(r, g, b, state.activeColorPalette);
       }
 
-          // Step 2: Find the closest available in-game color to the quantized color
           const colorId = findClosestColor(targetRgb, state.availableColors);
 
           const pixelX = startX + x
@@ -4089,7 +4145,6 @@
                     updateUI("captchaSolving", "warning");
                     try {
                         await handleCaptcha();
-                        // Retry the batch with the new token
                         success = await sendPixelBatch(pixelBatch, regionX, regionY);
                         if (success === "token_error") {
                            updateUI("captchaFailed", "error");
@@ -4122,15 +4177,13 @@
                 total: state.totalPixels,
               })
 
-              // Auto-save progress every 50 pixels
               if (state.paintedPixels % 50 === 0) {
                 Utils.saveProgress()
               }
 
-              // Apply painting speed delay if enabled
               if (CONFIG.PAINTING_SPEED_ENABLED && state.paintingSpeed > 0 && pixelBatch.length > 0) {
-                const delayPerPixel = 1000 / state.paintingSpeed // ms per pixel
-                const totalDelay = Math.max(100, delayPerPixel * pixelBatch.length) // minimum 100ms
+                const delayPerPixel = 1000 / state.paintingSpeed
+                const totalDelay = Math.max(100, delayPerPixel * pixelBatch.length)
                 await Utils.sleep(totalDelay)
               }
             }
@@ -4138,7 +4191,6 @@
             pixelBatch = []
           }
 
-            // New Cooldown Logic - check if we need to wait for more charges
             while (state.currentCharges < state.cooldownChargeThreshold && !state.stopFlag) {
                 const { charges, cooldown } = await WPlaceService.getCharges();
                 state.currentCharges = Math.floor(charges);
@@ -4170,10 +4222,9 @@
             state.paintedPixels++
           })
           state.currentCharges -= pixelBatch.length
-          // Apply painting speed delay for remaining pixels if enabled
           if (CONFIG.PAINTING_SPEED_ENABLED && state.paintingSpeed > 0 && pixelBatch.length > 0) {
-            const delayPerPixel = 1000 / state.paintingSpeed // ms per pixel
-            const totalDelay = Math.max(100, delayPerPixel * pixelBatch.length) // minimum 100ms
+            const delayPerPixel = 1000 / state.paintingSpeed
+            const totalDelay = Math.max(100, delayPerPixel * pixelBatch.length)
             await Utils.sleep(totalDelay)
           }
         }
@@ -4185,14 +4236,18 @@
 
     if (state.stopFlag) {
       updateUI("paintingStopped", "warning")
-      // Save progress when stopped
       Utils.saveProgress()
     } else {
       updateUI("paintingComplete", "success", { count: state.paintedPixels })
       state.lastPosition = { x: 0, y: 0 }
       state.paintedMap = null
-      // Clear saved data when completed
       Utils.clearProgress()
+      overlayManager.clear();
+      const toggleOverlayBtn = document.getElementById('toggleOverlayBtn');
+      if (toggleOverlayBtn) {
+          toggleOverlayBtn.classList.remove('active');
+          toggleOverlayBtn.disabled = true;
+      }
     }
 
     updateStats()
@@ -4204,7 +4259,6 @@
     return "token_error"
   }
 
-    // Pre-allocate arrays for performance
     const coords = new Array(pixelBatch.length * 2)
     const colors = new Array(pixelBatch.length)
     for (let i = 0; i < pixelBatch.length; i++) {
@@ -4228,7 +4282,6 @@
         let data = null
         try { data = await res.json() } catch (_) {}
         console.error("❌ 403 Forbidden. Turnstile token might be invalid or expired.")
-        // Reset token & create new promise to await fresh token
         turnstileToken = null
         tokenPromise = new Promise((resolve) => { _resolveToken = resolve })
         return "token_error"
@@ -4250,7 +4303,6 @@
                 cooldownChargeThreshold: state.cooldownChargeThreshold,
                 minimized: state.minimized,
             };
-            // Update global config from UI elements before saving
             CONFIG.PAINTING_SPEED_ENABLED = settings.paintingSpeedEnabled;
             CONFIG.AUTO_CAPTCHA_ENABLED = settings.autoCaptchaEnabled;
 
@@ -4266,14 +4318,12 @@
             if (!saved) return;
             const settings = JSON.parse(saved);
 
-            // Apply settings
             state.paintingSpeed = settings.paintingSpeed || CONFIG.PAINTING_SPEED.DEFAULT;
             state.cooldownChargeThreshold = settings.cooldownChargeThreshold || CONFIG.COOLDOWN_CHARGE_THRESHOLD;
             state.minimized = settings.minimized ?? false;
             CONFIG.PAINTING_SPEED_ENABLED = settings.paintingSpeedEnabled ?? false;
             CONFIG.AUTO_CAPTCHA_ENABLED = settings.autoCaptchaEnabled ?? false;
 
-            // Update UI elements after they are created
             const speedSlider = document.getElementById('speedSlider');
             if (speedSlider) speedSlider.value = state.paintingSpeed;
             const speedValue = document.getElementById('speedValue');