zebra-spaces: stacked layout below 1100px (kill cramped 3-col on iPad/split-screen)

Bumps the stacked-layout breakpoint from 800px to 1100px. iPad
landscape (1024), desktop split-screen halves (~960), and tablet
portrait (768) now get the same vertical controls -> timeline ->
cameras stack a phone does, instead of three squeezed columns.

Also fixes a latent source-order cascade bug: the phone-only
#tiles-thumbs single-column override was placed before the default
auto-fill rule, so equal-specificity cascade let the default win.
Moved the override after the default; phones now actually get
single-column thumbs as the comment claimed.

Other 4 pages: stamp date bump 2026-06-07 -> 2026-06-08 from this
session's make stamp run.

web/chat.html

@@ -1747,9 +1747,9 @@ logLine('sys', 'chat content lives in encrypted SRTP audio. no IP packets carry
 })();
 </script>
 <footer style="max-width:820px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
-  <span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-07</span><br>
+  <span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-08</span><br>
-  md5 <span class="stamp-md5">c9fee1030b030fb1277cb89607ef7d8d</span><br>
+  md5 <span class="stamp-md5">68063155fd1e2138476cfd8a3518ea33</span><br>
-  sha256 <span class="stamp-sha">12c4070297b0d4d671e84d18891451289968f14b12fc2309f4dc85bef47528be</span><br>
+  sha256 <span class="stamp-sha">274a98127fba00617dd4540419c61b1080d2d5dcc1da48f3bc3f22d0ad415a47</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 it against these hashes; point it 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>

web/host-your-own.html

@@ -507,9 +507,9 @@ handle /zebra-spaces-sfu*    { reverse_proxy localhost:8092 { flush_interval -1
 </p>
 
 <footer style="max-width:820px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
-  <span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-07</span><br>
+  <span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-08</span><br>
-  md5 <span class="stamp-md5">97108d6b240474c7e1b3bea7ae889cc4</span><br>
+  md5 <span class="stamp-md5">fba56654bb0331ff415d14f655ef9e72</span><br>
-  sha256 <span class="stamp-sha">9ac307a6b7bdedc95d44e5395a984be9ffd68d726459f96432373eb9bb67497f</span><br>
+  sha256 <span class="stamp-sha">d543c2528cb8e04f7a1e841940cd7d8ca05b1ec4b9e3e23d1623952b0eec9128</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 it against these hashes; point it at your own servers with ?signal= and ?turncred=</span>
 </footer>

web/how-it-works.html

@@ -341,9 +341,9 @@ try {
 </p>
 
 <footer style="max-width:820px;margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
-  <span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-07</span><br>
+  <span style="color:#777">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-06-08</span><br>
-  md5 <span class="stamp-md5">402c3b4d6e72b8cc6692166fc4683978</span><br>
+  md5 <span class="stamp-md5">afd65bceadd50f210103e4aa0db67f1e</span><br>
-  sha256 <span class="stamp-sha">5f0a1a8dafd2074081c9189d12455797157901f9e52bb7c4899d4c7b7dd7bf95</span><br>
+  sha256 <span class="stamp-sha">40bce299a96e57f2835c7c6d95c40c0f24309c91498eebbf20f1b966b3c79cbf</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 it against these hashes; point it 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>

web/zebra-audio.html

@@ -747,9 +747,9 @@ else wirePuppet();
 </section>
 
 <footer style="max-width:560px;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-07</span><br>
+  <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-08</span><br>
-  md5 <span class="stamp-md5">92054b1353cdbde054776ac5ed46b531</span><br>
+  md5 <span class="stamp-md5">68333dfbb426a52482dd269ec196960b</span><br>
-  sha256 <span class="stamp-sha">6a3dc7206ba425b7f36e8d04b2fd78a1ad53abb7033ba5a39656071591b33a34</span><br>
+  sha256 <span class="stamp-sha">238a9c9f9f93b64c4ed22d32db2074748418e63499996a967a9beba4ead09038</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 it against these hashes; point it 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>

web/zebra-spaces.html

@@ -255,11 +255,14 @@
   html.theme-dark #spotlight > .game-tile { background: #000; border-color: #000; }
   html.theme-dark #spotlight > .game-tile iframe { background: #000; }
   html.theme-dark #spotlight > .game-tile .screen-meta { background: #111; color: #ddd; }
-  @media (max-width: 800px) {
+  /* Stacked layout for narrow viewports — anything below a proper
+   * desktop width. 3-col only kicks in past ~1100px so iPad landscape
+   * (1024) and desktop split-screen halves (~960) get the same clean
+   * stack a phone does, instead of three cramped columns. */
+  @media (max-width: 1100px) {
     body { padding: 1.25rem; }
-    /* mobile: single column, all three sections stack to grid-column:1 */
     .page { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
-    /* hide-panel on mobile must NOT swap the layout into the wide-
+    /* hide-panel in the stacked layout must NOT swap into the wide-
      * viewport two-column rail (cameras-col + timeline). Keep the
      * single-column stack regardless of the controls-collapsed state.
      * Wins over the desktop .controls-collapsed selector by being
@@ -276,10 +279,6 @@
     .cameras-col { grid-row: 3;
                    border-right: none; border-top: 1px solid #ddd;
                    padding-right: 0; padding-top: 1rem; }
-    /* on mobile each thumb takes a full row — a phone viewport is
-     * narrow enough that splitting into 2 columns of ~200px ends up
-     * smaller than just stacking. */
-    #tiles-thumbs { grid-template-columns: minmax(0, 1fr); }
   }
   /* never let dynamically-appended <audio> sinks (one per remote
    * speaker) render their default ~300px control strip — they're just
@@ -300,6 +299,15 @@
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 0.45rem;
   }
+  /* Phone-only: force the thumb strip to a single column. At iPad /
+   * split-screen widths the cameras row is already full-width, so
+   * the default `auto-fill, minmax(180px, 1fr)` flows into a proper
+   * multi-column thumb grid and looks better than one tall column.
+   * Placed AFTER the default rule so equal-specificity cascade lets
+   * this win at phone widths. */
+  @media (max-width: 600px) {
+    #tiles-thumbs { grid-template-columns: minmax(0, 1fr); }
+  }
   #tiles-h2 { margin-top: 0.5rem; }
   #tiles-h2.hidden { display: none; }
   /* a thumbnail tile is the same DOM as a spotlight tile but with a
@@ -8185,8 +8193,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-08</span><br>
-  md5 <span class="stamp-md5">f0683ffe29d81f94723827e7a30dfd79</span><br>
+  md5 <span class="stamp-md5">e339a5ecf685cd8156d05ae92a5a3ff1</span><br>
-  sha256 <span class="stamp-sha">82b472dbfb211e43d0e9a38c671fde545e87a242a8dd500115a6837d94b0d137</span><br>
+  sha256 <span class="stamp-sha">5d49151e9777bad0ea4a89c79dc153924c80fc2771748ffab89fef205380d36b</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>