zebra-spaces: game thumbs are pure static cards — no iframe, click to play

Confirming the design fox specified: each game (unmario, cake murder
adventure) is a separate STABLE tile in the left column. The thumbnail
NEVER mounts an iframe (no game JS running in the background, no
audio bleed, no network cost) — it's a card with the game's name in
chunkfive and a green '▶ play' cue in the meta strip.

Clicking a tile:
- Mounts a fresh iframe in the middle spotlight slot (only then does
  the game actually load and become playable)
- Updates spotlight state to { kind: 'game', pubHex: id }
- Broadcasts the spotlight change so every other person in the room
  sees 'fxhp now viewing unmario' in their log
- Re-orders thumbnails by popularity (viewer count)
- The previous spotlight tile's iframe is torn out of the DOM, so
  switching games stops the previous one cleanly

Clicking the already-spotlit game tile is a no-op (already playing).

CSS rename: .game-label → .game-poster + new .game-meta strip with
the play cue. Title now uses the chunkfive serif (same family as
the page headings) so the games read as 'content' rather than 'UI'.

web/zebra-spaces.html

@@ -184,18 +184,27 @@
    * sort knows people are watching. */
   .games-h2 { margin-top: 0.5rem; }
   #games-thumbs { display: grid; grid-template-columns: 1fr; gap: 0.45rem; }
+  /* game thumb is a STATIC tile — never loads the iframe; it's just a
+   * card with title + 'play' cue. The iframe only mounts when the tile
+   * is clicked into the spotlight slot. Click → spotlight + broadcast. */
   .game-thumb {
     border: 1px solid #ddd; background: #fff; padding: 0;
-    display: grid; grid-template-columns: 1fr; gap: 0;
+    display: grid; grid-template-rows: 1fr auto; gap: 0;
     cursor: pointer; position: relative;
     aspect-ratio: 16 / 9;
   }
   .game-thumb:hover { outline: 1px solid #888; }
-  .game-thumb .game-label {
+  .game-thumb .game-poster {
     display: grid; place-items: center; text-align: center;
-    font-family: monospace; font-size: 0.85rem; padding: 0.5rem;
-    background: #f0f0f0; color: #333;
+    font-family: 'chunkfiveregular', serif; font-size: 1.05rem;
+    padding: 0.5rem; background: #f0f0f0; color: #333;
+    letter-spacing: 0.02em;
   }
+  .game-thumb .game-meta {
+    background: #111; color: #ddd; font-size: 0.65rem; padding: 0.2rem 0.4rem;
+    display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; align-items: center;
+  }
+  .game-thumb .game-meta .play-cue { color: #6c6; letter-spacing: 0.04em; }
   /* spotlit game shows the iframe at full size in the middle column */
   #spotlight > .game-tile {
     border: 1px solid #ddd; background: #fff;
@@ -210,7 +219,7 @@
     display: grid; grid-template-columns: 1fr auto; align-items: center;
   }
   html.theme-dark .game-thumb { background: #000; border-color: #000; }
-  html.theme-dark .game-thumb .game-label { background: #111; color: #ddd; }
+  html.theme-dark .game-thumb .game-poster { background: #111; color: #ddd; }
   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; }
@@ -1533,17 +1542,25 @@ function ownerLabel(kind, pubHex){
   const handle = m ? (m.mm.handle || shortHex(pubHex)) : shortHex(pubHex);
   return handle + "'s " + (TILE_KINDS[kind] ? TILE_KINDS[kind].labelPrefix : kind);
 }
-/* game thumbs live in #games-thumbs and click → setSpotlight('game', id) */
+/* game thumbs are STATIC cards. No iframe → no game JS, no network, no
+ * audio. The game only loads (in an iframe in the spotlight slot) when
+ * the tile is clicked. Click also broadcasts the spotlight choice so
+ * the room sees 'alice now viewing unmario'. */
 function buildGameThumb(id){
   const g = GAMES[id]; if (!g) return null;
   const tile = document.createElement('div');
   tile.className = 'game-thumb';
   tile.dataset.pubHex = id;
   tile.dataset.kind = 'game';
-  const label = document.createElement('div');
-  label.className = 'game-label';
-  label.textContent = g.label;
-  tile.appendChild(label);
+  const poster = document.createElement('div');
+  poster.className = 'game-poster';
+  poster.textContent = g.label;
+  tile.appendChild(poster);
+  const meta = document.createElement('div'); meta.className = 'game-meta';
+  const who  = document.createElement('span'); who.textContent = 'game';
+  const cue  = document.createElement('span'); cue.className = 'play-cue'; cue.textContent = '▶ play';
+  meta.appendChild(who); meta.appendChild(cue);
+  tile.appendChild(meta);
   const view = document.createElement('div'); view.className = 'viewing-badge'; view.textContent = 'viewing';
   tile.appendChild(view);
   tile.addEventListener('click', () => {
@@ -3363,8 +3380,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">f42670fad4ce383bc903910aa43e99a3</span><br>
-  sha256 <span class="stamp-sha">3519283eb1041cef47bab75c9924c4d58702b64c2681aa66ccd71c5d2a9f3cbb</span><br>
+  md5 <span class="stamp-md5">aec8e1a791c0723464e7405f71b11ae7</span><br>
+  sha256 <span class="stamp-sha">baa9354fbc0ff538dcb65e510ae7c6e1b01a5032e8e44c8ff51b0c76f821f4cf</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>