Mobile: lock viewport (no pinch/double-tap/input-focus zoom) + hold-to-aim skills

app.py HEAD: re-assert a locked viewport (user-scalable=no, maximum-scale=1), inputs at
16px so iOS doesn't auto-zoom on focus, touch-action:manipulation to kill double-tap zoom,
and block iOS gesture (pinch) events — fixes the readability drift on mobile. Rebuilt
comboBattler with hold-to-aim/release-to-cast skill buttons + non-selectable HUD buttons.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

app.py

@@ -150,7 +150,28 @@ THEME = ('<style>'
 # (SPACE_ID/SPACE_HOST are set there); local `python app.py` over http omits it and just works.
 _CSP = ('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
         if (os.environ.get("SPACE_ID") or os.environ.get("SPACE_HOST")) else '')
-HEAD = (_CSP
+
+# Mobile zoom is a readability hazard for a full-screen game: pinch-zoom + double-tap zoom drift
+# the canvas, and focusing a text input auto-zooms on iOS. Lock the viewport (re-asserted, since
+# Gradio sets its own), keep inputs at 16px (iOS only zooms on <16px focus), kill double-tap via
+# touch-action, and block iOS gesture (pinch) events.
+NOZOOM = (
+    '<style>'
+    'html,body,gradio-app,.gradio-container{touch-action:manipulation;}'
+    '.gradio-container input,.gradio-container textarea,.gradio-container select,'
+    'input,textarea,select{font-size:16px !important;}'
+    '</style>'
+    '<script>(function(){'
+    'function vp(){var m=document.querySelector("meta[name=viewport]");'
+    'if(!m){m=document.createElement("meta");m.setAttribute("name","viewport");document.head.appendChild(m);}'
+    'm.setAttribute("content","width=device-width, initial-scale=1, maximum-scale=1, '
+    'minimum-scale=1, user-scalable=no, viewport-fit=cover");}'
+    'vp();document.addEventListener("DOMContentLoaded",vp);setTimeout(vp,800);setTimeout(vp,2500);'
+    '["gesturestart","gesturechange","gestureend"].forEach(function(e){'
+    'document.addEventListener(e,function(ev){ev.preventDefault();},{passive:false});});'
+    '})();</script>'
+)
+HEAD = (_CSP + NOZOOM
         + HIDE_TABS + FONTS + THEME +
         '<link rel="stylesheet" href="/web/shell/tokens.css">'
         '<link rel="stylesheet" href="/web/shell/sidebar.css">'

web/comboBattler.js

@@ -6208,6 +6208,14 @@ function mountComboBattler(pixi, host, opts = {}) {
   }
   let skillRowEl = null, adrFill = null, threatBadge = null;
   const skillBtns = [];
+  let aimSkill = null, aimIdx = 0;
+  const BTN_CSS = (s, big) => `pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;width:${s}px;height:${s}px;border-radius:50%;border:1px solid #20262e;background:rgba(20,24,33,.78);color:#e8e8e8;font:600 ${big ? 22 : 15}px monospace;cursor:pointer;display:flex;align-items:center;justify-content:center`;
+  const btnLabel = (text) => {
+    const s = document.createElement("span");
+    s.textContent = text;
+    s.style.cssText = "pointer-events:none;user-select:none;-webkit-user-select:none";
+    return s;
+  };
   function skillReady(a, s) {
     if (!a || !s) return false;
     if (s.cost?.adrenaline && a.adrenaline < s.cost.adrenaline) return false;
@@ -6218,15 +6226,24 @@ function mountComboBattler(pixi, host, opts = {}) {
   }
   function roundBtn(label, on, big) {
     const b = document.createElement("button");
-    b.textContent = label;
-    const s = big ? 70 : 46;
-    b.style.cssText = `pointer-events:auto;touch-action:manipulation;width:${s}px;height:${s}px;border-radius:50%;border:1px solid #20262e;background:rgba(20,24,33,.78);color:#e8e8e8;font:600 ${big ? 22 : 15}px monospace;cursor:pointer`;
+    b.style.cssText = BTN_CSS(big ? 70 : 46, big);
+    b.appendChild(btnLabel(label));
     b.addEventListener("pointerdown", (ev) => {
       ev.preventDefault();
       on();
     });
     return b;
   }
+  function holdBtn(label, onDown) {
+    const b = document.createElement("button");
+    b.style.cssText = BTN_CSS(46, false);
+    b.appendChild(btnLabel(label));
+    b.addEventListener("pointerdown", (ev) => {
+      ev.preventDefault();
+      onDown();
+    });
+    return b;
+  }
   function rebuildSkillButtons() {
     if (!skillRowEl) return;
     skillRowEl.replaceChildren();
@@ -6234,9 +6251,10 @@ function mountComboBattler(pixi, host, opts = {}) {
     const bar = pa()?.bar || [];
     bar.forEach((s, i) => {
       const cost = s.cost?.adrenaline ? `${s.cost.adrenaline}adr` : s.cost?.energy ? `${s.cost.energy}en` : "";
-      const b = roundBtn(String(i + 1), () => {
-        req.skill = i + 1;
-      }, false);
+      const b = holdBtn(String(i + 1), () => {
+        aimSkill = s;
+        aimIdx = i + 1;
+      });
       b.title = `${s.name || ""}${cost ? " \xB7 " + cost : ""}`;
       skillRowEl.appendChild(b);
       skillBtns.push({ el: b, skill: s });
@@ -6349,9 +6367,22 @@ function mountComboBattler(pixi, host, opts = {}) {
     threatBadge = document.createElement("div");
     threatBadge.style.cssText = "position:absolute;top:14px;left:50%;transform:translateX(-50%);pointer-events:none;padding:5px 12px;border-radius:999px;background:rgba(20,24,33,.8);border:1px solid #2a3340;color:#e8e8e8;font:700 12px monospace;letter-spacing:.04em";
     wrap.appendChild(threatBadge);
+    const castOnRelease = () => {
+      if (aimSkill) {
+        req.skill = aimIdx;
+        aimSkill = null;
+      }
+    };
+    const cancelAim = () => {
+      aimSkill = null;
+    };
+    window.addEventListener("pointerup", castOnRelease);
+    window.addEventListener("pointercancel", cancelAim);
     wrap._cleanup = () => {
       window.removeEventListener("pointerup", up);
       window.removeEventListener("pointercancel", up);
+      window.removeEventListener("pointerup", castOnRelease);
+      window.removeEventListener("pointercancel", cancelAim);
     };
     host.appendChild(wrap);
     controlsEl = wrap;
@@ -6537,7 +6568,13 @@ function mountComboBattler(pixi, host, opts = {}) {
     const p = pa();
     rings.clear();
     if (!p) return;
-    rings.ellipse(p.x, p.y, p.weapon.range, p.weapon.range * 0.6).stroke({ width: 1.5 / G, color: 16777215, alpha: 0.25 });
+    const r = p.weapon.range;
+    if (aimSkill) {
+      const inRange = nearestFoeDist() <= r + p.radius;
+      rings.ellipse(p.x, p.y, r, r * 0.6).stroke({ width: 2.5 / G, color: inRange ? 3461208 : 16738922, alpha: 0.7 });
+      return;
+    }
+    rings.ellipse(p.x, p.y, r, r * 0.6).stroke({ width: 1.5 / G, color: 16777215, alpha: 0.25 });
   }
   function drawMarkers() {
     if (!markers) return;
@@ -6604,6 +6641,7 @@ function mountComboBattler(pixi, host, opts = {}) {
     skillBtns.length = 0;
     dash = null;
     dodgeCdUntil = 0;
+    aimSkill = null;
     try {
       markers?.destroy();
     } catch {