From b7221327c2b1ad2227e8e04c35b16fde19d5986b Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Fri, 20 Feb 2026 03:05:59 -0500
Subject: [PATCH] style: Add shadow-receiving ground plane and update UI colors
 for improved consistency and depth

---
 client/src/components/Map3D.jsx | 54 +++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Map3D.jsx b/client/src/components/Map3D.jsx
index f5afd02..2d7d141 100644
--- a/client/src/components/Map3D.jsx
+++ b/client/src/components/Map3D.jsx
@@ -1231,6 +1231,12 @@ function Scene({ interactionMode, onInteraction }) {
         color="#8ec5fc"
       />
 
+      {/* Shadow-receiving ground plane */}
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.01, 0]} receiveShadow>
+        <planeGeometry args={[200, 200]} />
+        <shadowMaterial transparent opacity={0.3} />
+      </mesh>
+
       {/* Grid */}
       <Grid
         args={[100, 100]}
@@ -1325,12 +1331,12 @@ function InteractionToolbar({ mode, setMode, lastInteraction }) {
       transform: 'translateX(-50%)',
       display: 'flex',
       gap: '4px',
-      background: 'rgba(15, 23, 42, 0.9)',
+      background: '#3b3b3b',
       padding: '6px',
-      borderRadius: '12px',
-      border: '1px solid rgba(100, 116, 139, 0.3)',
+      border: '2px solid #1a1a1a',
+      boxShadow: 'inset 0 2px 0 #555, inset 0 -2px 0 #2a2a2a, 0 4px 12px rgba(0,0,0,0.5)',
       zIndex: 10,
-      backdropFilter: 'blur(10px)',
+      fontFamily: "'Silkscreen', 'Courier New', monospace",
     }}>
       {modes.map(m => (
         <button
@@ -1339,16 +1345,20 @@ function InteractionToolbar({ mode, setMode, lastInteraction }) {
           title={m.desc}
           style={{
             padding: '8px 14px',
-            borderRadius: '8px',
-            border: mode === m.key ? '2px solid #3b82f6' : '1px solid transparent',
-            background: mode === m.key ? 'rgba(59, 130, 246, 0.2)' : 'rgba(30, 41, 59, 0.8)',
-            color: mode === m.key ? '#60a5fa' : '#94a3b8',
+            border: `2px solid ${mode === m.key ? '#4a8c2a' : '#1a1a1a'}`,
+            background: mode === m.key ? '#4a8c2a' : '#6b6b6b',
+            color: mode === m.key ? '#ffffff' : '#e0e0e0',
             cursor: 'pointer',
-            fontSize: '13px',
+            fontSize: '12px',
+            fontFamily: "'Silkscreen', 'Courier New', monospace",
             display: 'flex',
             alignItems: 'center',
             gap: '6px',
-            transition: 'all 0.15s ease',
+            transition: 'all 0.1s',
+            textShadow: '1px 1px 0 #1a1a1a',
+            boxShadow: mode === m.key 
+              ? 'inset 0 2px 0 #6ab04c, inset 0 -2px 0 #2d6b1a' 
+              : 'inset 0 2px 0 #888, inset 0 -2px 0 #444',
           }}
         >
           <span style={{ fontSize: '16px' }}>{m.icon}</span>
@@ -1364,12 +1374,14 @@ function InteractionToolbar({ mode, setMode, lastInteraction }) {
           transform: 'translateX(-50%)',
           marginBottom: '8px',
           padding: '6px 12px',
-          background: 'rgba(15, 23, 42, 0.95)',
-          borderRadius: '8px',
-          border: '1px solid rgba(100, 116, 139, 0.3)',
-          color: '#94a3b8',
-          fontSize: '12px',
+          background: '#3b3b3b',
+          border: '2px solid #1a1a1a',
+          boxShadow: 'inset 0 2px 0 #555, inset 0 -2px 0 #2a2a2a',
+          color: '#e0e0e0',
+          fontSize: '11px',
+          fontFamily: "'Silkscreen', 'Courier New', monospace",
           whiteSpace: 'nowrap',
+          textShadow: '1px 1px 0 #1a1a1a',
         }}>
           {lastInteraction.mode === 'move' && `🎯 Moving turtle to (${lastInteraction.target.x}, ${lastInteraction.target.y}, ${lastInteraction.target.z})`}
           {lastInteraction.mode === 'build' && `🧱 Build at (${lastInteraction.target.x}, ${lastInteraction.target.y}, ${lastInteraction.target.z})`}
@@ -1396,11 +1408,13 @@ function BlockCountHUD({ blocks }) {
       top: '12px',
       right: '12px',
       padding: '8px 12px',
-      background: 'rgba(15, 23, 42, 0.85)',
-      borderRadius: '8px',
-      border: '1px solid rgba(100, 116, 139, 0.2)',
-      color: '#94a3b8',
-      fontSize: '12px',
+      background: '#3b3b3b',
+      border: '2px solid #1a1a1a',
+      boxShadow: 'inset 0 2px 0 #555, inset 0 -2px 0 #2a2a2a, 0 2px 8px rgba(0,0,0,0.4)',
+      color: '#55ffff',
+      fontSize: '11px',
+      fontFamily: "'Silkscreen', 'Courier New', monospace",
+      textShadow: '1px 1px 0 #1a1a1a',
       zIndex: 10,
     }}>
       🧊 {count.toLocaleString()} blocks · 📦 {chunkCount} chunks