From d66c1dfc024cb6f2e8be7cbbf530db1ae3eacedf Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Mon, 25 May 2026 00:51:53 -0400
Subject: [PATCH] Fix DOM structure and Klondike mode regressions

---
 index.html | 24 ++++++++++++++++--------
 script.js  | 15 ++++++++-------
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 1df7980..0eb11d1 100644
--- a/index.html
+++ b/index.html
@@ -84,13 +84,18 @@
     <div id="win-message" class="hidden">You Won! 🎉</div>
 
     <div id="card-back-modal" class="modal hidden">
-    ...
+      <div class="modal-overlay"></div>
+      <div class="modal-content">
+        <h2>Choose Card Back</h2>
+        <div class="card-back-options" id="card-back-options"></div>
+        <button id="modal-close-btn" class="btn">Close</button>
+      </div>
     </div>
-    </div>
-  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-  <script src="script.js"></script>
-  <script src="pyramid.js"></script>
-  <script>
+
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script src="script.js"></script>
+    <script src="pyramid.js"></script>
+    <script>
     // Global switcher logic
     (function() {
       const switcher = document.getElementById('game-mode-select');
@@ -112,7 +117,10 @@
           klondikeControls.classList.remove('hidden');
         }
         localStorage.setItem('solitaire-mode', mode);
-        document.dispatchEvent(new CustomEvent('gameModeChanged', { detail: mode }));
+        // Dispatch event after a tiny delay to ensure DOM classes are applied
+        setTimeout(() => {
+            document.dispatchEvent(new CustomEvent('gameModeChanged', { detail: mode }));
+        }, 0);
       }
 
       switcher.addEventListener('change', (e) => switchMode(e.target.value));
@@ -121,6 +129,6 @@
       switcher.value = savedMode;
       switchMode(savedMode);
     })();
-  </script>
+    </script>
 </body>
 </html>
diff --git a/script.js b/script.js
index 7019fb8..7ae1107 100644
--- a/script.js
+++ b/script.js
@@ -33,7 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
     ];
 
     // ====== DOM ======
-    const gameBoard = document.querySelector('.game-board');
+    const klondikeBoard = document.getElementById('klondike-board');
     const restartBtn = document.getElementById('restart-btn');
     const winMessage = document.getElementById('win-message');
     const undoBtn = document.getElementById('undo-btn');
@@ -76,7 +76,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (!cardElements[cardData.id]) {
                     const el = createCardElement(cardData);
                     cardElements[cardData.id] = el;
-                    gameBoard.appendChild(el);
+                    klondikeBoard.appendChild(el);
                 }
             });
             winMessage.classList.add('hidden');
@@ -126,12 +126,12 @@ document.addEventListener('DOMContentLoaded', () => {
         deck.forEach(cardData => {
             const el = createCardElement(cardData);
             cardElements[cardData.id] = el;
-            gameBoard.appendChild(el);
+            klondikeBoard.appendChild(el);
             // Initially position cards at the stock location to animate out from there
             const stockEl = document.getElementById('stock');
             if (stockEl) {
                 const rect = stockEl.getBoundingClientRect();
-                const boardRect = gameBoard.getBoundingClientRect();
+                const boardRect = klondikeBoard.getBoundingClientRect();
                 el.style.top = `${rect.top - boardRect.top + PILE_BORDER_WIDTH}px`;
                 el.style.left = `${rect.left - boardRect.left + PILE_BORDER_WIDTH}px`;
             }
@@ -159,7 +159,7 @@ document.addEventListener('DOMContentLoaded', () => {
     async function dealTableauSequentially(cardsToDeal) {
         isDealing = true;
         // Turn off interactivity during deal
-        gameBoard.style.pointerEvents = 'none';
+        klondikeBoard.style.pointerEvents = 'none';
 
         for (let i = 0; i < cardsToDeal.length; i++) {
             const { card, pileIndex } = cardsToDeal[i];
@@ -173,15 +173,16 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         isDealing = false;
-        gameBoard.style.pointerEvents = 'auto';
+        klondikeBoard.style.pointerEvents = 'auto';
         updateBoard();
         saveGame();
     }
 
     // ====== RENDER ======
     function updateBoard(initial=false) {
+        if (!isActive) return;
         updateScoreDisplay();
-        const gameBoardRect = gameBoard.getBoundingClientRect();
+        const gameBoardRect = klondikeBoard.getBoundingClientRect();
         const updatePile = (pileData, pileEl, type) => {
             if (!pileEl) return;
             const { top, left } = pileEl.getBoundingClientRect();