Add comprehensive mobile-responsive styling and touch controls

index.html

@@ -547,7 +547,8 @@
       background: var(--bg-card);
       border: 1px solid var(--border);
       border-radius: 20px;
-      overflow: hidden;
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
       margin-bottom: 80px;
     }
 
@@ -556,6 +557,7 @@
       border-collapse: collapse;
       text-align: left;
       font-size: 14px;
+      min-width: 620px;
     }
 
     th {
@@ -567,11 +569,13 @@
       font-size: 11px;
       letter-spacing: 0.8px;
       border-bottom: 1px solid var(--border);
+      white-space: nowrap;
     }
 
     td {
       padding: 18px 20px;
       border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+      white-space: nowrap;
     }
 
     tr:hover td {
@@ -595,6 +599,32 @@
       color: #ffd700;
     }
 
+    .table-swipe-hint {
+      display: none;
+      align-items: center;
+      gap: 6px;
+      font-size: 11px;
+      color: var(--cyan);
+      margin-bottom: 10px;
+      justify-content: flex-end;
+    }
+
+    /* DIRECT SPACE LAUNCH BANNER */
+    .space-launch-banner {
+      background: linear-gradient(135deg, rgba(13, 24, 45, 0.95), rgba(6, 15, 30, 0.95));
+      border: 1px solid var(--border-accent);
+      border-radius: 14px;
+      padding: 16px 24px;
+      margin-top: 24px;
+      margin-bottom: 24px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16px;
+      flex-wrap: wrap;
+      box-shadow: 0 4px 20px rgba(0, 229, 255, 0.12);
+    }
+
     /* FOOTER */
     footer {
       border-top: 1px solid var(--border);
@@ -608,10 +638,180 @@
       text-decoration: none;
     }
 
+    /* COMPREHENSIVE RESPONSIVE DESIGN & MOBILE LAYOUT */
     @media (max-width: 900px) {
-      .hero h2 { font-size: 38px; }
-      .stats-grid { grid-template-columns: repeat(2, 1fr); }
-      .sim-output-grid { grid-template-columns: 1fr; }
+      .hero h2 { font-size: 40px; letter-spacing: -1px; }
+      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
+      .sim-output-grid { grid-template-columns: 1fr; gap: 14px; }
+      .simulator-card, .agent-sim-card { padding: 26px 20px; }
+    }
+
+    @media (max-width: 768px) {
+      .container { padding: 0 16px; }
+      
+      header { padding: 16px 0; }
+      .nav-inner {
+        flex-direction: column;
+        gap: 14px;
+        align-items: center;
+        text-align: center;
+      }
+      .brand { justify-content: center; }
+      .nav-links {
+        width: 100%;
+        justify-content: center;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      .nav-btn {
+        padding: 8px 14px;
+        font-size: 12px;
+      }
+
+      .space-launch-banner {
+        flex-direction: column;
+        align-items: stretch;
+        text-align: center;
+        padding: 16px;
+      }
+      .space-launch-banner > div {
+        flex-direction: column;
+        text-align: center;
+      }
+      .space-launch-banner .run-btn {
+        width: 100%;
+        justify-content: center;
+      }
+
+      .hero { padding: 48px 0 32px; }
+      .hero h2 { font-size: 32px; line-height: 1.2; }
+      .hero-sub { font-size: 15px; margin-bottom: 24px; }
+      .creator-attestation {
+        flex-direction: column;
+        gap: 4px;
+        font-size: 12px;
+        padding: 10px 14px;
+        text-align: center;
+        margin-bottom: 32px;
+      }
+
+      .stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+        margin-bottom: 48px;
+      }
+      .stat-card { padding: 18px 12px; border-radius: 12px; }
+      .stat-num { font-size: 26px; }
+      .stat-label { font-size: 10px; letter-spacing: 0.5px; }
+
+      .section-header { margin-bottom: 28px; }
+      .section-header h3 { font-size: 24px; }
+      .section-header p { font-size: 13px; }
+
+      .simulator-card, .agent-sim-card {
+        padding: 18px 14px;
+        border-radius: 16px;
+        margin-bottom: 48px;
+      }
+      .sim-top {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 12px;
+      }
+      .sim-title { font-size: 17px; }
+      .sim-controls {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 8px;
+        width: 100%;
+      }
+      .scenario-btn {
+        text-align: center;
+        padding: 9px 8px;
+        font-size: 11px;
+      }
+
+      .sim-input-box {
+        font-size: 12px;
+        padding: 12px;
+        margin-bottom: 16px;
+      }
+
+      .sim-run-bar {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 14px;
+        padding-bottom: 16px;
+        margin-bottom: 20px;
+      }
+      .run-btn {
+        width: 100%;
+        justify-content: center;
+        padding: 13px 20px;
+        font-size: 13px;
+      }
+      .sim-meta-tags {
+        flex-direction: column;
+        gap: 6px;
+        width: 100%;
+      }
+      .meta-tag {
+        text-align: center;
+        font-size: 11px;
+        padding: 6px 10px;
+      }
+
+      /* Highway Sim Controls on mobile */
+      .agent-sim-card .sim-top > div:last-child {
+        width: 100%;
+        flex-direction: column;
+        align-items: stretch !important;
+        gap: 8px !important;
+      }
+      .sim-mode-toggle {
+        width: 100%;
+        display: flex;
+      }
+      .mode-btn {
+        flex: 1;
+        text-align: center;
+        font-size: 11px;
+        padding: 8px 6px;
+      }
+
+      .agent-hud {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 10px;
+        padding: 12px;
+      }
+      .hud-stat-title { font-size: 9px; }
+      .hud-stat-val { font-size: 13px; }
+
+      /* Table responsive scroll */
+      .table-container {
+        border-radius: 14px;
+        margin-bottom: 48px;
+      }
+      table {
+        min-width: 620px;
+        font-size: 12px;
+      }
+      th, td {
+        padding: 12px 14px;
+      }
+
+      .table-swipe-hint {
+        display: flex !important;
+      }
+    }
+
+    @media (max-width: 480px) {
+      .hero h2 { font-size: 26px; }
+      .badge { font-size: 10px; padding: 4px 10px; }
+      .stats-grid { grid-template-columns: 1fr; }
+      .sim-controls { grid-template-columns: 1fr; }
+      .brand-text h1 { font-size: 18px; }
+      .brand-logo { width: 36px; height: 36px; }
     }
   </style>
 </head>
@@ -637,7 +837,7 @@
 
   <main class="container">
     <!-- DIRECT SPACE LAUNCH BANNER -->
-    <div style="background: linear-gradient(135deg, rgba(13, 24, 45, 0.95), rgba(6, 15, 30, 0.95)); border: 1px solid var(--border-accent); border-radius: 14px; padding: 16px 24px; margin-top: 24px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 4px 20px rgba(0, 229, 255, 0.12);">
+    <div class="space-launch-banner">
       <div style="display: flex; align-items: center; gap: 14px;">
         <span style="font-size: 26px;">🏎️</span>
         <div>
@@ -824,6 +1024,9 @@
         <p>Empirical performance across 400 test cases and 2,000 calibrated decisions.</p>
       </div>
 
+      <div class="table-swipe-hint">
+        <span>⇄ Swipe table horizontally to view full metrics</span>
+      </div>
       <div class="table-container">
         <table>
           <thead>
@@ -1152,17 +1355,28 @@
       spawnHazard(car.lane, 860);
     }
 
-    // Canvas click to spawn hazard in specific lane
-    canvas.addEventListener('click', (e) => {
+    // Canvas click & touch to spawn hazard in specific lane
+    function handleCanvasInteraction(clientX, clientY) {
       const rect = canvas.getBoundingClientRect();
       const scaleY = canvas.height / rect.height;
-      const clickY = (e.clientY - rect.top) * scaleY;
+      const clickY = (clientY - rect.top) * scaleY;
       let clickedLane = 1;
       if (clickY < 110) clickedLane = 0;
       else if (clickY > 210) clickedLane = 2;
       spawnHazard(clickedLane, 860);
+    }
+
+    canvas.addEventListener('click', (e) => {
+      handleCanvasInteraction(e.clientX, e.clientY);
     });
 
+    canvas.addEventListener('touchstart', (e) => {
+      if (e.touches && e.touches.length > 0) {
+        e.preventDefault();
+        handleCanvasInteraction(e.touches[0].clientX, e.touches[0].clientY);
+      }
+    }, { passive: false });
+
     function updateHud() {
       const latEl = document.getElementById('hud-latency');
       const choEl = document.getElementById('hud-choice');