feat: Adjust typography and spacing in turtle details and inventory sections for improved readability and layout

client/src/components/ControlPanel.css

@@ -247,7 +247,7 @@
 
 .turtle-details {
   flex: 1;
-  padding: 2.5rem;
+  padding: 1.5rem;
   overflow-y: auto;
   background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
 }
@@ -297,25 +297,25 @@
 }
 
 .turtle-details h2 {
-  font-size: 2rem;
-  margin-bottom: 2rem;
+  font-size: 1.5rem;
+  margin-bottom: 1.25rem;
   color: #f1f5f9;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding-bottom: 1rem;
+  padding-bottom: 0.75rem;
   border-bottom: 2px solid #334155;
 }
 
 .turtle-details h2::before {
   content: '🐢';
-  font-size: 2rem;
+  font-size: 1.5rem;
 }
 
 .detail-section {
-  margin-bottom: 2rem;
-  padding: 1.75rem;
+  margin-bottom: 1.25rem;
+  padding: 1.25rem;
   background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
   border-radius: 0.75rem;
   border: 1px solid #334155;
@@ -329,8 +329,8 @@
 }
 
 .detail-section h3 {
-  font-size: 1.375rem;
-  margin-bottom: 1.25rem;
+  font-size: 1.125rem;
+  margin-bottom: 1rem;
   color: #60a5fa;
   font-weight: 700;
   display: flex;
@@ -347,14 +347,14 @@
 .status-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 1.25rem;
+  gap: 0.75rem;
 }
 
 .status-item {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  padding: 1rem;
+  gap: 0.375rem;
+  padding: 0.75rem;
   background: rgba(15, 23, 42, 0.6);
   border-radius: 0.5rem;
   border: 1px solid rgba(51, 65, 85, 0.5);
@@ -368,7 +368,7 @@
 
 .status-item .label {
   color: #94a3b8;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -378,21 +378,21 @@
   color: #f1f5f9;
   font-weight: 700;
   font-family: 'Courier New', monospace;
-  font-size: 1.125rem;
+  font-size: 0.95rem;
 }
 
 .command-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
+  gap: 0.5rem;
   margin-bottom: 1rem;
 }
 
 .command-btn {
-  padding: 0.875rem 1rem;
+  padding: 0.625rem 0.75rem;
   border: none;
-  border-radius: 0.5rem;
-  font-size: 0.95rem;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
@@ -400,7 +400,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
+  white-space: nowrap;
 }
 
 .command-btn:hover {
@@ -449,30 +450,30 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
-  padding: 1rem;
+  gap: 0.375rem;
+  padding: 0.75rem;
   background: #1e293b;
   border-radius: 0.5rem;
 }
 
 .movement-row {
   display: flex;
-  gap: 0.5rem;
+  gap: 0.375rem;
   justify-content: center;
 }
 
 .movement-row.vertical {
-  gap: 1rem;
+  gap: 0.75rem;
 }
 
 .movement-controls button {
-  width: 3.5rem;
-  height: 3.5rem;
+  width: 2.75rem;
+  height: 2.75rem;
   border: 2px solid #334155;
   background: #0f172a;
   color: #60a5fa;
-  border-radius: 0.5rem;
-  font-size: 1.5rem;
+  border-radius: 0.375rem;
+  font-size: 1.25rem;
   cursor: pointer;
   transition: all 0.2s;
   display: flex;
@@ -495,19 +496,24 @@
 .action-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .action-btn {
-  padding: 1rem;
+  padding: 0.625rem 0.75rem;
   border: 2px solid #334155;
-  border-radius: 0.5rem;
-  font-size: 0.95rem;
+  background: #0f172a;
+  color: #60a5fa;
+  border-radius: 0.375rem;
+  font-size: 0.8125rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
-  color: white;
-  background: #1e293b;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  white-space: nowrap;
 }
 
 .action-btn:hover {
@@ -563,11 +569,11 @@
 .inventory-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
+  gap: 0.625rem;
+  padding: 0.625rem;
   background: #1e293b;
-  border: 2px solid #334155;
-  border-radius: 0.5rem;
+  border: 1px solid #334155;
+  border-radius: 0.375rem;
   transition: all 0.2s;
 }
 
@@ -577,14 +583,14 @@
 }
 
 .item-icon {
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   flex-shrink: 0;
 }
 
 .item-name {
   flex: 1;
   color: #e2e8f0;
-  font-size: 0.95rem;
+  font-size: 0.8125rem;
   text-transform: capitalize;
 }
 
@@ -592,6 +598,7 @@
   color: #94a3b8;
   font-weight: 600;
   font-family: 'Courier New', monospace;
+  font-size: 0.8125rem;
 }
 
 /* Responsive Design */