Sidebar dismiss-on-tap + chat voice clones the character's created voice

- Character sidebar: a transparent backdrop over the game while it's open dismisses it on
tap (nested overlays keep their own backdrops; sheet sits above it).
- Chat voice: design engines (Qwen3/VoxCPM) now CLONE from the character's created voice
(getAudio(id) reference + voiceQuote/voice), the same path heroCreator uses — so every
chat line shares one consistent voice instead of re-designing (which drifts). Fixed-voice
engines unchanged; falls back to design if no reference exists yet.

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

web/characterChat.js

@@ -5,9 +5,9 @@
 import { streamChat, ensureModel, currentModelId } from '/web/runtime.js'
 import { noThink, stripThinkFinal } from '/web/personaPrompts.js'
 import { buildContext } from '/web/characterContext.js'
-import { getPersona, patchPersona, putChatAudio, getChatAudio } from '/web/personaStore.js'
+import { getPersona, patchPersona, putChatAudio, getChatAudio, getAudio } from '/web/personaStore.js'
 import {
-  ensureTts, createVoiceWav, synthVoiceWav, speakVoiceLive, playWav,
+  ensureTts, createVoiceWav, cloneVoiceWav, synthVoiceWav, speakVoiceLive, playWav,
   activeEngineIsDesign, activeEngineIsNative, currentVoiceId, getAutoNarrate,
   stopPreview, stopVoiceLive,
 } from '/web/tts.js'
@@ -48,7 +48,17 @@ export function mountCharacterChat(host, personaId, { onUpdate, getLive } = {})
         if (blob) bytes = await blob.arrayBuffer()
         else {
           await ensureTts()
-          const wav = activeEngineIsDesign() ? await createVoiceWav(p.voice || '', text) : await synthVoiceWav(p.voiceId || currentVoiceId(), text)
+          let wav
+          if (activeEngineIsDesign()) {
+            // Clone from the character's CREATED voice (the cached reference from the creation
+            // screen) so every chat line shares one consistent voice instead of re-designing
+            // (which drifts). Same path heroCreator uses; falls back to design if no reference yet.
+            const ref = await getAudio(p.id)
+            wav = ref ? await cloneVoiceWav(await ref.arrayBuffer(), p.voiceQuote || '', text, p.voice || '')
+              : await createVoiceWav(p.voice || '', text)
+          } else {
+            wav = await synthVoiceWav(p.voiceId || currentVoiceId(), text)
+          }
           bytes = wav instanceof Blob ? await wav.arrayBuffer() : wav
           try { await putChatAudio(id, new Blob([bytes.slice(0)])) } catch { /* cache best-effort */ }
         }

web/tiny.js

@@ -222,6 +222,9 @@ const GAME_ROSTERS = {
 // Persona class → engine profession (the engine has templates + skills for these five).
 const PERSONA_PROF = { Warrior: 'Warrior', Ranger: 'Ranger', Monk: 'Monk', Assassin: 'Assassin', Mage: 'Necromancer', Paladin: 'Monk', Cleric: 'Monk', Knight: 'Warrior' }
 const ENEMY_AGGRO = 220 // FIELD units (~8 tiles): enemy idles until the player is this near
+// Ranged reach is authored in arena GW units (BOW_GW=1000 ≈ 37 roam tiles — whole-screen). The
+// roam map is far smaller, so scale ranged weapon range + kite distance down to ~8 tiles here.
+const ROAM_RANGE_MUL = 0.22
 // A persona → controllable hero (class → sheets + engine profession).
 const buildPlayer = (chars, p) => {
   const pc = chars[CLASS_SLUG[p?.unitClass]] || chars['true-heroes-iii-fighter']
@@ -232,7 +235,7 @@ const buildPlayer = (chars, p) => {
   if (equipped.length) unit.skills = equipped
   // Leveling makes the fighter stronger: level + spent points → rank (skill scaling) + HP/damage.
   const sb = statBonuses(p?.progression)
-  unit.rank = sb.rank; unit.hpMul = sb.hpMul; unit.dmgMul = sb.dmgMul
+  unit.rank = sb.rank; unit.hpMul = sb.hpMul; unit.dmgMul = sb.dmgMul; unit.rangeMul = ROAM_RANGE_MUL
   return { name: p?.name || pc?.name || 'Hero', sheets: sheetsOf(pc), unit }
 }
 const PICK_CARD_CSS = 'display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;padding:8px 6px;border-radius:10px;border:1px solid #2a3340;background:rgba(20,24,33,.92);color:#e8e8e8;cursor:pointer;font:600 11px var(--tac-font,system-ui)'
@@ -349,7 +352,7 @@ whenEl('battle-stage', async (el) => {
   const chars = await loadChars()
   const buildRoster = (list) => list.map((e) => {
     const c = chars[e.slug]; if (!c) return null
-    return { name: e.name, sheets: sheetsOf(c), unit: { name: e.name, stats: e.stats, attackType: e.attackType, skills: [], aggroRadius: ENEMY_AGGRO } }
+    return { name: e.name, sheets: sheetsOf(c), unit: { name: e.name, stats: e.stats, attackType: e.attackType, skills: [], aggroRadius: ENEMY_AGGRO, rangeMul: ROAM_RANGE_MUL } }
   }).filter(Boolean)
   const rosters = Object.fromEntries(Object.entries(GAME_ROSTERS).map(([k, v]) => [k, buildRoster(v)]))
   // Mount with NO hero → the map shows and the player picks a persona from the bottom picker. The
@@ -696,7 +699,16 @@ whenEl('battle-stage', async (el) => {
     sw.addEventListener('click', () => { setSheet(false); showPicker() }); sheet.append(sw)
   }
   const updateHp = (hero) => { if (!sheet._hp || !hero) return; const pct = hero.maxHp ? Math.max(0, Math.min(100, hero.hp / hero.maxHp * 100)) : 0; sheet._hp.lab.textContent = `HP ${hero.hp} / ${hero.maxHp}`; sheet._hp.fill.style.width = pct + '%'; sheet._hp.fill.style.background = pct > 33 ? '#34d058' : '#ff3b30' }
-  const setSheet = (open) => { sheetOpen = open; sheet.style.transform = open ? 'translateX(0)' : 'translateX(100%)'; if (open) renderSheet() }
+  // A transparent backdrop over the game area while the sheet is open — tapping the game dismisses
+  // the sidebar (the sheet itself sits above it; nested overlays like chat have their own backdrop).
+  let sheetBackdrop = null
+  const setSheet = (open) => {
+    sheetOpen = open; sheet.style.transform = open ? 'translateX(0)' : 'translateX(100%)'
+    if (open) {
+      renderSheet()
+      if (!sheetBackdrop) { sheetBackdrop = document.createElement('div'); sheetBackdrop.style.cssText = 'position:absolute;inset:0;z-index:7;background:transparent'; sheetBackdrop.addEventListener('pointerdown', () => setSheet(false)); el.append(sheetBackdrop) }
+    } else { sheetBackdrop?.remove(); sheetBackdrop = null }
+  }
   sheetBtn.addEventListener('click', () => setSheet(!sheetOpen))
   el.append(sheetBtn, sheet)