fix(ui): prevent camera controls overlap with topbar

- Move camera controls below topbar (top: calc(var(--space-xl) + var(--space-md)))
- Increase topbar z-index to stay above camera controls
- Add responsive adjustments for camera controls on different screen sizes
- Improve camera button sizing and spacing

static/styles.css

@@ -405,7 +405,7 @@ body {
     align-items: center;
     border-bottom: 1px solid var(--border-light);
     box-shadow: var(--shadow-md);
-    z-index: var(--z-sticky);
+    z-index: var(--z-fixed); /* Ensure topbar stays above camera controls */
     backdrop-filter: blur(10px);
     background: rgba(30, 41, 59, 0.8);
 }
@@ -1271,63 +1271,65 @@ body {
 /* Modern Camera Controls */
 #camera-controls {
     position: absolute;
-    top: var(--space-md);
-    right: var(--space-md);
+    top: calc(var(--space-xl) + var(--space-md)); /* Position below topbar */
+    right: var(--space-lg);
     display: flex;
+    flex-direction: column;
     gap: var(--space-sm);
-    z-index: var(--z-fixed);
+    z-index: var(--z-sticky);
 }
 
 .camera-btn {
-    background: var(--bg-tertiary);
+    width: 48px;
+    height: 48px;
+    background: rgba(15, 23, 42, 0.9);
     border: 1px solid var(--border-light);
-    padding: var(--space-sm);
     border-radius: var(--radius-lg);
+    color: var(--text-primary);
+    font-size: 1.125rem;
     cursor: pointer;
     transition: all var(--transition-fast);
-    color: var(--text-primary);
-    font-size: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: 44px;
-    min-height: 44px;
-    position: relative;
-    overflow: hidden;
-}
-
-.camera-btn::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    background: rgba(59, 130, 246, 0.2);
-    border-radius: 50%;
-    transform: translate(-50%, -50%);
-    transition: width var(--transition-normal), height var(--transition-normal);
+    backdrop-filter: blur(10px);
 }
 
 .camera-btn:hover {
-    background: var(--bg-hover);
-    border-color: var(--primary);
-    transform: scale(1.05);
-    box-shadow: var(--shadow-md);
-}
-
-.camera-btn:hover::before {
-    width: 100%;
-    height: 100%;
+    background: var(--primary);
+    transform: scale(1.1);
+    box-shadow: var(--shadow-lg);
 }
 
 .camera-btn:active {
     transform: scale(0.95);
 }
 
-.camera-icon {
-    font-size: 1.25rem;
-    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+/* Responsive camera controls adjustments */
+@media (max-width: 1400px) {
+    #camera-controls {
+        top: calc(var(--space-xl) + var(--space-sm));
+        right: var(--space-md);
+    }
+    
+    .camera-btn {
+        width: 44px;
+        height: 44px;
+        font-size: 1rem;
+    }
+}
+
+@media (max-width: 1024px) {
+    #camera-controls {
+        top: var(--space-xl);
+        right: var(--space-md);
+    }
+    
+    .camera-btn {
+        width: 40px;
+        height: 40px;
+        font-size: 1rem;
+    }
 }
 
 /* Responsive Design - Optimized for Desktop Gaming */