From 32677ecac5d284e1bc0a4cc18831415c5926c7a0 Mon Sep 17 00:00:00 2001
From: MayaTheShy <MayaTheShy@gmail.com>
Date: Fri, 20 Feb 2026 02:42:08 -0500
Subject: [PATCH] style: Revamp Control Panel CSS with Minecraft-themed colors
 and improved UI elements

---
 client/src/components/ControlPanel.css | 730 +++++++++++++++----------
 1 file changed, 448 insertions(+), 282 deletions(-)

diff --git a/client/src/components/ControlPanel.css b/client/src/components/ControlPanel.css
index 3d19cd5..dc4b156 100644
--- a/client/src/components/ControlPanel.css
+++ b/client/src/components/ControlPanel.css
@@ -1,73 +1,125 @@
+/* ============================================
+   Minecraft-Themed Turtle Control Panel
+   Colors and UI inspired by Minecraft's
+   inventory, crafting table, and stone UI.
+   ============================================ */
+
+/* === CSS Variables for Minecraft Palette === */
+:root {
+  --mc-dark: #1a1a1a;
+  --mc-darker: #0e0e0e;
+  --mc-stone: #7b7b7b;
+  --mc-stone-light: #9d9d9d;
+  --mc-stone-dark: #4b4b4b;
+  --mc-dirt: #6b5030;
+  --mc-dirt-dark: #4a3520;
+  --mc-oak: #8b6d3c;
+  --mc-oak-dark: #6b4e28;
+  --mc-oak-light: #b89b60;
+  --mc-grass: #5b8731;
+  --mc-grass-light: #80b94e;
+  --mc-grass-dark: #3d6b1a;
+  --mc-inv-bg: #c6c6c6;
+  --mc-inv-slot: #8b8b8b;
+  --mc-inv-slot-border: #373737;
+  --mc-inv-slot-light: #ffffff;
+  --mc-text-white: #e0e0e0;
+  --mc-text-gray: #a0a0a0;
+  --mc-text-dark: #404040;
+  --mc-text-yellow: #ffff55;
+  --mc-text-green: #55ff55;
+  --mc-text-red: #ff5555;
+  --mc-text-aqua: #55ffff;
+  --mc-text-gold: #ffaa00;
+  --mc-text-light-purple: #ff55ff;
+  --mc-text-blue: #5555ff;
+  --mc-diamond: #4aedd9;
+  --mc-emerald: #17dd62;
+  --mc-redstone: #ff0000;
+  --mc-lapis: #345ec3;
+  --mc-border-highlight: #ffffff55;
+  --mc-border-shadow: #00000088;
+}
+
+/* === Main Panel Container === */
 .control-panel {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: #111827;
-  color: #e5e7eb;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+  background: #2c2c2c;
+  color: var(--mc-text-white);
+  font-family: 'Silkscreen', 'Courier New', monospace;
+  image-rendering: pixelated;
 }
 
+/* === Panel Header (Dark Oak Plank Style) === */
 .panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem 1.5rem;
-  background: #1f2937;
-  border-bottom: 1px solid #374151;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  padding: 0.75rem 1.25rem;
+  background: var(--mc-oak-dark);
+  border-bottom: 3px solid var(--mc-dark);
+  box-shadow: 
+    inset 0 2px 0 var(--mc-oak-light),
+    inset 0 -2px 0 var(--mc-dirt-dark);
 }
 
 .panel-header h1 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #f9fafb;
-  letter-spacing: -0.025em;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--mc-text-yellow);
+  text-shadow: 2px 2px 0 var(--mc-dark);
+  letter-spacing: 0.05em;
 }
 
+/* === Connection Status Badge === */
 .connection-status {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  border-radius: 0.5rem;
-  font-weight: 600;
-  font-size: 0.875rem;
+  padding: 0.375rem 0.75rem;
+  border: 2px solid var(--mc-dark);
+  font-weight: 700;
+  font-size: 0.7rem;
+  text-shadow: 1px 1px 0 var(--mc-dark);
 }
 
 .connection-status.connected {
-  background: #064e3b;
-  color: #6ee7b7;
+  background: var(--mc-grass-dark);
+  color: var(--mc-text-green);
+  box-shadow: inset 0 1px 0 var(--mc-grass-light), inset 0 -1px 0 #2a5010;
 }
 
 .connection-status.disconnected {
-  background: #7f1d1d;
-  color: #fca5a5;
+  background: #6b1a1a;
+  color: var(--mc-text-red);
+  box-shadow: inset 0 1px 0 #a03030, inset 0 -1px 0 #400e0e;
 }
 
 .status-dot {
   width: 0.5rem;
   height: 0.5rem;
-  border-radius: 50%;
-  animation: pulse 2s infinite;
+  border-radius: 0;
+  animation: mc-blink 1.5s steps(2) infinite;
 }
 
 .connected .status-dot {
-  background: #10b981;
+  background: var(--mc-text-green);
+  box-shadow: 0 0 4px var(--mc-text-green);
 }
 
 .disconnected .status-dot {
-  background: #ef4444;
+  background: var(--mc-text-red);
+  box-shadow: 0 0 4px var(--mc-text-red);
 }
 
-@keyframes pulse {
-  0%, 100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.5;
-  }
+@keyframes mc-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
 }
 
+/* === Panel Layout === */
 .panel-content {
   display: flex;
   flex: 1;
@@ -75,16 +127,18 @@
   flex-direction: column;
 }
 
+/* === Turtle List Bar (Top, horizontal scroll) === */
 .turtle-list {
   width: 100%;
-  border-bottom: 1px solid #374151;
+  border-bottom: 3px solid var(--mc-dark);
   display: flex;
   flex-direction: row;
-  background: #1f2937;
+  background: #3b3b3b;
   overflow-x: auto;
-  padding: 0.75rem;
-  gap: 0.75rem;
+  padding: 0.5rem;
+  gap: 0.5rem;
   flex-shrink: 0;
+  box-shadow: inset 0 -2px 0 #555;
 }
 
 .turtle-list h2 {
@@ -94,7 +148,7 @@
 .turtle-cards {
   display: flex;
   flex-direction: row;
-  gap: 0.75rem;
+  gap: 0.5rem;
   overflow-x: auto;
 }
 
@@ -103,50 +157,52 @@
 }
 
 .turtle-cards::-webkit-scrollbar-track {
-  background: #1f2937;
-  border-radius: 3px;
+  background: #3b3b3b;
 }
 
 .turtle-cards::-webkit-scrollbar-thumb {
-  background: #4b5563;
-  border-radius: 3px;
-}
-
-.turtle-cards::-webkit-scrollbar-thumb:hover {
-  background: #6b7280;
+  background: var(--mc-stone);
+  border: 1px solid var(--mc-dark);
 }
 
+/* === Empty State === */
 .empty-state {
-  padding: 3rem 2rem;
+  padding: 2rem 1.5rem;
   text-align: center;
-  color: #6b7280;
+  color: var(--mc-text-gray);
 }
 
 .empty-state::before {
-  content: '🔍';
+  content: '🐢';
   display: block;
   font-size: 3rem;
-  margin-bottom: 1rem;
-  opacity: 0.5;
+  margin-bottom: 0.75rem;
+  opacity: 0.6;
 }
 
 .empty-state .hint {
-  margin-top: 1rem;
-  font-size: 0.875rem;
-  color: #4b5563;
+  margin-top: 0.75rem;
+  font-size: 0.7rem;
+  color: var(--mc-text-gray);
   font-style: italic;
 }
 
+/* === Turtle Card (Stone Button Style) === */
 .turtle-card {
-  background: #1f2937;
-  border: 2px solid #374151;
-  border-radius: 0.5rem;
-  padding: 0.875rem;
+  background: var(--mc-stone-dark);
+  border: 3px solid var(--mc-dark);
+  border-radius: 0;
+  padding: 0.75rem;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.1s;
   position: relative;
   min-width: 200px;
   flex-shrink: 0;
+  box-shadow:
+    inset 0 2px 0 var(--mc-stone),
+    inset 0 -2px 0 #333,
+    inset 2px 0 0 var(--mc-stone),
+    inset -2px 0 0 #333;
 }
 
 .turtle-card::before {
@@ -154,9 +210,12 @@
 }
 
 .turtle-card:hover {
-  border-color: #60a5fa;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  background: #5a5a5a;
+  border-color: var(--mc-text-gold);
+  box-shadow:
+    inset 0 2px 0 var(--mc-stone-light),
+    inset 0 -2px 0 #444,
+    0 0 8px rgba(255, 170, 0, 0.3);
 }
 
 .turtle-card:hover::before {
@@ -164,84 +223,88 @@
 }
 
 .turtle-card.selected {
-  border-color: #60a5fa;
-  background: #1e3a5f;
-  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+  border-color: var(--mc-text-green);
+  background: #3d5a2a;
+  box-shadow:
+    inset 0 2px 0 #5a8040,
+    inset 0 -2px 0 #2a4018,
+    0 0 10px rgba(85, 255, 85, 0.2);
 }
 
 .turtle-card.selected::before {
   display: none;
 }
 
+/* === Turtle Card Header === */
 .turtle-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.625rem;
-  padding-bottom: 0.625rem;
-  border-bottom: 1px solid #374151;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--mc-dark);
 }
 
 .turtle-header h3 {
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 700;
-  color: #f9fafb;
+  color: var(--mc-text-white);
   display: flex;
   align-items: center;
   gap: 0.375rem;
+  text-shadow: 1px 1px 0 var(--mc-dark);
 }
 
 .turtle-header h3::before {
   content: '🐢';
-  font-size: 1rem;
+  font-size: 0.875rem;
 }
 
+/* === Mode Badge (Enchanted look) === */
 .mode-badge {
-  padding: 0.25rem 0.75rem;
-  border-radius: 1rem;
-  font-size: 0.75rem;
-  font-weight: 600;
+  padding: 0.125rem 0.5rem;
+  border: 1px solid var(--mc-dark);
+  font-size: 0.6rem;
+  font-weight: 700;
   text-transform: uppercase;
   color: white;
+  text-shadow: 1px 1px 0 var(--mc-dark);
 }
 
+/* === Turtle Stats === */
 .turtle-stats {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
+  gap: 0.25rem;
 }
 
 .turtle-stats .stat {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  font-size: 0.75rem;
-  padding: 0.375rem;
-  background: #111827;
-  border-radius: 0.25rem;
-  border: 1px solid #374151;
+  font-size: 0.625rem;
+  padding: 0.25rem 0.375rem;
+  background: var(--mc-dark);
+  border: 1px solid #333;
 }
 
 .turtle-stats .label {
-  color: #9ca3af;
-  font-weight: 500;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
+  color: var(--mc-text-gray);
+  font-weight: 700;
 }
 
 .turtle-stats .value {
-  color: #f9fafb;
-  font-weight: 600;
-  font-family: 'Courier New', monospace;
-  font-size: 0.75rem;
+  color: var(--mc-text-white);
+  font-weight: 700;
+  font-size: 0.625rem;
 }
 
+/* === Detail Panel (Main scrollable area) === */
 .turtle-details {
   flex: 1;
-  padding: 1.5rem;
+  padding: 1rem;
   overflow-y: auto;
-  background: #111827;
+  background: #2c2c2c;
 }
 
 .turtle-details::-webkit-scrollbar {
@@ -249,17 +312,12 @@
 }
 
 .turtle-details::-webkit-scrollbar-track {
-  background: #1f2937;
-  border-radius: 4px;
+  background: #2c2c2c;
 }
 
 .turtle-details::-webkit-scrollbar-thumb {
-  background: #4b5563;
-  border-radius: 4px;
-}
-
-.turtle-details::-webkit-scrollbar-thumb:hover {
-  background: #6b7280;
+  background: var(--mc-stone-dark);
+  border: 1px solid var(--mc-dark);
 }
 
 .turtle-details.empty {
@@ -267,46 +325,35 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  color: #9ca3af;
-  font-size: 1rem;
+  color: var(--mc-text-gray);
+  font-size: 0.875rem;
   gap: 0.75rem;
 }
 
 .turtle-details.empty::before {
   content: '☝️';
-  font-size: 3rem;
+  font-size: 2.5rem;
   opacity: 0.5;
-  animation: bounce-up 2s infinite;
+  animation: mc-bounce 2s steps(4) infinite;
 }
 
-@keyframes bounce-up {
-  0%, 100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-}
-
-@keyframes bounce {
-  0%, 100% {
-    transform: translateX(0);
-  }
-  50% {
-    transform: translateX(-10px);
-  }
+@keyframes mc-bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
 }
 
+/* === Turtle Detail H2 === */
 .turtle-details h2 {
-  font-size: 1.25rem;
-  margin-bottom: 1.5rem;
-  color: #f9fafb;
+  font-size: 1.1rem;
+  margin-bottom: 1rem;
+  color: var(--mc-text-yellow);
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   padding-bottom: 0.75rem;
-  border-bottom: 2px solid #374151;
+  border-bottom: 3px solid var(--mc-dark);
+  text-shadow: 2px 2px 0 var(--mc-dark);
 }
 
 .turtle-details h2::before {
@@ -314,267 +361,331 @@
   font-size: 1.25rem;
 }
 
+/* === Detail Section (Oak Plank Panel) === */
 .detail-section {
-  margin-bottom: 1.25rem;
-  padding: 1rem;
-  background: #1f2937;
-  border-radius: 0.5rem;
-  border: 1px solid #374151;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-  transition: all 0.2s ease;
+  margin-bottom: 1rem;
+  padding: 0.875rem;
+  background: #3b3b3b;
+  border: 3px solid var(--mc-dark);
+  border-radius: 0;
+  box-shadow:
+    inset 0 2px 0 #555,
+    inset 0 -2px 0 #2a2a2a;
+  transition: none;
 }
 
 .detail-section:hover {
-  border-color: #4b5563;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+  border-color: var(--mc-dark);
+  box-shadow:
+    inset 0 2px 0 #555,
+    inset 0 -2px 0 #2a2a2a;
 }
 
 .detail-section h3 {
-  font-size: 1rem;
-  margin-bottom: 1rem;
-  color: #60a5fa;
+  font-size: 0.8rem;
+  margin-bottom: 0.75rem;
+  color: var(--mc-text-gold);
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  text-shadow: 1px 1px 0 var(--mc-dark);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 .detail-section h4 {
-  font-size: 0.875rem;
-  margin: 1rem 0 0.75rem;
-  color: #d1d5db;
-  font-weight: 600;
+  font-size: 0.75rem;
+  margin: 0.75rem 0 0.5rem;
+  color: var(--mc-text-white);
+  font-weight: 700;
+  text-shadow: 1px 1px 0 var(--mc-dark);
 }
 
+/* === Status Grid === */
 .status-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .status-item {
   display: flex;
   flex-direction: column;
-  gap: 0.375rem;
-  padding: 0.75rem;
-  background: #111827;
-  border-radius: 0.375rem;
-  border: 1px solid #374151;
-  transition: all 0.2s ease;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  background: var(--mc-dark);
+  border: 2px solid #333;
+  transition: none;
+  box-shadow: inset 0 1px 0 #2a2a2a;
 }
 
 .status-item:hover {
-  background: #1f2937;
-  border-color: #60a5fa;
+  background: #222;
+  border-color: var(--mc-text-gold);
 }
 
 .status-item .label {
-  color: #9ca3af;
-  font-size: 0.75rem;
-  font-weight: 600;
+  color: var(--mc-text-gray);
+  font-size: 0.6rem;
+  font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  text-shadow: 1px 1px 0 #000;
 }
 
 .status-item .value {
-  color: #f9fafb;
+  color: var(--mc-text-white);
   font-weight: 700;
-  font-family: 'Courier New', monospace;
-  font-size: 0.95rem;
+  font-size: 0.75rem;
+  text-shadow: 1px 1px 0 #000;
 }
 
+/* === Command Grid (State Machine buttons) === */
 .command-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.5rem;
-  margin-bottom: 1rem;
+  gap: 0.375rem;
+  margin-bottom: 0.75rem;
 }
 
+/* === MC-Style Button (Stone Button) === */
 .command-btn {
-  padding: 0.75rem;
-  border: none;
-  border-radius: 0.5rem;
-  font-size: 0.8125rem;
-  font-weight: 600;
+  padding: 0.625rem 0.5rem;
+  border: 2px solid var(--mc-dark);
+  border-radius: 0;
+  font-size: 0.7rem;
+  font-weight: 700;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.05s;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.375rem;
+  gap: 0.25rem;
   white-space: nowrap;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  font-family: 'Silkscreen', 'Courier New', monospace;
+  text-shadow: 1px 1px 0 var(--mc-dark);
+  background: #6b6b6b;
+  box-shadow:
+    inset 0 2px 0 #999,
+    inset 0 -2px 0 #444;
 }
 
 .command-btn:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  background: #7b7b7b;
+  box-shadow:
+    inset 0 2px 0 #aaa,
+    inset 0 -2px 0 #555;
+  transform: none;
 }
 
 .command-btn:active {
-  transform: translateY(0);
+  background: #555;
+  box-shadow:
+    inset 0 2px 0 #333,
+    inset 0 -2px 0 #777;
 }
 
+/* State-specific button colors */
 .command-btn.explore {
-  background: linear-gradient(135deg, #3b82f6, #2563eb);
+  background: #3b6bbf;
+  box-shadow: inset 0 2px 0 #5588dd, inset 0 -2px 0 #264990;
+}
+.command-btn.explore:hover {
+  background: #4a7ad0;
 }
 
 .command-btn.mine {
-  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+  background: #7b4fbf;
+  box-shadow: inset 0 2px 0 #9966dd, inset 0 -2px 0 #5a3090;
+}
+.command-btn.mine:hover {
+  background: #8a5ed0;
 }
 
 .command-btn.return {
-  background: linear-gradient(135deg, #f59e0b, #d97706);
+  background: #bf8b2e;
+  box-shadow: inset 0 2px 0 #ddaa44, inset 0 -2px 0 #906820;
+}
+.command-btn.return:hover {
+  background: #d09a3e;
 }
 
 .command-btn.stop {
-  background: linear-gradient(135deg, #ef4444, #dc2626);
+  background: #bf2e2e;
+  box-shadow: inset 0 2px 0 #dd4444, inset 0 -2px 0 #902020;
+}
+.command-btn.stop:hover {
+  background: #d03e3e;
 }
 
 .command-btn.manual {
-  background: linear-gradient(135deg, #a855f7, #9333ea);
+  background: #8b3ebf;
+  box-shadow: inset 0 2px 0 #aa55dd, inset 0 -2px 0 #6a2a90;
+}
+.command-btn.manual:hover {
+  background: #9a4ed0;
 }
 
 .command-btn.setHome {
-  background: linear-gradient(135deg, #06b6d4, #0891b2);
+  background: #2e8bbf;
+  box-shadow: inset 0 2px 0 #44aadd, inset 0 -2px 0 #206890;
+}
+.command-btn.setHome:hover {
+  background: #3e9ad0;
 }
 
 .command-btn.refuel {
-  background: linear-gradient(135deg, #10b981, #059669);
+  background: #2ebf5b;
+  box-shadow: inset 0 2px 0 #44dd77, inset 0 -2px 0 #209040;
+}
+.command-btn.refuel:hover {
+  background: #3ed06a;
 }
 
 .command-btn.status {
-  background: linear-gradient(135deg, #64748b, #475569);
+  background: #5a5a5a;
+  box-shadow: inset 0 2px 0 #777, inset 0 -2px 0 #3a3a3a;
+}
+.command-btn.status:hover {
+  background: #6a6a6a;
 }
 
-/* Movement Controls */
+/* === Movement Controls (Directional pad) === */
 .movement-controls {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
-  padding: 1rem;
-  background: #1f2937;
-  border-radius: 0.5rem;
-  border: 1px solid #374151;
+  gap: 0.375rem;
+  padding: 0.75rem;
+  background: var(--mc-dark);
+  border: 2px solid #333;
 }
 
 .movement-row {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.375rem;
   justify-content: center;
 }
 
 .movement-row.vertical {
-  gap: 0.75rem;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
 }
 
 .movement-controls button {
-  width: 3rem;
-  height: 3rem;
-  border: 2px solid #374151;
-  background: #111827;
-  color: #60a5fa;
-  border-radius: 0.5rem;
-  font-size: 1.25rem;
+  width: 2.75rem;
+  height: 2.75rem;
+  border: 2px solid var(--mc-dark);
+  background: #6b6b6b;
+  color: var(--mc-text-white);
+  border-radius: 0;
+  font-size: 1.1rem;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.05s;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow:
+    inset 0 2px 0 #999,
+    inset 0 -2px 0 #444;
+  text-shadow: 1px 1px 0 var(--mc-dark);
+  font-family: 'Silkscreen', 'Courier New', monospace;
 }
 
 .movement-controls button:hover {
-  background: #1f2937;
-  border-color: #60a5fa;
-  box-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
-  transform: scale(1.05);
+  background: #8b8b8b;
+  box-shadow:
+    inset 0 2px 0 #bbb,
+    inset 0 -2px 0 #666;
 }
 
 .movement-controls button:active {
-  transform: scale(0.95);
+  background: #555;
+  box-shadow:
+    inset 0 2px 0 #333,
+    inset 0 -2px 0 #777;
 }
 
-/* Action Grid */
+/* === Action Grid === */
 .action-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.5rem;
+  gap: 0.375rem;
 }
 
 .action-btn {
-  padding: 0.75rem;
-  border: 2px solid #374151;
-  background: #1f2937;
-  color: #60a5fa;
-  border-radius: 0.5rem;
-  font-size: 0.8125rem;
-  font-weight: 600;
+  padding: 0.625rem 0.5rem;
+  border: 2px solid var(--mc-dark);
+  background: #555;
+  color: var(--mc-text-white);
+  border-radius: 0;
+  font-size: 0.7rem;
+  font-weight: 700;
   cursor: pointer;
-  transition: all 0.2s;
+  transition: all 0.05s;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.375rem;
+  gap: 0.25rem;
   white-space: nowrap;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow:
+    inset 0 2px 0 #777,
+    inset 0 -2px 0 #333;
+  text-shadow: 1px 1px 0 var(--mc-dark);
+  font-family: 'Silkscreen', 'Courier New', monospace;
 }
 
 .action-btn:hover {
-  border-color: #60a5fa;
-  background: #111827;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(96, 165, 250, 0.2);
+  background: #6b6b6b;
+  box-shadow:
+    inset 0 2px 0 #888,
+    inset 0 -2px 0 #444;
 }
 
-.action-btn.dig {
-  border-color: #f59e0b;
-  color: #f59e0b;
-}
-
-.action-btn.dig:hover {
-  background: rgba(245, 158, 11, 0.1);
-  border-color: #f59e0b;
-  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+.action-btn:active {
+  background: #444;
+  box-shadow:
+    inset 0 2px 0 #2a2a2a,
+    inset 0 -2px 0 #666;
 }
 
+/* Dig buttons - orange/dirt accent */
+.action-btn.dig,
 .action-btn.digup,
 .action-btn.digdown {
-  border-color: #f59e0b;
-  color: #f59e0b;
+  background: #8b5e2e;
+  color: var(--mc-text-gold);
+  box-shadow: inset 0 2px 0 #aa7744, inset 0 -2px 0 #664420;
 }
-
+.action-btn.dig:hover,
 .action-btn.digup:hover,
 .action-btn.digdown:hover {
-  background: rgba(245, 158, 11, 0.1);
-  border-color: #f59e0b;
-  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+  background: #9a6d3e;
 }
 
+/* Place button - green accent */
 .action-btn.place {
-  border-color: #10b981;
-  color: #10b981;
+  background: #3d6b1a;
+  color: var(--mc-text-green);
+  box-shadow: inset 0 2px 0 #5a8a30, inset 0 -2px 0 #2a5010;
 }
-
 .action-btn.place:hover {
-  background: rgba(16, 185, 129, 0.1);
-  border-color: #10b981;
-  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
+  background: #4a7a28;
 }
 
-/* Inventory Grid */
+/* === Minecraft Inventory Grid === */
 .inventory-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 0.5rem;
-  max-height: 400px;
-  overflow-y: auto;
-  padding: 0.5rem;
-  background: #0f172a;
-  border-radius: 0.5rem;
-  border: 1px solid #1e293b;
+  gap: 3px;
+  padding: 8px;
+  background: var(--mc-inv-bg);
+  border: 3px solid var(--mc-dark);
+  box-shadow:
+    inset 3px 3px 0 #fefefe,
+    inset -3px -3px 0 #555;
 }
 
 .inventory-slot {
@@ -583,69 +694,82 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: #1e293b;
-  border: 2px solid #334155;
-  border-radius: 0.375rem;
-  padding: 0.5rem;
-  transition: all 0.2s;
+  background: var(--mc-inv-slot);
+  border: 2px solid;
+  border-color: var(--mc-inv-slot-border) var(--mc-inv-slot-light) var(--mc-inv-slot-light) var(--mc-inv-slot-border);
+  border-radius: 0;
+  padding: 0.375rem;
+  transition: none;
   cursor: pointer;
   position: relative;
   overflow: hidden;
 }
 
 .inventory-slot.empty {
-  background: #0f172a;
-  border-style: dashed;
-  border-color: #1e293b;
+  background: var(--mc-inv-slot);
+  border-style: solid;
+  border-color: var(--mc-inv-slot-border) var(--mc-inv-slot-light) var(--mc-inv-slot-light) var(--mc-inv-slot-border);
 }
 
 .inventory-slot.filled {
-  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
-  border-color: #3b82f6;
-  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
+  background: var(--mc-inv-slot);
+  border-color: var(--mc-inv-slot-border) var(--mc-inv-slot-light) var(--mc-inv-slot-light) var(--mc-inv-slot-border);
+}
+
+.inventory-slot:hover {
+  background: #aaa;
 }
 
 .inventory-slot.filled:hover {
-  border-color: #60a5fa;
-  background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%);
-  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
-  transform: translateY(-2px);
+  background: #bbb;
+  transform: none;
 }
 
+/* Selected slot highlight */
+.inventory-slot.selected-slot {
+  background: #b8d4f0 !important;
+  box-shadow: 0 0 0 2px var(--mc-text-aqua);
+}
+
+/* === Slot Contents === */
 .slot-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.125rem;
 }
 
 .slot-item .item-icon {
-  font-size: 1.5rem;
-  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
+  font-size: 1.35rem;
+  filter: none;
 }
 
 .slot-item .item-count {
   position: absolute;
-  bottom: 0.25rem;
-  right: 0.25rem;
-  background: rgba(0, 0, 0, 0.8);
-  color: #fff;
-  font-size: 0.625rem;
+  bottom: 2px;
+  right: 3px;
+  background: transparent;
+  color: white;
+  font-size: 0.6rem;
   font-weight: 700;
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  font-family: 'Courier New', monospace;
-  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
+  padding: 0;
+  border-radius: 0;
+  font-family: 'Silkscreen', 'Courier New', monospace;
+  text-shadow: 
+    1px 0 0 var(--mc-dark),
+    -1px 0 0 var(--mc-dark),
+    0 1px 0 var(--mc-dark),
+    0 -1px 0 var(--mc-dark);
 }
 
 .slot-name {
   position: absolute;
-  top: 0.25rem;
-  left: 0.25rem;
-  right: 0.25rem;
-  font-size: 0.5rem;
-  color: #94a3b8;
-  font-weight: 600;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  font-size: 0.4rem;
+  color: var(--mc-text-dark);
+  font-weight: 700;
   text-transform: uppercase;
   text-align: center;
   line-height: 1.1;
@@ -655,12 +779,55 @@
 }
 
 .slot-number {
-  font-size: 0.75rem;
-  color: #475569;
-  font-weight: 600;
+  font-size: 0.6rem;
+  color: #555;
+  font-weight: 700;
 }
 
-/* Responsive Design */
+/* === Rename Input (MC-style text field) === */
+.rename-input {
+  font-family: 'Silkscreen', 'Courier New', monospace !important;
+  background: var(--mc-dark) !important;
+  border: 2px solid #333 !important;
+  color: var(--mc-text-white) !important;
+  border-radius: 0 !important;
+  font-size: 0.7rem !important;
+  box-shadow: inset 0 1px 0 #111 !important;
+}
+
+.rename-input:focus {
+  outline: none;
+  border-color: var(--mc-text-green) !important;
+  box-shadow: 0 0 4px rgba(85, 255, 85, 0.3) !important;
+}
+
+.rename-input::placeholder {
+  color: var(--mc-text-gray);
+}
+
+/* === Config Modal Override === */
+.detail-section input[type="number"] {
+  font-family: 'Silkscreen', 'Courier New', monospace;
+  background: var(--mc-dark);
+  border: 2px solid #333;
+  color: var(--mc-text-white);
+  border-radius: 0;
+  font-size: 0.7rem;
+  box-shadow: inset 0 1px 0 #111;
+}
+
+.detail-section input[type="number"]:focus {
+  outline: none;
+  border-color: var(--mc-text-green);
+}
+
+.detail-section input[type="checkbox"] {
+  accent-color: var(--mc-grass);
+  width: 16px;
+  height: 16px;
+}
+
+/* === Responsive Design === */
 @media (max-width: 1024px) {
   .command-grid {
     grid-template-columns: 1fr;
@@ -685,7 +852,7 @@
   }
   
   .turtle-list {
-    border-bottom: 1px solid #374151;
+    border-bottom: 3px solid var(--mc-dark);
     border-right: none;
   }
   
@@ -697,15 +864,14 @@
 @media (max-width: 480px) {
   .inventory-grid {
     grid-template-columns: repeat(4, 1fr);
-    gap: 0.375rem;
+    gap: 2px;
   }
   
   .inventory-slot {
-    padding: 0.375rem;
+    padding: 0.25rem;
   }
   
   .slot-item .item-icon {
-    font-size: 1.25rem;
+    font-size: 1.1rem;
   }
 }
-