From 287471ea3971fd893087fcfd2d97067de8f68c24 Mon Sep 17 00:00:00 2001
From: pepaskopec-blip <skopecjosef10@sssvt.cz>
Date: Sun, 18 Oct 2026 22:52:26 +0200
Subject: [PATCH] Match Snake and BatchGym previews to the light theme.

The arcade and terminal cards were stuck on dark colors after switching theme.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 projects.html |  4 ++--
 script.js     | 28 +++++++++++++++++++++++++---
 style.css     | 35 +++++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/projects.html b/projects.html
index 4c5fa04..6bcb144 100644
--- a/projects.html
+++ b/projects.html
@@ -34,7 +34,7 @@
       }
     })();
   </script>
-  <link rel="stylesheet" href="style.css?v=20261025">
+  <link rel="stylesheet" href="style.css?v=20261026">
   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
@@ -633,6 +633,6 @@
     </div>
   </footer>
 
-  <script src="script.js?v=20261022" defer></script>
+  <script src="script.js?v=20261026" defer></script>
 </body>
 </html>
diff --git a/script.js b/script.js
index baa064c..a8e0ba6 100644
--- a/script.js
+++ b/script.js
@@ -218,11 +218,29 @@
       }
     };
 
+    const snakePalette = () => {
+      const light = document.documentElement.dataset.theme === "light";
+      return light
+        ? {
+            grid: "rgba(17, 21, 28, 0.08)",
+            food: "#dc3c11",
+            head: "#11151c",
+            body: "179, 47, 8",
+          }
+        : {
+            grid: "rgba(238, 242, 246, 0.04)",
+            food: "#ff4a1c",
+            head: "#eef2f6",
+            body: "255, 122, 82",
+          };
+    };
+
     const drawSnake = () => {
       if (!ctx) return;
+      const palette = snakePalette();
       ctx.clearRect(0, 0, snakeCanvas.width, snakeCanvas.height);
 
-      ctx.strokeStyle = "rgba(238, 242, 246, 0.04)";
+      ctx.strokeStyle = palette.grid;
       ctx.lineWidth = 1;
       for (let x = 0; x <= cols; x++) {
         ctx.beginPath();
@@ -237,14 +255,14 @@
         ctx.stroke();
       }
 
-      ctx.fillStyle = "#ff4a1c";
+      ctx.fillStyle = palette.food;
       ctx.beginPath();
       ctx.arc(food.x * cell + cell / 2, food.y * cell + cell / 2, 4.5, 0, Math.PI * 2);
       ctx.fill();
 
       snake.forEach((seg, idx) => {
         const alpha = Math.max(0.28, 1 - idx * 0.09);
-        ctx.fillStyle = idx === 0 ? "#eef2f6" : `rgba(255, 122, 82, ${alpha})`;
+        ctx.fillStyle = idx === 0 ? palette.head : `rgba(${palette.body}, ${alpha})`;
         ctx.fillRect(seg.x * cell + 2, seg.y * cell + 2, cell - 4, cell - 4);
       });
     };
@@ -296,6 +314,10 @@
     if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
       setInterval(stepSnake, 180);
     }
+    new MutationObserver(drawSnake).observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme"],
+    });
   }
 
   const revealItems = document.querySelectorAll(".reveal");
diff --git a/style.css b/style.css
index 6f1a4dc..a9d0802 100644
--- a/style.css
+++ b/style.css
@@ -1590,6 +1590,17 @@ a:hover {
   color: var(--accent-ink);
 }
 
+:root[data-theme="light"] .mock-arcade {
+  background: #f4f6f8;
+  box-shadow: 0 14px 30px rgba(17, 21, 28, 0.08);
+}
+
+:root[data-theme="light"] .mock-arcade-hud {
+  color: var(--ink-soft);
+  background: rgba(17, 21, 28, 0.04);
+  border-bottom-color: var(--line);
+}
+
 .snake-canvas {
   display: block;
   width: 100%;
@@ -1658,6 +1669,30 @@ a:hover {
   background: var(--accent);
 }
 
+:root[data-theme="light"] .mock-terminal {
+  background: #f7f8fa;
+  box-shadow: 0 14px 30px rgba(17, 21, 28, 0.08);
+}
+
+:root[data-theme="light"] .mock-terminal-bar {
+  color: var(--muted);
+  background: #eef1f4;
+  border-bottom-color: var(--line);
+}
+
+:root[data-theme="light"] .mock-terminal-body {
+  color: var(--ink-soft);
+}
+
+:root[data-theme="light"] .term-stats,
+:root[data-theme="light"] .term-log {
+  color: var(--muted);
+}
+
+:root[data-theme="light"] .term-prompt {
+  color: var(--ink);
+}
+
 /* Terra challenge preview */
 .mock-terra {
   width: 100%;