From f844e2acd7503500ea83430c590671561c658dc0 Mon Sep 17 00:00:00 2001
From: serrebi <serrebi101@gmail.com>
Date: Sun, 3 May 2026 22:04:54 -0700
Subject: [PATCH 1/2] =?UTF-8?q?Fix=20iPhone=20web=20client:=20split=20pane?=
 =?UTF-8?q?ls=20into=20History=20=E2=86=92=20Game=20=E2=86=92=20Chat,=20ad?=
 =?UTF-8?q?d=20tap=20defenses?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

iPhone players reported being unable to see history or the menu, and
when the menu was visible they could not tap cards to draw or play
them. Three issues compounded:

1. `.grid { display: grid }` in author CSS was overriding the UA
   stylesheet's `[hidden] { display: none }`, so `gameShell.hidden = true`
   did not actually hide the element. The login dialog backdrop happened
   to mask this pre-login, but the cascade is wrong. Add
   `[hidden] { display: none !important }` so the hidden attribute always
   wins.

2. The History+Chat panel was bundled together with chat at the bottom of
   it, sitting in column 2 on desktop and below the Game panel on mobile.
   Players asked for History at the top, Game in the middle, Chat at the
   bottom on phones. Split into three panels (history-panel / game-panel /
   chat-panel) and use `grid-template-areas` so:

   - Desktop keeps the same look: Game (left, full height), History
     (top-right), Chat (bottom-right).
   - Mobile: history → game → chat in a single column, all the way
     down.

3. Tap reliability on iPhone: buttons inside scrollable lists could feel
   unresponsive because of iOS Safari's touch-action heuristics and the
   missing `cursor: pointer`. Add `cursor: pointer`,
   `touch-action: manipulation`, `-webkit-tap-highlight-color`, and an
   `:active` background on `.menu-item-touch` and `.actions-item-btn` for
   visible tap feedback. Also add `-webkit-overflow-scrolling: touch` to
   `.menu-list` so momentum scrolling does not eat taps.

4. Compact volume controls on mobile: drop `flex-direction: column` from
   `.volume-controls` so the parent `.row` `flex-wrap: wrap` lets them
   flow horizontally; header drops from 162px to 50–106px.

Bump web client version to 2026.05.03.2 to invalidate cached app.js on
iOS Safari.

Verified in playwright iPhone emulation:
- Portrait 390x844: History (y=269), Game with full menu (y=359), Chat
  (y=719) all stack cleanly.
- Landscape 844x390: same order, all fits in 390px height.
- Desktop 1280x800: Game on left (full height), History top-right, Chat
  bottom-right.
- Click handler verified firing on .menu-item-touch buttons.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 clients/web/index.html | 36 +++++++++++++++-------------
 clients/web/styles.css | 54 ++++++++++++++++++++++++++++++------------
 clients/web/version.js |  2 +-
 3 files changed, 59 insertions(+), 33 deletions(-)

diff --git a/clients/web/index.html b/clients/web/index.html
index 260e8101..cac8a155 100644
--- a/clients/web/index.html
+++ b/clients/web/index.html
@@ -35,7 +35,23 @@ <h1>PlayPalace V11 Web</h1>
       </section>
 
       <section id="game-shell" class="grid" hidden>
-        <section class="panel">
+        <section class="panel history-panel">
+          <div class="history-header">
+            <h2><button id="history-toggle" class="history-toggle-title" type="button" tabindex="-1" aria-expanded="true">History</button></h2>
+          </div>
+          <div id="history-content">
+            <textarea id="history" class="history" readonly tabindex="0" aria-label="History"></textarea>
+            <div
+              id="history-log"
+              class="history-log"
+              tabindex="0"
+              aria-label="History"
+              hidden
+            ></div>
+          </div>
+        </section>
+
+        <section class="panel game-panel">
           <div class="row">
             <h2>Game</h2>
             <button id="actions-btn" class="secondary actions-btn" type="button" tabindex="-1">Actions</button>
@@ -51,22 +67,8 @@ <h2>Game</h2>
           </section>
         </section>
 
-        <section class="panel">
-          <div class="history-header">
-            <h2><button id="history-toggle" class="history-toggle-title" type="button" tabindex="-1" aria-expanded="true">History</button></h2>
-          </div>
-          <div id="history-content">
-            <textarea id="history" class="history" readonly tabindex="0" aria-label="History"></textarea>
-            <div
-              id="history-log"
-              class="history-log"
-              tabindex="0"
-              aria-label="History"
-              hidden
-            ></div>
-          </div>
-
-          <h2 style="margin-top: 10px;">Chat</h2>
+        <section class="panel chat-panel">
+          <h2>Chat</h2>
           <form id="chat-form" class="row" style="margin-top: 10px;">
             <label>
               Chat
diff --git a/clients/web/styles.css b/clients/web/styles.css
index bb07ab62..e58d4990 100644
--- a/clients/web/styles.css
+++ b/clients/web/styles.css
@@ -49,6 +49,14 @@
   box-sizing: border-box;
 }
 
+/* `display:` rules in author CSS (e.g. `.grid { display: grid }`) outrank the
+   UA stylesheet's `[hidden] { display: none }`. Force `hidden` to win so
+   `element.hidden = true` actually hides — without this, #game-shell stays
+   rendered when the login dialog is supposed to be the only thing on screen. */
+[hidden] {
+  display: none !important;
+}
+
 html,
 body {
   min-height: 100%;
@@ -181,9 +189,16 @@ textarea:focus-visible,
 .grid {
   display: grid;
   grid-template-columns: minmax(260px, 0.8fr) minmax(520px, 1.9fr);
+  grid-template-areas:
+    "game history"
+    "game chat";
   gap: 12px;
 }
 
+.game-panel { grid-area: game; }
+.history-panel { grid-area: history; }
+.chat-panel { grid-area: chat; }
+
 .menu-list {
   list-style: none;
   margin: 0;
@@ -193,6 +208,7 @@ textarea:focus-visible,
   max-height: 440px;
   overflow-y: auto;
   background: var(--panel-surface);
+  -webkit-overflow-scrolling: touch;
 }
 
 .menu-item {
@@ -224,6 +240,17 @@ textarea:focus-visible,
   border-radius: 0;
   background: transparent;
   color: var(--text);
+  /* iOS Safari tap reliability: skip the 300ms tap delay heuristic, suppress
+     the auto-zoom on double-tap, and give a visible flash so the user knows
+     the tap registered. Without these, taps on buttons inside scrollable
+     lists can feel unresponsive on iPhone. */
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: var(--menu-active-surface);
+}
+
+.menu-item-touch:active {
+  background: var(--menu-active-surface);
 }
 
 .history {
@@ -300,6 +327,13 @@ textarea:focus-visible,
   background: transparent;
   color: var(--text);
   min-height: 44px;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: var(--menu-active-surface);
+}
+
+.actions-item-btn:active {
+  background: var(--menu-active-surface);
 }
 
 .actions-list li:last-child .actions-item-btn {
@@ -345,15 +379,10 @@ dialog::backdrop {
 @media (max-width: 900px) {
   .grid {
     grid-template-columns: 1fr;
-  }
-
-  /* Show History above Game on narrow viewports without changing DOM
-     order (keeps Tab/screen-reader sequence desktop-correct: Game → History). */
-  #game-shell > .panel:nth-child(1) {
-    order: 2;
-  }
-  #game-shell > .panel:nth-child(2) {
-    order: 1;
+    grid-template-areas:
+      "history"
+      "game"
+      "chat";
   }
 
   main {
@@ -376,13 +405,8 @@ dialog::backdrop {
     gap: 8px;
   }
 
-  .volume-controls {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
   .volume-controls input[type="range"] {
-    width: 120px;
+    width: 110px;
   }
 
   .history {
diff --git a/clients/web/version.js b/clients/web/version.js
index a960e2de..4ee2ff9b 100644
--- a/clients/web/version.js
+++ b/clients/web/version.js
@@ -1,3 +1,3 @@
 // Maintainer-controlled web client version.
 // Increment this when you want to force cache refreshes for app assets.
-window.PLAYPALACE_WEB_VERSION = "2026.04.03.1";
+window.PLAYPALACE_WEB_VERSION = "2026.05.03.2";

From 5bd72fd0830f6a4be47d59d51347979a8f67bcf2 Mon Sep 17 00:00:00 2001
From: serrebi <serrebi101@gmail.com>
Date: Thu, 7 May 2026 22:03:30 -0700
Subject: [PATCH 2/2] Fix iPhone web audio and tap latency

---
 clients/web/app.js      |   1 +
 clients/web/audio.js    | 295 ++++++++++++++++++++++++++++++++++++++--
 clients/web/ui/menus.js |  82 ++++++++++-
 clients/web/version.js  |   2 +-
 4 files changed, 367 insertions(+), 13 deletions(-)

diff --git a/clients/web/app.js b/clients/web/app.js
index b2f8006c..9baf154e 100644
--- a/clients/web/app.js
+++ b/clients/web/app.js
@@ -1230,6 +1230,7 @@ function handlePacket(packet) {
     case "menu": {
       const previousMenu = store.state.currentMenu;
       const items = parseMenuItems(packet.items);
+      audio.preloadEffects(items.map((item) => item.sound).filter(Boolean));
 
       if (pendingActionsMenuRequest) {
         if (packet.menu_id === "actions_menu") {
diff --git a/clients/web/audio.js b/clients/web/audio.js
index 14fd4c57..46206cbb 100644
--- a/clients/web/audio.js
+++ b/clients/web/audio.js
@@ -36,6 +36,69 @@ export function createAudioEngine(options = {}) {
   const soundBaseUrl = options.soundBaseUrl || "./sounds";
   const AudioCtx = window.AudioContext || window.webkitAudioContext;
   const context = AudioCtx ? new AudioCtx() : null;
+  const MAX_EFFECT_START_DELAY_MS = 1500;
+  const MAX_EFFECT_CACHE_ENTRIES = 128;
+  const MAX_PENDING_EFFECTS = 24;
+  const PRELOAD_CONCURRENCY = 4;
+  const DEFAULT_PRELOAD_EFFECTS = [
+    "menuclick.ogg",
+    "menuenter.ogg",
+    "chat.ogg",
+    "chatlocal.ogg",
+    "typing1.ogg",
+    "typing2.ogg",
+    "typing3.ogg",
+    "typing4.ogg",
+    "mention.ogg",
+    "game_cards/play1.ogg",
+    "game_cards/play2.ogg",
+    "game_cards/play3.ogg",
+    "game_cards/play4.ogg",
+    "game_cards/draw1.ogg",
+    "game_cards/draw2.ogg",
+    "game_cards/draw3.ogg",
+    "game_cards/draw4.ogg",
+    "game_cards/discard1.ogg",
+    "game_cards/discard2.ogg",
+    "game_cards/discard3.ogg",
+    "game_cards/shuffle1.ogg",
+    "game_cards/shuffle2.ogg",
+    "game_cards/shuffle3.ogg",
+    "game_milebymile/25miles1.ogg",
+    "game_milebymile/25miles2.ogg",
+    "game_milebymile/50miles1.ogg",
+    "game_milebymile/50miles2.ogg",
+    "game_milebymile/50miles3.ogg",
+    "game_milebymile/75miles1.ogg",
+    "game_milebymile/75miles2.ogg",
+    "game_milebymile/75miles3.ogg",
+    "game_milebymile/100miles1.ogg",
+    "game_milebymile/100miles2.ogg",
+    "game_milebymile/100miles3.ogg",
+    "game_milebymile/200miles1.ogg",
+    "game_milebymile/200miles2.ogg",
+    "game_milebymile/200miles3.ogg",
+    "game_milebymile/crash1.ogg",
+    "game_milebymile/crash2.ogg",
+    "game_milebymile/drivingace.ogg",
+    "game_milebymile/extratank1.ogg",
+    "game_milebymile/extratank2.ogg",
+    "game_milebymile/flat.ogg",
+    "game_milebymile/gas.ogg",
+    "game_milebymile/greenlight1.ogg",
+    "game_milebymile/greenlight2.ogg",
+    "game_milebymile/greenlight3.ogg",
+    "game_milebymile/outofgas.ogg",
+    "game_milebymile/punctureproof.ogg",
+    "game_milebymile/repair1.ogg",
+    "game_milebymile/repair2.ogg",
+    "game_milebymile/rightofway.ogg",
+    "game_milebymile/sparetyre.ogg",
+    "game_milebymile/speedlimit.ogg",
+    "game_milebymile/speedlimitend.ogg",
+    "game_milebymile/stop.ogg",
+    "game_milebymile/winround.ogg",
+  ];
 
   let effectsGain = null;
   let musicGain = null;
@@ -52,8 +115,12 @@ export function createAudioEngine(options = {}) {
   let currentAmbienceLoopName = "";
   let pendingAmbiencePacket = null;
   const pendingEffectPackets = [];
-  const MAX_PENDING_EFFECTS = 24;
   const activeEffects = new Map();
+  const activeBufferEffects = new Set();
+  const effectBufferCache = new Map();
+  const preloadQueue = [];
+  const preloadQueued = new Set();
+  let activePreloads = 0;
   let muted = false;
 
   if (context) {
@@ -78,6 +145,7 @@ export function createAudioEngine(options = {}) {
     if (context.state !== "running") {
       await context.resume();
     }
+    preloadEffects(DEFAULT_PRELOAD_EFFECTS);
     retryPendingPlayback();
     return context.state === "running";
   }
@@ -136,13 +204,173 @@ export function createAudioEngine(options = {}) {
     }
   }
 
-  function playSound(packet) {
-    const name = packet.name || packet.sound || "";
+  function canUseBufferedEffect(url) {
+    return Boolean(
+      context
+      && effectsGain
+      && typeof fetch === "function"
+      && !isCrossOriginUrl(url)
+    );
+  }
+
+  function rememberEffectCacheUse(url, entry) {
+    effectBufferCache.delete(url);
+    effectBufferCache.set(url, entry);
+    while (effectBufferCache.size > MAX_EFFECT_CACHE_ENTRIES) {
+      const oldestUrl = effectBufferCache.keys().next().value;
+      effectBufferCache.delete(oldestUrl);
+    }
+  }
+
+  function decodeAudioBuffer(arrayBuffer) {
+    if (!context) {
+      return Promise.reject(new Error("Audio context unavailable"));
+    }
+    return new Promise((resolve, reject) => {
+      let settled = false;
+      const finish = (callback, value) => {
+        if (settled) {
+          return;
+        }
+        settled = true;
+        callback(value);
+      };
+
+      try {
+        const maybePromise = context.decodeAudioData(
+          arrayBuffer.slice(0),
+          (buffer) => finish(resolve, buffer),
+          (error) => finish(reject, error)
+        );
+        if (maybePromise && typeof maybePromise.then === "function") {
+          maybePromise.then(
+            (buffer) => finish(resolve, buffer),
+            (error) => finish(reject, error)
+          );
+        }
+      } catch (error) {
+        finish(reject, error);
+      }
+    });
+  }
+
+  function loadEffectBuffer(url) {
+    const cached = effectBufferCache.get(url);
+    if (cached) {
+      rememberEffectCacheUse(url, cached);
+      return cached.promise;
+    }
+
+    const entry = {
+      promise: fetch(url, { cache: "force-cache" })
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`Sound fetch failed: ${response.status}`);
+          }
+          return response.arrayBuffer();
+        })
+        .then((arrayBuffer) => decodeAudioBuffer(arrayBuffer)),
+    };
+    rememberEffectCacheUse(url, entry);
+    return entry.promise;
+  }
+
+  function queueEffectPreload(name) {
     const url = toSoundUrl(name, soundBaseUrl);
-    if (!url) {
+    if (!url || !canUseBufferedEffect(url) || preloadQueued.has(url) || effectBufferCache.has(url)) {
+      return;
+    }
+    preloadQueued.add(url);
+    preloadQueue.push(url);
+    pumpEffectPreloads();
+  }
+
+  function pumpEffectPreloads() {
+    while (activePreloads < PRELOAD_CONCURRENCY && preloadQueue.length > 0) {
+      const url = preloadQueue.shift();
+      activePreloads += 1;
+      loadEffectBuffer(url)
+        .catch(() => {
+          effectBufferCache.delete(url);
+          preloadQueued.delete(url);
+        })
+        .finally(() => {
+          activePreloads -= 1;
+          pumpEffectPreloads();
+        });
+    }
+  }
+
+  function preloadEffects(names = []) {
+    for (const name of names) {
+      queueEffectPreload(name);
+    }
+  }
+
+  function stopBufferEffect(effect) {
+    try { effect.source.stop(); } catch { /* already stopped */ }
+    try { effect.source.disconnect(); } catch { /* already disconnected */ }
+    try { effect.gain.disconnect(); } catch { /* already disconnected */ }
+    if (effect.panner) {
+      try { effect.panner.disconnect(); } catch { /* already disconnected */ }
+    }
+    activeBufferEffects.delete(effect);
+  }
+
+  function startBufferedEffect(buffer, packet, queuedAtMs) {
+    if (!context || !effectsGain || muted) {
       return;
     }
+    if (performance.now() - queuedAtMs > MAX_EFFECT_START_DELAY_MS) {
+      return;
+    }
+
+    const source = context.createBufferSource();
+    source.buffer = buffer;
+    source.playbackRate.value = Math.max(0.5, Math.min(2, (packet.pitch ?? 100) / 100));
+
+    const gain = context.createGain();
+    const volume = Math.max(0, Math.min(1, (packet.volume ?? 100) / 100));
+    gain.gain.value = muted ? 0 : volume;
+
+    let panner = null;
+    if (typeof context.createStereoPanner === "function") {
+      panner = context.createStereoPanner();
+      panner.pan.value = Math.max(-1, Math.min(1, (packet.pan ?? 0) / 100));
+      source.connect(panner);
+      panner.connect(gain);
+    } else {
+      source.connect(gain);
+    }
+    gain.connect(effectsGain);
 
+    const effect = { source, gain, panner, volume };
+    activeBufferEffects.add(effect);
+    if (typeof source.addEventListener === "function") {
+      source.addEventListener("ended", () => stopBufferEffect(effect), { once: true });
+    } else {
+      source.onended = () => stopBufferEffect(effect);
+    }
+    try {
+      source.start(0);
+    } catch {
+      stopBufferEffect(effect);
+    }
+  }
+
+  function queuePendingEffect(packet) {
+    if (pendingEffectPackets.length >= MAX_PENDING_EFFECTS) {
+      pendingEffectPackets.shift();
+    }
+    pendingEffectPackets.push({
+      name: packet.name || packet.sound || "",
+      volume: packet.volume ?? 100,
+      pan: packet.pan ?? 0,
+      pitch: packet.pitch ?? 100,
+    });
+  }
+
+  function playSoundWithElement(packet, url, name) {
     const audio = createAudioElement(url);
     audio.muted = muted;
     audio.preload = "auto";
@@ -164,10 +392,7 @@ export function createAudioEngine(options = {}) {
       safePlay(audio, {
         onRejected: () => {
           cleanup();
-          if (pendingEffectPackets.length >= MAX_PENDING_EFFECTS) {
-            pendingEffectPackets.shift();
-          }
-          pendingEffectPackets.push({
+          queuePendingEffect({
             name,
             volume: packet.volume ?? 100,
             pan: packet.pan ?? 0,
@@ -180,6 +405,53 @@ export function createAudioEngine(options = {}) {
     }
   }
 
+  function playSound(packet) {
+    const name = packet.name || packet.sound || "";
+    const url = toSoundUrl(name, soundBaseUrl);
+    if (!url) {
+      return;
+    }
+
+    if (canUseBufferedEffect(url)) {
+      if (context.state !== "running") {
+        queuePendingEffect(packet);
+        queueEffectPreload(name);
+        return;
+      }
+      const queuedAtMs = performance.now();
+      loadEffectBuffer(url)
+        .then((buffer) => {
+          startBufferedEffect(buffer, packet, queuedAtMs);
+        })
+        .catch(() => {
+          effectBufferCache.delete(url);
+          playSoundWithElement(packet, url, name);
+        });
+      return;
+    }
+
+    playSoundWithElement(packet, url, name);
+  }
+
+  if (context) {
+    setTimeout(() => {
+      preloadEffects([
+        "menuclick.ogg",
+        "menuenter.ogg",
+        "chat.ogg",
+        "chatlocal.ogg",
+        "game_cards/play1.ogg",
+        "game_cards/play2.ogg",
+        "game_cards/play3.ogg",
+        "game_cards/play4.ogg",
+        "game_cards/draw1.ogg",
+        "game_cards/draw2.ogg",
+        "game_cards/draw3.ogg",
+        "game_cards/draw4.ogg",
+      ]);
+    }, 0);
+  }
+
   function playMusic(packet) {
     const name = packet.name || packet.music || "";
     const url = toSoundUrl(name, soundBaseUrl);
@@ -419,6 +691,9 @@ export function createAudioEngine(options = {}) {
     for (const effect of activeEffects.keys()) {
       effect.muted = muted;
     }
+    for (const effect of activeBufferEffects) {
+      effect.gain.gain.value = muted ? 0 : effect.volume;
+    }
   }
 
   function isMuted() {
@@ -458,6 +733,9 @@ export function createAudioEngine(options = {}) {
       disconnectNodes(nodes);
     }
     activeEffects.clear();
+    for (const effect of Array.from(activeBufferEffects)) {
+      stopBufferEffect(effect);
+    }
   }
 
   return {
@@ -475,5 +753,6 @@ export function createAudioEngine(options = {}) {
     setMuted,
     isMuted,
     retryPendingPlayback,
+    preloadEffects,
   };
 }
diff --git a/clients/web/ui/menus.js b/clients/web/ui/menus.js
index d0addbfa..ea3c947f 100644
--- a/clients/web/ui/menus.js
+++ b/clients/web/ui/menus.js
@@ -14,6 +14,7 @@ export function createMenuView({
   let searchBuffer = "";
   let lastTypeTime = 0;
   const typeTimeoutSeconds = 0.15;
+  let suppressClickUntil = 0;
 
   function menuStructureSnapshot(menu) {
     const itemsSnapshot = (menu.items || [])
@@ -49,6 +50,19 @@ export function createMenuView({
     }
   }
 
+  function setSelectionSilently(next) {
+    const count = store.state.currentMenu.items.length;
+    if (!count) {
+      store.setMenu({ selection: 0 });
+      return 0;
+    }
+    const bounded = Math.max(0, Math.min(count - 1, next));
+    if (bounded !== store.state.currentMenu.selection) {
+      store.setMenu({ selection: bounded });
+    }
+    return bounded;
+  }
+
   function moveSelection(delta) {
     const menu = store.state.currentMenu;
     const count = menu.items.length;
@@ -113,10 +127,26 @@ export function createMenuView({
     if (!item) {
       return;
     }
+    onActivate(item, menu.selection);
+    if (onActivateSound) {
+      onActivateSound();
+    }
+  }
+
+  function activateIndex(selectionIndex) {
+    const menu = store.state.currentMenu;
+    if (!menu.items.length) {
+      return;
+    }
+    const bounded = setSelectionSilently(selectionIndex);
+    const item = store.state.currentMenu.items[bounded];
+    if (!item) {
+      return;
+    }
+    onActivate(item, bounded);
     if (onActivateSound) {
       onActivateSound();
     }
-    onActivate(item, menu.selection);
   }
 
   function applySelection(selectionIndex) {
@@ -166,9 +196,53 @@ export function createMenuView({
         button.type = "button";
         button.className = "menu-item-touch";
         button.textContent = item.text;
-        button.addEventListener("click", () => {
-          setSelection(index);
-          activateSelection();
+        let pointerStart = null;
+        button.addEventListener("pointerdown", (event) => {
+          if (event.pointerType !== "touch" && event.pointerType !== "pen") {
+            pointerStart = null;
+            return;
+          }
+          pointerStart = {
+            id: event.pointerId,
+            x: event.clientX,
+            y: event.clientY,
+            cancelled: false,
+          };
+        }, { passive: true });
+        button.addEventListener("pointermove", (event) => {
+          if (!pointerStart || pointerStart.id !== event.pointerId) {
+            return;
+          }
+          const dx = Math.abs(event.clientX - pointerStart.x);
+          const dy = Math.abs(event.clientY - pointerStart.y);
+          if (dx > 12 || dy > 12) {
+            pointerStart.cancelled = true;
+          }
+        }, { passive: true });
+        button.addEventListener("pointercancel", () => {
+          pointerStart = null;
+        });
+        button.addEventListener("pointerup", (event) => {
+          if (!pointerStart || pointerStart.id !== event.pointerId) {
+            return;
+          }
+          const started = pointerStart;
+          pointerStart = null;
+          if (started.cancelled) {
+            return;
+          }
+          if (event.cancelable) {
+            event.preventDefault();
+          }
+          suppressClickUntil = performance.now() + 750;
+          activateIndex(index);
+        });
+        button.addEventListener("click", (event) => {
+          if (performance.now() < suppressClickUntil) {
+            event.preventDefault();
+            return;
+          }
+          activateIndex(index);
         });
         li.appendChild(button);
       } else {
diff --git a/clients/web/version.js b/clients/web/version.js
index 4ee2ff9b..6e73f4a5 100644
--- a/clients/web/version.js
+++ b/clients/web/version.js
@@ -1,3 +1,3 @@
 // Maintainer-controlled web client version.
 // Increment this when you want to force cache refreshes for app assets.
-window.PLAYPALACE_WEB_VERSION = "2026.05.03.2";
+window.PLAYPALACE_WEB_VERSION = "2026.05.07.1";