feat: Enhance mobile responsiveness and touch device optimizations in App.css

client/src/App.css

@@ -93,3 +93,146 @@
 ::-webkit-scrollbar-thumb:hover {
   background: #64748b;
 }
+
+/* Mobile-Responsive Design */
+@media (max-width: 1024px) {
+  /* Tablet: Stack vertically */
+  .app-content.split {
+    flex-direction: column;
+  }
+  
+  .app-content.split .map-container,
+  .app-content.split .panel-container {
+    width: 100%;
+    flex: 1;
+  }
+  
+  .view-controls {
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 768px) {
+  /* Mobile: Force single view mode with tabs */
+  .view-controls {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  }
+  
+  .view-controls button {
+    flex: 1;
+    min-width: 0;
+    padding: 0.75rem 0.5rem;
+    font-size: 0.8125rem;
+  }
+  
+  .app-content.split {
+    flex-direction: column;
+  }
+  
+  .app-content.split .map-container {
+    height: 50vh;
+  }
+  
+  .app-content.split .panel-container {
+    height: 50vh;
+    overflow-y: auto;
+  }
+  
+  /* Optimize for touch */
+  button, .turtle-card, .inventory-slot {
+    min-height: 44px; /* iOS minimum touch target */
+  }
+}
+
+@media (max-width: 480px) {
+  /* Small mobile: Optimize spacing */
+  .view-controls {
+    padding: 0.5rem;
+    gap: 0.375rem;
+  }
+  
+  .view-controls button {
+    padding: 0.625rem 0.375rem;
+    font-size: 0.75rem;
+  }
+  
+  .app-content.split .map-container {
+    height: 40vh;
+  }
+  
+  .app-content.split .panel-container {
+    height: 60vh;
+  }
+}
+
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+  /* Increase touch targets */
+  button {
+    min-height: 48px;
+    min-width: 48px;
+  }
+  
+  .turtle-card {
+    padding: 1rem;
+  }
+  
+  .inventory-slot {
+    min-height: 60px;
+    min-width: 60px;
+  }
+  
+  /* Remove hover effects on touch devices */
+  button:hover,
+  .turtle-card:hover,
+  .inventory-slot:hover {
+    transform: none;
+  }
+  
+  /* Use active state instead */
+  button:active {
+    transform: scale(0.95);
+  }
+}
+
+/* Landscape mobile orientation */
+@media (max-width: 896px) and (orientation: landscape) {
+  .app-content.split {
+    flex-direction: row;
+  }
+  
+  .app-content.split .map-container,
+  .app-content.split .panel-container {
+    width: 50%;
+    height: 100%;
+  }
+}
+
+/* Dark mode support (respects system preference) */
+@media (prefers-color-scheme: dark) {
+  /* Already optimized for dark mode */
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  .view-controls button {
+    border: 2px solid currentColor;
+  }
+  
+  .turtle-card {
+    border-width: 3px;
+  }
+}
+