diff --git a/zebra-report/zebra-spaces.html b/zebra-report/zebra-spaces.html
index cd30161..5ef5425 100644
--- a/zebra-report/zebra-spaces.html
+++ b/zebra-report/zebra-spaces.html
@@ -100,35 +100,41 @@
    * controls (kept narrow so the screen share gets maximum pixels).
    * Both columns get min-width:0 so they shrink without forcing a
    * horizontal scrollbar. */
-  /* three columns: cameras-vertical | screen/timeline | controls.
-   * The cameras column auto-collapses to width:0 when nobody has a
-   * camera on (.hidden), so a typical mic-only room reads as the
-   * original two-column layout. */
+  /* three columns: cameras (left) | timeline/screen (middle) | controls (right).
+   * The 220px cameras track stays reserved even when no camera is live —
+   * .hidden hides the section content but the column itself stays put so
+   * the timeline (with the game iframe or a screen share) keeps its
+   * middle position instead of sliding leftmost. */
   .page {
     display: grid;
-    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, 360px);
+    grid-template-columns: 220px minmax(0, 1fr) minmax(0, 360px);
     gap: 1.25rem;
     align-items: start;
   }
   .cameras-col {
-    width: 220px; min-width: 0;
+    min-width: 0;
     border-right: 1px solid #ddd; padding-right: 1.25rem;
     display: flex; flex-direction: column;
   }
-  .cameras-col.hidden { display: none; }
-  /* collapsed: right column folds away so the screen+cameras layout
-   * fills the viewport. */
+  .cameras-col.hidden h2,
+  .cameras-col.hidden #cameras { display: none; }
+  /* hide-panel = focus mode: both side columns fold away, screen+timeline
+   * fills the full viewport. Cameras and controls both go to display:none
+   * so the screen-share / game iframe has nothing competing with it. */
   .page.controls-collapsed {
-    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
-    gap: 1.25rem;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
   }
-  .page.controls-collapsed > .controls { display: none; }
+  .page.controls-collapsed > .controls,
+  .page.controls-collapsed > .cameras-col { display: none; }
   .page.controls-collapsed > .timeline { border-right: none; padding-right: 0; }
   /* honour the pre-paint pref so first-paint matches saved state */
   html.controls-collapsed-pref .page {
-    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0;
   }
-  html.controls-collapsed-pref .page > .controls { display: none; }
+  html.controls-collapsed-pref .page > .controls,
+  html.controls-collapsed-pref .page > .cameras-col { display: none; }
   html.controls-collapsed-pref .page > .timeline { border-right: none; padding-right: 0; }
   .timeline {
     border-right: 1px solid #ddd; padding-right: 1.25rem; min-height: 60vh;
@@ -2249,8 +2255,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');
 
 <footer style="margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
   <span id="pi-seal" style="color:#777;cursor:default;user-select:none" title="">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-02</span><br>
-  md5 <span class="stamp-md5">8adf0c5717ac94980b9f3f986f6c947b</span><br>
-  sha256 <span class="stamp-sha">60d9c9bb2e8c72334e53847efd8f151b972235a2425b39c2302f4fe5c0897fc7</span><br>
+  md5 <span class="stamp-md5">a6c36b06668308278c7645054fb5e432</span><br>
+  sha256 <span class="stamp-sha">cc3fe5cbc7e83183066c4ea09d1bb9d261a1a75c1abe51edfd6f2898e44d5374</span><br>
   <span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
   <span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify against these hashes; point at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
 </footer>