diff --git a/web/how-it-works.html b/web/how-it-works.html
index 498b42c..c7f27a3 100644
--- a/web/how-it-works.html
+++ b/web/how-it-works.html
@@ -341,9 +341,9 @@ try {
diff --git a/web/zebra-audio.html b/web/zebra-audio.html
index f0db38d..c9f7b4a 100644
--- a/web/zebra-audio.html
+++ b/web/zebra-audio.html
@@ -747,9 +747,9 @@ else wirePuppet();
diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html
index c47fa1d..a273e91 100644
--- a/web/zebra-spaces.html
+++ b/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