diff --git a/package-lock.json b/package-lock.json
index 32d6643..cbf30eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "@layoutit/polycss": "^0.2.7",
+        "animejs": "^4.5.0",
         "vue": "^3.5.38"
       },
       "devDependencies": {
@@ -779,6 +780,28 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/animejs": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-4.5.0.tgz",
+      "integrity": "sha512-NQimYX+lz8WaXonGS9zVVoviCIAjONeJayxacUditaivYLqyXgGjFKjuyl0aUUhFKm5MriX9ty1TGovNzoJQWA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/juliangarnier"
+      },
+      "peerDependencies": {
+        "@types/three": ">=0.150.0",
+        "three": ">=0.150.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/three": {
+          "optional": true
+        },
+        "three": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/assertion-error": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
diff --git a/package.json b/package.json
index db6f339..e65f9bf 100644
--- a/package.json
+++ b/package.json
@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@layoutit/polycss": "^0.2.7",
+    "animejs": "^4.5.0",
     "vue": "^3.5.38"
   }
 }
diff --git a/src/app.vue b/src/app.vue
index caa8042..6b0e212 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { animate, utils } from "animejs";
 import {
   buildPolyCameraSceneTransform,
   createPolyPerspectiveCamera,
@@ -11,6 +12,7 @@ import {
 } from "@layoutit/polycss";
 import { logoUrl, tileTextureSets } from "./assets/voxjongAssets";
 import { useMahjongSession } from "./composables/useMahjongSession";
+import { clearSoundDurationMs, useSound } from "./composables/useSound";
 import { useVoxjongView } from "./composables/useVoxjongView";
 import { turtleCells, type GameTile } from "./game/mahjong";
 import {
@@ -27,6 +29,40 @@ type Vec3 = [number, number, number];
 const clickMoveTolerance = 11;
 const polyCameraZoomScale = 50;
 const polySceneViewportOffset = { x: -10, y: -37 };
+
+// Start-of-game "assemble the turtle" intro: each tile drops from off-screen
+// into its resting place via a one-time requestAnimationFrame physics loop
+// (gravity + a small bounce). Landing order follows the support graph so a tile
+// only touches down after the tiles beneath it have settled. Occlusion-hidden
+// faces are force-revealed while assembling (.is-assembling) so even
+// fully-buried inner tiles fall as solid pieces.
+const introTileDuration = 620; // base ms fall time per tile
+const introTileDurationJitter = 620; // wide, so tiles fall at varied speeds (rain)
+const introBaseSpread = 850; // ms window the ground-layer tiles rain across
+const introTileExtraSpread = 150; // ms of random slack above a stacked tile's earliest land
+// A supporting tile must be fully settled (bounce done) THIS long before the
+// tile resting on it touches down.
+const introSettleLead = 250;
+const introBounceScreenPx = 9; // screen px of the little bounce on contact
+const introBounceTime = 160; // ms of the bounce settle
+const introLandingMinGap = 55; // ms min gap between landing ticks (throttle)
+const introLandingSoundMax = 30; // max landing ticks across the intro
+const introClearDuration = 380; // ms for a tile to fly off-screen
+// Sweep spans the chips-in-sack clip so the disappearance is timed to the sound.
+const introClearStagger = Math.max(80, clearSoundDurationMs - introClearDuration);
+// New Game board-clear direction: "down" drops the board off the bottom of the
+// screen; "right" (the original) slides it off the right edge.
+const introClearDirection: "down" | "right" = "down";
+const isAssembling = ref(false);
+// True from initial mount until the drop-in positions tiles off-screen, so the
+// un-textured board never flashes at rest while images preload.
+const boardPreparing = ref(false);
+let introPlans: IntroPlan[] = [];
+let introClearAnim: ReturnType<typeof animate> | null = null;
+// Bumped whenever a fresh intro sequence begins (mount / New Game); a pending
+// async first-load intro checks it so it can't fire after being superseded.
+let introGeneration = 0;
+let removeGestureUnlock: (() => void) | null = null;
 const turtleGridDimensions = computeTileGridDimensions(turtleCells);
 const themeStorageKey = "voxjong-theme";
 const themeMetaColors = {
@@ -127,6 +163,7 @@ const {
   isWon,
   selectedTile,
   timerLabel,
+  clockRunning,
   freeTileIds,
   hasMoves,
   hintedTileIds,
@@ -139,8 +176,39 @@ const {
   redoMove: redoGameMove,
   showHint: showGameHint,
   resetGame,
+  autoSolve,
 } = useMahjongSession();
 
+const isDevBuild = import.meta.env.DEV;
+
+function devSolve(): void {
+  if (isAssembling.value) {
+    return;
+  }
+  autoSolve(); // remove all but the final pair
+  clearSelectedTileVisual();
+  clearHintTileVisual();
+  scheduleTileVisualRefresh();
+}
+
+const {
+  muted: isMuted,
+  preload: preloadSounds,
+  unlock: unlockSounds,
+  dispose: disposeSounds,
+  toggleMuted: toggleSound,
+  playSelect: playSelectSound,
+  playMatch: playMatchSound,
+  playLanding: playLandingSound,
+  playClear: playClearSound,
+  playHint: playHintSound,
+  playWin: playWinSound,
+} = useSound();
+
+const soundToggleLabel = computed(() =>
+  isMuted.value ? "Sound Off" : "Sound On"
+);
+
 function applyThemePreference(preference: ThemeName): void {
   themePreference.value = preference;
   resolvedTheme.value = preference;
@@ -196,6 +264,7 @@ function redoMove(): void {
   if (!redoGameMove()) {
     return;
   }
+  playMatchSound();
   clearSelectedTileVisual();
   clearHintTileVisual();
   sceneVersion.value += 1;
@@ -399,10 +468,14 @@ function showHint(): void {
     clearHintTileVisual();
     return;
   }
+  playHintSound();
   refreshHintVisual();
 }
 
 function selectTile(tile: GameTile, mesh: HTMLElement | null): void {
+  if (isAssembling.value) {
+    return;
+  }
   const selectedId = selectedTileId.value;
 
   if (hintedTileIds.value.length > 0) {
@@ -412,6 +485,7 @@ function selectTile(tile: GameTile, mesh: HTMLElement | null): void {
   if (selectedId === tile.id) {
     selectedTileId.value = null;
     clearSelectedTileVisual();
+    playSelectSound();
     scheduleTileVisualRefresh();
     return;
   }
@@ -425,6 +499,7 @@ function selectTile(tile: GameTile, mesh: HTMLElement | null): void {
   if (selectedId === null) {
     selectedTileId.value = tile.id;
     setSelectedTileVisual(tile, mesh);
+    playSelectSound();
     scheduleTileVisualRefresh();
     return;
   }
@@ -433,6 +508,7 @@ function selectTile(tile: GameTile, mesh: HTMLElement | null): void {
   if (!selectedTile || selectedTile.removed) {
     selectedTileId.value = tile.id;
     setSelectedTileVisual(tile, mesh);
+    playSelectSound();
     scheduleTileVisualRefresh();
     return;
   }
@@ -440,6 +516,7 @@ function selectTile(tile: GameTile, mesh: HTMLElement | null): void {
   if (removePair(selectedTile.id, tile.id)) {
     clearSelectedTileVisual();
     clearHintTileVisual();
+    playMatchSound();
     sceneVersion.value += 1;
     scheduleTileVisualRefresh();
     return;
@@ -447,6 +524,7 @@ function selectTile(tile: GameTile, mesh: HTMLElement | null): void {
 
   selectedTileId.value = tile.id;
   setSelectedTileVisual(tile, mesh);
+  playSelectSound();
   scheduleTileVisualRefresh();
 }
 
@@ -532,11 +610,27 @@ function syncPolyMeshMetadata(
   tileMesh: TileMeshSpec,
   meshSignature = tileMeshSignature(tileMesh)
 ): void {
-  handle.element.dataset.tileId = String(tileMesh.tileId);
-  handle.element.dataset.tileCode = tileMesh.tileCode;
-  handle.element.dataset.selectable = String(tileMesh.selectable);
-  handle.element.dataset.removed = String(tileMesh.removed);
-  handle.element.dataset.meshSignature = meshSignature;
+  // Only write attributes that actually changed. Positions never change between
+  // games, so on a New Game reset almost everything here is identical (facename,
+  // occlusion, spans, selectability) — only the tile codes/textures differ.
+  // Guarding the writes keeps the reset from stalling the main thread (and
+  // avoids needless MutationObserver churn on data-texture-source / style).
+  const setData = (el: HTMLElement, key: string, value: string) => {
+    if (el.dataset[key] !== value) {
+      el.dataset[key] = value;
+    }
+  };
+  const setClass = (el: HTMLElement, cls: string, on: boolean) => {
+    if (el.classList.contains(cls) !== on) {
+      el.classList.toggle(cls, on);
+    }
+  };
+
+  setData(handle.element, "tileId", String(tileMesh.tileId));
+  setData(handle.element, "tileCode", tileMesh.tileCode);
+  setData(handle.element, "selectable", String(tileMesh.selectable));
+  setData(handle.element, "removed", String(tileMesh.removed));
+  setData(handle.element, "meshSignature", meshSignature);
 
   const faces = handle.element.querySelectorAll<HTMLElement>(
     "[data-poly-index]"
@@ -551,29 +645,43 @@ function syncPolyMeshMetadata(
     if (!data) {
       continue;
     }
-    face.setAttribute("data-facename", data.faceName);
-    face.dataset.faceKey = data.faceKey;
-    face.dataset.faceVisible = String(data.faceVisible);
-    face.dataset.tileId = String(data.tileId);
-    face.dataset.tileCode = data.tileCode;
-    face.dataset.selectable = String(data.selectable);
-    face.dataset.blocked = String(data.blocked);
-    face.dataset.removed = String(data.removed);
-    face.dataset.textureSet = data.textureSet;
-    face.dataset.textureSource = data.textureSource;
-    face.dataset.textureSourcePath = data.textureSourcePath;
+    if (face.getAttribute("data-facename") !== data.faceName) {
+      face.setAttribute("data-facename", data.faceName);
+    }
+    setData(face, "faceKey", data.faceKey);
+    setData(face, "faceVisible", String(data.faceVisible));
+    setData(face, "tileId", String(data.tileId));
+    setData(face, "tileCode", data.tileCode);
+    setData(face, "selectable", String(data.selectable));
+    setData(face, "blocked", String(data.blocked));
+    setData(face, "removed", String(data.removed));
+    setData(face, "textureSet", data.textureSet);
+    setData(face, "textureSource", data.textureSource);
+    setData(face, "textureSourcePath", data.textureSourcePath);
     if (data.spanStart !== undefined && data.spanEnd !== undefined) {
-      face.dataset.spanStart = String(data.spanStart);
-      face.dataset.spanEnd = String(data.spanEnd);
+      setData(face, "spanStart", String(data.spanStart));
+      setData(face, "spanEnd", String(data.spanEnd));
     } else {
       delete face.dataset.spanStart;
       delete face.dataset.spanEnd;
     }
-    face.classList.toggle("is-face-hidden", !data.faceVisible);
-    face.style.setProperty(
-      "--tile-texture-url",
-      data.faceName === "top" ? `url("${data.textureSource}")` : "none"
-    );
+    // A side face covering the tile's full extent on its axis is the clean
+    // "box wall"; the intro reveals these (+ the top) so buried tiles fall as
+    // whole boxes, while the partial-span duplicates stay hidden.
+    const isFullSpanSide =
+      data.faceName !== "top" &&
+      data.spanStart !== undefined &&
+      data.spanEnd !== undefined &&
+      (data.faceName === "left" || data.faceName === "right"
+        ? data.spanStart === data.gridY && data.spanEnd === data.gridY2
+        : data.spanStart === data.gridX && data.spanEnd === data.gridX2);
+    setClass(face, "is-full-span", isFullSpanSide);
+    setClass(face, "is-face-hidden", !data.faceVisible);
+    const url =
+      data.faceName === "top" ? `url("${data.textureSource}")` : "none";
+    if (face.style.getPropertyValue("--tile-texture-url") !== url) {
+      face.style.setProperty("--tile-texture-url", url);
+    }
   }
 }
 
@@ -692,6 +800,329 @@ function destroyPolyScene(): void {
   }
 }
 
+function preloadTileImages(): Promise<void> {
+  const urls = new Set<string>();
+  for (const tile of tiles.value) {
+    if (tile.removed) {
+      continue;
+    }
+    const url = tileTextureMap.value[tile.code];
+    if (url) {
+      urls.add(url);
+    }
+  }
+  const loads = [...urls].map(
+    (url) =>
+      new Promise<void>((resolve) => {
+        const img = new Image();
+        img.src = url;
+        // decode() warms the *decoded* bitmap cache so the symbol paints
+        // immediately mid-fall, instead of blank until the browser rasterizes.
+        const done = () => resolve();
+        img.decode().then(done, () => {
+          // decode() can reject even when the bytes are already loaded — don't
+          // wait on onload that will never re-fire in that case.
+          if (img.complete) {
+            done();
+            return;
+          }
+          img.onload = done;
+          img.onerror = done;
+        });
+      })
+  );
+  // Cap the wait so one slow/broken image can't stall the intro indefinitely.
+  return Promise.race([
+    Promise.all(loads).then(() => undefined),
+    new Promise<void>((resolve) => window.setTimeout(resolve, 2500)),
+  ]);
+}
+
+// The screen-space displacement (px) a tile gets per 1px of a local translate
+// on the given axis. Used to solve for the X/Y combination that moves a tile
+// straight up the screen, whatever the camera angle is.
+function measureAxisVector(
+  el: HTMLElement,
+  axis: "X" | "Y",
+  test: number
+): { dx: number; dy: number } {
+  // Measure from a clean baseline: the element may already carry a transform
+  // (e.g. the off-screen sweep-out), which would poison the delta. Restore both
+  // transform and transition afterwards so the caller's state is untouched.
+  const prevTransform = el.style.transform;
+  const prevTransition = el.style.transition;
+  el.style.transition = "none";
+  el.style.transform = "";
+  void document.body.offsetHeight;
+  const before = el.getBoundingClientRect();
+  el.style.transform = `translate${axis}(${test}px)`;
+  void document.body.offsetHeight;
+  const after = el.getBoundingClientRect();
+  el.style.transform = prevTransform;
+  el.style.transition = prevTransition;
+  return {
+    dx: (after.left - before.left) / test,
+    dy: (after.top - before.top) / test,
+  };
+}
+
+type IntroPlan = {
+  el: HTMLElement;
+  startOffset: number; // px along the fall axis, off-screen above rest
+  bounceOffset: number; // px of the little bounce-up on contact
+  fallDelay: number; // ms before this tile starts falling
+  fallTime: number; // ms of the accelerating fall
+};
+
+function stopAssembleIntro(): void {
+  for (const plan of introPlans) {
+    utils.remove(plan.el); // cancel any in-flight anime.js tweens on this tile
+    plan.el.style.willChange = "";
+    plan.el.style.transition = "";
+    plan.el.style.transform = "";
+  }
+  introPlans = [];
+  isAssembling.value = false;
+}
+
+// New Game exit: fling the current tiles off the side of the screen (kept
+// mounted) before the fresh board drops in. Uses the same screen-space
+// calibration so the sweep direction is correct at any camera angle.
+function runClearOut(onDone: () => void): void {
+  const reduceMotion =
+    window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+
+  const meshes: HTMLElement[] = [];
+  for (const tile of tiles.value) {
+    if (tile.removed) {
+      continue;
+    }
+    const handle = polyTileMeshHandles.get(tile.id);
+    if (handle) {
+      meshes.push(handle.element);
+    }
+  }
+  if (reduceMotion || meshes.length === 0) {
+    // Nothing to sweep (e.g. New Game right after a win, where every tile was
+    // removed and its mesh unmounted). Hide the board so the re-added tiles
+    // don't flash at rest before the drop-in parks them off-screen.
+    boardPreparing.value = true;
+    onDone();
+    return;
+  }
+
+  stopAssembleIntro();
+  if (introClearAnim) {
+    introClearAnim.cancel();
+    introClearAnim = null;
+  }
+  playClearSound();
+
+  const sample = meshes[0];
+  const vX = measureAxisVector(sample, "X", 200);
+  const vY = measureAxisVector(sample, "Y", 200);
+  const det = vX.dx * vY.dy - vY.dx * vX.dy;
+  // Screen displacement that carries a tile off the chosen edge.
+  const width = sceneRoot.value?.clientWidth || window.innerWidth;
+  const height = sceneRoot.value?.clientHeight || window.innerHeight;
+  const screenX = introClearDirection === "down" ? 0 : width * 1.25;
+  const screenY =
+    introClearDirection === "down" ? height * 1.4 : width * 0.15;
+  let localX = 0;
+  let localY = 0;
+  if (Math.abs(det) > 1e-6) {
+    localX = (screenX * vY.dy - screenY * vY.dx) / det;
+    localY = (screenY * vX.dx - screenX * vX.dy) / det;
+  }
+
+  // Sweep: rightmost tiles leave first.
+  const positioned = meshes.map((el) => ({
+    el,
+    x: el.getBoundingClientRect().left,
+  }));
+  const maxX = Math.max(...positioned.map((p) => p.x));
+  const minX = Math.min(...positioned.map((p) => p.x));
+  const span = Math.max(1, maxX - minX);
+
+  isAssembling.value = true;
+  for (const item of positioned) {
+    item.el.style.willChange = "transform";
+  }
+  // anime.js staggered sweep — rightmost tiles leave first.
+  introClearAnim = animate(meshes, {
+    translateX: localX,
+    translateY: localY,
+    duration: introClearDuration,
+    delay: (_el, i) =>
+      ((maxX - positioned[i].x) / span) * introClearStagger +
+      Math.random() * 40,
+    ease: "inQuad",
+  });
+  void introClearAnim.then(() => {
+    introClearAnim = null;
+    for (const item of positioned) {
+      item.el.style.willChange = "";
+      // Leave the off-screen transform; the drop-in intro overwrites it.
+    }
+    onDone();
+  });
+}
+
+function runAssembleIntro(): void {
+  stopAssembleIntro();
+  clockRunning.value = false; // don't count the intro; starts when it settles
+  const reduceMotion =
+    window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+
+  const activeTilesList = tiles.value.filter((tile) => !tile.removed);
+  if (activeTilesList.length === 0 || reduceMotion) {
+    boardPreparing.value = false; // show the (textured) board at rest
+    clockRunning.value = true; // no animation → board is ready immediately
+    return;
+  }
+  // Rain, not layers: schedule each tile's landing time from its support graph.
+  // A tile rests on the tiles directly beneath it (z-1, overlapping footprint);
+  // it may only touch down once every one of those has settled (landed + bounce)
+  // for introSettleLead ms. Tiles with no one landing on them are free to rain
+  // in whenever, at varied fall speeds — so it never looks lock-step.
+  const overlaps = (a: GameTile, b: GameTile) =>
+    a.gridX < b.gridX2 &&
+    a.gridX2 > b.gridX &&
+    a.gridY < b.gridY2 &&
+    a.gridY2 > b.gridY;
+
+  const maxFallTime = introTileDuration + introTileDurationJitter;
+  const landingTime = new Map<number, number>();
+  for (const tile of [...activeTilesList].sort((a, b) => a.z - b.z)) {
+    let earliest = maxFallTime; // can't land before it has finished falling
+    let supported = false;
+    for (const other of activeTilesList) {
+      if (other.z !== tile.z - 1 || !overlaps(tile, other)) {
+        continue;
+      }
+      supported = true;
+      const settled =
+        (landingTime.get(other.id) ?? 0) + introBounceTime + introSettleLead;
+      if (settled > earliest) {
+        earliest = settled;
+      }
+    }
+    const spread = supported ? introTileExtraSpread : introBaseSpread;
+    landingTime.set(tile.id, earliest + Math.random() * spread);
+  }
+
+  const plans: IntroPlan[] = [];
+  for (const tile of activeTilesList) {
+    const handle = polyTileMeshHandles.get(tile.id);
+    if (!handle) {
+      continue;
+    }
+    const fallTime = introTileDuration + Math.random() * introTileDurationJitter;
+    const land = landingTime.get(tile.id) ?? maxFallTime;
+    plans.push({
+      el: handle.element,
+      startOffset: 0,
+      bounceOffset: 0,
+      fallDelay: Math.max(0, land - fallTime),
+      fallTime,
+    });
+  }
+  if (plans.length === 0) {
+    // No meshes to animate — don't leave the board hidden or the clock frozen.
+    boardPreparing.value = false;
+    clockRunning.value = true;
+    return;
+  }
+
+  // Calibrate the straight-up-the-screen direction, then start every tile a
+  // full viewport above its resting place (off-screen), whatever the camera
+  // angle/units are.
+  const sample = plans[0].el;
+  const vX = measureAxisVector(sample, "X", 200);
+  const vY = measureAxisVector(sample, "Y", 200);
+  // Solve a·vX + b·vY = (0, -1): the local X/Y translate that moves a tile
+  // straight UP the screen by 1px. No Z — a large translateZ breaks the symbol
+  // paint under perspective and barely moves center tiles. (upX, upY) is that
+  // per-pixel direction, shared by all tiles.
+  const det = vX.dx * vY.dy - vY.dx * vX.dy;
+  let upX = 0;
+  let upY = -1;
+  if (Math.abs(det) > 1e-6) {
+    upX = vY.dx / det;
+    upY = -vX.dx / det;
+  } else if (Math.abs(vY.dy) > 1e-6) {
+    upY = -1 / vY.dy;
+  }
+  const viewportHeight = sceneRoot.value?.clientHeight || window.innerHeight;
+  const baseOffset = viewportHeight * 1.3; // screen px above rest (off-screen)
+
+  // Park every tile off-screen along the calibrated up-direction; anime.js owns
+  // the transform from here.
+  for (const plan of plans) {
+    plan.startOffset = baseOffset * (1 + Math.random() * 0.18);
+    plan.bounceOffset = introBounceScreenPx;
+    plan.el.style.willChange = "transform";
+    utils.set(plan.el, {
+      translateX: upX * plan.startOffset,
+      translateY: upY * plan.startOffset,
+    });
+  }
+  void document.body.offsetHeight;
+
+  introPlans = plans;
+  isAssembling.value = true;
+  boardPreparing.value = false; // tiles are off-screen now — safe to reveal
+
+  let lastSoundAt = -Infinity;
+  let soundsPlayed = 0;
+  let settled = 0;
+  const fireLanding = () => {
+    const now = performance.now();
+    if (
+      now - lastSoundAt > introLandingMinGap &&
+      soundsPlayed < introLandingSoundMax
+    ) {
+      playLandingSound();
+      lastSoundAt = now;
+      soundsPlayed += 1;
+    }
+  };
+
+  for (const plan of plans) {
+    const bounceX = upX * plan.bounceOffset;
+    const bounceY = upY * plan.bounceOffset;
+    // Accelerating fall (gravity), then a small settle bounce. fallDelay/fallTime
+    // come from the support graph above, so a tile only lands once the tiles
+    // beneath it are settled.
+    animate(plan.el, {
+      translateX: 0,
+      translateY: 0,
+      delay: plan.fallDelay,
+      duration: plan.fallTime,
+      ease: "inQuad",
+      onComplete: () => {
+        fireLanding(); // contact
+        animate(plan.el, {
+          keyframes: [
+            { translateX: bounceX, translateY: bounceY, ease: "outQuad" },
+            { translateX: 0, translateY: 0, ease: "inQuad" },
+          ],
+          duration: introBounceTime,
+          onComplete: () => {
+            plan.el.style.willChange = "";
+            settled += 1;
+            if (settled === plans.length) {
+              introPlans = [];
+              isAssembling.value = false;
+              clockRunning.value = true; // last piece landed → start the clock
+            }
+          },
+        });
+      },
+    });
+  }
+}
+
 function mountPolyScene(): void {
   const root = sceneRoot.value;
   if (!root) {
@@ -724,33 +1155,76 @@ function mountPolyScene(): void {
   scheduleDirectTileTextureStylesSync();
 }
 
+function unlockAudioOnFirstGesture(): void {
+  const unlock = () => unlockSounds();
+  removeGestureUnlock = () => {
+    window.removeEventListener("pointerdown", unlock);
+    window.removeEventListener("keydown", unlock);
+    removeGestureUnlock = null;
+  };
+  window.addEventListener("pointerdown", unlock, { once: true });
+  window.addEventListener("keydown", unlock, { once: true });
+}
+
 onMounted(() => {
   applyThemePreference(readStoredThemePreference() ?? "light");
+  preloadSounds();
+  unlockAudioOnFirstGesture();
+  boardPreparing.value = true; // hide the board until the first drop-in
+  const generation = ++introGeneration;
   requestAnimationFrame(() => {
     clampCurrentView();
     mountPolyScene();
     refreshTileVisuals();
+    // Skip this first-load intro if a New Game (or unmount) superseded it while
+    // images were preloading.
+    void preloadTileImages().then(() => {
+      if (generation === introGeneration) {
+        runAssembleIntro();
+      }
+    });
   });
 });
 
 onBeforeUnmount(() => {
+  introGeneration += 1; // invalidate any pending first-load intro
+  removeGestureUnlock?.();
   destroyPolyScene();
   clearSelectedTileVisual();
   clearHintTileVisual();
+  stopAssembleIntro();
+  if (introClearAnim) {
+    introClearAnim.cancel();
+    introClearAnim = null;
+  }
   if (refreshRafId !== null) {
     cancelAnimationFrame(refreshRafId);
     refreshRafId = null;
   }
+  disposeSounds();
 });
 
 function newGame(): void {
-  sceneVersion.value += 1;
-  resetGame();
-  resetGestureState();
-  pointerStart.value = null;
+  // Ignore repeat clicks while a board-clear sweep is already in flight.
+  if (introClearAnim) {
+    return;
+  }
+  introGeneration += 1; // supersede any pending first-load intro
+  clockRunning.value = false; // freeze the clock through sweep + drop-in
   clearSelectedTileVisual();
   clearHintTileVisual();
-  scheduleTileVisualRefresh();
+  // Sweep the CURRENT (textured) board off-screen, then reset + drop the new
+  // one in once the tiles are gone. Resetting is deferred to onDone so the
+  // sweep animates the old board, not a blank not-yet-textured one.
+  // resetGame() replaces the tiles array, which already triggers the mesh
+  // re-sync — bumping sceneVersion too would run that heavy sync a second time.
+  runClearOut(() => {
+    resetGame();
+    resetGestureState();
+    pointerStart.value = null;
+    scheduleTileVisualRefresh();
+    void nextTick(() => runAssembleIntro());
+  });
 }
 
 const tileMeshes = computed(() => {
@@ -800,6 +1274,12 @@ watch(
   },
   { flush: "post" }
 );
+
+watch(isWon, (won) => {
+  if (won) {
+    playWinSound();
+  }
+});
 </script>
 
 <template>
@@ -807,6 +1287,7 @@ watch(
     <section
       ref="sceneRoot"
       class="scene"
+      :class="{ 'is-assembling': isAssembling, 'is-preparing': boardPreparing }"
       @pointerdown.capture="onScenePointerDown"
       @pointermove.capture="onScenePointerMove"
       @pointerup.capture="onScenePointerUp"
@@ -841,6 +1322,17 @@ watch(
           <span class="chip-button-label">Hints</span>
           <span class="chip-button-suit" aria-hidden="true">&diamondsuit;</span>
         </button>
+        <button
+          v-if="isDevBuild"
+          type="button"
+          class="chip chip--button"
+          :disabled="remainingTiles <= 2"
+          title="Dev: remove all but the last pair"
+          @click="devSolve"
+        >
+          <span class="chip-button-label">Solve</span>
+          <span class="chip-button-suit" aria-hidden="true">&#9889;</span>
+        </button>
         <button
           type="button"
           class="chip chip--button chip--theme"
@@ -859,6 +1351,47 @@ watch(
             >&spades;</span
           >
         </button>
+        <button
+          type="button"
+          class="chip chip--button chip--sound"
+          :class="{ 'is-muted': isMuted }"
+          aria-label="Sound"
+          :aria-pressed="!isMuted"
+          @click="toggleSound"
+        >
+          <span class="chip-button-label">{{ soundToggleLabel }}</span>
+          <svg
+            class="chip-button-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            width="18"
+            height="18"
+            aria-hidden="true"
+          >
+            <path
+              fill="currentColor"
+              d="M4 9v6h4l5 5V4L8 9H4z"
+            />
+            <template v-if="isMuted">
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                d="M16 9l5 6M21 9l-5 6"
+              />
+            </template>
+            <template v-else>
+              <path
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                d="M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12"
+              />
+            </template>
+          </svg>
+        </button>
         <div class="move-controls">
           <button
             type="button"
diff --git a/src/assets/sounds/clear.wav b/src/assets/sounds/clear.wav
new file mode 100644
index 0000000..d5538a0
Binary files /dev/null and b/src/assets/sounds/clear.wav differ
diff --git a/src/assets/sounds/combine-1.wav b/src/assets/sounds/combine-1.wav
new file mode 100644
index 0000000..493fd38
Binary files /dev/null and b/src/assets/sounds/combine-1.wav differ
diff --git a/src/assets/sounds/combine-2.wav b/src/assets/sounds/combine-2.wav
new file mode 100644
index 0000000..87e11cd
Binary files /dev/null and b/src/assets/sounds/combine-2.wav differ
diff --git a/src/assets/sounds/hint.wav b/src/assets/sounds/hint.wav
new file mode 100644
index 0000000..ba839be
Binary files /dev/null and b/src/assets/sounds/hint.wav differ
diff --git a/src/assets/sounds/landing-1.wav b/src/assets/sounds/landing-1.wav
new file mode 100644
index 0000000..be26a17
Binary files /dev/null and b/src/assets/sounds/landing-1.wav differ
diff --git a/src/assets/sounds/landing-2.wav b/src/assets/sounds/landing-2.wav
new file mode 100644
index 0000000..c76a6c3
Binary files /dev/null and b/src/assets/sounds/landing-2.wav differ
diff --git a/src/assets/sounds/select-1.wav b/src/assets/sounds/select-1.wav
new file mode 100644
index 0000000..b823852
Binary files /dev/null and b/src/assets/sounds/select-1.wav differ
diff --git a/src/assets/sounds/select-2.wav b/src/assets/sounds/select-2.wav
new file mode 100644
index 0000000..5240f83
Binary files /dev/null and b/src/assets/sounds/select-2.wav differ
diff --git a/src/assets/sounds/win.wav b/src/assets/sounds/win.wav
new file mode 100644
index 0000000..efe26bc
Binary files /dev/null and b/src/assets/sounds/win.wav differ
diff --git a/src/composables/useMahjongSession.ts b/src/composables/useMahjongSession.ts
index ed78861..4af3416 100644
--- a/src/composables/useMahjongSession.ts
+++ b/src/composables/useMahjongSession.ts
@@ -1,7 +1,7 @@
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import {
   canPair,
-  createGameTiles,
+  createGameDeal,
   getAvailablePairs,
   getFreeTileIds,
   turtleCells,
@@ -20,13 +20,18 @@ function formatElapsed(totalSeconds: number): string {
 }
 
 export function useMahjongSession() {
-  const tiles = ref<GameTile[]>(createGameTiles());
+  const initialDeal = createGameDeal();
+  const tiles = ref<GameTile[]>(initialDeal.tiles);
+  const removalOrder = ref<Array<[number, number]>>(initialDeal.removalOrder);
   const selectedTileId = ref<number | null>(null);
   const elapsedSeconds = ref(0);
   const hintedTileIds = ref<number[]>([]);
   const hintPairIndex = ref(0);
   const undoStack = ref<MoveRecord[]>([]);
   const redoStack = ref<MoveRecord[]>([]);
+  // The clock only runs once the board is ready to play (set true after the
+  // assemble intro finishes), so the timer doesn't count the animation.
+  const clockRunning = ref(false);
   let timerId: ReturnType<typeof setInterval> | null = null;
 
   const activeTiles = computed(() =>
@@ -55,6 +60,7 @@ export function useMahjongSession() {
 
   function restartTimer(): void {
     elapsedSeconds.value = 0;
+    clockRunning.value = false;
   }
 
   function startTimer(): void {
@@ -62,7 +68,7 @@ export function useMahjongSession() {
       return;
     }
     timerId = setInterval(() => {
-      if (!isWon.value) {
+      if (clockRunning.value && !isWon.value) {
         elapsedSeconds.value += 1;
       }
     }, 1000);
@@ -197,12 +203,27 @@ export function useMahjongSession() {
   }
 
   function resetGame(): void {
-    tiles.value = createGameTiles();
+    const deal = createGameDeal();
+    tiles.value = deal.tiles;
+    removalOrder.value = deal.removalOrder;
     clearMoveHistory();
     clearSelectionAndHintState();
     restartTimer();
   }
 
+  // Dev helper: fast-forward the guaranteed-solvable removal order, stopping
+  // with `leave` tiles still on the board (default 2 = the final pair) so the
+  // victory can be triggered by a couple of real clicks.
+  function autoSolve(leave = 2): void {
+    clearSelectionAndHintState();
+    for (const [firstId, secondId] of removalOrder.value) {
+      if (remainingTiles.value <= leave) {
+        break;
+      }
+      removePair(firstId, secondId);
+    }
+  }
+
   onMounted(startTimer);
   onBeforeUnmount(stopTimer);
 
@@ -215,6 +236,7 @@ export function useMahjongSession() {
     isWon,
     selectedTile,
     timerLabel,
+    clockRunning,
     freeTileIds,
     hasMoves,
     hintedTileIds,
@@ -227,5 +249,6 @@ export function useMahjongSession() {
     redoMove,
     showHint,
     resetGame,
+    autoSolve,
   };
 }
diff --git a/src/composables/useSound.ts b/src/composables/useSound.ts
new file mode 100644
index 0000000..0d78e5b
--- /dev/null
+++ b/src/composables/useSound.ts
@@ -0,0 +1,183 @@
+import { ref } from "vue";
+import select1Url from "../assets/sounds/select-1.wav";
+import select2Url from "../assets/sounds/select-2.wav";
+import combine1Url from "../assets/sounds/combine-1.wav";
+import combine2Url from "../assets/sounds/combine-2.wav";
+import landing1Url from "../assets/sounds/landing-1.wav";
+import landing2Url from "../assets/sounds/landing-2.wav";
+import clearUrl from "../assets/sounds/clear.wav";
+import hintUrl from "../assets/sounds/hint.wav";
+import winUrl from "../assets/sounds/win.wav";
+
+// Each interaction randomizes across a small set of variants so repeated taps
+// don't sound mechanically identical.
+const selectUrls = [select1Url, select2Url];
+const combineUrls = [combine1Url, combine2Url];
+const landingUrls = [landing1Url, landing2Url];
+
+// The click on a chip is deliberately quieter than the combine "drop".
+// Landing ticks fire in quick succession during the intro, so they're quietest.
+const selectGain = 0.35;
+const combineGain = 0.7;
+const landingGain = 0.3;
+const clearGain = 0.6;
+const hintGain = 0.55;
+const winGain = 0.7;
+
+// Length of clear.wav (chips_in_sack_short), used to time the New Game sweep.
+export const clearSoundDurationMs = 604;
+
+const muteStorageKey = "voxjong-muted";
+
+function readStoredMuted(): boolean {
+  // Muted by default; only an explicit stored "false" unmutes.
+  try {
+    return window.localStorage.getItem(muteStorageKey) !== "false";
+  } catch {
+    return true;
+  }
+}
+
+function persistMuted(muted: boolean): void {
+  try {
+    window.localStorage.setItem(muteStorageKey, String(muted));
+  } catch {
+    // Ignore storage failures; muting stays in-memory for the session.
+  }
+}
+
+// Shared across every useSound() caller so the toggle stays in sync app-wide.
+const isMuted = ref(typeof window === "undefined" ? true : readStoredMuted());
+
+// One shared AudioContext + decoded-buffer cache for the whole app.
+let audioContext: AudioContext | null = null;
+const buffers = new Map<string, AudioBuffer>();
+
+function getContext(): AudioContext | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  if (!audioContext) {
+    const Ctor =
+      window.AudioContext ??
+      (window as unknown as { webkitAudioContext?: typeof AudioContext })
+        .webkitAudioContext;
+    if (!Ctor) {
+      return null;
+    }
+    audioContext = new Ctor();
+  }
+  return audioContext;
+}
+
+async function loadSound(url: string): Promise<void> {
+  const ctx = getContext();
+  if (!ctx || buffers.has(url)) {
+    return;
+  }
+  try {
+    const response = await fetch(url);
+    const data = await response.arrayBuffer();
+    buffers.set(url, await ctx.decodeAudioData(data));
+  } catch {
+    // Audio is a non-critical enhancement; a decode/fetch failure just
+    // leaves the game silent rather than breaking play.
+  }
+}
+
+function pickRandom<T>(items: readonly T[]): T {
+  return items[Math.floor(Math.random() * items.length)];
+}
+
+export function useSound() {
+  // Decoding works on a suspended context (no gesture needed); only playback
+  // requires the resume() that unlock() performs on the first pointer event.
+  function preload(): void {
+    for (const url of [
+      ...selectUrls,
+      ...combineUrls,
+      ...landingUrls,
+      clearUrl,
+      hintUrl,
+      winUrl,
+    ]) {
+      void loadSound(url);
+    }
+  }
+
+  function unlock(): void {
+    // Don't claim the platform audio session while muted (iOS can duck other
+    // apps' audio just from a running context).
+    if (isMuted.value) {
+      return;
+    }
+    const ctx = getContext();
+    if (ctx && ctx.state !== "running") {
+      void ctx.resume();
+    }
+  }
+
+  function play(url: string, gain: number, rate = 1): void {
+    if (isMuted.value) {
+      return;
+    }
+    const ctx = getContext();
+    if (!ctx) {
+      return;
+    }
+    // Never queue on a suspended context — queued sources all fire at once when
+    // it later resumes (a loud burst). Kick a resume and drop this one.
+    if (ctx.state !== "running") {
+      void ctx.resume();
+      return;
+    }
+    const buffer = buffers.get(url);
+    if (!buffer) {
+      void loadSound(url);
+      return;
+    }
+    const source = ctx.createBufferSource();
+    source.buffer = buffer;
+    source.playbackRate.value = rate;
+    const gainNode = ctx.createGain();
+    gainNode.gain.value = gain;
+    source.connect(gainNode).connect(ctx.destination);
+    source.start();
+  }
+
+  function setMuted(muted: boolean): void {
+    isMuted.value = muted;
+    persistMuted(muted);
+    if (!muted) {
+      unlock(); // resume the context so the next sound plays without a gesture
+    }
+  }
+
+  function toggleMuted(): void {
+    setMuted(!isMuted.value);
+  }
+
+  function dispose(): void {
+    if (audioContext) {
+      void audioContext.close();
+      audioContext = null;
+    }
+    buffers.clear();
+  }
+
+  return {
+    muted: isMuted,
+    preload,
+    unlock,
+    dispose,
+    setMuted,
+    toggleMuted,
+    playSelect: () => play(pickRandom(selectUrls), selectGain),
+    playMatch: () => play(pickRandom(combineUrls), combineGain),
+    playLanding: () =>
+      play(pickRandom(landingUrls), landingGain, 0.9 + Math.random() * 0.2),
+    playClear: () => play(clearUrl, clearGain),
+    playHint: () => play(hintUrl, hintGain),
+    playWin: () => play(winUrl, winGain),
+  };
+}
diff --git a/src/game/mahjong.ts b/src/game/mahjong.ts
index 37feb1e..803cfb0 100644
--- a/src/game/mahjong.ts
+++ b/src/game/mahjong.ts
@@ -275,7 +275,14 @@ export function createSolvableRemovalPairs(
   throw new Error("Unable to generate a solvable turtle deal.");
 }
 
-export function createGameTiles(): GameTile[] {
+export type GameDeal = {
+  tiles: GameTile[];
+  // Tile-id pairs in an order that is guaranteed to solve the board (each pair
+  // is free and matching when reached). Used by the dev auto-solver.
+  removalOrder: Array<[number, number]>;
+};
+
+export function createGameDeal(): GameDeal {
   const removalPairs = createSolvableRemovalPairs(turtleCells);
   const codePairs = createPairBag();
   if (removalPairs.length !== codePairs.length) {
@@ -295,7 +302,7 @@ export function createGameTiles(): GameTile[] {
     codeById.set(pair[1], codes[1]);
   }
 
-  return turtleCells.map((cell) => {
+  const tiles = turtleCells.map((cell) => {
     const code = codeById.get(cell.id);
     if (!code) {
       throw new Error(`Missing generated tile code for cell ${cell.id}.`);
@@ -316,6 +323,12 @@ export function createGameTiles(): GameTile[] {
       removed: false,
     };
   });
+
+  return { tiles, removalOrder: removalPairs };
+}
+
+export function createGameTiles(): GameTile[] {
+  return createGameDeal().tiles;
 }
 
 export function overlapOnAxis(
diff --git a/src/render/voxels.ts b/src/render/voxels.ts
index 3a1b6d8..da00c51 100644
--- a/src/render/voxels.ts
+++ b/src/render/voxels.ts
@@ -322,9 +322,9 @@ export function createTileMeshSpecs(
     const polygons: Polygon[] = [];
 
     for (const faceName of sideFaceNames) {
-      for (const span of active
-        ? exposedSideSpans(tile, faceName, activeTiles)
-        : []) {
+      const range = sideSpanRange(tile, faceName);
+      const exposed = exposedSideSpans(tile, faceName, activeTiles);
+      for (const span of exposed) {
         polygons.push(
           ...polygonsForFace(
             sideSpanBounds(bounds, faceName, span, dimensions),
@@ -345,6 +345,35 @@ export function createTileMeshSpecs(
           )
         );
       }
+      // Also emit the tile's full-span wall as a HIDDEN face whenever the side
+      // isn't already fully exposed. It stays hidden at rest (occluded), but the
+      // assemble intro reveals it (.is-full-span) so buried tiles fall as whole
+      // boxes instead of flat tops.
+      const fullyExposed =
+        exposed.length === 1 &&
+        exposed[0].start === range.start &&
+        exposed[0].end === range.end;
+      if (!fullyExposed) {
+        polygons.push(
+          ...polygonsForFace(
+            sideSpanBounds(bounds, faceName, range, dimensions),
+            faceName,
+            colors.side,
+            {
+              data: faceData(
+                tile,
+                faceName,
+                selectable,
+                palette.textureSet,
+                texture,
+                false,
+                intervalKey(faceName, range),
+                range
+              ),
+            }
+          )
+        );
+      }
     }
 
     polygons.push(
diff --git a/src/styles/app.css b/src/styles/app.css
index 7fa5743..f7c143e 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -226,6 +226,16 @@
   text-decoration: none;
 }
 
+.chip-button-icon {
+  flex: none;
+  display: block;
+}
+
+.chip--sound.is-muted {
+  color: var(--ui-color-muted);
+  opacity: 0.7;
+}
+
 .chip--button:hover:not(:disabled) {
   color: var(--ui-color-hover);
   transform: translateX(1px);
@@ -273,6 +283,20 @@
   pointer-events: none;
 }
 
+/* Before the very first drop-in, keep the board hidden while images preload so
+   the un-textured, at-rest board (blank tops + blocked-wrapper slabs) never
+   flashes. The drop-in clears this once tiles are parked off-screen. */
+.scene.is-preparing :deep(.polycss-mesh) {
+  visibility: hidden;
+}
+
+/* During the start-of-game assemble intro, reveal each tile's hidden full-span
+   side walls (tops are always shown) so even fully-buried inner tiles fall as
+   whole boxes. Coincident walls of touching tiles share a color, no z-fight. */
+.scene.is-assembling :deep(.polycss-mesh:not(.is-removed) [data-facename].is-full-span) {
+  visibility: visible;
+}
+
 .scene :deep(.polycss-mesh [data-facename="top"]) {
   --tile-top-art-inset: calc(var(--polycss-atlas-width, 64px) * 0.12);
   background-color: var(--tile-top) !important;