Mobile optimization: single column layout, no WASM iframes on mobile

app.js

@@ -12,6 +12,7 @@
   let baseUrl = '';
   let activeCategory = 'all';
   let activeStage = 'policy';
+  const isMobile = window.matchMedia('(max-width: 480px)').matches;
 
   // ------------------------------------
   // DOM refs
@@ -89,7 +90,7 @@
       ? mediaUrl(stageData)
       : null;
     const isVideo = mediaSrc && mediaSrc.endsWith('.mp4');
-    const useViewer = activeStage === 'policy' && clip.has_onnx;
+    const useViewer = activeStage === 'policy' && clip.has_onnx && !isMobile;
 
     const stages = ['capture', 'retarget', 'training', 'policy'];
 
@@ -164,7 +165,7 @@
     var stageData = clip.stages[stage];
     if (!stageData) return;
 
-    var useViewer = stage === 'policy' && clip.has_onnx;
+    var useViewer = stage === 'policy' && clip.has_onnx && !isMobile;
     var src = mediaUrl(stageData);
     var isVideo = src && src.endsWith('.mp4');
     var existing = card.querySelector('.card-media img, .card-media video, .card-media iframe');
@@ -219,7 +220,7 @@
             lazyObserver.unobserve(img);
           }
         });
-      }, { rootMargin: '300px' });
+      }, { rootMargin: isMobile ? '100px' : '300px' });
     }
 
     var lazies = grid.querySelectorAll('img[data-src], video[data-src], iframe[data-src]');
@@ -320,7 +321,7 @@
       var data = clip.stages[s];
       var unavail = !data ? ' unavailable' : '';
       var label = '<div class="modal-stage-label">' + s.toUpperCase() + '</div>';
-      var useViewer = s === 'policy' && clip.has_onnx;
+      var useViewer = s === 'policy' && clip.has_onnx && !isMobile;
 
       if (useViewer) {
         var iframeSrc = 'viewer.html?clip=' + encodeURIComponent(clip.id) +

style.css

@@ -963,12 +963,14 @@ footer {
 
   .hero-title { font-size: 2.8rem; }
 
-  .grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
+  .grid { grid-template-columns: 1fr; gap: 0.75rem; }
+
+  .card-media { aspect-ratio: 4/3; }
 
   .card-info { padding: 0.6rem 0.75rem 0.75rem; }
-  .card-title { font-size: 0.8rem; }
-  .card-meta { font-size: 0.6rem; }
-  .card-stage-btn { width: 22px; height: 22px; font-size: 0.5rem; }
+  .card-title { font-size: 0.85rem; }
+  .card-meta { font-size: 0.65rem; }
+  .card-stage-btn { width: 24px; height: 24px; font-size: 0.55rem; }
 
   .pipeline-strip { transform: scale(0.7); }