Fix first-spawn hero recognition; tour portrait/voice; lighter cinematic

- Created heroes now spawn with their roster id (openCreateModal carries savedId
through to spawnWithFly), so portrait/voice/skills/chat are recognized on the
FIRST spawn instead of only after re-picking from the roster.
- Guided tour gains explicit "paint portrait" + "create voice" steps (data-tut
markers + onPortrait/onVoice hooks) before Save & Play, so later skill/chat
steps have real media.
- Cinematic: harden startCinematic early-returns to tear down partial builds if
cancelled mid-setup; cut warbands 6→4 anchors (~60 vs ~90 sprites) to fix
title-screen slowdowns. (Armies were already cleaned up between runs.)

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

web/comboBattler.js

@@ -6896,10 +6896,16 @@ function mountComboBattler(pixi, host, opts = {}) {
     map.getEntityLayer().addChild(combatRoot);
     const firstSheet = groups[0]?.units?.[0]?.sheets;
     const ch = await contentHeight(firstSheet?.idle || firstSheet?.walk);
-    if (!alive || !cinematic) return [];
+    if (!alive || !cinematic) {
+      teardownCombat();
+      return [];
+    }
     depthScale.v = SPRITE_TILES * TILE8 / ((ch || 24) * G) * CINE_SPRITE_MUL;
     R = await createCombatRenderer({ pixi, defsById: {}, layers: { units, fx, projLayer: proj }, coords: { mapX: (x) => x, mapY: (y) => y, depthOf: () => depthScale.v }, getBattle: () => battle });
-    if (!alive || !cinematic) return [];
+    if (!alive || !cinematic) {
+      teardownCombat();
+      return [];
+    }
     let n = 0;
     const anchors = [];
     for (const g of groups) {

web/heroCreator.js

@@ -156,10 +156,10 @@ export function mountHeroCreator(host, opts = {}) {
   const voicePickEl = el('select', { class: 'persona-input persona-voice-pick' })
   const voicePickRow = el('div', { class: 'persona-voice-pick-row' },
     [el('label', { class: 'persona-label' }, 'Voice'), voicePickEl])
-  const playBtn = el('button', { class: 'persona-ico persona-play', type: 'button', title: 'Play voice' }, '▶')
+  const playBtn = el('button', { class: 'persona-ico persona-play', type: 'button', title: 'Play voice', 'data-tut': 'voice' }, '▶')
   const voiceStatus = el('span', { class: 'persona-act-status' })       // "generating voice via …" beside ▶
   const appearanceEl = el('div', { class: 'persona-appearance persona-edit', 'data-ph': 'How they look…' })
-  const portraitBtn = el('button', { class: 'persona-ico persona-portrait-btn', type: 'button', title: 'Paint portrait' }, '🎨')
+  const portraitBtn = el('button', { class: 'persona-ico persona-portrait-btn', type: 'button', title: 'Paint portrait', 'data-tut': 'portrait' }, '🎨')
   const portraitStatus = el('span', { class: 'persona-act-status' })    // "painting via …" beside 🎨
   const portraitImg = el('img', { class: 'persona-portrait-img', alt: '' })
   const portraitWrap = el('div', { class: 'persona-portrait-wrap' }, [portraitImg])
@@ -363,6 +363,7 @@ export function mountHeroCreator(host, opts = {}) {
       await putPortrait(savedId, blob)
       lastPersona.appearance = appearance; lastPersona.portraitUsed = appearance
       hasPortrait = true; setPortrait(blob); autosave()
+      try { opts.onPortrait?.() } catch { /* host hook */ }
       portraitStatus.textContent = ''
     } catch (e) { portraitStatus.textContent = `failed: ${e.message || e}` }
     finally { portraitBusy = false; portraitBtn.classList.remove('busy'); portraitBtn.disabled = false; updatePortraitUI() }
@@ -428,6 +429,7 @@ export function mountHeroCreator(host, opts = {}) {
       lastPersona.voiceDesignUsed = lastPersona.voice || ''
       lastPersona.voiceIdUsed = lastPersona.voiceId || ''
       hasVoice = true; autosave()
+      try { opts.onVoice?.() } catch { /* host hook */ }
       voiceStatus.textContent = ''
     } catch (e) { voiceStatus.textContent = `failed: ${e.message || e}` }
     finally { working = false; playBtn.classList.remove('busy'); playBtn.disabled = false; updateVoiceUI() }

web/tiny.js

@@ -32,7 +32,9 @@ const TUTORIAL_STEPS = [
   { anchor: 'center', nextLabel: 'Begin', skipLabel: 'No thanks', text: 'Welcome, commander. Your champions aren’t chosen from a roster — each is forged anew, body and soul. A quick tour?' },
   { anchor: 'bottom-center', advanceOn: 'create-open', target: '[data-tut="create"]', text: 'Recruit your first champion — tap “+ Create hero”.' },
   { anchor: 'center', advanceOn: 'persona', target: '[data-tut="recruit"]', text: 'Choose a calling and Recruit. Their name and legend are written for them alone — here and now.' },
-  { anchor: 'center', advanceOn: 'spawn', target: '[data-tut="save"]', text: 'A face all their own, and a voice to match. Save & Play to bring them to the field.' },
+  { anchor: 'center', advanceOn: 'portrait', target: '[data-tut="portrait"]', text: 'Give them a face — tap 🎨 to paint their portrait. (Needed before they take the field.)' },
+  { anchor: 'center', advanceOn: 'voice', target: '[data-tut="voice"]', text: 'And a voice — tap ▶ to hear them speak their line. This is the voice they’ll cry out in battle.' },
+  { anchor: 'center', advanceOn: 'spawn', target: '[data-tut="save"]', text: 'Now they’re whole — Save & Play to bring them to the field.' },
   { anchor: 'bottom-left', advanceOn: 'move', target: '[data-tut="move"]', text: 'Lead them with the stick — or WASD on a keyboard.' },
   { anchor: 'bottom-right', advanceOn: 'kill', target: '[data-tut="attack"]', text: 'Strike with ⚔ (or Space). Most foes fall in a blow or two — thin the ranks.' },
   { anchor: 'bottom-right', target: '[data-tut="dodge"]', text: 'Roll with ⟲ (or Shift) to slip a blow — untouchable for a heartbeat.' },
@@ -403,6 +405,8 @@ function openCreateModal(host, onCreated) {
     showBarracks: true,
     backSlot: foot,
     onSaved: () => { save.disabled = false; try { tut.emit('persona') } catch { /* ignore */ } },
+    onPortrait: () => { try { tut.emit('portrait') } catch { /* ignore */ } },
+    onVoice: () => { try { tut.emit('voice') } catch { /* ignore */ } },
     onState: (s) => { title.textContent = s === 'portrait' ? 'Hero Details' : 'Create a Hero'; if (s === 'recruit') save.disabled = true },
   })
   const close = () => { try { creator.stop() } catch { /* ignore */ } backdrop.remove() }
@@ -411,7 +415,11 @@ function openCreateModal(host, onCreated) {
   backdrop.addEventListener('pointerdown', (e) => { if (e.target === backdrop) close() })
   save.addEventListener('click', () => {
     const cur = creator.current(); if (!cur.persona) return
-    close(); onCreated(cur.persona)
+    // The creator tracks the roster id separately (savedId) from the persona object — carry it
+    // through so spawnWithFly resolves the SAVED record (portrait/voice in IndexedDB, equipped
+    // skills, chat history). Without the id the freshly-created hero spawns "anonymous" and its
+    // portrait/voice/skills/chat aren't recognized until you re-pick it from the roster.
+    close(); onCreated(cur.savedId ? { ...cur.persona, id: cur.savedId } : cur.persona)
   })
 }
 whenEl('battle-stage', async (el) => {
@@ -479,7 +487,9 @@ whenEl('battle-stage', async (el) => {
   // pulled from the whole pool so groups read as a varied mix of characters and monsters.
   const buildCineGroups = () => {
     if (!ROSTER_POOL.length) return []
-    const anchors = comboCtrl.getCineAnchors?.(6) || []
+    // 4 anchors × ~15 = ~60 decor sprites — enough armies for the tour without the per-frame cost
+    // of ~90 animated sprites (which caused slowdowns).
+    const anchors = comboCtrl.getCineAnchors?.(4) || []
     return anchors.map((an) => {
       const br = (rosters[an.biome] && rosters[an.biome].length) ? rosters[an.biome] : ROSTER_POOL
       const n = 13 + (Math.random() * 5 | 0)  // ~15 per group (13–17)