Add local ACE-Step music sidecar + cinematic title sequence

ACE-Step (music + sung vocals) as a local sidecar, mirroring the aya/klein
pattern so the main app generates audio without HF quota:
- spaces/acestep-zerogpu/ (own .venv-acestep — ACE-Step pins transformers==4.50/
spacy==3.8 that clash with the other sidecars; needs torchcodec for WAV I/O)
- run_sidecars.sh `acestep` case (port 7866, on-demand), .env TINY_ACESTEP_SPACE
- app.py: _acestep_generate helper + POST /api/music route

Cinematic hero-select title sequence (web/titleSequence.js, web/tiny.js,
comboBattler startCinematic/stopCinematic/getCineAnchors):
- ambient camera tour over decorative warbands (no-combat actors, ~15/group,
phyllotaxis packing) behind the always-usable picker
- TINY ARMY wordmark + letterbox/vignette overlay
- ACE-Step title theme (web/audio/*, LFS) — tavern active, orchestral kept for
reuse; music ducks when the game starts; mute button beside the char-sheet button
- hero speaks their saved voice (IndexedDB) on the info page + on select

Also: klein sidecar serializes LoRA-swap + generation with a lock (adapter-leak fix).

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

.gitattributes

@@ -46,3 +46,6 @@ web/assets/minifantasy/Minifantasy_Temple_Of_The_Snake_God_v1.0_Commercial_Versi
 web/assets/minifantasy/Minifantasy_Orc_Kingdom_v1.0/Minifantasy_Orc_Kingdom_Assets/Props/Prop_Shadows.png filter=lfs diff=lfs merge=lfs -text
 web/assets/minifantasy/Minifantasy_Orc_Kingdom_v1.0/Minifantasy_Orc_Kingdom_Assets/Tileset/Tile_Shadows.png filter=lfs diff=lfs merge=lfs -text
 web/assets/minifantasy/Minifantasy_Necropolis_v1.0/Minifantasy_Necropolis_Assets/Tileset/Buildings/TileasetAndPremadeShadows.png filter=lfs diff=lfs merge=lfs -text
+
+# Generated audio themes (ACE-Step) — binary, required LFS by the HF hub Xet check.
+*.mp3 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -2,4 +2,6 @@
 __pycache__/
 *.pyc
 .venv/
+.venv-acestep/
 logs/
+outputs/

app.py

@@ -352,6 +352,9 @@ _DASHSCOPE_URL = _DASHSCOPE_BASE + "/api/v1/services/audio/tts/customization"
 # soundfile`. Lazy-loaded; the Space (cpu-basic) leaves this unset and uses DashScope.
 TTS_MODE = os.environ.get("TINY_TTS_MODE", "").strip().lower()
 VOXCPM_SPACE = os.environ.get("TINY_VOXCPM_SPACE", "").strip()
+# ACE-Step music + sung-vocal generation (local sidecar; see spaces/acestep-zerogpu). NB this is a
+# MUSIC model — its "vocals" are sung lyrics, not speech; VoxCPM stays the path for dialogue/TTS.
+ACESTEP_SPACE = os.environ.get("TINY_ACESTEP_SPACE", "").strip()
 TINY_AYA_SPACE = os.environ.get("TINY_AYA_SPACE", "").strip()
 MINICPM5_SPACE = os.environ.get("TINY_MINICPM5_SPACE", "").strip()
 # Coding model (Skill Forge): Mellum2 is a ZeroGPU sidecar (same /generate contract as
@@ -550,6 +553,35 @@ def _voxcpm_clone(text, ref_audio_b64, ref_text, instruct):
         return f.read()
 
 
+def _acestep_generate(prompt, lyrics, duration, steps, guidance, seed):
+    """Call the ACE-Step sidecar's /generate and return the rendered WAV bytes. Same retry shape
+    as _voxcpm_predict (the sidecar shares one GPU pipeline, so transient queue/GPU hiccups retry)."""
+    from gradio_client import Client
+    client = Client(ACESTEP_SPACE, token=HF_TOKEN or None)
+    last_err = None
+    for attempt in range(3):
+        try:
+            result = client.predict(
+                prompt or "",
+                lyrics or "",
+                float(duration or 30.0),
+                int(steps or 60),
+                float(guidance if guidance is not None else 15.0),
+                int(seed if seed is not None else -1),
+                api_name="/generate",
+            )
+            path = result[0] if isinstance(result, (tuple, list)) else result
+            with open(os.fspath(path), "rb") as f:
+                return f.read()
+        except Exception as e:  # noqa: BLE001
+            last_err = e
+            msg = str(e).lower()
+            if attempt == 2 or not any(s in msg for s in ("accelerator", "queue", "gpu", "timeout", "temporarily")):
+                raise
+            time.sleep(1.5 * (attempt + 1))
+    raise last_err
+
+
 def _tiny_aya_generate(system, user, max_tokens, temperature):
     from gradio_client import Client
     client = Client(TINY_AYA_SPACE, token=HF_TOKEN or None)
@@ -742,6 +774,29 @@ async def voxcpm_clone(request: Request):
     return Response(wav, media_type="audio/wav", headers={"Cache-Control": "no-store"})
 
 
+@fastapi_app.post("/api/music")
+async def api_music(request: Request):
+    """Generate music (and optional sung vocals) with the ACE-Step sidecar. Returns a WAV.
+    Body: {prompt, lyrics?, duration?, steps?, guidance?, seed?}. prompt = tags/style;
+    lyrics blank or "[inst]" = instrumental."""
+    body = await request.json()
+    prompt = (body.get("prompt") or "").strip()
+    if not prompt:
+        return Response("prompt required", status_code=400)
+    if not ACESTEP_SPACE:
+        return Response("TINY_ACESTEP_SPACE not set", status_code=503)
+    lyrics = body.get("lyrics") or ""
+    duration = body.get("duration", 30.0)
+    steps = body.get("steps", 60)
+    guidance = body.get("guidance", 15.0)
+    seed = body.get("seed", -1)
+    try:
+        wav = await asyncio.to_thread(_acestep_generate, prompt, lyrics, duration, steps, guidance, seed)
+    except Exception as e:  # noqa: BLE001
+        return Response(f"ACE-Step error: {e}", status_code=502)
+    return Response(wav, media_type="audio/wav", headers={"Cache-Control": "no-store"})
+
+
 # ── Persona portraits (image generation) ─────────────────────────────────────
 # Mirrors the voice path: TINY_IMAGE_MODE=local runs the OPEN WEIGHTS on your GPU
 # (Z-Image-Turbo, 6B, ~12 GB bf16 — coexists with the TTS model on a 24 GB card);

docs/local-sidecars.md

@@ -8,6 +8,18 @@ talks to them unchanged — only the `*_SPACE` env var changes from a Space ID t
 |------------|-----------------------------|------|--------------------------------|-------------------|
 | Tiny Aya   | `spaces/tiny-aya-zerogpu/`  | 7864 | `CohereLabs/tiny-aya-global`   | `TINY_AYA_SPACE`  |
 | Klein      | `spaces/klein-zerogpu/`     | 7865 | `black-forest-labs/FLUX.2-klein-4B` + `polats/weiner-klein-lora` | `TINY_KLEIN_SPACE` |
+| ACE-Step   | `spaces/acestep-zerogpu/`   | 7866 | [ACE-Step](https://github.com/ace-step/ACE-Step) — music + sung vocals | `TINY_ACESTEP_SPACE` |
+
+**ACE-Step is the odd one out:** it's a *music* model (not text/image), and it pins
+`transformers==4.50`/`spacy==3.8.4` which clash with the aya/klein venv — so it runs in its **own**
+`.venv-acestep` (Python 3.12; spacy has no 3.13 wheel) and also needs `torchcodec` for audio I/O.
+Start it on demand with `./run_sidecars.sh acestep` (it's intentionally **not** in the `all`
+default — heavier on the shared card). API:
+`/generate(prompt, lyrics, duration, infer_step, guidance_scale, seed) -> wav`; the main app
+exposes it at `POST /api/music` (`{prompt, lyrics?, duration?, steps?, guidance?, seed?}` → WAV).
+"Vocals" = lyrics SUNG inside a track (blank or `[inst]` = instrumental); **VoxCPM** remains the
+path for spoken dialogue/TTS. `cpu_offload` keeps it ~0.7 GB idle / ~8 GB peak; the first call
+auto-downloads checkpoints to `~/.cache/ace-step`.
 
 Mirrors of `polats/tiny-army-tiny-aya-zerogpu` and `polats/tiny-army-klein-zerogpu`, adapted for
 local hardware (no ZeroGPU). The hosted `app.py`s are unchanged in spirit; the local diffs are
@@ -16,13 +28,14 @@ documented in each file's header.
 ## Run
 
 ```bash
-./run_sidecars.sh          # start both, wait until ready (logs in logs/)
+./run_sidecars.sh          # start aya + klein, wait until ready (logs in logs/)
 ./run_sidecars.sh aya      # just tiny-aya
 ./run_sidecars.sh klein    # just klein
-./run_sidecars.sh stop     # stop both
+./run_sidecars.sh acestep  # just ACE-Step (music; own venv, on demand)
+./run_sidecars.sh stop     # stop all three
 ```
 
-`.env` already points `TINY_AYA_SPACE` / `TINY_KLEIN_SPACE` at the local URLs.
+`.env` already points `TINY_AYA_SPACE` / `TINY_KLEIN_SPACE` / `TINY_ACESTEP_SPACE` at local URLs.
 
 ### Network access
 

run_sidecars.sh

@@ -9,29 +9,34 @@
 #   TINY_KLEIN_SPACE=http://127.0.0.1:7865
 #
 # Usage:
-#   ./run_sidecars.sh          # start both, stream logs to logs/, wait until ready
+#   ./run_sidecars.sh          # start aya + klein, stream logs to logs/, wait until ready
 #   ./run_sidecars.sh aya      # just tiny-aya
 #   ./run_sidecars.sh klein    # just klein
-#   ./run_sidecars.sh stop     # stop both
+#   ./run_sidecars.sh acestep  # just ACE-Step music sidecar (own .venv-acestep, started on demand)
+#   ./run_sidecars.sh stop     # stop all three
 set -euo pipefail
 cd "$(dirname "$0")"
 
 PY="${PY:-.venv/bin/python}"
+# ACE-Step pins transformers==4.50 / spacy==3.8 that conflict with the aya/klein venv, so it runs
+# in its own Python 3.12 venv. Override with ACESTEP_PY if you put it elsewhere.
+ACESTEP_PY="${ACESTEP_PY:-.venv-acestep/bin/python}"
 AYA_PORT="${AYA_PORT:-7864}"
 KLEIN_PORT="${KLEIN_PORT:-7865}"
+ACESTEP_PORT="${ACESTEP_PORT:-7866}"
 # Bind address. 0.0.0.0 = reachable from the LAN (other machines on the network) at this host's
 # IP:PORT. Set BIND=127.0.0.1 to restrict to localhost (main app on the same box only).
 BIND="${BIND:-0.0.0.0}"
 mkdir -p logs
 
 start_one() {
-  local name="$1" dir="$2" port="$3"
+  local name="$1" dir="$2" port="$3" py="${4:-$PY}"
   if [ -f "logs/$name.pid" ] && kill -0 "$(cat "logs/$name.pid")" 2>/dev/null; then
     echo "[$name] already running (pid $(cat "logs/$name.pid")) on :$port"
     return
   fi
   echo "[$name] starting on $BIND:$port (logs/$name.log)"
-  PORT="$port" GRADIO_SERVER_NAME="$BIND" nohup "$PY" "spaces/$dir/app.py" \
+  PORT="$port" GRADIO_SERVER_NAME="$BIND" nohup "$py" "spaces/$dir/app.py" \
     > "logs/$name.log" 2>&1 &
   echo $! > "logs/$name.pid"
 }
@@ -62,9 +67,12 @@ stop_one() {
 }
 
 case "${1:-all}" in
-  stop)  stop_one aya; stop_one klein ;;
+  stop)  stop_one aya; stop_one klein; stop_one acestep ;;
   aya)   start_one aya  tiny-aya-zerogpu "$AYA_PORT";   wait_ready aya  "$AYA_PORT" ;;
   klein) start_one klein klein-zerogpu   "$KLEIN_PORT"; wait_ready klein "$KLEIN_PORT" ;;
+  # ACE-Step (music + sung vocals) — its own venv; not in `all` since it's heavier on the
+  # shared card. Start it on demand: ./run_sidecars.sh acestep
+  acestep) start_one acestep acestep-zerogpu "$ACESTEP_PORT" "$ACESTEP_PY"; wait_ready acestep "$ACESTEP_PORT" ;;
   all|*)
     start_one aya  tiny-aya-zerogpu "$AYA_PORT"
     start_one klein klein-zerogpu   "$KLEIN_PORT"

spaces/acestep-zerogpu/.gitignore

@@ -0,0 +1,3 @@
+__pycache__/
+outputs/
+*.wav

spaces/acestep-zerogpu/README.md

@@ -0,0 +1,37 @@
+---
+title: Tiny Army ACE-Step
+emoji: 🎵
+sdk: gradio
+app_file: app.py
+---
+
+# Tiny Army ACE-Step — local sidecar
+
+Local sidecar wrapping [ACE-Step](https://github.com/ace-step/ACE-Step) for **music + sung-vocal**
+generation, so the main app makes audio without burning HF quota. Mirrors the other sidecars'
+Gradio API so `gradio_client` talks to it unchanged:
+
+```
+/generate(prompt, lyrics, audio_duration, infer_step, guidance_scale, seed) -> wav file
+```
+
+- **prompt** — tags / style, e.g. `epic orchestral, cinematic, heroic brass`
+- **lyrics** — `[verse]/[chorus]` markers for sung vocals; blank or `[inst]` for an instrumental
+- ACE-Step is a *music* model — its "voice" is singing, not speech. Keep **VoxCPM** for dialogue.
+
+## Run
+
+Runs in a **dedicated venv** (`.venv-acestep`, Python 3.12) because ACE-Step pins
+`transformers==4.50` / `spacy==3.8.4`, which conflict with the aya/klein sidecars. Launch via:
+
+```bash
+./run_sidecars.sh acestep      # port 7866
+```
+
+Then point the main app at it (already in `.env`): `TINY_ACESTEP_SPACE=http://127.0.0.1:7866`.
+
+### Env knobs
+- `TINY_ACESTEP_OFFLOAD=0` — keep the model GPU-resident (faster) when the card is free; default
+  `1` enables `cpu_offload` (~8 GB peak) to coexist with the shared text-encoder server.
+- `TINY_ACESTEP_CKPT` — checkpoint dir (default `~/.cache/ace-step`, auto-downloaded first run).
+- `TINY_ACESTEP_STEPS` / `_GUIDANCE` / `_DURATION` / `_MAX_DURATION` / `_DTYPE`.

spaces/acestep-zerogpu/app.py

@@ -0,0 +1,132 @@
+from __future__ import annotations
+
+# LOCAL SIDECAR for ACE-Step (https://github.com/ace-step/ACE-Step) — music + sung-vocal
+# generation, run on the local 3090 instead of a hosted Space so the main app burns no HF quota.
+#
+# Gradio API contract (so the main app's gradio_client talks to it the same way it talks to the
+# other sidecars):
+#   /generate(prompt, lyrics, audio_duration:float, infer_step:int, guidance_scale:float, seed:int)
+#       -> audio file path (wav)
+#
+# Notes:
+#   * ACE-Step is a *music* model. "Vocals" = lyrics SUNG inside a track (give it tags + lyrics
+#     with [verse]/[chorus] markers). It is NOT speech TTS — VoxCPM stays the tool for dialogue.
+#     Leave `lyrics` blank (or "[inst]") for an instrumental.
+#   * ACE-Step pins transformers==4.50 / accelerate==1.6 which conflict with the aya/klein
+#     sidecars' transformers>=5.4 — so this sidecar runs in its OWN venv (.venv-acestep). The
+#     run_sidecars.sh `acestep` case launches it with that interpreter.
+#   * cpu_offload=True keeps peak VRAM ~8 GB so it coexists with the shared text-encoder server
+#     (same philosophy as klein's sequential offload). Set TINY_ACESTEP_OFFLOAD=0 when the card
+#     is free for full-speed GPU-resident inference.
+#   * First run downloads ~3.5B-param checkpoints to ~/.cache/ace-step (a few GB); subsequent
+#     starts are fast. Override the location with TINY_ACESTEP_CKPT.
+import os
+import random
+import threading
+import time
+
+# Reduce CUDA fragmentation under shared-card memory pressure. Must precede CUDA init.
+os.environ.setdefault("PYTORCH_CUDA_ALLOC_CONF", "expandable_segments:True")
+
+try:
+    from dotenv import load_dotenv
+    load_dotenv(os.path.join(os.path.dirname(__file__), "..", "..", ".env"))
+    load_dotenv()
+except Exception:  # noqa: BLE001
+    pass
+
+import gradio as gr
+import torch
+from acestep.pipeline_ace_step import ACEStepPipeline
+
+CKPT_DIR = os.environ.get("TINY_ACESTEP_CKPT") or None  # None -> default ~/.cache/ace-step
+DTYPE = os.environ.get("TINY_ACESTEP_DTYPE", "bfloat16").strip()
+# Offload on by default: the 3090 is shared (desktop + text-encoder server). "0"/"false" = keep
+# the model GPU-resident for full speed when the card is free.
+OFFLOAD = os.environ.get("TINY_ACESTEP_OFFLOAD", "1").strip().lower() not in ("0", "false", "no")
+DEFAULT_STEPS = int(os.environ.get("TINY_ACESTEP_STEPS", "60"))
+DEFAULT_GUIDANCE = float(os.environ.get("TINY_ACESTEP_GUIDANCE", "15.0"))
+DEFAULT_DURATION = float(os.environ.get("TINY_ACESTEP_DURATION", "30.0"))
+MAX_DURATION = float(os.environ.get("TINY_ACESTEP_MAX_DURATION", "240.0"))
+MAX_SEED = 2_147_483_647
+
+print(f"[acestep] loading pipeline (dtype={DTYPE}, cpu_offload={OFFLOAD and torch.cuda.is_available()})", flush=True)
+_t0 = time.time()
+pipe = ACEStepPipeline(
+    checkpoint_dir=CKPT_DIR,
+    dtype=DTYPE,
+    cpu_offload=OFFLOAD and torch.cuda.is_available(),
+    overlapped_decode=True,
+    torch_compile=False,
+)
+print(f"[acestep] pipeline constructed in {time.time() - _t0:.1f}s (weights load lazily on first call)", flush=True)
+
+# The pipeline is process-global and shared by every caller; serialize generations so concurrent
+# requests don't trample each other's state (same guard as the other sidecars).
+_gen_lock = threading.Lock()
+
+
+def _first_audio(out):
+    """ACE-Step's __call__ returns a list of audio paths, sometimes paired with a params dict
+    ((paths, params)). Dig out the first audio file path robustly."""
+    seen = out
+    # Unwrap a (result, params) tuple/list whose 2nd element is the metadata dict.
+    if isinstance(seen, (list, tuple)) and len(seen) == 2 and isinstance(seen[1], dict):
+        seen = seen[0]
+    if isinstance(seen, (list, tuple)):
+        seen = seen[0] if seen else None
+    if seen is None:
+        raise gr.Error("ACE-Step returned no audio")
+    return os.fspath(seen)
+
+
+def generate(prompt: str, lyrics: str = "", audio_duration: float = DEFAULT_DURATION,
+             infer_step: int = DEFAULT_STEPS, guidance_scale: float = DEFAULT_GUIDANCE,
+             seed: int = -1):
+    if not prompt or not prompt.strip():
+        raise gr.Error("prompt (tags / style) required, e.g. 'lofi hip hop, mellow, rainy'")
+    dur = float(audio_duration or DEFAULT_DURATION)
+    dur = max(1.0, min(dur, MAX_DURATION))
+    steps = max(1, min(int(infer_step or DEFAULT_STEPS), 200))
+    guidance = float(guidance_scale if guidance_scale is not None else DEFAULT_GUIDANCE)
+    if seed is None or int(seed) < 0:
+        seed = random.randint(0, MAX_SEED)
+    with _gen_lock:
+        out = pipe(
+            format="wav",
+            audio_duration=dur,
+            prompt=prompt.strip(),
+            lyrics=(lyrics or "").strip(),
+            infer_step=steps,
+            guidance_scale=guidance,
+            manual_seeds=[int(seed)],
+        )
+        if torch.cuda.is_available():
+            torch.cuda.empty_cache()
+    return _first_audio(out)
+
+
+demo = gr.Interface(
+    fn=generate,
+    inputs=[
+        gr.Textbox(label="Prompt (tags / style)", lines=2,
+                   placeholder="e.g. epic orchestral, cinematic, heroic brass"),
+        gr.Textbox(label="Lyrics (blank or [inst] = instrumental)", lines=6,
+                   placeholder="[verse]\n...\n[chorus]\n..."),
+        gr.Number(label="Duration (s)", value=DEFAULT_DURATION),
+        gr.Number(label="Inference steps", value=DEFAULT_STEPS, precision=0),
+        gr.Number(label="Guidance scale", value=DEFAULT_GUIDANCE),
+        gr.Number(label="Seed (-1 = random)", value=-1, precision=0),
+    ],
+    outputs=gr.Audio(type="filepath", label="Generated audio"),
+    api_name="generate",
+    title="Tiny Army ACE-Step — local sidecar",
+    description="Text-to-music + sung vocals. Leave lyrics blank for instrumental.",
+)
+
+if __name__ == "__main__":
+    demo.queue().launch(
+        server_name=os.environ.get("GRADIO_SERVER_NAME", "127.0.0.1"),
+        server_port=int(os.environ.get("PORT", "7866")),
+        show_error=True,
+    )

spaces/acestep-zerogpu/requirements.txt

@@ -0,0 +1,8 @@
+# ACE-Step pulls its own pinned deps (transformers==4.50, accelerate==1.6, spacy==3.8, torch, ...).
+# Those conflict with the aya/klein sidecars' transformers>=5.4, so this sidecar runs in its OWN
+# venv (.venv-acestep, Python 3.12 — spacy 3.8.4 has no 3.13 wheel). Install with:
+#   python3.12 -m venv .venv-acestep
+#   .venv-acestep/bin/pip install -r spaces/acestep-zerogpu/requirements.txt
+git+https://github.com/ace-step/ACE-Step.git
+torchcodec  # torchaudio>=2.9 writes audio via torchcodec; ACE-Step's save step needs it
+python-dotenv

spaces/klein-zerogpu/app.py

@@ -20,6 +20,7 @@ from __future__ import annotations
 #   * Loads the repo .env for HF_TOKEN.
 import os
 import random
+import threading
 import time
 
 # Reduce CUDA fragmentation under the shared-card memory pressure (the offload churn allocates
@@ -78,6 +79,10 @@ print(f"[klein] loaded in {time.time() - _t0:.1f}s", flush=True)
 
 _lora_active: str | None = None
 _offload_enabled = False
+# Serialize LoRA-state + generation: the pipe and its loaded LoRA are process-global and shared
+# by every caller, so without this a concurrent no-LoRA request could render while another has
+# weiner attached (and vice-versa). See the hosted Space fix for the same leak.
+_gen_lock = threading.Lock()
 
 
 def _load_lora(name: str) -> None:
@@ -130,31 +135,33 @@ def _to_img(x):
 def generate(prompt: str, seed: int = 42, lora: str = DEFAULT_LORA, ref_image=None, ref_image2=None):
     if not prompt or not prompt.strip():
         raise gr.Error("prompt required")
-    _ensure_lora(lora)
     # With offload enabled the pipeline places its own modules; the generator must live on the
     # device the latents end up on (cuda when offloading, else cpu).
     dev = "cuda" if torch.cuda.is_available() else "cpu"
     if seed is None or int(seed) < 0:
         seed = random.randint(0, MAX_SEED)
-    kwargs = dict(
-        prompt=prompt.strip(),
-        width=1024,
-        height=1024,
-        num_inference_steps=STEPS,
-        guidance_scale=GUIDANCE,
-        generator=torch.Generator(device=dev).manual_seed(int(seed)),
-    )
     # FLUX.2 native multi-image conditioning: pass [pose anchor, identity ref] as a LIST so the
     # composition follows one reference (e.g. a mannequin/depth render of a kimodo pose) while
     # character identity comes from the other. One image -> passed alone (proven single-ref path).
     refs = [r for r in (_to_img(ref_image), _to_img(ref_image2)) if r is not None]
-    if len(refs) == 1:
-        kwargs["image"] = refs[0]
-    elif refs:
-        kwargs["image"] = refs
-    img = pipe(**kwargs).images[0]
-    if dev == "cuda":
-        torch.cuda.empty_cache()
+    # Exclusive ownership of the shared pipe for the whole LoRA-set + generate (no adapter leak).
+    with _gen_lock:
+        _ensure_lora(lora)
+        kwargs = dict(
+            prompt=prompt.strip(),
+            width=1024,
+            height=1024,
+            num_inference_steps=STEPS,
+            guidance_scale=GUIDANCE,
+            generator=torch.Generator(device=dev).manual_seed(int(seed)),
+        )
+        if len(refs) == 1:
+            kwargs["image"] = refs[0]
+        elif refs:
+            kwargs["image"] = refs
+        img = pipe(**kwargs).images[0]
+        if dev == "cuda":
+            torch.cuda.empty_cache()
     return img
 
 

web/audio/theme-orchestral.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4682604e975e339eb8f40f47fc2351a61b79786aacb87c630b8f7152705960d5
+size 600884

web/audio/theme-tavern.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:85781da5bf224d995ad8964846396a588ef953ad2a63f3c82c8bd267f3f0b5ad
+size 648620

web/audio/title-theme.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:85781da5bf224d995ad8964846396a588ef953ad2a63f3c82c8bd267f3f0b5ad
+size 648620

web/comboBattler.js

@@ -4887,8 +4887,10 @@ async function createCombatRenderer({ pixi, defsById = {}, layers, coords, getBa
         v.sprite.scale.set(1);
         v.sprite.alpha = a.alive ? 1 : 0.32;
       }
-      drawBars(a.id, a, dtMS, b.t);
-      drawStatus(a.id, a, b.t, depth);
+      if (!a.decor) {
+        drawBars(a.id, a, dtMS, b.t);
+        drawStatus(a.id, a, b.t, depth);
+      }
     }
   }
   function updateFloats(dtMS) {
@@ -6182,6 +6184,8 @@ function mountComboBattler(pixi, host, opts = {}) {
   const ARENA = { ox: 0, oy: 0 };
   const fieldToWorld = (fx, fy) => ({ x: ARENA.ox + fx * G, y: ARENA.oy + fy * G });
   const worldToField = (wx, wy) => ({ x: (wx - ARENA.ox) / G, y: (wy - ARENA.oy) / G });
+  const FSTEP_C = TILE8 / G;
+  const CINE_SPRITE_MUL = 4;
   const map = createGameWorld(pixi, host, { seed, keyboardPan: false });
   const roamWalkable = gameWorldWalkable(seed);
   const world = { walkable: (fx, fy) => {
@@ -6194,6 +6198,7 @@ function mountComboBattler(pixi, host, opts = {}) {
     return { forgottenPlains: e, orc: e, necropolis: e };
   })();
   let battle = null, R = null, combatRoot = null, rings = null, markers = null, navDbg = null, spawnFn = null, dead = false;
+  let cinematic = false, cineActors = null;
   let emoteLayer = null;
   let skillVfxLayer = null;
   const emoPrev = /* @__PURE__ */ new Map();
@@ -6861,8 +6866,140 @@ function mountComboBattler(pixi, host, opts = {}) {
     routePath = null;
     routeIdx = 0;
   }
+  function cineSnapWorld(wx, wy) {
+    const f = worldToField(wx, wy);
+    for (let r = 0; r <= 18; r++) for (let dy = -r; dy <= r; dy++) for (let dx = -r; dx <= r; dx++) {
+      if (Math.max(Math.abs(dx), Math.abs(dy)) !== r) continue;
+      const x = f.x + dx * FSTEP_C, y = f.y + dy * FSTEP_C;
+      if (world.walkable(x, y)) return fieldToWorld(x, y);
+    }
+    return { x: wx, y: wy };
+  }
+  async function startCinematic({ groups = [] } = {}) {
+    if (!alive) return [];
+    if (battle || combatRoot) teardownCombat();
+    const bnds = map.getBounds();
+    ARENA.ox = bnds.x0;
+    ARENA.oy = bnds.y0;
+    const field = { w: (bnds.x1 - bnds.x0) / G, h: (bnds.y1 - bnds.y0) / G };
+    battle = makeTeamBattle({ seed, players: [], enemies: [], sandbox: true, freeCast: false, world, field });
+    cinematic = true;
+    cineActors = [];
+    combatRoot = new Container();
+    combatRoot.scale.set(G);
+    combatRoot.position.set(ARENA.ox, ARENA.oy);
+    const units = new Container();
+    units.sortableChildren = true;
+    const fx = new Container();
+    const proj = new Graphics();
+    combatRoot.addChild(units, proj, fx);
+    map.getEntityLayer().addChild(combatRoot);
+    const firstSheet = groups[0]?.units?.[0]?.sheets;
+    const ch = await contentHeight(firstSheet?.idle || firstSheet?.walk);
+    if (!alive || !cinematic) 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 [];
+    let n = 0;
+    const anchors = [];
+    for (const g of groups) {
+      const anchor = cineSnapWorld(g.world.x, g.world.y);
+      anchors.push(anchor);
+      const center = worldToField(anchor.x, anchor.y);
+      const list = g.units || [];
+      const GOLDEN = Math.PI * (3 - Math.sqrt(5));
+      for (let i = 0; i < list.length; i++) {
+        const entry = list[i];
+        const ang = i * GOLDEN;
+        const rad = (0.6 + Math.sqrt(i) * 0.85) * FSTEP_C * CINE_SPRITE_MUL;
+        let pos = { x: center.x + Math.cos(ang) * rad, y: center.y + Math.sin(ang) * rad };
+        if (!world.walkable(pos.x, pos.y)) pos = center;
+        const id = "C" + n++;
+        const a = spawnActor(battle, { ...entry.unit || {}, name: entry.name }, "enemy", id);
+        a.x = pos.x;
+        a.y = pos.y;
+        a.decor = true;
+        a.faceX = Math.cos(ang) < 0 ? -1 : 1;
+        a.faceY = 0;
+        a.home = { x: pos.x, y: pos.y };
+        a.wander = { tx: pos.x, ty: pos.y, wait: Math.random() * 2 };
+        if (alive && cinematic) await R.addActor(id, { name: entry.name, ...sd(entry.sheets) });
+        cineActors.push(a);
+      }
+    }
+    if (!alive || !cinematic) {
+      stopCinematic();
+      return [];
+    }
+    offTick = map.onTick(cineTick);
+    return anchors;
+  }
+  function cineTick(ticker) {
+    if (!cinematic || !battle || !R || paused) return;
+    const dtMS = ticker.deltaMS, dt = Math.min(dtMS / 1e3, 0.1);
+    battle.t += dt;
+    const SPEED = 8 * FSTEP_C * CINE_SPRITE_MUL;
+    for (const a of cineActors || []) {
+      const w = a.wander;
+      const dx = w.tx - a.x, dy = w.ty - a.y, d = Math.hypot(dx, dy);
+      if (d < 1 || w.wait > 0) {
+        a.moving = false;
+        w.wait -= dt;
+        if (w.wait <= 0) {
+          const ang = Math.random() * Math.PI * 2, rr = (0.5 + Math.random() * 1.6) * FSTEP_C * CINE_SPRITE_MUL;
+          const nx = a.home.x + Math.cos(ang) * rr, ny = a.home.y + Math.sin(ang) * rr;
+          if (world.walkable(nx, ny)) {
+            w.tx = nx;
+            w.ty = ny;
+          }
+          w.wait = 0.8 + Math.random() * 2.5;
+        }
+      } else {
+        const s = Math.min(d, SPEED * dt);
+        a.x += dx / d * s;
+        a.y += dy / d * s;
+        a.faceX = dx < 0 ? -1 : 1;
+        a.faceY = dy < 0 ? -1 : 1;
+        a.moving = true;
+      }
+    }
+    R.syncActors(battle, dtMS, battle.t);
+  }
+  function stopCinematic() {
+    if (!cinematic && !cineActors) return;
+    cinematic = false;
+    cineActors = null;
+    teardownCombat();
+  }
+  function getCineAnchors(count = 6) {
+    const out = [];
+    const push = (tx, ty) => {
+      if (!roamWalkable(tx, ty)) return false;
+      const x = (tx + 0.5) * TILE8, y = (ty + 0.5) * TILE8;
+      if (out.some((a) => Math.hypot(a.x - x, a.y - y) < 60 * TILE8)) return false;
+      out.push({ x, y, biome: map.biomeAt(tx, ty) || "forgottenPlains" });
+      return true;
+    };
+    try {
+      const sw = gameWorldSpawn(seed);
+      push(Math.round(sw.x / TILE8), Math.round(sw.y / TILE8));
+    } catch {
+    }
+    const bnds = map.getBounds();
+    const tx0 = Math.round(bnds.x0 / TILE8), ty0 = Math.round(bnds.y0 / TILE8);
+    const tw = Math.round((bnds.x1 - bnds.x0) / TILE8), th = Math.round((bnds.y1 - bnds.y0) / TILE8);
+    let guard = 0;
+    while (out.length < count && guard++ < 4e3) push(tx0 + (8 + Math.random() * (tw - 16) | 0), ty0 + (8 + Math.random() * (th - 16) | 0));
+    for (let i = out.length - 1; i > 0; i--) {
+      const j = Math.random() * (i + 1) | 0;
+      [out[i], out[j]] = [out[j], out[i]];
+    }
+    return out;
+  }
   async function spawnHero(player) {
     if (!alive || !player) return;
+    cinematic = false;
+    cineActors = null;
     const bnds = map.getBounds();
     ARENA.ox = bnds.x0;
     ARENA.oy = bnds.y0;
@@ -7093,7 +7230,7 @@ function mountComboBattler(pixi, host, opts = {}) {
     const p = pa();
     return p ? { name: p.name, profession: p.profession, hp: Math.round(p.hp), maxHp: Math.round(p.maxHp), skills: (p.bar || []).map((s) => s.name) } : null;
   }
-  const ctrl = { ready, selectHero, getSpawnWorld, getSnapshot, getHero, heroEmote, buffHero, setPaused, setHeroSkills, getThreat: () => ({ ...runState }), resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
+  const ctrl = { ready, selectHero, startCinematic, stopCinematic, getCineAnchors, getSpawnWorld, getSnapshot, getHero, heroEmote, buffHero, setPaused, setHeroSkills, getThreat: () => ({ ...runState }), resize, onChange, destroy, map, walkable: (wx, wy) => roamWalkable(wx, wy) };
   if (typeof window !== "undefined") {
     window.__comboSnap = () => ctrl.getSnapshot();
     window.__combo = ctrl;

web/tiny.js

@@ -15,7 +15,7 @@ import { mountMapSandbox } from '/web/mapSandbox.js'
 import { mountComboBattler } from '/web/comboBattler.js'
 import { mountPersonaPanel, CLASS_SLUG } from '/web/personaPanel.js'
 import { mountHeroCreator, animateIdleIcon } from '/web/heroCreator.js'
-import { listPersonas, onRosterChange, getPortrait, getPersona, patchPersona, setActiveHeroId } from '/web/personaStore.js'
+import { listPersonas, onRosterChange, getPortrait, getPersona, patchPersona, setActiveHeroId, getAudio } from '/web/personaStore.js'
 import { applyXp, enemyXpValue, levelProgress, xpToNext, appendEvent, statBonuses } from '/web/progression.js'
 import { getSkillIcon } from '/web/personaStore.js'
 import { effectSummary, resolveEquipped } from '/web/skillSchema.js'
@@ -24,6 +24,8 @@ import { forgeSkillForHero } from '/web/skillForge.js'
 import { mountAfterAction } from '/web/afterAction.js'
 import { mountLevelUp, applyPerk } from '/web/levelUpCards.js'
 import { createTutorial } from '/web/tutorial.js'
+import { mountTitleSequence } from '/web/titleSequence.js'
+import { playWav, stopPreview } from '/web/tts.js'
 
 // First-run guided tour (in-world copy). Steps advance as the player acts; always skippable.
 const TUTORIAL_STEPS = [
@@ -302,6 +304,17 @@ async function fillAvatar(box, persona, chars, sizePx) {
     if (pc?.idle) animateIdleIcon(box, spriteUrl(pc.idle), sizePx)
   }
 }
+// Play a hero's SAVED voice — the cached quote WAV (IndexedDB) made when the hero was created.
+// Never regenerates; silent no-op for heroes that have no saved voice yet (e.g. the Fighter fallback).
+async function playHeroVoice(hero) {
+  if (!hero?.id) return
+  try {
+    const blob = await getAudio(hero.id)
+    if (!blob) return
+    try { stopPreview() } catch { /* ignore */ }
+    await playWav(await blob.arrayBuffer())
+  } catch { /* ignore */ }
+}
 // Hero detail page (before spawning): big portrait/idle + name/class/about/quote and a Select button.
 // onSelect fires when confirmed; Back / backdrop just close (returns to the picker).
 function openHeroDetail(host, persona, chars, onSelect) {
@@ -320,7 +333,8 @@ function openHeroDetail(host, persona, chars, onSelect) {
   const select = document.createElement('button'); select.className = 'hero-detail-select'; select.type = 'button'; select.textContent = 'Select ▶'
   foot.append(back, select)
   card.append(portrait, info, foot); backdrop.append(card); host.appendChild(backdrop)
-  const close = () => backdrop.remove()
+  playHeroVoice(persona) // greet the player in the hero's own saved voice when their page opens
+  const close = () => { try { stopPreview() } catch { /* ignore */ } backdrop.remove() }
   back.addEventListener('click', close)
   backdrop.addEventListener('pointerdown', (e) => { if (e.target === backdrop) close() })
   select.addEventListener('click', () => { close(); onSelect() })
@@ -425,10 +439,76 @@ whenEl('battle-stage', async (el) => {
   // Cinematic: the picker presents a zoomed-out overview; confirming a hero flies the camera DOWN to
   // the spawn point and drops them in there.
   const flyToOverview = () => { const b = comboCtrl.map.getBounds(); if (b) comboCtrl.map.flyTo((b.x0 + b.x1) / 2, (b.y0 + b.y1) / 2, OVERVIEW_ZOOM, 700).catch(() => {}) }
+  // ── Music: one looping theme that plays at full on the title screen and DUCKS (weaker) once the
+  // game starts. Owned here (not in the title sequence) so it survives the hero-pick handoff and can
+  // be muted. Autoplay is gated until a user gesture, so we retry on the first interaction. ──
+  const music = (() => {
+    const MUTE_KEY = 'tinyarmy.musicMuted'
+    const FULL = 0.55, DUCK = 0.16
+    const a = new Audio('/web/audio/title-theme.mp3'); a.loop = true; a.volume = 0
+    let target = FULL, muted = false, fade = null
+    try { muted = localStorage.getItem(MUTE_KEY) === '1' } catch { /* ignore */ }
+    const fadeTo = (want) => {
+      clearInterval(fade)
+      fade = setInterval(() => {
+        if (Math.abs(a.volume - want) < 0.02) { a.volume = want; clearInterval(fade); return }
+        a.volume += (want - a.volume) * 0.18
+      }, 60)
+    }
+    // Apply current state: muted → hard pause (truly stops it); else play + fade to target volume.
+    const apply = () => {
+      if (muted) { clearInterval(fade); try { a.pause() } catch { /* ignore */ } a.volume = 0 }
+      else { a.play().catch(() => {}); fadeTo(target) }
+    }
+    // Autoplay is gated until a user gesture — start (if not muted) on the first interaction.
+    const onGesture = () => { apply(); window.removeEventListener('pointerdown', onGesture); window.removeEventListener('keydown', onGesture) }
+    window.addEventListener('pointerdown', onGesture); window.addEventListener('keydown', onGesture)
+    const mutedListeners = new Set()
+    return {
+      full() { target = FULL; apply() },
+      duck() { target = DUCK; apply() },
+      isMuted: () => muted,
+      toggleMute() { muted = !muted; try { localStorage.setItem(MUTE_KEY, muted ? '1' : '0') } catch { /* ignore */ } apply(); for (const fn of mutedListeners) { try { fn(muted) } catch { /* ignore */ } } return muted },
+      onMuteChange(fn) { mutedListeners.add(fn) },
+    }
+  })()
+  // ── Cinematic title sequence (ambient camera tour over decorative warbands behind the picker) ──
+  let titleSeq = null
+  const ROSTER_POOL = Object.values(rosters).flat().filter(Boolean)
+  // Build "little armies" at scenic anchors: mostly the anchor-biome roster, with the odd wildcard
+  // 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) || []
+    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)
+      const units = []
+      for (let i = 0; i < n; i++) {
+        const src = Math.random() < 0.8 ? br : ROSTER_POOL
+        const e = src[Math.random() * src.length | 0]
+        if (e) units.push(e)
+      }
+      return { world: { x: an.x, y: an.y }, units }
+    }).filter((g) => g.units.length)
+  }
+  const startTitle = () => {
+    music.full() // theme at full on the title screen
+    if (titleSeq) return
+    titleSeq = mountTitleSequence(el, comboCtrl, {
+      groups: buildCineGroups(),
+      title: 'TINY ARMY',
+      tagline: 'Pick a hero. Hold the line.',
+    })
+  }
+  const stopTitle = () => { titleSeq?.stop(); titleSeq = null }
   const spawnWithFly = (p) => {
+    stopTitle()
+    music.duck() // theme keeps playing but weaker now the game has started
     picker?.remove(); picker = null
     // Re-read from the store so we carry live progression (level/xp/skills), not a stale picker copy.
     currentHero = (p && p.id && getPersona(p.id)) || p
+    playHeroVoice(currentHero) // hero's saved voice as they deploy (no regeneration)
     setActiveHeroId(currentHero?.id || null)
     runStart = { level: currentHero?.progression?.level || 1 } // for the after-action "levels gained"
     deathShown = false
@@ -497,7 +577,9 @@ whenEl('battle-stage', async (el) => {
     return buildHeroPicker(el, personas.length ? personas : [FALLBACK], chars, onPick,
       () => openCreateModal(el, spawnWithFly))
   }
-  const showPicker = () => { xpHud.style.display = 'none'; if (!picker) { picker = buildPicker(); flyToOverview() } }
+  // Picker is usable immediately; the title sequence runs the ambient camera tour behind it (so we
+  // start that instead of the old static fly-to-overview). flyToOverview stays as a fallback.
+  const showPicker = () => { xpHud.style.display = 'none'; if (!picker) { picker = buildPicker(); if (ROSTER_POOL.length) startTitle(); else flyToOverview() } }
   // Rebuild the open picker whenever the roster changes — so a hero just created (or removed) shows
   // up in the "Choose your hero" bar without waiting for the next time it reopens.
   const refreshPicker = () => { if (picker) { picker.remove(); picker = buildPicker() } }
@@ -507,6 +589,13 @@ whenEl('battle-stage', async (el) => {
   const sheetBtn = document.createElement('button'); sheetBtn.type = 'button'; sheetBtn.title = 'Character (C)'; sheetBtn.dataset.tut = 'sheet'
   sheetBtn.innerHTML = '☰<span style="font:700 9px var(--tac-font,system-ui);display:block;margin-top:-2px;color:#9aa4b2;letter-spacing:.04em">C</span>'
   sheetBtn.style.cssText = 'position:absolute;top:14px;right:14px;z-index:7;width:44px;height:46px;border-radius:10px;border:1px solid #2a3340;background:rgba(20,24,33,.85);color:#e8e8e8;font:600 17px var(--tac-font,system-ui);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1'
+  // Mute toggle for the music, sitting just left of the character-sheet button.
+  const muteBtn = document.createElement('button'); muteBtn.type = 'button'
+  muteBtn.style.cssText = 'position:absolute;top:14px;right:66px;z-index:7;width:44px;height:46px;border-radius:10px;border:1px solid #2a3340;background:rgba(20,24,33,.85);color:#e8e8e8;font:600 18px var(--tac-font,system-ui);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1'
+  const renderMute = (m) => { muteBtn.textContent = m ? '🔇' : '🔊'; muteBtn.title = m ? 'Unmute music' : 'Mute music' }
+  renderMute(music.isMuted())
+  music.onMuteChange(renderMute)
+  muteBtn.addEventListener('click', () => renderMute(music.toggleMute()))
   const sheet = document.createElement('aside')
   sheet.style.cssText = 'position:absolute;top:0;right:0;bottom:0;width:min(300px,82vw);z-index:8;background:rgba(16,20,27,.97);border-left:1px solid #2a3340;box-shadow:-8px 0 24px rgba(0,0,0,.45);transform:translateX(100%);transition:transform .22s ease;overflow-y:auto;color:#e8e8e8;font:13px var(--tac-font,system-ui);box-sizing:border-box;padding:18px 16px'
   // A forged-skill detail bottom-sheet: big action illustration (lazy Klein render, cached),
@@ -761,7 +850,7 @@ whenEl('battle-stage', async (el) => {
     const t = e.target; if (t && (t.tagName === 'INPUT' || t.tagName === 'TEXTAREA' || t.isContentEditable)) return
     if (e.key === 'c' || e.key === 'C') { setSheet(!sheetOpen); e.preventDefault() }
   })
-  el.append(sheetBtn, sheet)
+  el.append(sheetBtn, muteBtn, sheet)
 
   // ── XP / level HUD chip (top-left) — always visible while a hero is in play ──
   const xpHud = document.createElement('div')

web/titleSequence.js

@@ -0,0 +1,96 @@
+// Cinematic title sequence for the hero-select screen. The hero picker is usable immediately;
+// this just runs an ambient camera tour over decorative "warbands" (spawned via
+// comboCtrl.startCinematic) and lays a TINY ARMY wordmark + letterbox/vignette over the map,
+// with an optional looping theme. Everything here is non-blocking (pointer-events:none) and below
+// the picker (z-index 6), so it never gets in the player's way.
+//
+//   const seq = mountTitleSequence(host, comboCtrl, { groups, audioUrl, title, tagline })
+//   ...later, on hero pick/teardown:  seq.stop()
+
+export function mountTitleSequence(host, comboCtrl, opts = {}) {
+  // Music is owned by the caller (tiny.js) so it can persist (ducked) into gameplay and be muted —
+  // this module only drives the camera tour + wordmark overlay.
+  const { groups = [], title = 'TINY ARMY', tagline = 'Pick a hero. Hold the line.' } = opts
+  let stopped = false
+  const timers = new Set()
+  const sleep = (ms) => new Promise((res) => { const t = setTimeout(() => { timers.delete(t); res() }, ms); timers.add(t) })
+
+  // ── Overlay: letterbox bars + vignette + wordmark (all non-interactive) ──
+  const layer = document.createElement('div')
+  layer.className = 'title-seq'
+  layer.style.cssText = 'position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .8s ease'
+  const bar = (edge) => {
+    const b = document.createElement('div')
+    b.style.cssText = `position:absolute;left:0;right:0;${edge}:0;height:7vh;background:linear-gradient(${edge === 'top' ? '180deg' : '0deg'},rgba(0,0,0,.75),rgba(0,0,0,0));`
+    return b
+  }
+  const vignette = document.createElement('div')
+  vignette.style.cssText = 'position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 42%,transparent 55%,rgba(4,6,10,.55) 100%)'
+  const wrap = document.createElement('div')
+  wrap.style.cssText = 'position:absolute;left:0;right:0;top:13%;text-align:center;padding:0 16px;transition:opacity 1s ease,transform 1s ease'
+  const h = document.createElement('div')
+  h.textContent = title
+  h.style.cssText = 'font:800 clamp(34px,8vw,76px) var(--tac-font,Georgia,serif);letter-spacing:.06em;color:#f4ecd8;text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 26px rgba(255,196,92,.35);line-height:1'
+  const sub = document.createElement('div')
+  sub.textContent = tagline
+  sub.style.cssText = 'margin-top:10px;font:600 clamp(12px,2.4vw,17px) var(--tac-font,system-ui);color:#cdb98e;letter-spacing:.18em;text-transform:uppercase;opacity:.9'
+  wrap.append(h, sub)
+  layer.append(bar('top'), bar('bottom'), vignette, wrap)
+  host.appendChild(layer)
+  requestAnimationFrame(() => { layer.style.opacity = '1' })
+  // The big wordmark holds, then settles smaller/translucent so it reads as ambient branding
+  // rather than a blocking splash (the picker is live the whole time).
+  const settle = setTimeout(() => {
+    if (stopped) return
+    wrap.style.opacity = '.5'
+    wrap.style.transform = 'translateY(-4%) scale(.7)'
+  }, 4200)
+  timers.add(settle)
+
+  // ── Camera director: tour the warband anchors with push-in / pull-out, looping forever. ──
+  const rand = (a, b) => a + Math.random() * (b - a)
+  async function fly(x, y, z, ms) {
+    if (stopped) return
+    try { await comboCtrl.map.flyTo(x, y, z, ms) } catch { /* interrupted */ }
+  }
+  async function director(anchors) {
+    if (!anchors.length) { // nothing spawned — just drift the overview so it's not dead-still
+      const b = comboCtrl.map.getBounds()
+      while (!stopped) { await fly((b.x0 + b.x1) / 2, (b.y0 + b.y1) / 2, 0.45, 4000); await sleep(2500) }
+      return
+    }
+    const b = comboCtrl.map.getBounds()
+    const mid = { x: (b.x0 + b.x1) / 2, y: (b.y0 + b.y1) / 2 }
+    let i = 0
+    while (!stopped) {
+      const a = anchors[i % anchors.length]
+      // Push in on the warband and dwell. Wide enough to show lots of map; the decor sprites are
+      // scaled up (CINE_SPRITE_MUL in startCinematic) to compensate, so characters keep their size.
+      await fly(a.x, a.y, rand(1.15, 1.4), 2600)
+      await sleep(1900)
+      // Every third beat, pull out to a wide establishing shot before the next group.
+      if (i % 3 === 2) { await fly(mid.x + rand(-400, 400), mid.y + rand(-300, 300), rand(0.4, 0.55), 2300); await sleep(900) }
+      i++
+    }
+  }
+
+  // Spawn the warbands, then start the tour over wherever they actually landed.
+  ;(async () => {
+    let anchors = []
+    try { anchors = (await comboCtrl.startCinematic({ groups })) || [] } catch { anchors = [] }
+    if (stopped) { try { comboCtrl.stopCinematic() } catch {} ; return }
+    director(anchors)
+  })()
+
+  function stop() {
+    if (stopped) return
+    stopped = true
+    for (const t of timers) clearTimeout(t)
+    timers.clear()
+    try { comboCtrl.stopCinematic() } catch { /* ignore */ }
+    layer.style.opacity = '0'
+    setTimeout(() => { try { layer.remove() } catch {} }, 800)
+  }
+
+  return { stop }
+}