From ea4faa9fcfc9b2fe9171f776277d392181e0b3d7 Mon Sep 17 00:00:00 2001
From: chris <chris@chrisedwards.tech>
Date: Mon, 25 May 2026 01:05:23 -0400
Subject: [PATCH] Fix mobile scaling gap and remove hardcoded card opacity

---
 pyramid.css | 4 ++++
 pyramid.js  | 8 +++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/pyramid.css b/pyramid.css
index 783a7a0..f732dda 100644
--- a/pyramid.css
+++ b/pyramid.css
@@ -21,6 +21,10 @@
     z-index: 100;
 }
 
+.pyramid-layout .card:not(.is-exposed) {
+    filter: brightness(0.9) grayscale(0.2);
+}
+
 .pyramid-bottom-piles {
     display: flex;
     width: 100%;
diff --git a/pyramid.js b/pyramid.js
index 58fd697..561990e 100644
--- a/pyramid.js
+++ b/pyramid.js
@@ -152,11 +152,13 @@
 
         const rootStyle = getComputedStyle(document.documentElement);
         let cardWidth = parseFloat(rootStyle.getPropertyValue('--card-width'));
+        let horizontalGap = parseFloat(rootStyle.getPropertyValue('--gap'));
+        
         if (isNaN(cardWidth) || cardWidth === 0) cardWidth = 80;
+        if (isNaN(horizontalGap)) horizontalGap = 10;
 
         const cardHeight = cardWidth * 1.4;
         const rowOverlap = 0.45;
-        const horizontalGap = cardWidth * 0.15; // Proportional gap
 
         const boardTop = boardRect.top;
         const boardLeft = boardRect.left;
@@ -186,8 +188,8 @@
                     // Mark if it's currently playable for visual feedback
                     const exposed = isExposed(card.id);
                     el.classList.toggle('is-exposed', exposed);
-                    el.style.opacity = exposed ? '1' : '0.85';
-                    // el.style.filter = exposed ? 'none' : 'brightness(0.8)'; // Optional: dim unexposed cards
+                    // Remove hardcoded opacity, handle via CSS if needed
+                    el.style.opacity = '1';
                 }
                 index++;
             }