From bb60ca91ef56e04940f829b9d9fe31040995f3e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AB=98=E7=89=A9?= <253518756@qq.com>
Date: Fri, 15 May 2026 08:49:59 +0800
Subject: [PATCH] Match3D & Puzzle: runtime UI, assets, drag fix

Backend: stop treating background music as a required draft asset and remove auto-submit/plan for background music; load persisted generated UI/assets into Match3D agent session responses (added helpers to resolve profile id and fetch existing generated assets). Frontend: make Match3D result preview reuse runtime UI styles, unify runtime settings entry, update PuzzleRuntime to apply immediate pointermove transforms (disable drag transition), use SVG clipPath for merged piece rounding, ensure PuzzleRuntimeShell supplies platform theme classes, and adjust related tests. Docs & logs: update decision log, pitfalls and product docs to reflect these changes.
---
 .hermes/shared-memory/decision-log.md         |  48 +
 .hermes/shared-memory/pitfalls.md             |  57 +-
 ...�玩法创作】平�入�与玩法链路-2026-05-15.md |  22 +-
 ...�项目基线】当�产�与工程约�-2026-05-15.md |   1 +
 server-rs/crates/api-server/src/match3d.rs    | 955 +++++++++++++-----
 .../crates/api-server/src/match3d/mappers.rs  |  20 -
 ...ustomWorldCreationHub.interaction.test.tsx |  51 +-
 .../custom-world-home/CustomWorldWorkCard.tsx |  76 +-
 .../match3d-result/Match3DResultView.test.tsx | 111 +-
 .../match3d-result/Match3DResultView.tsx      | 141 ++-
 .../Match3DRuntimeShell.test.tsx              |  38 +-
 .../match3d-runtime/Match3DRuntimeShell.tsx   | 108 +-
 .../match3d-runtime/match3dRuntimeUiStyles.ts |  20 +
 .../PlatformEntryFlowShellImpl.tsx            | 204 +++-
 .../PuzzleRuntimeShell.test.tsx               | 240 ++++-
 .../puzzle-runtime/PuzzleRuntimeShell.tsx     | 303 ++++--
 .../puzzle-runtime/puzzleRuntimeShape.ts      |  82 +-
 ...gEntryFlowShell.agent.interaction.test.tsx |  91 ++
 .../RpgEntryHomeView.recharge.test.tsx        |  21 +-
 src/components/rpg-entry/RpgEntryHomeView.tsx |  37 +-
 src/index.css                                 |  88 +-
 src/routing/RouteImageReadyGate.test.ts       |   4 +-
 src/routing/appRoutes.tsx                     |   2 +-
 23 files changed, 2127 insertions(+), 593 deletions(-)

diff --git a/.hermes/shared-memory/decision-log.md b/.hermes/shared-memory/decision-log.md
index 3eb5bbb9..7ec7b82b 100644
--- a/.hermes/shared-memory/decision-log.md
+++ b/.hermes/shared-memory/decision-log.md
@@ -16,6 +16,54 @@
 
 ---
 
+## 2026-05-15 抓大鹅结果页 UI 预览�用�行�布局
+
+- 背景：抓大鹅结果页 `素��置 > UI` 的预览弹层曾手写简化 HUD 和容器布局，和真实�行�顶部关��片��上设置入��容器图定��槽�样�出现漂移。
+- 决策：结果页 UI 预览�组� `match3dRuntimeUiStyles` 中的�行� HUD�棋盘�容器图和槽�样�常�；�行�尺寸或视觉层级调整时，�步由这些常�影�预览，��在结果页�独维护�一套预览 UI。
+- 影�范围：`src/components/match3d-result/Match3DResultView.tsx`�`src/components/match3d-runtime/Match3DRuntimeShell.tsx`�`src/components/match3d-runtime/match3dRuntimeUiStyles.ts`�抓大鹅结果页测试和玩法链路文档。
+- 验�方�：执行 `npm run test -- src/components/match3d-result/Match3DResultView.test.tsx`�`npm run test -- src/components/match3d-runtime/Match3DRuntimeShell.test.tsx`，确认预览顶部 HUD�设置入��容器图定�和槽�样�与�行�一致。
+- 关�文档：`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
+## 2026-05-15 拼图拖拽视觉�时跟手且拼��切圆角
+
+- 背景：拼图�行�在触控拖拽时�能有追手延迟，�时拼图片需�真实圆角�切，�并�的 L 形 / 凹形��能��格圆角拼接。
+- 决策：`PuzzleRuntimeShell` 拖拽视觉在 `pointermove` 期间直接写入当���拼� DOM 的 `translate3d(...)`，拖拽阶段�用 transform transition，��赖�端回包�React �渲染或 `requestAnimationFrame` 队列。拖动过程中�展示拼�选中�或底部“已选择��示，选中状���留给点击交�语义。��通过 `buildRoundedGridCellClipPath()` �切独立圆角；�并�视觉层必须用 SVG 原生 `clipPath` �切整体外轮廓，���赖 HTML `clip-path:url(#...)`，外凸角和内凹角分开计算�径，内凹角�径更大以��移动端看起��是直角。
+- 影�范围：拼图�行�拖拽手感�`puzzleRuntimeShape` 圆角路径�拼图�行�测试和玩法链路文档。
+- 验�方�：执行 `npm run test -- src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx`�`npm run typecheck`�`npm run check:encoding`。
+- 关�文档：`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
+## 2026-05-15 拼图�行�点击弹层�使用�素素�框
+
+- 背景：拼图�行�主界�已�切到平�主色主题，但�示和设置弹层��用�素�宫格素�框，和当�拼图视觉�一致。
+- 决策：拼图�行�的�示�设置等点击弹层跟� `puzzle-runtime-*` 主色主题，使用普通圆角主题��和 CSS ��分层，��套 `pixel-nine-slice` / `pixel-modal-shell` 或 `UI_CHROME.modalPanel`。
+- 影�范围：`PuzzleRuntimeShell` 的�具确认弹窗�设置弹窗�拼图�行�样�和玩法链路文档。
+- 验�方�：执行 `npm run test -- src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx`，确认�示和设置 dialog �包��素框类�。
+- 关�文档：`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
+## 2026-05-15 拼图�行�壳层必须自带平�主题类
+
+- 背景：`/puzzle` 直达页和�行���返回分支�一定挂在外层平�壳里，若壳层��赖父级主题类，就会出现修改已�生效但页�看起�还是旧样�的错觉。
+- 决策：`PuzzleRuntimeShell` 自身在正常�行�和等待�都补� `platform-ui-shell platform-theme platform-theme--light|dark`，让直达页和平�内嵌页共享�一套主题��。
+- 影�范围：`PuzzleRuntimeShell` 根容器�路由直达页�拼图�行�测试和玩法链路文档。
+- 验�方�：执行 `npm run test -- src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx` 与 `npm run typecheck`，确认壳层 className 包�平�主题类。
+- 关�文档：`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
+## 2026-05-15 抓大鹅�稿自动编排���求背景音�
+
+- 背景：抓大鹅音频入�关闭�，�稿生���能在�端自动编排中调用 Suno，导致“�交 Suno 背景音�任务失败�阻断�稿生�。
+- 决策：`match3d_compile_draft` 的完��件�包� 2D 五视角物�图片�UI 背景和容器图；点击音效�在 `generateClickSound=true` 的历��置下作为�选补�。背景音�字段仅作为历�兼容传递，��由�稿自动生�或补�。
+- 影�范围：`api-server` Match3D �稿资产编排�抓大鹅音频关闭�径�玩法链路文档。
+- 验�方�：执行 `cargo test -p api-server match3d_generated_assets_require_only_images_when_click_sound_is_closed --manifest-path server-rs/Cargo.toml`�`cargo check -p api-server --manifest-path server-rs/Cargo.toml`�`npm run check:encoding`。
+- 关�文档：`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
+## 2026-05-15 抓大鹅�行��上角统一为设置入�
+
+- 背景：抓大鹅�行��上角原先直接暴露�新开始按钮，和拼图的设置入��径�一致，也�利于把设置��开和�续扩展动作收�到统一��。
+- 决策：`Match3DRuntimeShell` �上角改为设置按钮，点击�打开独立设置��；�新开始动作仅放在设置��内，结算弹层继续�留��一局。拼图�上角设置图标�步改为��素风 `lucide-react` `Settings` 图标。
+- 影�范围：`src/components/puzzle-runtime/PuzzleRuntimeShell.tsx`�`src/components/match3d-runtime/Match3DRuntimeShell.tsx`�对应测试和玩法链路文档。
+- 验�方�：执行 `npm run test -- src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx src/components/match3d-runtime/Match3DRuntimeShell.test.tsx`，确认拼图设置按钮��渲染�素图片�抓大鹅�上角打开设置��且��内��新开始。
+- 关�文档：`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
 ## 2026-05-15 汪汪声浪和��识物入�设为敬请期待
 
 - 背景：当�需�暂时关闭汪汪声浪和��识物两个模�的创建链路，但��留创作 Tab 中的模���。
diff --git a/.hermes/shared-memory/pitfalls.md b/.hermes/shared-memory/pitfalls.md
index b027d78b..e001f6ba 100644
--- a/.hermes/shared-memory/pitfalls.md
+++ b/.hermes/shared-memory/pitfalls.md
@@ -70,6 +70,22 @@
 - 验�：`npm run test -- src\services\match3dGeneratedModelCache.test.ts src\components\match3d-result\Match3DResultView.test.tsx src\components\match3d-runtime\Match3DRuntimeShell.test.tsx`；平�推��定�跑 `RpgEntryFlowShell.agent.interaction.test.tsx` 中的 Match3D runtime assets 用例；`npm run typecheck`。
 - 关�：`docs/��端架构】server-rs与SpacetimeDB数�契约-2026-05-15.md`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`�`docs/�项目基线】当�产�与工程约�-2026-05-15.md`。
 
+## 抓大鹅�稿关闭背景音���触� Suno 先查�端自动编排
+
+- 现象：用户已关闭抓大鹅�稿里的 `生�音效` 或��结果页音频入�，但点击生��报 `�交 Suno 背景音�任务失败`。
+- 原因：入�开关�影��端��控件或点击音效，�端 `match3d_compile_draft` 之�还会把 `backgroundMusic` 当作自动完��件，继续调用 `generate_background_music_asset_for_creation()`，从而直接� `/suno/submit/music`。
+- 处�：抓大鹅�稿自动编排��留 2D 物�图片�UI 背景和容器图；背景音�字段�作为历�兼容数�，��作为�稿完��件，也��由自动编排�交 Suno。
+- 验�：`cargo test -p api-server match3d_generated_assets_require_only_images_when_click_sound_is_closed --manifest-path server-rs/Cargo.toml` 通过，`cargo check -p api-server --manifest-path server-rs/Cargo.toml` 无新的编译问题。
+- 关�：`server-rs/crates/api-server/src/match3d.rs`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`�`.hermes/shared-memory/decision-log.md`。
+
+## 抓大鹅 UI 预览和实际游��一致先查�行�样��用
+
+- 现象：结果页 `素��置 > UI` 打开的预览弹层和真实抓大鹅�行��一致，例如顶部�显示倒计时��上还是转圈���中心容器尺寸或定�和局内��。
+- 原因：预览层手写了简化 HUD�棋盘尺寸和容器图样�，没有消费 `Match3DRuntimeShell` �行�使用的共享样�常�。
+- 处�：把�行� HUD�棋盘�容器图和槽�的 Tailwind 类抽到 `match3dRuntimeUiStyles.ts`，结果页预览��用这些常�；�行�之�改顶部设置入��关��片�容器图宽度或棋盘兜底样�时，��在结果页�写一套。
+- 验�：`npm run test -- src/components/match3d-result/Match3DResultView.test.tsx src/components/match3d-runtime/Match3DRuntimeShell.test.tsx`。
+- 关�：`src/components/match3d-result/Match3DResultView.tsx`�`src/components/match3d-runtime/match3dRuntimeUiStyles.ts`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
 ## 中文乱�与编�风险
 
 - 现象：中文文案�注释�剧情或文档显示为乱�，或被改写�英文。
@@ -469,6 +485,14 @@
 - 验�：`npm run test -- src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx -t "home recommendation surfaces start failure"`。
 - 关�：`docs/��端架构】server-rs与SpacetimeDB数�契约-2026-05-15.md`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`�`docs/�项目基线】当�产�与工程约�-2026-05-15.md`。
 
+## 推�页拼图改造返回���在进入中
+
+- 现象：推�页进入拼图作��点击改造，返回推�页时�在“正在进入拼图关��或空白加载�，�是作�还在�动。
+- 原因：改造或其他页��程会清掉当� `puzzleRun`，但推�页自动�动逻辑曾�检查 `activeRecommendEntryKey` 是��在推�列表中；旧 key 还在�玩法 run 已丢失时，会继续渲染失效的 `PuzzleRuntimeShell` ��。
+- 处�：从推�页拼图进入改造结果页时，先收�推�嵌入�；推�页自动�动逻辑还必须校验当�推�作�对应的 runtime 数�是�存在，例如拼图�有 `puzzleRun`，抓大鹅�有 `match3dRun`。key 还在但 runtime �完整时，优先�新�动当�作�，��误判为已激活。
+- 验�：`npm run test -- src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx -t "home recommendation starts embedded puzzle|home recommendation surfaces start failure|first puzzle runtime back click can open remix result page"`。
+- 关�：`src/components/platform-entry/PlatformEntryFlowShellImpl.tsx`�`src/components/puzzle-runtime/PuzzleRuntimeShell.tsx`。
+
 ## 推�页未登录入�误打开公开详情
 
 - 现象：新用户默认在�现页，但点击推�页或推����，如果�用公开作�详情入�，�能绕过推�页“登录�游玩�的产�门�。
@@ -696,6 +720,13 @@
 - 验�：执行 `npm run test -- src/components/match3d-runtime/Match3DRuntimeShell.test.tsx` 和 `npm run test -- src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx -t "Match3D runtime"`；�览器 Network 中背景和容器 generated path 应先请求 `/api/assets/read-url` �签，局内出现 `match3d-background-image` 和 `match3d-container-image` 对应图片。
 - 关�：`docs/��端架构】server-rs与SpacetimeDB数�契约-2026-05-15.md`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`�`docs/�项目基线】当�产�与工程约�-2026-05-15.md`。
 
+## 抓大鹅 UI 背景和容器�在物�挂载字段时也���
+
+- 现象：�稿���结果页素��置�UI 预览或试玩时�显示默认背景 / 默认容器，但 work profile 的首个 `generatedItemAssets[].backgroundAsset` 里已�有生�的背景和容器图。
+- 原因：UI 背景和容器资产没有独立表字段，�端�久化常�在 `generatedItemAssets[].backgroundAsset`；如果 session 映射�结果页 profile�推��行�详情补读����到顶层 `generatedBackgroundAsset` 和 `backgroundImageSrc`，�续组件会误判“没有生� UI 资产�。
+- 处�：Agent session 返回��用�久化 work profile 资产回填 draft；�端进入结果页�构建�稿 profile�推� / 公开作��动�行��，都�把 `generatedItemAssets[].backgroundAsset` ��为顶层背景字段。容器图在�行�和 UI 预览�用�一套居中 `object-contain` 样�，移动端宽度接近�宽，�有缺失或加载失败时�使用�明�考图兜底。
+- 验�：`cargo test -p api-server match3d_agent_session_response_hydrates_persisted_ui_assets --manifest-path server-rs/Cargo.toml`�`npm run test -- src/components/match3d-result/Match3DResultView.test.tsx src/components/match3d-runtime/Match3DRuntimeShell.test.tsx`。
+
 ## 抓大鹅��时��清空 generated 图片签�缓存
 
 - 现象：抓大鹅进入局内时背景或生�物�首帧缺失；点击�上角���，局内短暂显示默认积木，过一段时间��回实际生�素�。
@@ -788,10 +819,18 @@
 
 - 现象：抓大鹅生�的物�视角图�剪��带白边，或者整�纯绿色绿幕背景没有被�明化，�行�看到绿色方�。
 - 原因：素� sheet �能是“�格内部绿幕�整张图外圈近白底�，内部绿幕�一定连通到 sheet 外边缘；旧 flood fill �从外边缘找背景会�掉这�绿幕�。白底抗锯齿如果�纳入抠�和边缘去污染，也会��剪输出�一圈白边。�使顺�已是先整张 sheet 去绿��剪，较厚的��明或混色软绿边��能低于高置信绿幕阈值，被当作�景带进独立 PNG。
-- 处�：`api-server` 的 `slice_match3d_material_sheet` 必须先在整张 sheet 上��明背景�处�：外边缘连通绿幕/近白底清 alpha，�连通但高置信纯绿�也清 alpha，沿整张 sheet �明背景继续�掉软绿边，边缘近白和绿幕抗锯齿��明或去污染；�时�护�够纯的绿色主体�素。��改�先�剪�格�去绿。
+- 处�：`api-server` 的 `slice_match3d_material_sheet` 必须先在整张 sheet 上��明背景�处�：外边缘连通绿幕/近白底清 alpha，�连通但高置信纯绿�也清 alpha，沿整张 sheet �明背景继续�掉软绿边；�个视角�图还�以扩大的 PNG 边界带为��，把连通的浅绿 / 近白抗锯齿边直接改为�明，�按剩余��主体收紧�边，�时�护�够纯的绿色主体�素。��改�先�剪�格�去绿。
 - 验�：`cargo test -p api-server match3d_material_sheet_slicing --manifest-path server-rs\Cargo.toml` 覆盖�连通绿幕�白边�贴边主体�留和固定 5x5 切图。
 - 关�：`docs/��端架构】server-rs与SpacetimeDB数�契约-2026-05-15.md`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
 
+## 抓大鹅背景 UI 图出现�明区域先查背景��明�处�
+
+- 现象：抓大鹅生�的 `9:16` 局内背景 UI 图边缘�角�或局部出现�明 alpha，�行��能露出底色或�明棋盘底。
+- 原因：背景图和中心容器图是两张资产；容器图需��明 alpha，但背景图是整�底图。如果���示�约�，生图�务��能返回带�明通�的 PNG。
+- 处�：`generate_match3d_background_image` 上传背景�必须调用 `make_match3d_background_image_opaque()`，把所有��明 / 全�明�素��到��明底色；��把这�逻辑套到容器图，容器图�由 `make_match3d_container_image_transparent()` ���明。
+- 验�：`cargo test -p api-server match3d_background_image_postprocess_removes_transparent_pixels --manifest-path server-rs\Cargo.toml`，并确认背景�示�包�“全画幅��明�和“�明 alpha��用约�。
+- 关�：`server-rs/crates/api-server/src/match3d.rs`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
 ## 抓大鹅物�详情大方格���张大图查看
 
 - 现象：结果页 `素��置 > 物�` 打开详情�，上方大方格�显示横�五图带�焦点内框或�缩略图边框，物�本体看起���且�带�素�自带边框。
@@ -856,6 +895,22 @@
 - 验�：�行 `npm run test -- src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx -t "拖拽�并大�时底层�格�显示选中色�"`，并确认�并�拖拽时底层 `[data-piece-id]` �为 `puzzle-runtime-piece--merged`。
 - 关�：`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`�`docs/�项目基线】当�产�与工程约�-2026-05-15.md`�`docs/�开��维】本地开�验�与生产�维-2026-05-15.md`。
 
+## 拼图拖拽延迟和圆角异常先查�时 DOM 视觉层
+
+- 现象：拼图�拖动时有明显追手延迟，或�并�的 L 形 / 凹形内角圆角和外凸角表现一致�出现方角。
+- 原因：拖拽视觉如果�赖 `requestAnimationFrame` 排队�React �渲染或 transform transition，会在触控设备上产生一帧以上延迟；�并�如果���格 `border-radius`，无法正确处�整体外轮廓和内凹角。
+- 处�：`PuzzleRuntimeShell` 的 `pointermove` 期间直接给当���或�并组 DOM 写入 `translate3d(...)`，拖拽阶段�用 transform transition，并��拼�选中�和底部“已选择��示；��使用 `buildRoundedGridCellClipPath()` 独立�切，�并�视觉层使用 SVG 原生 `clipPath` �切整体轮廓，���赖 HTML `clip-path:url(#...)`，外凸角和内凹角�径分开计算，内凹角�径更大。
+- 验�：执行 `npm run test -- src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx`，�点覆盖拖拽 move � DOM transform 立��化且�调用 rAF�拖动中�显示已选择状��基础��有圆角�切��并�内凹角路径使用更大�径且视觉层为 SVG �切。
+- 关�：`src/components/puzzle-runtime/PuzzleRuntimeShell.tsx`�`src/components/puzzle-runtime/puzzleRuntimeShape.ts`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
+## 拼图设置��当�用时为 0 先查结算字段误用
+
+- 现象：拼图�行�还在游玩时，设置��里的“当�用时�一直显示 `0:00.00`，但顶部倒计时正常�化。
+- 原因：`currentLevel.elapsedMs` 是通关�的结算字段，进行中关�按契约通常为 `null`；设置��若直接格�化该字段，就会被归一化为 0。
+- 处�：设置��的当�用时按 `startedAtMs`�`pausedAccumulatedMs`�UI 暂�起点�`freezeAccumulatedMs` 和当�冻结区间实时派生，和剩余时间使用�一套暂� / 冻结扣除�径。
+- 验�：�行 `npm run test -- src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx -t "拼图设置��展示进行中关�的实时当�用时"`。
+- 关�：`src/components/puzzle-runtime/PuzzleRuntimeShell.tsx`�`docs/�玩法创作】平�入�与玩法链路-2026-05-15.md`。
+
 ## 拼图历�图片列表��把账�归属当图片�
 
 - 现象：拼图创作页或结果页打开“选择历�图片��，历�列表显示 `账� user-1` 之类归属文案而�是图片�；`1713686400.000000Z` 这类时间显示为未知；选中�预览或生��考图�能被怀疑��用。
diff --git a/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md b/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md
index 44ed9d73..4f448db2 100644
--- a/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md
+++ b/docs/�玩法创作】平�入�与玩法链路-2026-05-15.md
@@ -12,7 +12,7 @@
 
 1. �稿页作��对��现页列表�风格：左侧信�，�侧��图，移动端�列，桌�两到三列。
 2. �稿 / 已�布状�尽�图标化，�使用大段状�文案。
-3. 删除�分享等低频动作进入左滑或长按�作层，常��外露破��片密度。
+3. �稿�常��外露低频动作；已�布作���上角�直接显示无边框分享 icon，删除等破�性动作继续收�到左滑或长按�作层。
 4. 生�中作�在整�上加等待�罩，但�移除作�基础信�。
 5. �有 generated 图片必须通过 `ResolvedAssetImage` / `/api/assets/read-url` �签读�。
 
@@ -30,7 +30,12 @@
 - 支�画��述生图�多�考图生图�上传主图� AI �绘�上传主图���绘。
 - �稿生�会�留关�图和 UI 背景；当��自动生�背景音�。
 - 结果页素��置当���留 UI 相关能力；旧背景音�入���。
-- 拼图�行�默认棋盘��加分�蒙版��边�阴影�圆角切��选中底色或�并� SVG 轮廓；原图�具�在用户主动确认�临时覆盖。
+- 拼图�行�棋盘��加分�蒙版��边�阴影�选中底色或�并� SVG 轮廓；拼图片本体需��切为圆角形状，��使用独立圆角�切，�并�使用 SVG 原生 `clipPath` �切整体外轮廓，外凸角和内凹角分别计算�径，内凹角�径�比外凸角更明显以��手机 WebView 中看起��是直角。原图�具�在用户主动确认�打开独立原图查看层，�在当�拼图棋盘上�加原图。
+- 拼图�行�拖拽必须完全跟�手指或鼠标�置，`pointermove` 期间�时写入��拼�的 transform，��赖等待�端回包�React �渲染或下一帧动画队列；进入拖动��展示拼�选中�或“已选择��示，�手���交目标格�步规则真相。
+- 拼图�行�的�示�设置等点击弹层跟�当��行�主色主题，使用普通圆角主题��，��用�素�宫格素�框。
+- 拼图�行�壳层自身�补� `platform-ui-shell` / `platform-theme` / `platform-theme--light|dark`，�能�赖外层平�壳��供主题��；`/puzzle` 直达页和平�内嵌页都必须渲染�一套主题语义类。
+- 拼图�行�进行中关�的 `elapsedMs` �是结算字段，设置��的“当�用时�必须按 `startedAtMs`�暂�累计和冻结累计实时派生；��直接把进行中的 `currentLevel.elapsedMs` 当作展示值。
+- 推�页里的拼图作�如果从�行�进入“改造�结果页，返回平���清掉推�嵌入�的 `activeRecommendEntryKey` / `activeRecommendRuntimeKind` / `isStartingRecommendEntry`，��新按推�页自动�动逻辑进入作�，�能�用已�被清空的旧 `puzzleRun`。
 - 拼图�行��许�端低延迟交互表现，但通关�排行榜�奖励和作�状��以�端确认为准。
 
 ## 抓大鹅 Match3D
@@ -55,21 +60,22 @@
 当�素�生��水线：
 
 1. 点击生��弹出泥点确认，�稿生�固定消耗 `10` 泥点。
-2. 先写入����稿 profile，�执行文本计划�图片生��切图�OSS 上传�背景和容器生�。
+2. 先写入����稿 profile，�执行文本计划�图片生��切图�OSS 上传�背景和容器生�；�稿完��件�包� `backgroundMusic`。
 3. 物�素���调用 Hyper3D Rodin，��生� GLB。新�稿和批�新增固定生� 2D 五视角素�。
 4. 物� sheet 走 VectorEngine Gemini `gemini-3-pro-image-preview` 原生 `generateContent`，�张 `1:1` 图固定 `5*5`，�张承载 `5` 个物���个物� `5` 个视角。
-5. 切图�先在整张 sheet 上�绿幕 / 近白底�明化和边缘去污染，�按格�导出独立 PNG；��先�剪�格��自去绿。
+5. 切图�先在整张 sheet 上�绿幕 / 近白底�明化和边缘去污染，�按格�导出独立 PNG；�个视角图�以扩大的 PNG 边界带为��，把连通的浅绿 / 近白抗锯齿边直接改为�明，并按剩余��主体二次收紧；��先�剪�格��自去绿。
 6. `generatedItemAssets[].imageViews[]` 是新素�主字段，`imageSrc/imageObjectKey` �兼容首张视角。
 7. 文本生�物��称时必须�时生� `itemSize`，��许 `大`�`中`�`�`。该字段� `generatedItemAssets[].itemSize` �久化并下�；历�缺失字段的素�按 `大` 兼容，模型缺失或�法值按物��本地推断。
-8. 局内 `9:16` 纯背景图和 `1:1` 中心容器 UI 图分开生�。纯背景�得包�锅�盘�托盘�HUD�按钮�文字或物�；容器图走 `/v1/images/edits` �考�明容器图。
+8. 局内 `9:16` 纯背景图和 `1:1` 中心容器 UI 图分开生�。纯背景�得包�锅�盘�托盘�HUD�按钮�文字或物�，且入库�必须��为全画幅��明图片，��许出现�明区域；容器图走 `/v1/images/edits` �考�明容器图。
 9. 当�抓大鹅音频生�关闭：入�无 `生�音效`，�稿�生�背景音�或点击音效，结果页�展示背景音� Tab 或点击音效生�入�。历� `backgroundMusic` / `clickSound` 字段继续兼容传递。
+10. UI 背景和容器资产的�久化真相�在 `generatedItemAssets[].backgroundAsset`；Agent session�work summary/detail�结果页和�行�入�都必须把该字段��为 `backgroundImageSrc/backgroundImageObjectKey/generatedBackgroundAsset` 读�，���稿�进�结果页预览或试玩退回默认素�。
 
 结果页当�结构：
 
 - `作�信�`：�称��述�标签；��编辑收�到�布��。
 - `难度�置`：四档离散拖动�，显示需�消除�总物�数�物��类�已生�物��类。
 - `素��置 > 物�`：两列素��，点击打开独立五视角预览��；支�删除�批�新增和批��新生�。替�模�必须�留原 `itemId` 和列表顺�。
-- `素��置 > UI`：纯背景图与�行� UI 预览，�生�消耗 `2` 泥点。
+- `素��置 > UI`：纯背景图与�行� UI 预览，�生�消耗 `2` 泥点；UI 预览必须�用�行�顶部 HUD�中央容器棋盘�容器图定�和底部槽�样�，��独维护一套简化预览 UI。
 - `素��置 > 容器形象`：�独预览和�生�中心容器，消耗 `2` 泥点。
 
 �行�当��径：
@@ -80,9 +86,11 @@
 - �始物��标围绕容器�中心生�，并�留内缩安全�离，��贴边和局部角��集。
 - 本地试玩与 Rust `module-match3d` �端领域生�使用�一套中心铺开�径；生�点覆盖四象�且�值接近中心。
 - �行�优先消费 2D 生�图；默认积木 / 程�化 3D 表现�作为视觉分支和兜底，�改�规则真相。
-- �行��动��预加载 `generatedItemAssets[].imageViews[]`�顶层 `generatedBackgroundAsset`�物�挂载 `backgroundAsset` 中的背景和容器图；�片摘�缺 UI 背景或容器字段时，进入�行��必须补读 work detail。
+- �行��动��预加载 `generatedItemAssets[].imageViews[]`�顶层 `generatedBackgroundAsset`�物�挂载 `backgroundAsset` 中的背景和容器图；�片摘�缺 UI 背景或容器字段时，进入�行��必须补读 work detail。补读�的 profile 也��次�� `generatedItemAssets[].backgroundAsset`，确�背景和容器字段传给 `Match3DRuntimeShell`。
+- 局内容器图在移动端宽度接近�幕宽度并居中显示，��原图比例�拉伸；生�容器图加载�功�棋盘外壳�明且 `overflow-visible`，�有生�图缺失或加载失败时�显示�明�考容器兜底。
 - generated �有图�签未完�时，局内物�先��等待，�得短暂显示默认积木；�一批资�在�� run 时�留已解�签� URL，�有资��列表�化或�签失败���许进入兜底视觉。
 - `itemSize` �缩放生� 2D 图片本体：`大` 使用当�默认显示尺寸，`中` 和 `�` 缩�显示；�改��端下�的布局�径�点击�径或三消规则。
+- 抓大鹅�行��上角常驻设置入�，�直接暴露�新开始按钮；�新开始收�到设置��内，结算弹层��留结果�的��一局动作。
 - 高 DPR 移动端 WebGL canvas 必须�定 CSS 尺寸，���下溢出。
 
 ## 视觉�说
diff --git a/docs/�项目基线】当�产�与工程约�-2026-05-15.md b/docs/�项目基线】当�产�与工程约�-2026-05-15.md
index b489bf87..8a40e07c 100644
--- a/docs/�项目基线】当�产�与工程约�-2026-05-15.md
+++ b/docs/�项目基线】当�产�与工程约�-2026-05-15.md
@@ -85,6 +85,7 @@ server-rs + Axum + SpacetimeDB
 7. 主站入�已�定移动端页�级缩放；�个游�页������实现整页缩放�定。
 8. 图�输入通用 UI 统一走 `src/components/common/CreativeImageInputPanel.tsx`。外层页��有业务状�，组件�承担上传��预览��考图缩略图�AI �绘开关�错误展示和�交按钮。
 9. �现页 `分类` �频�的筛选必须打开独立 dialog / drawer / modal，至少支�玩法类型过滤与排�切�；筛选结果为空时显示空状�，�把筛选内容展开在当�列表下方。
+10. “我的�页泥点�游�时长�玩过三张统计��展示�自标签和值，内容居中且��行，�在统计区底部展示“更新于�时间。
 
 ## 文案与编�
 
diff --git a/server-rs/crates/api-server/src/match3d.rs b/server-rs/crates/api-server/src/match3d.rs
index b425c069..4d42df69 100644
--- a/server-rs/crates/api-server/src/match3d.rs
+++ b/server-rs/crates/api-server/src/match3d.rs
@@ -81,8 +81,7 @@ use crate::{
     request_context::RequestContext,
     state::AppState,
     vector_engine_audio_generation::{
-        GeneratedCreationAudioTarget, generate_background_music_asset_for_creation,
-        generate_sound_effect_asset_for_creation,
+        GeneratedCreationAudioTarget, generate_sound_effect_asset_for_creation,
     },
     work_play_tracking::{WorkPlayTrackingDraft, record_work_play_start_after_success},
 };
@@ -120,7 +119,6 @@ const MATCH3D_CONTAINER_REFERENCE_IMAGE_PATH: &str =
 const MATCH3D_QUESTION_THEME: &str = "你想创作什么题�";
 const MATCH3D_QUESTION_CLEAR_COUNT: &str = "需�消除多少次�能通关";
 const MATCH3D_QUESTION_DIFFICULTY: &str = "如果难度是从1-10，你�创作的关�是难度几";
-const MATCH3D_BACKGROUND_MUSIC_ASSET_KIND: &str = "match3d_background_music";
 const MATCH3D_CLICK_SOUND_ASSET_KIND: &str = "match3d_click_sound";
 const MATCH3D_PIXEL_RETRO_STYLE_PROMPT: &str = "真正���素 2D 游��具 sprite 风格，先以约 64x64 低分辨率�素�绘制�按整数�放大，硬边方��素清晰��，有�色� 12-24 色，�止抗锯齿�柔焦�平滑���真实 3D 渲染�PBR �质和摄影光照。";
 
@@ -209,18 +207,10 @@ struct Match3DGeneratedItemPlan {
     sound_prompt: String,
 }
 
-#[derive(Clone, Debug)]
-struct Match3DGeneratedBackgroundMusicPlan {
-    title: String,
-    style: String,
-    prompt: String,
-}
-
 #[derive(Clone, Debug)]
 struct Match3DGeneratedDraftPlan {
     metadata: Match3DGeneratedWorkMetadata,
     items: Vec<Match3DGeneratedItemPlan>,
-    background_music: Match3DGeneratedBackgroundMusicPlan,
     background_prompt: String,
 }
 
@@ -387,7 +377,12 @@ pub async fn create_match3d_agent_session(
     Ok(json_success_body(
         Some(&request_context),
         Match3DAgentSessionResponse {
-            session: map_match3d_agent_session_response(session),
+            session: load_match3d_agent_session_response_with_persisted_assets(
+                &state,
+                authenticated.claims().user_id(),
+                session,
+            )
+            .await,
         },
     ))
 }
@@ -420,7 +415,12 @@ pub async fn get_match3d_agent_session(
     Ok(json_success_body(
         Some(&request_context),
         Match3DAgentSessionResponse {
-            session: map_match3d_agent_session_response(session),
+            session: load_match3d_agent_session_response_with_persisted_assets(
+                &state,
+                authenticated.claims().user_id(),
+                session,
+            )
+            .await,
         },
     ))
 }
@@ -445,7 +445,12 @@ pub async fn submit_match3d_agent_message(
     Ok(json_success_body(
         Some(&request_context),
         Match3DAgentSessionResponse {
-            session: map_match3d_agent_session_response(session),
+            session: load_match3d_agent_session_response_with_persisted_assets(
+                &state,
+                authenticated.claims().user_id(),
+                session,
+            )
+            .await,
         },
     ))
 }
@@ -479,7 +484,12 @@ pub async fn stream_match3d_agent_message(
 
         match result {
             Ok(session) => {
-                let session_response = map_match3d_agent_session_response(session);
+                let session_response = load_match3d_agent_session_response_with_persisted_assets(
+                    &state,
+                    owner_user_id.as_str(),
+                    session,
+                )
+                .await;
                 if let Some(reply) = session_response.last_assistant_reply.clone() {
                     yield Ok::<Event, Infallible>(match3d_sse_json_event_or_error(
                         "reply_delta",
@@ -1368,7 +1378,7 @@ pub async fn generate_match3d_item_assets_for_work(
                 item: map_match3d_work_profile_response(profile),
                 generated_item_assets: sort_match3d_generated_assets(assets)
                     .into_iter()
-            .map(Match3DGeneratedItemAssetJson::from)
+                    .map(Match3DGeneratedItemAssetJson::from)
                     .map(map_match3d_generated_item_asset_for_work)
                     .collect(),
             },
@@ -1849,6 +1859,37 @@ async fn submit_and_finalize_match3d_message(
         })
 }
 
+async fn load_match3d_agent_session_response_with_persisted_assets(
+    state: &AppState,
+    owner_user_id: &str,
+    session: Match3DAgentSessionRecord,
+) -> Match3DAgentSessionSnapshotResponse {
+    let Some(profile_id) = resolve_match3d_session_existing_profile_id(&session) else {
+        return map_match3d_agent_session_response(session);
+    };
+    let assets =
+        get_match3d_existing_generated_item_assets(state, owner_user_id, profile_id.as_str()).await;
+    map_match3d_agent_session_response_with_assets(session, &assets)
+}
+
+fn resolve_match3d_session_existing_profile_id(
+    session: &Match3DAgentSessionRecord,
+) -> Option<String> {
+    session
+        .draft
+        .as_ref()
+        .map(|draft| draft.profile_id.trim())
+        .filter(|profile_id| !profile_id.is_empty())
+        .or_else(|| {
+            session
+                .published_profile_id
+                .as_deref()
+                .map(str::trim)
+                .filter(|profile_id| !profile_id.is_empty())
+        })
+        .map(str::to_string)
+}
+
 async fn compile_match3d_draft_for_session(
     state: &AppState,
     request_context: &RequestContext,
@@ -1985,7 +2026,6 @@ async fn compile_match3d_draft_for_session(
                 profile_id.as_str(),
                 &config,
                 generated_work_metadata.items,
-                generated_work_metadata.background_music,
                 existing_assets,
             )
             .await?;
@@ -2626,7 +2666,9 @@ impl From<Match3DGeneratedItemAssetJson> for Match3DGeneratedItemAsset {
         Self {
             item_id: asset.item_id,
             item_name: asset.item_name,
-            item_size: asset.item_size.or_else(|| Some(MATCH3D_ITEM_SIZE_LARGE.to_string())),
+            item_size: asset
+                .item_size
+                .or_else(|| Some(MATCH3D_ITEM_SIZE_LARGE.to_string())),
             image_src: asset.image_src,
             image_object_key: asset.image_object_key,
             image_views: asset.image_views,
@@ -2715,23 +2757,12 @@ async fn generate_match3d_item_assets(
     profile_id: &str,
     config: &Match3DConfigJson,
     item_plan: Vec<Match3DGeneratedItemPlan>,
-    background_music_plan: Match3DGeneratedBackgroundMusicPlan,
     existing_assets: Vec<Match3DGeneratedItemAsset>,
 ) -> Result<Vec<Match3DGeneratedItemAsset>, Response> {
-    // 中文注释：外部生图�音频和 OSS 写入都留在 api-server，SpacetimeDB reducer ��存确定性�稿。
+    // 中文注释：抓大鹅音频生�当�关闭；自动�稿�补� 2D 物�图片和�选点击音效。
     let target_item_count = resolve_match3d_generated_item_count(config);
     let mut assets = normalize_match3d_generated_item_assets_for_resume(existing_assets);
-    if has_match3d_required_item_images(&assets, target_item_count)
-        && assets
-            .iter()
-            .take(target_item_count)
-            .any(has_match3d_background_music_audio)
-        && (!config.generate_click_sound
-            || assets
-                .iter()
-                .take(target_item_count)
-                .all(|asset| asset.click_sound.is_some()))
-    {
+    if has_match3d_required_generated_assets(&assets, target_item_count, config) {
         return Ok(assets.into_iter().take(target_item_count).collect());
     }
 
@@ -2749,17 +2780,6 @@ async fn generate_match3d_item_assets(
         )
         .await?;
     }
-    assets = ensure_match3d_background_music_asset(
-        state,
-        request_context,
-        authenticated,
-        owner_user_id,
-        session_id,
-        profile_id,
-        &background_music_plan,
-        assets,
-    )
-    .await?;
     assets = ensure_match3d_click_sound_assets(
         state,
         request_context,
@@ -3159,85 +3179,6 @@ async fn ensure_match3d_click_sound_assets(
     Ok(assets)
 }
 
-#[allow(clippy::too_many_arguments)]
-async fn ensure_match3d_background_music_asset(
-    state: &AppState,
-    request_context: &RequestContext,
-    authenticated: &AuthenticatedAccessToken,
-    owner_user_id: &str,
-    session_id: &str,
-    profile_id: &str,
-    plan: &Match3DGeneratedBackgroundMusicPlan,
-    assets: Vec<Match3DGeneratedItemAsset>,
-) -> Result<Vec<Match3DGeneratedItemAsset>, Response> {
-    let mut assets = normalize_match3d_generated_item_assets_for_resume(assets);
-    if assets.iter().any(has_match3d_background_music_audio) {
-        return Ok(assets);
-    }
-
-    let Some(first_index) = assets
-        .iter()
-        .enumerate()
-        .min_by_key(|(_, asset)| match3d_item_sort_index(asset.item_id.as_str()))
-        .map(|(index, _)| index)
-    else {
-        return Err(match3d_error_response(
-            request_context,
-            MATCH3D_AGENT_PROVIDER,
-            match3d_background_music_missing_error("抓大鹅�稿缺少�写入背景音�的物�素�"),
-        ));
-    };
-
-    let title = require_match3d_background_music_title(plan)
-        .map_err(|error| match3d_error_response(request_context, MATCH3D_AGENT_PROVIDER, error))?;
-    let style = normalize_match3d_audio_style(plan.style.as_str());
-    match generate_match3d_background_music_asset(state, owner_user_id, profile_id, &title, &style)
-        .await
-    {
-        Ok(music) => {
-            let asset = &mut assets[first_index];
-            asset.background_music_title = Some(title);
-            asset.background_music_style = (!style.trim().is_empty()).then_some(style);
-            asset.background_music_prompt = Some(String::new());
-            asset.background_music = Some(music);
-            asset.error = None;
-            persist_match3d_generated_item_assets_snapshot(
-                state,
-                request_context,
-                authenticated,
-                session_id,
-                owner_user_id,
-                profile_id,
-                &assets,
-            )
-            .await?;
-        }
-        Err(error) => {
-            tracing::error!(
-                provider = MATCH3D_AGENT_PROVIDER,
-                session_id,
-                profile_id,
-                error = %error,
-                "抓大鹅�稿背景音�生�失败，终止本次�稿生�并等待�试"
-            );
-            return Err(match3d_error_response(
-                request_context,
-                MATCH3D_AGENT_PROVIDER,
-                error,
-            ));
-        }
-    }
-
-    Ok(assets)
-}
-
-fn has_match3d_background_music_audio(asset: &Match3DGeneratedItemAsset) -> bool {
-    asset
-        .background_music
-        .as_ref()
-        .is_some_and(|music| !music.audio_src.trim().is_empty())
-}
-
 async fn generate_match3d_click_sound_asset(
     state: &AppState,
     owner_user_id: &str,
@@ -3266,32 +3207,6 @@ async fn generate_match3d_click_sound_asset(
     Ok(asset)
 }
 
-async fn generate_match3d_background_music_asset(
-    state: &AppState,
-    owner_user_id: &str,
-    profile_id: &str,
-    title: &str,
-    style: &str,
-) -> Result<CreationAudioAsset, AppError> {
-    generate_background_music_asset_for_creation(
-        state,
-        owner_user_id,
-        String::new(),
-        title.to_string(),
-        (!style.trim().is_empty()).then_some(style.to_string()),
-        None,
-        GeneratedCreationAudioTarget {
-            entity_kind: "match3d_work".to_string(),
-            entity_id: profile_id.to_string(),
-            slot: "background_music".to_string(),
-            asset_kind: MATCH3D_BACKGROUND_MUSIC_ASSET_KIND.to_string(),
-            profile_id: Some(profile_id.to_string()),
-            storage_prefix: LegacyAssetPrefix::Match3DAssets,
-        },
-    )
-    .await
-}
-
 #[allow(clippy::too_many_arguments)]
 async fn append_match3d_new_item_assets(
     state: &AppState,
@@ -3620,32 +3535,6 @@ fn parse_match3d_draft_plan(
                 .collect::<Vec<_>>()
         })
         .unwrap_or_default();
-    let background_music = value
-        .get("backgroundMusic")
-        .or_else(|| value.get("background_music"))
-        .and_then(|music| {
-            let title = music
-                .get("title")
-                .and_then(Value::as_str)
-                .map(normalize_match3d_audio_title)
-                .filter(|value| !value.is_empty())?;
-            let style = music
-                .get("style")
-                .and_then(Value::as_str)
-                .map(normalize_match3d_audio_style)
-                .filter(|value| !value.is_empty())?;
-            let prompt = music
-                .get("prompt")
-                .and_then(Value::as_str)
-                .map(normalize_match3d_audio_prompt)
-                .unwrap_or_default();
-            Some(Match3DGeneratedBackgroundMusicPlan {
-                title,
-                style,
-                prompt,
-            })
-        })
-        .unwrap_or(fallback.background_music);
     let background_prompt = value
         .get("backgroundPrompt")
         .or_else(|| value.get("background_prompt"))
@@ -3661,7 +3550,6 @@ fn parse_match3d_draft_plan(
             tags: normalize_match3d_tag_candidates(tags),
         },
         items: normalize_match3d_item_plan(config, items),
-        background_music,
         background_prompt,
     })
 }
@@ -3706,26 +3594,6 @@ fn normalize_match3d_work_summary(raw: &str) -> String {
         .to_string()
 }
 
-fn normalize_match3d_audio_title(raw: &str) -> String {
-    raw.trim()
-        .trim_matches(['"', '\'', '“', '�', '。', '，', ',', '�'])
-        .chars()
-        .filter(|character| !character.is_control())
-        .take(40)
-        .collect::<String>()
-        .trim()
-        .to_string()
-}
-
-fn normalize_match3d_audio_style(raw: &str) -> String {
-    raw.split([',', '，', '�', '\n'])
-        .map(normalize_match3d_tag)
-        .filter(|value| !value.is_empty())
-        .take(6)
-        .collect::<Vec<_>>()
-        .join(", ")
-}
-
 fn fallback_match3d_work_metadata(theme_text: &str) -> Match3DGeneratedWorkMetadata {
     let theme = theme_text.trim();
     let normalized_theme = if theme.is_empty() { "主题" } else { theme };
@@ -3751,23 +3619,11 @@ fn fallback_match3d_draft_plan(config: &Match3DConfigJson) -> Match3DGeneratedDr
         .collect::<Vec<_>>();
     Match3DGeneratedDraftPlan {
         background_prompt: build_fallback_match3d_background_prompt(config),
-        background_music: build_fallback_match3d_background_music_plan(config, &metadata.game_name),
         metadata,
         items,
     }
 }
 
-fn build_fallback_match3d_background_music_plan(
-    _config: &Match3DConfigJson,
-    game_name: &str,
-) -> Match3DGeneratedBackgroundMusicPlan {
-    Match3DGeneratedBackgroundMusicPlan {
-        title: normalize_match3d_audio_title(format!("{game_name}音�").as_str()),
-        style: "轻快, 休闲, 消除, instrumental".to_string(),
-        prompt: String::new(),
-    }
-}
-
 fn normalize_match3d_item_name(raw: &str) -> String {
     raw.trim()
         .trim_matches(['"', '\'', '“', '�', '。', '，', ',', '�'])
@@ -3780,11 +3636,19 @@ fn normalize_match3d_item_name(raw: &str) -> String {
 }
 
 fn normalize_match3d_item_size(raw: &str) -> String {
-    let normalized = raw.trim().trim_matches(['"', '\'', '“', '�', '。', '，', ',', '�']);
+    let normalized = raw
+        .trim()
+        .trim_matches(['"', '\'', '“', '�', '。', '，', ',', '�']);
     match normalized {
-        "大" | "大型" | "�大" | "large" | "Large" | "L" | "l" => MATCH3D_ITEM_SIZE_LARGE.to_string(),
-        "中" | "中型" | "中等" | "medium" | "Medium" | "M" | "m" => MATCH3D_ITEM_SIZE_MEDIUM.to_string(),
-        "�" | "�型" | "��" | "small" | "Small" | "S" | "s" => MATCH3D_ITEM_SIZE_SMALL.to_string(),
+        "大" | "大型" | "�大" | "large" | "Large" | "L" | "l" => {
+            MATCH3D_ITEM_SIZE_LARGE.to_string()
+        }
+        "中" | "中型" | "中等" | "medium" | "Medium" | "M" | "m" => {
+            MATCH3D_ITEM_SIZE_MEDIUM.to_string()
+        }
+        "�" | "�型" | "��" | "small" | "Small" | "S" | "s" => {
+            MATCH3D_ITEM_SIZE_SMALL.to_string()
+        }
         _ => String::new(),
     }
 }
@@ -3792,16 +3656,16 @@ fn normalize_match3d_item_size(raw: &str) -> String {
 fn infer_match3d_item_size(item_name: &str) -> String {
     let name = item_name.trim();
     let large_keywords = [
-        "西瓜", "�瓜", "椰�", "箱", "盒", "桶", "盆", "锅", "�", "瓶�", "大瓶", "包",
-        "书包", "枕", "抱枕", "玩�", "�", "圆�", "足�", "篮�", "鼓",
+        "西瓜", "�瓜", "椰�", "箱", "盒", "桶", "盆", "锅", "�", "瓶�", "大瓶", "包", "书包",
+        "枕", "抱枕", "玩�", "�", "圆�", "足�", "篮�", "鼓",
     ];
     if large_keywords.iter().any(|keyword| name.contains(keyword)) {
         return MATCH3D_ITEM_SIZE_LARGE.to_string();
     }
     let small_keywords = [
-        "�莓", "�莓", "葡�", "樱桃", "莓", "糖", "糖果", "钥匙", "硬�", "纽扣", "徽章",
-        "戒指", "耳环", "铃铛", "星星", "�石", "�片", "花瓣", "蘑�", "�壳", "�章",
-        "彩蛋", "棋�", "骰�", "挂件",
+        "�莓", "�莓", "葡�", "樱桃", "莓", "糖", "糖果", "钥匙", "硬�", "纽扣", "徽章", "戒指",
+        "耳环", "铃铛", "星星", "�石", "�片", "花瓣", "蘑�", "�壳", "�章", "彩蛋", "棋�",
+        "骰�", "挂件",
     ];
     if small_keywords.iter().any(|keyword| name.contains(keyword)) {
         return MATCH3D_ITEM_SIZE_SMALL.to_string();
@@ -4236,6 +4100,19 @@ fn has_match3d_required_item_images(
             .all(is_match3d_generated_asset_image_ready)
 }
 
+fn has_match3d_required_generated_assets(
+    assets: &[Match3DGeneratedItemAsset],
+    required_item_count: usize,
+    config: &Match3DConfigJson,
+) -> bool {
+    has_match3d_required_item_images(assets, required_item_count)
+        && (!config.generate_click_sound
+            || assets
+                .iter()
+                .take(required_item_count)
+                .all(|asset| asset.click_sound.is_some()))
+}
+
 fn upsert_match3d_generated_item_asset(
     assets: &mut Vec<Match3DGeneratedItemAsset>,
     asset: Match3DGeneratedItemAsset,
@@ -4545,7 +4422,9 @@ async fn generate_match3d_background_image(
         &http_client,
         &settings,
         build_match3d_background_generation_prompt(config, prompt).as_str(),
-        Some("文字�水��UI�按钮�倒计时�分数�物��角色�手�边框�教程浮层���"),
+        Some(
+            "文字�水��UI�按钮�倒计时�分数�物��角色�手�边框�教程浮层�����明区域��明 alpha�镂空�棋盘格�明底",
+        ),
         "9:16",
         1,
         &[],
@@ -4562,6 +4441,7 @@ async fn generate_match3d_background_image(
                 "message": "抓大鹅背景图生�失败：未返回图片",
             }))
         })?;
+    let background_image = make_match3d_background_image_opaque(background_image)?;
     let background_upload = persist_match3d_generated_bytes(
         state,
         owner_user_id,
@@ -4743,7 +4623,7 @@ fn build_match3d_background_generation_prompt(config: &Match3DConfigJson, prompt
         .map(|style| format!("整体美术风格�考：{style}。"))
         .unwrap_or_default();
     format!(
-        "{prompt}\n{style_clause}生�一张 9:16 竖�抓大鹅游�纯背景图，�表现题�氛围�色彩层次和场景环境。画��得出现锅�圆盘�托盘�拼图槽�物�槽�棋盘�容器边框�HUD�文字�按钮�倒计时�分数�物��角色或手。中央区域��干净通�，方便�行��续�加默认交互容器和物�素�。"
+        "{prompt}\n{style_clause}生�一张 9:16 竖�抓大鹅游�纯背景图，�表现题�氛围�色彩层次和场景环境。必须全画幅��明，四边和角�都�有完整环境�素，�得出现�明 alpha��明底�镂空或棋盘格�明区域。画��得出现锅�圆盘�托盘�拼图槽�物�槽�棋盘�容器边框�HUD�文字�按钮�倒计时�分数�物��角色或手。中央区域��干净通�，方便�行��续�加默认交互容器和物�素�。"
     )
 }
 
@@ -4756,6 +4636,132 @@ fn build_match3d_container_generation_prompt(config: &Match3DConfigJson, prompt:
     )
 }
 
+// 中文注释：9:16 �行背景是整�底图，必须和中心容器�明素�分层处�，��局内露出�明底。
+fn make_match3d_background_image_opaque(
+    image: DownloadedOpenAiImage,
+) -> Result<DownloadedOpenAiImage, AppError> {
+    let source = image::load_from_memory(image.bytes.as_slice()).map_err(|error| {
+        AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+            "provider": "match3d-assets",
+            "message": format!("抓大鹅背景图解�失败：{error}"),
+        }))
+    })?;
+    let mut rgba = source.to_rgba8();
+    let matte = sample_match3d_background_opaque_matte(&rgba).unwrap_or([246, 243, 236]);
+    let mut changed = false;
+
+    for pixel in rgba.pixels_mut() {
+        let alpha = pixel.0[3];
+        if alpha == 255 {
+            continue;
+        }
+        pixel.0 = blend_match3d_background_pixel_over_matte(pixel.0, matte);
+        changed = true;
+    }
+
+    if !changed {
+        return Ok(image);
+    }
+
+    let mut encoded = std::io::Cursor::new(Vec::new());
+    image::DynamicImage::ImageRgba8(rgba)
+        .write_to(&mut encoded, ImageFormat::Png)
+        .map_err(|error| {
+            AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
+                "provider": "match3d-assets",
+                "message": format!("抓大鹅背景图��明化失败：{error}"),
+            }))
+        })?;
+
+    Ok(DownloadedOpenAiImage {
+        bytes: encoded.into_inner(),
+        mime_type: "image/png".to_string(),
+        extension: "png".to_string(),
+    })
+}
+
+fn sample_match3d_background_opaque_matte(image: &image::RgbaImage) -> Option<[u8; 3]> {
+    sample_match3d_background_matte_from_edges(image)
+        .or_else(|| sample_match3d_background_matte_from_pixels(image))
+}
+
+fn sample_match3d_background_matte_from_edges(image: &image::RgbaImage) -> Option<[u8; 3]> {
+    let (width, height) = image.dimensions();
+    if width == 0 || height == 0 {
+        return None;
+    }
+
+    let mut sampler = Match3DBackgroundMatteSampler::default();
+    for x in 0..width {
+        sampler.push(image.get_pixel(x, 0).0);
+        sampler.push(image.get_pixel(x, height - 1).0);
+    }
+    for y in 1..height.saturating_sub(1) {
+        sampler.push(image.get_pixel(0, y).0);
+        sampler.push(image.get_pixel(width - 1, y).0);
+    }
+    sampler.finish()
+}
+
+fn sample_match3d_background_matte_from_pixels(image: &image::RgbaImage) -> Option<[u8; 3]> {
+    let mut sampler = Match3DBackgroundMatteSampler::default();
+    for pixel in image.pixels() {
+        sampler.push(pixel.0);
+    }
+    sampler.finish()
+}
+
+#[derive(Default)]
+struct Match3DBackgroundMatteSampler {
+    red: u64,
+    green: u64,
+    blue: u64,
+    weight: u64,
+}
+
+impl Match3DBackgroundMatteSampler {
+    fn push(&mut self, pixel: [u8; 4]) {
+        let alpha = pixel[3] as u64;
+        if alpha < 32 {
+            return;
+        }
+        self.red = self.red.saturating_add(pixel[0] as u64 * alpha);
+        self.green = self.green.saturating_add(pixel[1] as u64 * alpha);
+        self.blue = self.blue.saturating_add(pixel[2] as u64 * alpha);
+        self.weight = self.weight.saturating_add(alpha);
+    }
+
+    fn finish(self) -> Option<[u8; 3]> {
+        (self.weight > 0).then(|| {
+            [
+                (self.red / self.weight) as u8,
+                (self.green / self.weight) as u8,
+                (self.blue / self.weight) as u8,
+            ]
+        })
+    }
+}
+
+fn blend_match3d_background_pixel_over_matte(pixel: [u8; 4], matte: [u8; 3]) -> [u8; 4] {
+    let alpha = pixel[3] as u16;
+    let inverse_alpha = 255u16.saturating_sub(alpha);
+    [
+        blend_match3d_background_channel(pixel[0], matte[0], alpha, inverse_alpha),
+        blend_match3d_background_channel(pixel[1], matte[1], alpha, inverse_alpha),
+        blend_match3d_background_channel(pixel[2], matte[2], alpha, inverse_alpha),
+        255,
+    ]
+}
+
+fn blend_match3d_background_channel(
+    foreground: u8,
+    matte: u8,
+    alpha: u16,
+    inverse_alpha: u16,
+) -> u8 {
+    ((foreground as u16 * alpha + matte as u16 * inverse_alpha + 127) / 255) as u8
+}
+
 fn make_match3d_container_image_transparent(
     image: DownloadedOpenAiImage,
 ) -> Result<DownloadedOpenAiImage, AppError> {
@@ -5733,8 +5739,9 @@ fn slice_match3d_material_sheet(
             let (crop_x, crop_y, crop_width, crop_height) =
                 resolve_match3d_material_cell_crop(&source, row_count, row, col);
             let cropped = source.crop_imm(crop_x, crop_y, crop_width, crop_height);
+            let cleaned = crop_match3d_material_view_edge_matte(cropped);
             let mut cursor = std::io::Cursor::new(Vec::new());
-            cropped
+            cleaned
                 .write_to(&mut cursor, ImageFormat::Png)
                 .map_err(|error| {
                     AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
@@ -5778,6 +5785,34 @@ fn resolve_match3d_material_cell_crop(
     crop.to_crop_tuple()
 }
 
+fn crop_match3d_material_view_edge_matte(image: image::DynamicImage) -> image::DynamicImage {
+    let mut image = image.to_rgba8();
+    let (width, height) = image.dimensions();
+    remove_match3d_material_view_edge_matte(image.as_mut(), width as usize, height as usize);
+    let bounds = detect_match3d_material_visible_bounds(&image).unwrap_or_else(|| {
+        Match3DMaterialCellBounds {
+            x0: 0,
+            y0: 0,
+            x1: width,
+            y1: height,
+        }
+    });
+    if bounds.x0 == 0 && bounds.y0 == 0 && bounds.x1 == width && bounds.y1 == height {
+        return image::DynamicImage::ImageRgba8(image);
+    }
+
+    image::DynamicImage::ImageRgba8(
+        image::imageops::crop_imm(
+            &image,
+            bounds.x0,
+            bounds.y0,
+            bounds.width(),
+            bounds.height(),
+        )
+        .to_image(),
+    )
+}
+
 #[derive(Clone, Copy, Debug)]
 struct Match3DMaterialCellBounds {
     x0: u32,
@@ -5862,6 +5897,45 @@ fn detect_match3d_material_foreground_bounds(
     })
 }
 
+fn detect_match3d_material_visible_bounds(
+    image: &image::RgbaImage,
+) -> Option<Match3DMaterialCellBounds> {
+    let (width, height) = image.dimensions();
+    let mut bounds: Option<Match3DMaterialCellBounds> = None;
+    let mut visible_pixels = 0u32;
+
+    for y in 0..height {
+        for x in 0..width {
+            let pixel = image.get_pixel(x, y).0;
+            if !is_match3d_material_visible_pixel(pixel) {
+                continue;
+            }
+            visible_pixels = visible_pixels.saturating_add(1);
+            bounds = Some(match bounds {
+                Some(current) => Match3DMaterialCellBounds {
+                    x0: current.x0.min(x),
+                    y0: current.y0.min(y),
+                    x1: current.x1.max(x.saturating_add(1)),
+                    y1: current.y1.max(y.saturating_add(1)),
+                },
+                None => Match3DMaterialCellBounds {
+                    x0: x,
+                    y0: y,
+                    x1: x.saturating_add(1),
+                    y1: y.saturating_add(1),
+                },
+            });
+        }
+    }
+
+    let min_visible_pixels = ((width.saturating_mul(height)) / 540).clamp(10, 120);
+    bounds.filter(|visible_bounds| {
+        visible_pixels >= min_visible_pixels
+            && visible_bounds.width() > 2
+            && visible_bounds.height() > 2
+    })
+}
+
 fn sample_match3d_material_cell_background(
     source: &image::DynamicImage,
     cell: Match3DMaterialCellBounds,
@@ -5932,6 +6006,167 @@ fn is_match3d_material_foreground_pixel(pixel: [u8; 4], background: [u8; 4]) ->
     color_diff >= MATCH3D_MATERIAL_FOREGROUND_DIFF_THRESHOLD
 }
 
+fn remove_match3d_material_view_edge_matte(pixels: &mut [u8], width: usize, height: usize) -> bool {
+    let pixel_count = width.saturating_mul(height);
+    if pixel_count == 0 || pixels.len() < pixel_count.saturating_mul(4) {
+        return false;
+    }
+
+    let mut changed = false;
+    let mut background_mask = vec![0u8; pixel_count];
+    let mut queue = Vec::<usize>::new();
+    let mut queue_index = 0usize;
+    for pixel_index in 0..pixel_count {
+        let offset = pixel_index * 4;
+        if pixels[offset + 3] == 0 {
+            background_mask[pixel_index] = 1;
+            queue.push(pixel_index);
+        }
+    }
+
+    // 中文注释：�图被�景边界收紧�，浅绿框�能正好贴在 PNG 外缘；
+    // 把外缘一段宽度作为去背��，但�清�绿幕 / 近白 matte，��误伤贴边主体。
+    let edge_width = resolve_match3d_material_view_edge_cleanup_width(width, height);
+    for y in 0..height {
+        for x in 0..width {
+            if x >= edge_width
+                && y >= edge_width
+                && x.saturating_add(edge_width) < width
+                && y.saturating_add(edge_width) < height
+            {
+                continue;
+            }
+            let pixel_index = y * width + x;
+            if background_mask[pixel_index] != 0 {
+                continue;
+            }
+            let offset = pixel_index * 4;
+            let pixel = [
+                pixels[offset],
+                pixels[offset + 1],
+                pixels[offset + 2],
+                pixels[offset + 3],
+            ];
+            if !is_match3d_material_view_background_pixel(pixel) {
+                continue;
+            }
+            background_mask[pixel_index] = 1;
+            queue.push(pixel_index);
+        }
+    }
+
+    while queue_index < queue.len() {
+        let pixel_index = queue[queue_index];
+        queue_index += 1;
+        let x = pixel_index % width;
+        let y = pixel_index / width;
+        let neighbors = [
+            (x > 0).then(|| pixel_index - 1),
+            (x + 1 < width).then_some(pixel_index + 1),
+            (y > 0).then(|| pixel_index - width),
+            (y + 1 < height).then_some(pixel_index + width),
+        ];
+
+        for next_pixel_index in neighbors.into_iter().flatten() {
+            if background_mask[next_pixel_index] != 0 {
+                continue;
+            }
+            let offset = next_pixel_index * 4;
+            let pixel = [
+                pixels[offset],
+                pixels[offset + 1],
+                pixels[offset + 2],
+                pixels[offset + 3],
+            ];
+            if !is_match3d_material_view_background_pixel(pixel) {
+                continue;
+            }
+            background_mask[next_pixel_index] = 1;
+            queue.push(next_pixel_index);
+        }
+    }
+
+    for _ in 0..edge_width {
+        let mut expanded_mask = background_mask.clone();
+        let mut changed_this_round = false;
+        for y in 0..height {
+            for x in 0..width {
+                let pixel_index = y * width + x;
+                if background_mask[pixel_index] != 0 {
+                    continue;
+                }
+                let offset = pixel_index * 4;
+                if !is_match3d_material_view_background_pixel([
+                    pixels[offset],
+                    pixels[offset + 1],
+                    pixels[offset + 2],
+                    pixels[offset + 3],
+                ]) {
+                    continue;
+                }
+
+                if touches_match3d_material_background_mask(x, y, width, height, &background_mask) {
+                    expanded_mask[pixel_index] = 1;
+                    changed_this_round = true;
+                }
+            }
+        }
+        background_mask = expanded_mask;
+        if !changed_this_round {
+            break;
+        }
+    }
+
+    // 中文注释：边缘抗锯齿圈�直接从���素里剔除，�按剩余主体�新收紧�边。
+    for pixel_index in 0..pixel_count {
+        if background_mask[pixel_index] == 0 {
+            continue;
+        }
+        let offset = pixel_index * 4;
+        if pixels[offset + 3] != 0
+            || pixels[offset] != 0
+            || pixels[offset + 1] != 0
+            || pixels[offset + 2] != 0
+        {
+            pixels[offset] = 0;
+            pixels[offset + 1] = 0;
+            pixels[offset + 2] = 0;
+            pixels[offset + 3] = 0;
+            changed = true;
+        }
+    }
+
+    changed
+}
+
+fn resolve_match3d_material_view_edge_cleanup_width(width: usize, height: usize) -> usize {
+    let min_side = width.min(height).max(1);
+    (min_side / 24).clamp(4, 12).min(min_side)
+}
+
+fn is_match3d_material_view_background_pixel(pixel: [u8; 4]) -> bool {
+    pixel[3] < 16
+        || is_match3d_material_soft_edge_pixel(pixel)
+        || compute_match3d_material_white_screen_score(pixel) > 0.18
+}
+
+fn is_match3d_material_visible_pixel(pixel: [u8; 4]) -> bool {
+    pixel[3] > 0 && (pixel[0] > 8 || pixel[1] > 8 || pixel[2] > 8)
+}
+
+fn is_match3d_material_soft_edge_pixel(pixel: [u8; 4]) -> bool {
+    if pixel[3] == 0 {
+        return false;
+    }
+
+    let red = pixel[0];
+    let green = pixel[1];
+    let blue = pixel[2];
+    green >= 188
+        && green.saturating_sub(red.max(blue)) >= 42
+        && (red >= 48 || blue >= 96 || pixel[3] < 236)
+}
+
 fn apply_match3d_material_green_screen_alpha(source: image::DynamicImage) -> image::DynamicImage {
     let mut image = source.to_rgba8();
     let (width, height) = image.dimensions();
@@ -7143,10 +7378,12 @@ mod tests {
             .expect("view should decode")
             .to_rgba8();
 
-        assert_eq!(
-            decoded.get_pixel(0, 0).0[3],
-            0,
-            "绿幕背景必须在切割输出中���明 alpha"
+        assert!(
+            decoded.pixels().all(|pixel| {
+                let [red, green, blue, alpha] = pixel.0;
+                alpha == 0 || !(green > red.saturating_add(32) && green > blue.saturating_add(32))
+            }),
+            "绿幕背景必须在切割输出中���明或被�素�二次�边移除"
         );
         assert!(
             decoded.pixels().any(|pixel| pixel.0 == [220, 32, 48, 255]),
@@ -7245,25 +7482,93 @@ mod tests {
     }
 
     #[test]
-    fn match3d_background_music_title_is_required_for_auto_draft() {
-        let missing =
-            require_match3d_background_music_title(&Match3DGeneratedBackgroundMusicPlan {
-                title: "  ，。 ".to_string(),
-                style: "轻快, 休闲".to_string(),
-                prompt: String::new(),
-            })
-            .expect_err("自动�稿背景音�必须有��交给 Suno 的曲�");
+    fn match3d_material_sheet_slicing_crops_single_view_green_antialias_border() {
+        let width = 500;
+        let height = 500;
+        let item_names = vec!["丸�".to_string()];
+        let mut sheet = image::RgbaImage::from_pixel(width, height, image::Rgba([0, 255, 0, 255]));
+        for y in 22..78 {
+            for x in 22..78 {
+                if x <= 24 || x >= 75 || y <= 24 || y >= 75 {
+                    sheet.put_pixel(x, y, image::Rgba([168, 246, 176, 255]));
+                }
+            }
+        }
+        for y in 40..60 {
+            for x in 40..60 {
+                sheet.put_pixel(x, y, image::Rgba([174, 92, 72, 255]));
+            }
+        }
 
-        assert!(missing.body_text().contains("背景音�"));
+        let mut encoded = std::io::Cursor::new(Vec::new());
+        image::DynamicImage::ImageRgba8(sheet)
+            .write_to(&mut encoded, ImageFormat::Png)
+            .expect("sheet should encode");
+        let image = DownloadedOpenAiImage {
+            bytes: encoded.into_inner(),
+            mime_type: "image/png".to_string(),
+            extension: "png".to_string(),
+        };
 
-        let title = require_match3d_background_music_title(&Match3DGeneratedBackgroundMusicPlan {
-            title: "  果园轻舞。 ".to_string(),
-            style: "轻快, 休闲".to_string(),
-            prompt: String::new(),
-        })
-        .expect("valid title should pass");
+        let slices = slice_match3d_material_sheet(&image, &item_names).expect("sheet should slice");
+        let decoded = image::load_from_memory(slices[0][0].bytes.as_slice())
+            .expect("view should decode")
+            .to_rgba8();
 
-        assert_eq!(title, "果园轻舞");
+        assert!(
+            decoded.width() <= 24 && decoded.height() <= 24,
+            "�素��剪�必须��掉浅绿抗锯齿边，�能把素�自带绿边算进输出尺寸；got {}x{}",
+            decoded.width(),
+            decoded.height()
+        );
+        assert!(
+            decoded
+                .pixels()
+                .all(|pixel| pixel.0[3] == 0 || pixel.0 != [168, 246, 176, 255]),
+            "�素�输出 PNG �能�留浅绿抗锯齿边�素"
+        );
+        assert!(
+            decoded.pixels().any(|pixel| pixel.0 == [174, 92, 72, 255]),
+            "�素�二次�边�能误删物�主体"
+        );
+    }
+
+    #[test]
+    fn match3d_material_view_edge_matte_removes_green_border_touching_png_edge() {
+        let width = 72;
+        let height = 72;
+        let mut view =
+            image::RgbaImage::from_pixel(width, height, image::Rgba([168, 246, 176, 255]));
+        for y in 10..62 {
+            for x in 10..62 {
+                view.put_pixel(x, y, image::Rgba([0, 0, 0, 0]));
+            }
+        }
+        for y in 24..48 {
+            for x in 24..48 {
+                view.put_pixel(x, y, image::Rgba([174, 92, 72, 255]));
+            }
+        }
+
+        let cleaned =
+            crop_match3d_material_view_edge_matte(image::DynamicImage::ImageRgba8(view)).to_rgba8();
+
+        assert!(
+            cleaned.width() <= 28 && cleaned.height() <= 28,
+            "�图外缘浅绿框�使贴� PNG 边界，也必须被�明化并从��边界中移除；got {}x{}",
+            cleaned.width(),
+            cleaned.height()
+        );
+        assert!(
+            cleaned
+                .pixels()
+                .all(|pixel| pixel.0[3] == 0 || pixel.0 != [168, 246, 176, 255]),
+            "�图外缘浅绿框�能残留为���素"
+        );
+        assert!(
+            cleaned.pixels().any(|pixel| pixel.0 == [174, 92, 72, 255]),
+            "扩大边缘清�宽度�能误删物�主体"
+        );
     }
 
     #[test]
@@ -7351,6 +7656,42 @@ mod tests {
         );
     }
 
+    #[test]
+    fn match3d_background_image_postprocess_removes_transparent_pixels() {
+        let width = 16;
+        let height = 16;
+        let mut image =
+            image::RgbaImage::from_pixel(width, height, image::Rgba([80, 140, 190, 255]));
+        image.put_pixel(0, 0, image::Rgba([0, 0, 0, 0]));
+        image.put_pixel(8, 8, image::Rgba([240, 120, 40, 128]));
+
+        let mut encoded = std::io::Cursor::new(Vec::new());
+        image::DynamicImage::ImageRgba8(image)
+            .write_to(&mut encoded, ImageFormat::Png)
+            .expect("background should encode");
+        let processed = make_match3d_background_image_opaque(DownloadedOpenAiImage {
+            bytes: encoded.into_inner(),
+            mime_type: "image/png".to_string(),
+            extension: "png".to_string(),
+        })
+        .expect("background should postprocess");
+        let decoded = image::load_from_memory(processed.bytes.as_slice())
+            .expect("processed background should decode")
+            .to_rgba8();
+
+        assert_eq!(processed.mime_type, "image/png");
+        assert_eq!(processed.extension, "png");
+        assert!(
+            decoded.pixels().all(|pixel| pixel.0[3] == 255),
+            "抓大鹅 9:16 背景图入库�必须移除所有�明 alpha"
+        );
+        assert_ne!(
+            decoded.get_pixel(0, 0).0,
+            [0, 0, 0, 0],
+            "原�明角�必须被��到��明背景色上"
+        );
+    }
+
     #[test]
     fn match3d_work_metadata_parses_gpt4o_json() {
         let metadata = parse_match3d_work_metadata(
@@ -7454,6 +7795,17 @@ mod tests {
         );
     }
 
+    #[test]
+    fn match3d_generated_assets_require_only_images_when_click_sound_is_closed() {
+        let assets = vec![test_match3d_generated_item_asset(1, "�莓")];
+
+        assert!(has_match3d_required_generated_assets(
+            &assets,
+            1,
+            &config("水果", 3, 3)
+        ));
+    }
+
     #[test]
     fn match3d_item_asset_points_cost_counts_five_item_batches() {
         assert_eq!(calculate_match3d_item_assets_points_cost(0), 0);
@@ -7759,6 +8111,8 @@ mod tests {
         assert!(background_prompt.contains("�得出现锅"));
         assert!(background_prompt.contains("拼图槽"));
         assert!(background_prompt.contains("物�槽"));
+        assert!(background_prompt.contains("全画幅��明"));
+        assert!(background_prompt.contains("�明 alpha"));
         assert!(background_prompt.contains("默认交互容器"));
 
         assert!(container_prompt.contains("1:1"));
@@ -7993,6 +8347,131 @@ mod tests {
         );
     }
 
+    #[test]
+    fn match3d_agent_session_response_hydrates_persisted_ui_assets() {
+        let session = Match3DAgentSessionRecord {
+            session_id: "match3d-session-1".to_string(),
+            current_turn: 3,
+            progress_percent: 100,
+            stage: "DraftCompiled".to_string(),
+            anchor_pack: Match3DAnchorPackRecord {
+                theme: Match3DAnchorItemRecord {
+                    key: "theme".to_string(),
+                    label: "题�主题".to_string(),
+                    value: "水果".to_string(),
+                    status: "confirmed".to_string(),
+                },
+                clear_count: Match3DAnchorItemRecord {
+                    key: "clearCount".to_string(),
+                    label: "消除次数".to_string(),
+                    value: "12".to_string(),
+                    status: "confirmed".to_string(),
+                },
+                difficulty: Match3DAnchorItemRecord {
+                    key: "difficulty".to_string(),
+                    label: "难度".to_string(),
+                    value: "4".to_string(),
+                    status: "confirmed".to_string(),
+                },
+            },
+            config: None,
+            draft: Some(Match3DResultDraftRecord {
+                profile_id: "match3d-profile-1".to_string(),
+                game_name: "水果抓大鹅".to_string(),
+                theme_text: "水果".to_string(),
+                summary_text: "水果主题".to_string(),
+                tags: vec!["水果".to_string(), "抓大鹅".to_string()],
+                cover_image_src: None,
+                reference_image_src: None,
+                clear_count: 12,
+                difficulty: 4,
+                total_item_count: 36,
+                publish_ready: false,
+                blockers: Vec::new(),
+            }),
+            messages: Vec::new(),
+            last_assistant_reply: None,
+            published_profile_id: None,
+            updated_at: "2026-05-15T00:00:00.000Z".to_string(),
+        };
+        let assets = vec![Match3DGeneratedItemAsset {
+            item_id: "match3d-item-1".to_string(),
+            item_name: "�莓".to_string(),
+            item_size: Some(MATCH3D_ITEM_SIZE_SMALL.to_string()),
+            image_src: Some(
+                "/generated-match3d-assets/session/profile/items/strawberry/view-01.png"
+                    .to_string(),
+            ),
+            image_object_key: Some(
+                "generated-match3d-assets/session/profile/items/strawberry/view-01.png".to_string(),
+            ),
+            image_views: Vec::new(),
+            model_src: None,
+            model_object_key: None,
+            model_file_name: None,
+            task_uuid: None,
+            subscription_key: None,
+            sound_prompt: None,
+            background_music_title: None,
+            background_music_style: None,
+            background_music_prompt: None,
+            background_music: None,
+            click_sound: None,
+            background_asset: Some(Match3DGeneratedBackgroundAsset {
+                prompt: "果园背景".to_string(),
+                image_src: Some(
+                    "/generated-match3d-assets/session/profile/background/background.png"
+                        .to_string(),
+                ),
+                image_object_key: Some(
+                    "generated-match3d-assets/session/profile/background/background.png"
+                        .to_string(),
+                ),
+                container_prompt: Some("果园容器".to_string()),
+                container_image_src: Some(
+                    "/generated-match3d-assets/session/profile/ui-container/container.png"
+                        .to_string(),
+                ),
+                container_image_object_key: Some(
+                    "generated-match3d-assets/session/profile/ui-container/container.png"
+                        .to_string(),
+                ),
+                status: "image_ready".to_string(),
+                error: None,
+            }),
+            status: "image_ready".to_string(),
+            error: None,
+        }];
+
+        let response = map_match3d_agent_session_response_with_assets(session, &assets);
+        let draft = response.draft.expect("session draft should exist");
+
+        assert_eq!(draft.generated_item_assets.len(), 1);
+        assert_eq!(draft.background_prompt.as_deref(), Some("果园背景"));
+        assert_eq!(
+            draft.background_image_src.as_deref(),
+            Some("/generated-match3d-assets/session/profile/background/background.png")
+        );
+        assert_eq!(
+            draft.cover_image_src.as_deref(),
+            Some("/generated-match3d-assets/session/profile/ui-container/container.png")
+        );
+        assert_eq!(
+            draft
+                .generated_background_asset
+                .as_ref()
+                .and_then(|asset| asset.container_image_src.as_deref()),
+            Some("/generated-match3d-assets/session/profile/ui-container/container.png")
+        );
+        assert_eq!(
+            draft.generated_item_assets[0]
+                .background_asset
+                .as_ref()
+                .and_then(|asset| asset.image_src.as_deref()),
+            Some("/generated-match3d-assets/session/profile/background/background.png")
+        );
+    }
+
     #[test]
     fn match3d_tag_normalization_only_strips_numbered_list_prefix() {
         assert_eq!(normalize_match3d_tag("3D素�"), "3D素�");
diff --git a/server-rs/crates/api-server/src/match3d/mappers.rs b/server-rs/crates/api-server/src/match3d/mappers.rs
index b74051e7..3bf0da7a 100644
--- a/server-rs/crates/api-server/src/match3d/mappers.rs
+++ b/server-rs/crates/api-server/src/match3d/mappers.rs
@@ -427,26 +427,6 @@ pub(super) fn match3d_bad_gateway(message: impl Into<String>) -> AppError {
     }))
 }
 
-pub(super) fn match3d_background_music_missing_error(message: impl Into<String>) -> AppError {
-    AppError::from_status(StatusCode::BAD_GATEWAY).with_details(json!({
-        "provider": MATCH3D_AGENT_PROVIDER,
-        "message": message.into(),
-        "missingAssets": ["背景音�"],
-    }))
-}
-
-pub(super) fn require_match3d_background_music_title(
-    plan: &Match3DGeneratedBackgroundMusicPlan,
-) -> Result<String, AppError> {
-    let title = normalize_match3d_audio_title(plan.title.as_str());
-    if title.is_empty() {
-        return Err(match3d_background_music_missing_error(
-            "抓大鹅�稿背景音��称为空，无法完�背景音�生�",
-        ));
-    }
-    Ok(title)
-}
-
 pub(super) fn map_match3d_work_profile_response(
     item: Match3DWorkProfileRecord,
 ) -> Match3DWorkProfileResponse {
diff --git a/src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx b/src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx
index 59a8f390..9c2d722e 100644
--- a/src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx
+++ b/src/components/custom-world-home/CustomWorldCreationHub.interaction.test.tsx
@@ -633,7 +633,7 @@ test('creation hub published work delete action is revealed without opening card
   );
 
   expect(screen.queryByRole('button', { name: '删除' })).toBeNull();
-  expect(screen.queryByRole('button', { name: '分享' })).toBeNull();
+  expect(screen.getByRole('button', { name: '分享' })).toBeTruthy();
 
   screen.getByRole('button', { name: /查看详情《待删拼图》/u }).focus();
   await user.keyboard('{ArrowLeft}');
@@ -684,7 +684,7 @@ test('creation hub opens persisted rpg drafts by card click', async () => {
   expect(openedItems).toEqual([persistedDraft]);
 });
 
-test('creation hub published swipe share button copies share text without opening the card', async () => {
+test('creation hub published share icon copies share text without opening the card', async () => {
   const user = userEvent.setup();
   const writeText = vi.fn(async () => undefined);
   const onOpenPuzzleDetail = vi.fn();
@@ -727,9 +727,11 @@ test('creation hub published swipe share button copies share text without openin
     />,
   );
 
-  screen.getByRole('button', { name: /查看详情《沉钟拼图》/u }).focus();
-  await user.keyboard('{ArrowLeft}');
-  await user.click(screen.getByRole('button', { name: '分享' }));
+  const shareButton = screen.getByRole('button', { name: '分享' });
+  expect(shareButton).toBeTruthy();
+  expect(screen.queryByText('删除')).toBeNull();
+
+  await user.click(shareButton);
 
   expect(writeText).toHaveBeenCalledWith(
     expect.stringContaining('邀请你�玩《沉钟拼图》'),
@@ -746,6 +748,45 @@ test('creation hub published swipe share button copies share text without openin
   ).toBeTruthy();
 });
 
+test('creation hub published share icon is shown directly on the card header', () => {
+  render(
+    <CustomWorldCreationHub
+      items={[]}
+      puzzleItems={[
+        {
+          workId: 'puzzle:work-share-icon',
+          profileId: 'puzzle-profile-share-icon',
+          ownerUserId: 'user-1',
+          authorDisplayName: '拼图作者',
+          levelName: '沉钟拼图',
+          summary: '分享入�应直接露出在�片�上角。',
+          themeTags: ['潮雾'],
+          coverImageSrc: null,
+          publicationStatus: 'published',
+          updatedAt: new Date('2026-04-22T12:00:00.000Z').toISOString(),
+          publishedAt: new Date('2026-04-22T12:10:00.000Z').toISOString(),
+          playCount: 8,
+          remixCount: 2,
+          likeCount: 0,
+          publishReady: true,
+        },
+      ]}
+      loading={false}
+      error={null}
+      onRetry={() => {}}
+      onCreateType={noopCreateType}
+      onOpenDraft={() => {}}
+      onEnterPublished={() => {}}
+      onOpenPuzzleDetail={() => {}}
+      entryConfig={testEntryConfig}
+      creationTypes={testCreationTypes}
+    />,
+  );
+
+  expect(screen.getByRole('button', { name: '分享' })).toBeTruthy();
+  expect(screen.queryByRole('button', { name: '删除' })).toBeNull();
+});
+
 test('creation hub left swipe draft reveals delete without opening card', () => {
   const onDeletePublished = vi.fn();
   const onOpenDraft = vi.fn();
diff --git a/src/components/custom-world-home/CustomWorldWorkCard.tsx b/src/components/custom-world-home/CustomWorldWorkCard.tsx
index d940663d..5fd9cc13 100644
--- a/src/components/custom-world-home/CustomWorldWorkCard.tsx
+++ b/src/components/custom-world-home/CustomWorldWorkCard.tsx
@@ -248,7 +248,7 @@ export function CustomWorldWorkCard({
   const isPublished = item.status === 'published';
   const canUseShareAction =
     isPublished && item.canShare && Boolean(item.sharePath);
-  const swipeActionCount = (canUseShareAction ? 1 : 0) + (onDelete ? 1 : 0);
+  const swipeActionCount = onDelete ? 1 : 0;
   const swipeRevealWidth = swipeActionCount * SWIPE_ACTION_WIDTH_PX;
   const canClaimPointIncentive =
     Boolean(onClaimPointIncentive) &&
@@ -584,43 +584,6 @@ export function CustomWorldWorkCard({
           className="creation-work-card__swipe-underlay"
         >
           <div className="creation-work-card__swipe-actions">
-            {canUseShareAction ? (
-              <button
-                type="button"
-                tabIndex={isSwipeActionRevealed ? 0 : -1}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  suppressOpenRef.current = false;
-                  copyShareText();
-                }}
-                onKeyDown={(event) => {
-                  event.stopPropagation();
-                }}
-                title={
-                  shareState === 'copied'
-                    ? '已�制'
-                    : shareState === 'failed'
-                      ? '�制失败'
-                      : '分享作�'
-                }
-                aria-label={
-                  shareState === 'copied'
-                    ? '分享内容已�制'
-                    : shareState === 'failed'
-                      ? '分享内容�制失败'
-                      : '分享'
-                }
-                className="creation-work-card__swipe-button creation-work-card__swipe-button--share"
-              >
-                {shareState === 'idle' ? (
-                  <Share2 aria-hidden="true" className="h-4 w-4" />
-                ) : (
-                  <span className="text-[10px] font-semibold leading-none">
-                    {shareState === 'copied' ? '已�制' : '�制失败'}
-                  </span>
-                )}
-              </button>
-            ) : null}
             {onDelete ? (
               <button
                 type="button"
@@ -710,6 +673,43 @@ export function CustomWorldWorkCard({
                 {displayTitle}
               </span>
             </div>
+            {canUseShareAction ? (
+              <button
+                type="button"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  suppressOpenRef.current = false;
+                  closeSwipeActions();
+                  copyShareText();
+                }}
+                onKeyDown={(event) => {
+                  event.stopPropagation();
+                }}
+                onPointerDown={(event) => {
+                  event.stopPropagation();
+                }}
+                onTouchStart={(event) => {
+                  event.stopPropagation();
+                }}
+                title={
+                  shareState === 'copied'
+                    ? '已�制'
+                    : shareState === 'failed'
+                      ? '�制失败'
+                      : '分享作�'
+                }
+                aria-label={
+                  shareState === 'copied'
+                    ? '分享内容已�制'
+                    : shareState === 'failed'
+                      ? '分享内容�制失败'
+                      : '分享'
+                }
+                className="creation-work-card__share-button"
+              >
+                <Share2 aria-hidden="true" className="h-4 w-4" />
+              </button>
+            ) : null}
           </div>
 
           <div className="creation-work-card__meta platform-category-game-item__meta">
diff --git a/src/components/match3d-result/Match3DResultView.test.tsx b/src/components/match3d-result/Match3DResultView.test.tsx
index 28e29f4b..3ded600e 100644
--- a/src/components/match3d-result/Match3DResultView.test.tsx
+++ b/src/components/match3d-result/Match3DResultView.test.tsx
@@ -1349,12 +1349,121 @@ describe('Match3DResultView', () => {
 
     fireEvent.click(screen.getByRole('button', { name: '预览UI页�' }));
     expect(screen.getByRole('dialog', { name: 'UI预览' })).toBeTruthy();
+    expect(screen.getByText('第 1 关')).toBeTruthy();
+    expect(screen.getByText('抓大鹅')).toBeTruthy();
     expect(screen.getByText('1:30')).toBeTruthy();
+    const previewBoard = screen.getByTestId('match3d-ui-preview-board');
+    expect(previewBoard.className).toContain('bg-transparent');
+    expect(previewBoard.className).not.toContain('rounded-full');
+    const containerImage = document.querySelector(
+      'img[src="/match3d-background-references/pot-fused-reference.png"]',
+    );
+    expect(containerImage).toBeTruthy();
+    expect(containerImage?.className).toContain('w-[min(99vw,34rem)]');
+    expect(containerImage?.className).toContain('-translate-x-1/2');
+    expect(
+      document.querySelector('.animate-spin, [class*="border-l-transparent"]'),
+    ).toBeNull();
+    expect(
+      document.querySelector(
+        'svg[class*="lucide-settings"], [data-lucide="settings"]',
+      ),
+    ).toBeTruthy();
+  });
+
+  test('素��置 UI � Tab 从物�挂载资产展示生�背景和容器', async () => {
+    const onStartTestRun = vi.fn();
+    const profile = createProfile({
+      backgroundPrompt: null,
+      backgroundImageSrc: null,
+      backgroundImageObjectKey: null,
+      generatedBackgroundAsset: null,
+      generatedItemAssets: [
+        {
+          ...createReadyGeneratedItemAsset(1),
+          itemName: '�莓',
+          backgroundAsset: {
+            prompt: '果园背景',
+            imageSrc:
+              '/generated-match3d-assets/session/profile/background/background.png',
+            imageObjectKey:
+              'generated-match3d-assets/session/profile/background/background.png',
+            containerPrompt: '果园容器',
+            containerImageSrc:
+              '/generated-match3d-assets/session/profile/ui-container/container.png',
+            containerImageObjectKey:
+              'generated-match3d-assets/session/profile/ui-container/container.png',
+            status: 'image_ready',
+            error: null,
+          },
+        },
+      ],
+    });
+    vi.mocked(match3dWorksService.updateMatch3DWork).mockResolvedValue({
+      item: createProfile({ generatedItemAssets: [] }),
+    });
+    vi.mocked(
+      match3dWorksService.updateMatch3DGeneratedItemAssets,
+    ).mockResolvedValue({
+      item: profile,
+    });
+
+    render(
+      <Match3DResultView
+        profile={profile}
+        onBack={() => {}}
+        onStartTestRun={onStartTestRun}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '素��置' }));
+    fireEvent.click(screen.getByRole('button', { name: 'UI' }));
+
+    expect(screen.getByAltText('游�背景图').getAttribute('src')).toBe(
+      '/generated-match3d-assets/session/profile/background/background.png',
+    );
+    expect(screen.getByLabelText('UI背景图画��述�示�')).toHaveProperty(
+      'value',
+      '果园背景',
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '预览UI页�' }));
+    expect(
+      document.querySelector(
+        'img[src="/generated-match3d-assets/session/profile/background/background.png"]',
+      ),
+    ).toBeTruthy();
+    expect(
+      document.querySelector(
+        'img[src="/generated-match3d-assets/session/profile/ui-container/container.png"]',
+      ),
+    ).toBeTruthy();
     expect(
       document.querySelector(
         'img[src="/match3d-background-references/pot-fused-reference.png"]',
       ),
-    ).toBeTruthy();
+    ).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: '试玩' }));
+
+    await waitFor(() => {
+      expect(onStartTestRun).toHaveBeenCalledWith(
+        expect.objectContaining({
+          backgroundPrompt: '果园背景',
+          backgroundImageSrc:
+            '/generated-match3d-assets/session/profile/background/background.png',
+          generatedBackgroundAsset: expect.objectContaining({
+            imageSrc:
+              '/generated-match3d-assets/session/profile/background/background.png',
+            containerImageSrc:
+              '/generated-match3d-assets/session/profile/ui-container/container.png',
+          }),
+        }),
+        {
+          itemTypeCountOverride: 1,
+        },
+      );
+    });
   });
 
   test('素��置 UI � Tab 修改�示��调用背景图生�接�并刷新素�', async () => {
diff --git a/src/components/match3d-result/Match3DResultView.tsx b/src/components/match3d-result/Match3DResultView.tsx
index 172fbff5..09e09969 100644
--- a/src/components/match3d-result/Match3DResultView.tsx
+++ b/src/components/match3d-result/Match3DResultView.tsx
@@ -8,6 +8,7 @@ import {
   Play,
   Plus,
   Send,
+  Settings,
   Trash2,
   Wand2,
   X,
@@ -24,6 +25,7 @@ import { createPortal } from 'react-dom';
 import type { CreationAudioAsset } from '../../../packages/shared/src/contracts/creationAudio';
 import type { Match3DResultDraft } from '../../../packages/shared/src/contracts/match3dAgent';
 import type {
+  Match3DGeneratedBackgroundAsset,
   Match3DGeneratedItemAsset,
   Match3DWorkProfile,
   PutMatch3DWorkRequest,
@@ -49,11 +51,19 @@ import {
 import { readPuzzleReferenceImageAsDataUrl } from '../../services/puzzleReferenceImage';
 import { useAuthUi } from '../auth/AuthUiContext';
 import {
+  MATCH3D_RUNTIME_BOARD_BASE_CLASS,
+  MATCH3D_RUNTIME_BOARD_FALLBACK_CLASS,
+  MATCH3D_RUNTIME_BOARD_WIDTH,
+  MATCH3D_RUNTIME_BOARD_WITH_CONTAINER_CLASS,
+  MATCH3D_RUNTIME_CONTAINER_IMAGE_CLASS,
+  MATCH3D_RUNTIME_CONTAINER_PLACEHOLDER_CLASS,
   MATCH3D_RUNTIME_GLASS_ICON_BUTTON_CLASS,
-  MATCH3D_RUNTIME_GLASS_SPINNER_CLASS,
-  MATCH3D_RUNTIME_GLASS_TIMER_CLASS,
   MATCH3D_RUNTIME_GLASS_TRAY_CLASS,
   MATCH3D_RUNTIME_GLASS_TRAY_SLOT_CLASS,
+  MATCH3D_RUNTIME_HEADER_CARD_CLASS,
+  MATCH3D_RUNTIME_LEVEL_BADGE_CLASS,
+  MATCH3D_RUNTIME_STAGE_CLASS,
+  MATCH3D_RUNTIME_TIMER_CLASS,
 } from '../match3d-runtime/match3dRuntimeUiStyles';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 
@@ -299,6 +309,44 @@ function resolveMatch3DBackgroundPreviewSource(
   );
 }
 
+function findMatch3DGeneratedBackgroundAsset(
+  generatedItemAssets: readonly Match3DGeneratedItemAsset[] = [],
+): Match3DGeneratedBackgroundAsset | null {
+  return (
+    generatedItemAssets.find((asset) => asset.backgroundAsset)?.backgroundAsset ??
+    null
+  );
+}
+
+function promoteMatch3DGeneratedBackgroundAsset(
+  profile: Match3DWorkProfile,
+): Match3DWorkProfile {
+  const fallbackBackground =
+    profile.generatedBackgroundAsset ??
+    findMatch3DGeneratedBackgroundAsset(profile.generatedItemAssets ?? []);
+  if (!fallbackBackground) {
+    return profile;
+  }
+
+  return {
+    ...profile,
+    backgroundPrompt:
+      profile.backgroundPrompt ?? fallbackBackground.prompt ?? null,
+    backgroundImageSrc:
+      profile.backgroundImageSrc ??
+      fallbackBackground.imageSrc ??
+      fallbackBackground.imageObjectKey ??
+      null,
+    backgroundImageObjectKey:
+      profile.backgroundImageObjectKey ??
+      fallbackBackground.imageObjectKey ??
+      fallbackBackground.imageSrc ??
+      null,
+    generatedBackgroundAsset:
+      profile.generatedBackgroundAsset ?? fallbackBackground,
+  };
+}
+
 function resolveMatch3DBackgroundPrompt(
   profile: Match3DWorkProfile,
   draft: Match3DResultDraft | null,
@@ -1144,11 +1192,14 @@ function buildPlayableProfile(
 ) {
   const payload = buildSavePayload(editState);
   if (!payload) {
-    return attachMatch3DGeneratedItemAssets(profile, generatedItemAssets);
+    return promoteMatch3DGeneratedBackgroundAsset(
+      attachMatch3DGeneratedItemAssets(profile, generatedItemAssets),
+    );
   }
 
-  return attachMatch3DGeneratedItemAssets(
-    {
+  return promoteMatch3DGeneratedBackgroundAsset(
+    attachMatch3DGeneratedItemAssets(
+      {
       ...profile,
       gameName: payload.gameName,
       themeText: payload.themeText ?? profile.themeText,
@@ -1157,8 +1208,9 @@ function buildPlayableProfile(
       coverImageSrc: payload.coverImageSrc,
       clearCount: payload.clearCount,
       difficulty: payload.difficulty,
-    },
-    generatedItemAssets,
+      },
+      generatedItemAssets,
+    ),
   );
 }
 
@@ -1219,15 +1271,15 @@ function attachMatch3DGeneratedItemAssets(
   generatedItemAssets: readonly Match3DGeneratedItemAsset[],
 ) {
   if (generatedItemAssets.length <= 0) {
-    return profile;
+    return promoteMatch3DGeneratedBackgroundAsset(profile);
   }
 
   // 中文注释：试玩入��赖当�页���的生�素�；�存接�若返回旧快照，�能把素�从�行�入�里丢掉。
-  return {
+  return promoteMatch3DGeneratedBackgroundAsset({
     ...profile,
     generatedItemAssets:
       normalizeMatch3DGeneratedItemAssetsForRuntime(generatedItemAssets),
-  };
+  });
 }
 
 function attachMatch3DGeneratedBackgroundAsset(
@@ -2996,35 +3048,46 @@ function Match3DUIRuntimePreviewPanel({
             aria-hidden="true"
             className="pointer-events-none absolute inset-0 h-full w-full object-cover"
           />
-          <header className="relative z-10 flex items-center justify-between gap-2">
+          <header className="relative z-10 grid grid-cols-[2.5rem_minmax(0,1fr)_2.5rem] items-start gap-2 sm:grid-cols-[2.75rem_minmax(0,1fr)_2.75rem]">
             <span className={MATCH3D_RUNTIME_GLASS_ICON_BUTTON_CLASS}>
               <ArrowLeft size={20} />
             </span>
-            <span className={MATCH3D_RUNTIME_GLASS_TIMER_CLASS}>1:30</span>
+            <span className={`${MATCH3D_RUNTIME_HEADER_CARD_CLASS} mx-auto`}>
+              <span className="flex max-w-full items-center justify-center gap-1.5">
+                <span className={MATCH3D_RUNTIME_LEVEL_BADGE_CLASS}>
+                  第 1 关
+                </span>
+                <span className="min-w-0 truncate text-sm font-black sm:text-base">
+                  抓大鹅
+                </span>
+              </span>
+              <span className={MATCH3D_RUNTIME_TIMER_CLASS}>1:30</span>
+            </span>
             <span className={MATCH3D_RUNTIME_GLASS_ICON_BUTTON_CLASS}>
-              <span className={MATCH3D_RUNTIME_GLASS_SPINNER_CLASS} />
+              <Settings size={18} />
             </span>
           </header>
 
-          <section className="relative z-10 mt-3 flex min-h-0 flex-1 items-center justify-center">
+          <section className={`z-10 ${MATCH3D_RUNTIME_STAGE_CLASS}`}>
             <div
-              className={`relative aspect-square max-w-full ${
+              className={`${MATCH3D_RUNTIME_BOARD_BASE_CLASS} ${
                 containerPreviewSrc
-                  ? 'overflow-visible bg-transparent'
-                  : 'overflow-hidden rounded-full border-[10px] border-[#e6d19b] bg-[radial-gradient(circle_at_50%_42%,#f2d993_0%,#c88f43_56%,#835223_100%)] shadow-[inset_0_8px_34px_rgba(72,41,16,0.34),0_22px_42px_rgba(15,23,42,0.28)]'
+                  ? MATCH3D_RUNTIME_BOARD_WITH_CONTAINER_CLASS
+                  : MATCH3D_RUNTIME_BOARD_FALLBACK_CLASS
               }`}
-              style={{ width: 'min(96%, 60dvh, 100%)' }}
+              style={{ width: MATCH3D_RUNTIME_BOARD_WIDTH }}
               aria-hidden="true"
+              data-testid="match3d-ui-preview-board"
             >
               {containerPreviewSrc ? (
                 <ResolvedAssetImage
                   src={containerPreviewSrc}
                   alt=""
                   aria-hidden="true"
-                  className="pointer-events-none absolute inset-[-10%] h-[120%] w-[120%] object-contain drop-shadow-[0_22px_42px_rgba(15,23,42,0.28)]"
+                  className={MATCH3D_RUNTIME_CONTAINER_IMAGE_CLASS}
                 />
               ) : (
-                <div className="absolute inset-[7%] rounded-full border border-white/22 bg-[radial-gradient(circle_at_44%_35%,rgba(255,255,255,0.22),transparent_28%)]" />
+                <div className={MATCH3D_RUNTIME_CONTAINER_PLACEHOLDER_CLASS} />
               )}
             </div>
           </section>
@@ -3152,6 +3215,10 @@ export function Match3DResultView({
   onPublished,
   onStartTestRun,
 }: Match3DResultViewProps) {
+  const promotedProfile = useMemo(
+    () => promoteMatch3DGeneratedBackgroundAsset(profile),
+    [profile],
+  );
   const [editState, setEditState] = useState(() => createEditState(profile));
   const [activeTab, setActiveTab] = useState<Match3DResultTab>('work');
   const [activeAssetConfigTab, setActiveAssetConfigTab] =
@@ -3207,8 +3274,8 @@ export function Match3DResultView({
   const [isStartingTestRun, setIsStartingTestRun] = useState(false);
   const [isGeneratingTags, setIsGeneratingTags] = useState(false);
   const generatedItemAssets = useMemo(
-    () => resolveMatch3DResultGeneratedItemAssets(profile, draft),
-    [draft, profile],
+    () => resolveMatch3DResultGeneratedItemAssets(promotedProfile, draft),
+    [draft, promotedProfile],
   );
   const blockers = useMemo(
     () => buildPublishBlockers(editState, generatedItemAssets),
@@ -3221,34 +3288,44 @@ export function Match3DResultView({
   const canStartTestRun = testRunBlockers.length === 0;
   const canSubmit = blockers.length === 0;
   const totalItemCount =
-    (normalizePositiveInteger(editState.clearCountText) ?? profile.clearCount) *
-    3;
+    (normalizePositiveInteger(editState.clearCountText) ??
+      promotedProfile.clearCount) * 3;
   const backgroundPreviewSrc = useMemo(
     () =>
       resolveMatch3DBackgroundPreviewSource(
-        profile,
+        promotedProfile,
         draft,
         generatedItemAssets,
       ),
-    [draft, generatedItemAssets, profile],
+    [draft, generatedItemAssets, promotedProfile],
   );
   const backgroundPrompt = useMemo(
-    () => resolveMatch3DBackgroundPrompt(profile, draft, generatedItemAssets),
-    [draft, generatedItemAssets, profile],
+    () =>
+      resolveMatch3DBackgroundPrompt(
+        promotedProfile,
+        draft,
+        generatedItemAssets,
+      ),
+    [draft, generatedItemAssets, promotedProfile],
   );
   const containerPrompt = useMemo(
-    () => resolveMatch3DContainerPrompt(profile, draft, generatedItemAssets),
-    [draft, generatedItemAssets, profile],
+    () =>
+      resolveMatch3DContainerPrompt(
+        promotedProfile,
+        draft,
+        generatedItemAssets,
+      ),
+    [draft, generatedItemAssets, promotedProfile],
   );
   const containerPreviewSrc = useMemo(
     () =>
       resolveMatch3DContainerPreviewSource(
-        profile,
+        promotedProfile,
         draft,
         generatedItemAssets,
       ) ||
       MATCH3D_CONTAINER_REFERENCE_PREVIEW_SRC,
-    [draft, generatedItemAssets, profile],
+    [draft, generatedItemAssets, promotedProfile],
   );
   const coverSourceAssets = useMemo(
     () =>
diff --git a/src/components/match3d-runtime/Match3DRuntimeShell.test.tsx b/src/components/match3d-runtime/Match3DRuntimeShell.test.tsx
index c8135ce5..ed1a51fd 100644
--- a/src/components/match3d-runtime/Match3DRuntimeShell.test.tsx
+++ b/src/components/match3d-runtime/Match3DRuntimeShell.test.tsx
@@ -1,6 +1,13 @@
 /* @vitest-environment jsdom */
 
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+  within,
+} from '@testing-library/react';
 import { useEffect } from 'react';
 import { afterEach, expect, test, vi } from 'vitest';
 
@@ -200,6 +207,33 @@ test('顶部 HUD 对�拼图样�展示关��和倒计时', () => {
   expect(screen.getByText('第 1 关')).toBeTruthy();
   expect(screen.getByText('水果抓大鹅')).toBeTruthy();
   expect(screen.getByText('10:00')).toBeTruthy();
+  expect(screen.getByRole('button', { name: '打开抓大鹅设置' })).toBeTruthy();
+  expect(screen.queryByRole('button', { name: '�新开始' })).toBeNull();
+});
+
+test('抓大鹅�上角设置��内置�新开始', () => {
+  const run = startLocalMatch3DRun(4);
+  const onRestart = vi.fn();
+  render(
+    <Match3DRuntimeShell
+      run={run}
+      levelName="水果抓大鹅"
+      onBack={vi.fn()}
+      onRestart={onRestart}
+      onOptimisticRunChange={vi.fn()}
+      onClickItem={vi.fn()}
+    />,
+  );
+
+  fireEvent.click(screen.getByRole('button', { name: '打开抓大鹅设置' }));
+
+  const dialog = screen.getByRole('dialog', { name: '抓大鹅设置' });
+  expect(within(dialog).getByText('水果抓大鹅')).toBeTruthy();
+  expect(within(dialog).getByText('已清除 0/12')).toBeTruthy();
+  fireEvent.click(within(dialog).getByRole('button', { name: '�新开始' }));
+
+  expect(onRestart).toHaveBeenCalledTimes(1);
+  expect(screen.queryByRole('dialog', { name: '抓大鹅设置' })).toBeNull();
 });
 
 test('推�页抓大鹅�行���返回按钮和结算返回入�', () => {
@@ -991,7 +1025,7 @@ test('�行�会�签并渲染抓大鹅中心容器 UI 图', async () => {
   const containerImage = screen.getByTestId(
     'match3d-container-image',
   ) as HTMLImageElement;
-  expect(containerImage.className).toContain('w-[min(96vw,28rem)]');
+  expect(containerImage.className).toContain('w-[min(99vw,34rem)]');
   expect(containerImage.className).toContain('h-auto');
   expect(containerImage.className).toContain('left-1/2');
   expect(containerImage.className).toContain('-translate-x-1/2');
diff --git a/src/components/match3d-runtime/Match3DRuntimeShell.tsx b/src/components/match3d-runtime/Match3DRuntimeShell.tsx
index ed4f1721..c6745bea 100644
--- a/src/components/match3d-runtime/Match3DRuntimeShell.tsx
+++ b/src/components/match3d-runtime/Match3DRuntimeShell.tsx
@@ -3,6 +3,7 @@ import {
   CheckCircle2,
   Clock3,
   RotateCcw,
+  Settings,
   Sparkles,
   XCircle,
 } from 'lucide-react';
@@ -49,11 +50,18 @@ import {
   resolveRenderableItemFrame,
 } from './match3dRuntimePresentation';
 import {
+  MATCH3D_RUNTIME_BOARD_BASE_CLASS,
+  MATCH3D_RUNTIME_BOARD_FALLBACK_CLASS,
+  MATCH3D_RUNTIME_BOARD_WIDTH,
+  MATCH3D_RUNTIME_BOARD_WITH_CONTAINER_CLASS,
+  MATCH3D_RUNTIME_CONTAINER_IMAGE_CLASS,
+  MATCH3D_RUNTIME_CONTAINER_PLACEHOLDER_CLASS,
   MATCH3D_RUNTIME_GLASS_ICON_BUTTON_CLASS,
   MATCH3D_RUNTIME_GLASS_TRAY_CLASS,
   MATCH3D_RUNTIME_GLASS_TRAY_SLOT_CLASS,
   MATCH3D_RUNTIME_HEADER_CARD_CLASS,
   MATCH3D_RUNTIME_LEVEL_BADGE_CLASS,
+  MATCH3D_RUNTIME_STAGE_CLASS,
   MATCH3D_RUNTIME_TIMER_CLASS,
   MATCH3D_RUNTIME_TIMER_URGENT_CLASS,
 } from './match3dRuntimeUiStyles';
@@ -697,6 +705,7 @@ export function Match3DRuntimeShell({
   const [timeLeftMs, setTimeLeftMs] = useState(run?.remainingMs ?? 0);
   const [resolvedBackgroundImageSrc, setResolvedBackgroundImageSrc] =
     useState('');
+  const [isSettingsPanelOpen, setIsSettingsPanelOpen] = useState(false);
   const musicVolume = authUi?.musicVolume ?? DEFAULT_MATCH3D_MUSIC_VOLUME;
   const levelAudioConfig = DEFAULT_RUNTIME_LEVEL_AUDIO_CONFIG;
   const runtimeGeneratedItemAssets = useMemo(
@@ -1251,6 +1260,7 @@ export function Match3DRuntimeShell({
     isRunState(run.status, 'running')
       ? MATCH3D_RUNTIME_TIMER_URGENT_CLASS
       : MATCH3D_RUNTIME_TIMER_CLASS;
+  const canRestartRun = Boolean(run?.runId) && !isBusy;
 
   return (
     <main
@@ -1311,23 +1321,23 @@ export function Match3DRuntimeShell({
           <button
             type="button"
             className={MATCH3D_RUNTIME_GLASS_ICON_BUTTON_CLASS}
-            onClick={onRestart}
-            aria-label="�新开始"
+            onClick={() => setIsSettingsPanelOpen(true)}
+            aria-label="打开抓大鹅设置"
           >
-            <RotateCcw size={18} />
+            <Settings size={18} />
           </button>
         </header>
 
-        <section className="relative mt-3 flex flex-1 min-h-0 items-center justify-center">
+        <section className={MATCH3D_RUNTIME_STAGE_CLASS}>
           <div
             ref={stageRef}
-            className={`relative aspect-square max-w-full ${
+            className={`${MATCH3D_RUNTIME_BOARD_BASE_CLASS} ${
               hasRenderedContainerAsset
-                ? 'overflow-visible bg-transparent'
-                : 'overflow-hidden rounded-full border-[10px] border-[#e6d19b] bg-[radial-gradient(circle_at_50%_42%,#f2d993_0%,#c88f43_56%,#835223_100%)] shadow-[inset_0_8px_34px_rgba(72,41,16,0.34),0_22px_42px_rgba(15,23,42,0.28)]'
+                ? MATCH3D_RUNTIME_BOARD_WITH_CONTAINER_CLASS
+                : MATCH3D_RUNTIME_BOARD_FALLBACK_CLASS
             }`}
             style={{
-              width: 'min(96vw, 60dvh, 100%)',
+              width: MATCH3D_RUNTIME_BOARD_WIDTH,
             }}
             onPointerDown={handleBoardPointerDown}
             onPointerMove={handleBoardPointerMove}
@@ -1340,7 +1350,7 @@ export function Match3DRuntimeShell({
                 src={resolvedContainerImageSrc}
                 alt=""
                 aria-hidden="true"
-                className={`pointer-events-none absolute left-1/2 top-1/2 z-0 h-auto w-[min(96vw,28rem)] max-w-none -translate-x-1/2 -translate-y-1/2 object-contain drop-shadow-[0_22px_42px_rgba(15,23,42,0.28)] ${
+                className={`${MATCH3D_RUNTIME_CONTAINER_IMAGE_CLASS} ${
                   isContainerImageLoaded ? 'opacity-100' : 'opacity-0'
                 }`}
                 data-testid="match3d-container-image"
@@ -1355,7 +1365,7 @@ export function Match3DRuntimeShell({
                 }}
               />
             ) : (
-              <div className="pointer-events-none absolute inset-[7%] z-0 rounded-full border border-white/22 bg-[radial-gradient(circle_at_44%_35%,rgba(255,255,255,0.22),transparent_28%)]" />
+              <div className={MATCH3D_RUNTIME_CONTAINER_PLACEHOLDER_CLASS} />
             )}
             {run.items.map((item) =>
               hasPendingMatch3DGeneratedImageForItem(
@@ -1462,6 +1472,84 @@ export function Match3DRuntimeShell({
         onBack={onBack}
         onRestart={onRestart}
       />
+
+      {isSettingsPanelOpen ? (
+        <div
+          className="absolute inset-0 z-[85] flex items-center justify-center bg-slate-950/42 px-4 py-6 backdrop-blur-sm"
+          onClick={() => setIsSettingsPanelOpen(false)}
+        >
+          <section
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="match3d-settings-title"
+            className="w-full max-w-[20.5rem] overflow-hidden rounded-[1.35rem] border border-white/18 bg-white/95 text-slate-950 shadow-[0_26px_70px_rgba(15,23,42,0.34)]"
+            onClick={(event) => event.stopPropagation()}
+          >
+            <header className="border-b border-slate-200 px-5 py-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <h2
+                    id="match3d-settings-title"
+                    className="text-base font-black"
+                  >
+                    抓大鹅设置
+                  </h2>
+                </div>
+                <button
+                  type="button"
+                  aria-label="关闭设置"
+                  className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-600 transition hover:bg-slate-50 hover:text-slate-900"
+                  onClick={() => setIsSettingsPanelOpen(false)}
+                >
+                  <XCircle size={18} />
+                </button>
+              </div>
+            </header>
+            <div className="space-y-3 px-5 py-4">
+              <div className="rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3">
+                <div className="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500">
+                  当�进度
+                </div>
+                <div className="mt-2 text-sm font-black text-slate-900">
+                  {displayLevelName}
+                </div>
+                <div className="mt-1 text-xs text-slate-500">
+                  已清除 {run.clearedItemCount}/{run.totalItemCount}
+                </div>
+              </div>
+              <div className="rounded-[1rem] border border-slate-200 bg-slate-50 px-4 py-3">
+                <div className="text-[10px] font-bold uppercase tracking-[0.16em] text-slate-500">
+                  本局时间
+                </div>
+                <div className="mt-2 font-mono text-xl font-black text-slate-900">
+                  {formatTimer(timeLeftMs)}
+                </div>
+              </div>
+            </div>
+            <footer className="grid gap-3 border-t border-slate-200 px-5 py-4">
+              <button
+                type="button"
+                className="inline-flex min-h-12 items-center justify-center gap-2 rounded-[1rem] bg-slate-950 px-4 py-3 text-sm font-black text-white transition hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-45"
+                disabled={!canRestartRun}
+                onClick={() => {
+                  setIsSettingsPanelOpen(false);
+                  onRestart();
+                }}
+              >
+                <RotateCcw size={16} />
+                �新开始
+              </button>
+              <button
+                type="button"
+                className="inline-flex min-h-12 items-center justify-center rounded-[1rem] border border-slate-200 bg-white px-4 py-3 text-sm font-bold text-slate-700 transition hover:bg-slate-50"
+                onClick={() => setIsSettingsPanelOpen(false)}
+              >
+                继续抓大鹅
+              </button>
+            </footer>
+          </section>
+        </div>
+      ) : null}
     </main>
   );
 }
diff --git a/src/components/match3d-runtime/match3dRuntimeUiStyles.ts b/src/components/match3d-runtime/match3dRuntimeUiStyles.ts
index e14f5a83..1420923b 100644
--- a/src/components/match3d-runtime/match3dRuntimeUiStyles.ts
+++ b/src/components/match3d-runtime/match3dRuntimeUiStyles.ts
@@ -25,3 +25,23 @@ export const MATCH3D_RUNTIME_GLASS_TRAY_CLASS =
 
 export const MATCH3D_RUNTIME_GLASS_TRAY_SLOT_CLASS =
   'relative z-0 h-14 min-w-0 rounded-xl border border-white/52 bg-white/56 p-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.44)] sm:h-16';
+
+export const MATCH3D_RUNTIME_STAGE_CLASS =
+  'relative mt-3 flex min-h-0 flex-1 items-center justify-center';
+
+export const MATCH3D_RUNTIME_BOARD_BASE_CLASS =
+  'relative aspect-square max-w-full';
+
+export const MATCH3D_RUNTIME_BOARD_WIDTH = 'min(96vw, 60dvh, 100%)';
+
+export const MATCH3D_RUNTIME_BOARD_WITH_CONTAINER_CLASS =
+  'overflow-visible bg-transparent';
+
+export const MATCH3D_RUNTIME_BOARD_FALLBACK_CLASS =
+  'overflow-hidden rounded-full border-[10px] border-[#e6d19b] bg-[radial-gradient(circle_at_50%_42%,#f2d993_0%,#c88f43_56%,#835223_100%)] shadow-[inset_0_8px_34px_rgba(72,41,16,0.34),0_22px_42px_rgba(15,23,42,0.28)]';
+
+export const MATCH3D_RUNTIME_CONTAINER_IMAGE_CLASS =
+  'pointer-events-none absolute left-1/2 top-1/2 z-0 h-auto w-[min(99vw,34rem)] max-w-none -translate-x-1/2 -translate-y-1/2 object-contain drop-shadow-[0_22px_42px_rgba(15,23,42,0.28)]';
+
+export const MATCH3D_RUNTIME_CONTAINER_PLACEHOLDER_CLASS =
+  'pointer-events-none absolute inset-[7%] z-0 rounded-full border border-white/22 bg-[radial-gradient(circle_at_44%_35%,rgba(255,255,255,0.22),transparent_28%)]';
diff --git a/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx b/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
index c6ce3403..3b372891 100644
--- a/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
+++ b/src/components/platform-entry/PlatformEntryFlowShellImpl.tsx
@@ -46,6 +46,7 @@ import type {
 } from '../../../packages/shared/src/contracts/match3dAgent';
 import type { Match3DRunSnapshot } from '../../../packages/shared/src/contracts/match3dRuntime';
 import type {
+  Match3DGeneratedBackgroundAsset,
   Match3DGeneratedItemAsset,
   Match3DWorkProfile,
   Match3DWorkSummary,
@@ -433,6 +434,16 @@ type BabyObjectMatchRuntimeReturnStage =
 type VisualNovelEntryGenerationPhase = 'generating' | 'ready' | 'failed';
 type BabyObjectMatchGenerationPhase = 'generating' | 'ready' | 'failed';
 
+type RecommendRuntimeState = {
+  activeKind: RecommendRuntimeKind | null;
+  babyObjectMatchDraft: BabyObjectMatchDraft | null;
+  bigFishRun: BigFishRuntimeSnapshotResponse | null;
+  match3dRun: Match3DRunSnapshot | null;
+  puzzleRun: PuzzleRunSnapshot | null;
+  squareHoleRun: SquareHoleRunSnapshot | null;
+  visualNovelRun: VisualNovelRunSnapshot | null;
+};
+
 type PuzzleSaveArchiveState = {
   runtimeKind?: unknown;
   entryProfileId?: unknown;
@@ -529,6 +540,37 @@ function getPlatformRecommendRuntimeKind(
   return 'rpg';
 }
 
+function isRecommendRuntimeReadyForEntry(
+  entry: PlatformPublicGalleryCard,
+  state: RecommendRuntimeState,
+) {
+  const expectedKind = getPlatformRecommendRuntimeKind(entry);
+  if (state.activeKind !== expectedKind) {
+    return false;
+  }
+
+  if (expectedKind === 'big-fish') {
+    return Boolean(state.bigFishRun);
+  }
+  if (expectedKind === 'match3d') {
+    return Boolean(state.match3dRun);
+  }
+  if (expectedKind === 'puzzle') {
+    return Boolean(state.puzzleRun);
+  }
+  if (expectedKind === 'square-hole') {
+    return Boolean(state.squareHoleRun);
+  }
+  if (expectedKind === 'visual-novel') {
+    return Boolean(state.visualNovelRun);
+  }
+  if (expectedKind === 'edutainment') {
+    return Boolean(state.babyObjectMatchDraft);
+  }
+
+  return true;
+}
+
 function isSamePlatformPublicGalleryEntry(
   left: PlatformPublicGalleryCard,
   right: PlatformPublicGalleryCard,
@@ -631,7 +673,7 @@ function mapPublicWorkDetailToMatch3DWork(
     return null;
   }
 
-  return {
+  return promoteMatch3DGeneratedBackgroundAsset({
     workId: entry.workId,
     profileId: entry.profileId,
     ownerUserId: entry.ownerUserId,
@@ -663,6 +705,51 @@ function mapPublicWorkDetailToMatch3DWork(
     generatedItemAssets: normalizeMatch3DGeneratedItemAssetsForRuntime(
       entry.generatedItemAssets ?? [],
     ),
+  });
+}
+
+function findMatch3DGeneratedBackgroundAsset(
+  generatedItemAssets: readonly Match3DGeneratedItemAsset[] | null | undefined,
+): Match3DGeneratedBackgroundAsset | null {
+  return (
+    generatedItemAssets
+      ?.map((asset) => asset.backgroundAsset ?? null)
+      .find(Boolean) ?? null
+  );
+}
+
+function promoteMatch3DGeneratedBackgroundAsset<
+  T extends Pick<
+    Match3DWorkSummary,
+    | 'backgroundPrompt'
+    | 'backgroundImageSrc'
+    | 'backgroundImageObjectKey'
+    | 'generatedBackgroundAsset'
+    | 'generatedItemAssets'
+  >,
+>(profile: T): T {
+  const backgroundAsset =
+    profile.generatedBackgroundAsset ??
+    findMatch3DGeneratedBackgroundAsset(profile.generatedItemAssets);
+  if (!backgroundAsset) {
+    return profile;
+  }
+
+  return {
+    ...profile,
+    backgroundPrompt: profile.backgroundPrompt ?? backgroundAsset.prompt ?? null,
+    backgroundImageSrc:
+      profile.backgroundImageSrc ??
+      backgroundAsset.imageSrc ??
+      backgroundAsset.imageObjectKey ??
+      null,
+    backgroundImageObjectKey:
+      profile.backgroundImageObjectKey ??
+      backgroundAsset.imageObjectKey ??
+      backgroundAsset.imageSrc ??
+      null,
+    generatedBackgroundAsset:
+      profile.generatedBackgroundAsset ?? backgroundAsset,
   };
 }
 
@@ -675,7 +762,10 @@ function buildMatch3DProfileFromSession(
   }
 
   const now = session.updatedAt || new Date().toISOString();
-  return {
+  const generatedItemAssets = normalizeMatch3DGeneratedItemAssetsForRuntime(
+    draft.generatedItemAssets,
+  );
+  return promoteMatch3DGeneratedBackgroundAsset({
     workId: draft.profileId,
     profileId: draft.profileId,
     ownerUserId: 'current-user',
@@ -697,10 +787,8 @@ function buildMatch3DProfileFromSession(
     backgroundImageSrc: draft.backgroundImageSrc ?? null,
     backgroundImageObjectKey: draft.backgroundImageObjectKey ?? null,
     generatedBackgroundAsset: draft.generatedBackgroundAsset ?? null,
-    generatedItemAssets: normalizeMatch3DGeneratedItemAssetsForRuntime(
-      draft.generatedItemAssets,
-    ),
-  };
+    generatedItemAssets,
+  });
 }
 
 function hasMatch3DRuntimeAsset(
@@ -791,10 +879,14 @@ function resolveMatch3DRuntimeGeneratedBackgroundAsset(
   publicWorkDetail: PlatformPublicGalleryCard | null,
 ) {
   const runProfileId = run?.profileId?.trim() ?? '';
-  const profileBackground = profile?.generatedBackgroundAsset ?? null;
+  const profileBackground = profile
+    ? promoteMatch3DGeneratedBackgroundAsset(profile).generatedBackgroundAsset ??
+      null
+    : null;
   const publicBackground =
     publicWorkDetail && isMatch3DGalleryEntry(publicWorkDetail)
-      ? (publicWorkDetail.generatedBackgroundAsset ?? null)
+      ? (promoteMatch3DGeneratedBackgroundAsset(publicWorkDetail)
+          .generatedBackgroundAsset ?? null)
       : null;
 
   if (runProfileId && profile?.profileId === runProfileId) {
@@ -832,18 +924,25 @@ function resolveMatch3DRuntimeBackgroundImageSrc(
   publicWorkDetail: PlatformPublicGalleryCard | null,
 ) {
   const runProfileId = run?.profileId?.trim() ?? '';
+  const resolvedProfile = profile
+    ? promoteMatch3DGeneratedBackgroundAsset(profile)
+    : null;
+  const resolvedPublicWork =
+    publicWorkDetail && isMatch3DGalleryEntry(publicWorkDetail)
+      ? promoteMatch3DGeneratedBackgroundAsset(publicWorkDetail)
+      : null;
   const profileBackground =
-    profile?.backgroundImageSrc?.trim() ||
-    profile?.generatedBackgroundAsset?.imageSrc?.trim() ||
-    profile?.backgroundImageObjectKey?.trim() ||
-    profile?.generatedBackgroundAsset?.imageObjectKey?.trim() ||
+    resolvedProfile?.backgroundImageSrc?.trim() ||
+    resolvedProfile?.generatedBackgroundAsset?.imageSrc?.trim() ||
+    resolvedProfile?.backgroundImageObjectKey?.trim() ||
+    resolvedProfile?.generatedBackgroundAsset?.imageObjectKey?.trim() ||
     '';
   const publicBackground =
-    publicWorkDetail && isMatch3DGalleryEntry(publicWorkDetail)
-      ? publicWorkDetail.backgroundImageSrc?.trim() ||
-        publicWorkDetail.backgroundImageObjectKey?.trim() ||
-        ''
-      : '';
+    resolvedPublicWork?.backgroundImageSrc?.trim() ||
+    resolvedPublicWork?.generatedBackgroundAsset?.imageSrc?.trim() ||
+    resolvedPublicWork?.backgroundImageObjectKey?.trim() ||
+    resolvedPublicWork?.generatedBackgroundAsset?.imageObjectKey?.trim() ||
+    '';
 
   if (runProfileId && profile?.profileId === runProfileId) {
     return profileBackground || publicBackground || null;
@@ -2438,6 +2537,16 @@ export function PlatformEntryFlowShellImpl({
     selectionStageRef.current = selectionStage;
   }, [selectionStage]);
 
+  const resetRecommendRuntimeSelection = useCallback(() => {
+    // 中文注释：推�页嵌入�行�进入改造/创作�会清掉玩法 run；
+    // �步清空推�选择，��返回推�页时�用已失效的�行���。
+    recommendRuntimeStartRequestRef.current += 1;
+    setActiveRecommendEntryKey(null);
+    setActiveRecommendRuntimeKind(null);
+    setActiveRecommendRuntimeError(null);
+    setIsStartingRecommendEntry(false);
+  }, []);
+
   const updatePendingDraftShelfItem = useCallback(
     (
       kind: Exclude<CreationWorkShelfKind, 'rpg'>,
@@ -3776,13 +3885,13 @@ export function PlatformEntryFlowShellImpl({
       let runtimeProfile: Match3DWorkProfile | null = null;
       try {
         const { item } = await getMatch3DWorkDetail(profileId);
-        runtimeProfile = {
+        runtimeProfile = promoteMatch3DGeneratedBackgroundAsset({
           ...item,
           generatedItemAssets: mergeMatch3DGeneratedItemAssetsForRuntime(
             response.session.draft?.generatedItemAssets,
             item.generatedItemAssets,
           ),
-        };
+        });
         setMatch3DProfile(runtimeProfile);
         await refreshMatch3DShelf().catch(() => undefined);
       } catch {
@@ -4875,13 +4984,13 @@ export function PlatformEntryFlowShellImpl({
         let runtimeProfile: Match3DWorkProfile | null = null;
         try {
           const { item } = await getMatch3DWorkDetail(profileId);
-          runtimeProfile = {
+          runtimeProfile = promoteMatch3DGeneratedBackgroundAsset({
             ...item,
             generatedItemAssets: mergeMatch3DGeneratedItemAssetsForRuntime(
               response.session.draft?.generatedItemAssets,
               item.generatedItemAssets,
             ),
-          };
+          });
           if (isViewingMatch3DGeneration(nextSession.sessionId)) {
             setMatch3DProfile(runtimeProfile);
           }
@@ -5464,14 +5573,16 @@ export function PlatformEntryFlowShellImpl({
 
   const leavePuzzleFlow = useCallback(() => {
     setPuzzleOperation(null);
+    puzzleRunRef.current = null;
     setPuzzleRun(null);
     setPuzzleRuntimeAuthMode('default');
     setPuzzleGenerationState(null);
     setIsPuzzleNextLevelGenerating(false);
     setActiveCreativeAgentSessionId(null);
     setCreativeDraftEditError(null);
+    resetRecommendRuntimeSelection();
     puzzleFlow.leaveFlow();
-  }, [puzzleFlow]);
+  }, [puzzleFlow, resetRecommendRuntimeSelection]);
 
   const leaveVisualNovelFlow = useCallback(() => {
     setVisualNovelWork(null);
@@ -6602,12 +6713,12 @@ export function PlatformEntryFlowShellImpl({
             // 中文注释：详情补读�为拿完整生�素�；失败时继续按摘�开局，��推���死。
           }
         }
-        runtimeProfile = {
+        runtimeProfile = promoteMatch3DGeneratedBackgroundAsset({
           ...runtimeProfile,
           generatedItemAssets: normalizeMatch3DGeneratedItemAssetsForRuntime(
             runtimeProfile.generatedItemAssets,
           ),
-        };
+        });
         await preloadMatch3DGeneratedRuntimeAssets(
           runtimeProfile.generatedItemAssets,
           runtimeProfile.generatedBackgroundAsset,
@@ -7314,6 +7425,7 @@ export function PlatformEntryFlowShellImpl({
 
         void remixPuzzleGalleryWork(targetProfileId)
           .then((response) => {
+            resetRecommendRuntimeSelection();
             puzzleFlow.setSession(response.session);
             setPuzzleOperation(null);
             setPuzzleRun(null);
@@ -7338,6 +7450,7 @@ export function PlatformEntryFlowShellImpl({
       isPuzzleBusy,
       puzzleFlow,
       resolvePuzzleErrorMessage,
+      resetRecommendRuntimeSelection,
       runProtectedAction,
       setIsPuzzleBusy,
       setPuzzleError,
@@ -9639,30 +9752,51 @@ export function PlatformEntryFlowShellImpl({
       return;
     }
 
-    const hasActiveEntry =
-      activeRecommendEntryKey &&
-      recommendRuntimeEntries.some(
-        (entry) =>
-          getPlatformPublicGalleryEntryKey(entry) === activeRecommendEntryKey,
-      );
-    if (hasActiveEntry || isStartingRecommendEntry) {
+    const activeRecommendEntry = activeRecommendEntryKey
+      ? recommendRuntimeEntries.find(
+          (entry) =>
+            getPlatformPublicGalleryEntryKey(entry) === activeRecommendEntryKey,
+        ) ?? null
+      : null;
+    const isActiveRecommendRuntimeReady =
+      activeRecommendEntry !== null &&
+      isRecommendRuntimeReadyForEntry(activeRecommendEntry, {
+        activeKind: activeRecommendRuntimeKind,
+        babyObjectMatchDraft,
+        bigFishRun,
+        match3dRun,
+        puzzleRun,
+        squareHoleRun,
+        visualNovelRun,
+      });
+    if (
+      (activeRecommendEntry !== null && isActiveRecommendRuntimeReady) ||
+      isStartingRecommendEntry
+    ) {
       return;
     }
 
-    const firstRecommendEntry = recommendRuntimeEntries[0];
-    if (firstRecommendEntry) {
-      void selectRecommendRuntimeEntry(firstRecommendEntry);
+    const nextRecommendEntry = activeRecommendEntry ?? recommendRuntimeEntries[0];
+    if (nextRecommendEntry) {
+      void selectRecommendRuntimeEntry(nextRecommendEntry);
     }
   }, [
     activeRecommendEntryKey,
+    activeRecommendRuntimeKind,
+    babyObjectMatchDraft,
+    bigFishRun,
     isStartingRecommendEntry,
+    match3dRun,
     platformBootstrap.canReadProtectedData,
     platformBootstrap.isLoadingPlatform,
     platformBootstrap.isAuthenticated,
     platformBootstrap.platformTab,
+    puzzleRun,
     recommendRuntimeEntries,
     selectRecommendRuntimeEntry,
     selectionStage,
+    squareHoleRun,
+    visualNovelRun,
   ]);
 
   const remixPublicWork = useCallback(
@@ -9696,6 +9830,7 @@ export function PlatformEntryFlowShellImpl({
         if (isPuzzleGalleryEntry(entry)) {
           void remixPuzzleGalleryWork(entry.profileId)
             .then((response) => {
+              resetRecommendRuntimeSelection();
               puzzleFlow.setSession(response.session);
               setPuzzleOperation(null);
               enterCreateTab();
@@ -9765,6 +9900,7 @@ export function PlatformEntryFlowShellImpl({
       isPublicWorkDetailBusy,
       platformBootstrap,
       puzzleFlow,
+      resetRecommendRuntimeSelection,
       resolveBigFishErrorMessage,
       resolvePuzzleErrorMessage,
       runProtectedAction,
diff --git a/src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx b/src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx
index 4325ad7d..c77b8da4 100644
--- a/src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx
+++ b/src/components/puzzle-runtime/PuzzleRuntimeShell.test.tsx
@@ -168,6 +168,7 @@ test('拼图界��调用 mocap，也�渲染 mocap 光标或调试��', (
 });
 
 test('指针拖拽时会触�拖拽�交并在�开时��', () => {
+  const originalRequestAnimationFrame = window.requestAnimationFrame;
   const onDragPiece = vi.fn();
   const playingRun: PuzzleRunSnapshot = {
     ...clearedRun,
@@ -207,6 +208,11 @@ test('指针拖拽时会触�拖拽�交并在�开时��', () => {
   if (!board) {
     throw new Error('缺少测试棋盘');
   }
+  const requestAnimationFrame = vi.fn(() => 1);
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    configurable: true,
+    value: requestAnimationFrame,
+  });
   board.getBoundingClientRect = () => ({
     x: 0,
     y: 0,
@@ -233,6 +239,9 @@ test('指针拖拽时会触�拖拽�交并在�开时��', () => {
       clientY: 70,
     });
   });
+  expect(piece.style.transform).toBe('translate3d(30px, 30px, 0) scale(1.03)');
+  expect(piece.style.transition).toBe('none');
+  expect(requestAnimationFrame).not.toHaveBeenCalled();
   act(() => {
     dispatchPointerEvent(piece, 'pointermove', {
       pointerId: 11,
@@ -252,11 +261,14 @@ test('指针拖拽时会触�拖拽�交并在�开时��', () => {
   expect(onDragPiece).toHaveBeenCalledWith(
     expect.objectContaining({pieceId: 'piece-0'}),
   );
+
+  Object.defineProperty(window, 'requestAnimationFrame', {
+    configurable: true,
+    value: originalRequestAnimationFrame,
+  });
 });
 
 test('指针拖拽�并大�时按大�锚点�交拖拽', () => {
-  const originalRequestAnimationFrame = window.requestAnimationFrame;
-  const originalCancelAnimationFrame = window.cancelAnimationFrame;
   const onDragPiece = vi.fn();
   const mergedRun: PuzzleRunSnapshot = {
     ...clearedRun,
@@ -289,16 +301,7 @@ test('指针拖拽�并大�时按大�锚点�交拖拽', () => {
     },
   };
 
-  Object.defineProperty(window, 'requestAnimationFrame', {
-    configurable: true,
-    value: vi.fn(() => 1),
-  });
-  Object.defineProperty(window, 'cancelAnimationFrame', {
-    configurable: true,
-    value: vi.fn(),
-  });
-
-  const { container, unmount } = renderPuzzleRuntime(
+  const { container } = renderPuzzleRuntime(
     <PuzzleRuntimeShell
       run={mergedRun}
       onBack={vi.fn()}
@@ -346,6 +349,13 @@ test('指针拖拽�并大�时按大�锚点�交拖拽', () => {
       clientY: 210,
     });
   });
+  const mergedGroup = container.querySelector(
+    '[data-merged-group-id="group-large"]',
+  ) as HTMLElement | null;
+  expect(mergedGroup?.style.transform).toBe(
+    'translate3d(150px, 150px, 0) scale(1.02)',
+  );
+  expect(mergedGroup?.style.transition).toBe('none');
   act(() => {
     dispatchPointerEvent(mergedPiece, 'pointerup', {
       pointerId: 12,
@@ -360,16 +370,6 @@ test('指针拖拽�并大�时按大�锚点�交拖拽', () => {
     targetRow: 2,
     targetCol: 2,
   });
-
-  unmount();
-  Object.defineProperty(window, 'requestAnimationFrame', {
-    configurable: true,
-    value: originalRequestAnimationFrame,
-  });
-  Object.defineProperty(window, 'cancelAnimationFrame', {
-    configurable: true,
-    value: originalCancelAnimationFrame,
-  });
 });
 
 test('拖拽�并大�时底层�格�显示选中色�', () => {
@@ -483,6 +483,78 @@ test('拖拽�并大�时底层�格�显示选中色�', () => {
   });
 });
 
+test('拖动拼图片时�显示已选择状�', () => {
+  const playingRun: PuzzleRunSnapshot = {
+    ...clearedRun,
+    currentLevel: {
+      ...clearedRun.currentLevel!,
+      status: 'playing',
+      startedAtMs: Date.now(),
+      remainingMs: 300_000,
+      timeLimitMs: 300_000,
+      board: {
+        ...clearedRun.currentLevel!.board,
+        allTilesResolved: false,
+      },
+    },
+  };
+
+  const { container } = renderPuzzleRuntime(
+    <PuzzleRuntimeShell
+      run={playingRun}
+      onBack={vi.fn()}
+      onSwapPieces={vi.fn()}
+      onDragPiece={vi.fn()}
+      onAdvanceNextLevel={vi.fn()}
+    />,
+  );
+  const board = container.querySelector(
+    '[data-testid="puzzle-board"]',
+  ) as HTMLElement | null;
+  if (!board) {
+    throw new Error('缺少测试棋盘');
+  }
+  board.getBoundingClientRect = () =>
+    ({
+      x: 0,
+      y: 0,
+      left: 0,
+      top: 0,
+      right: 300,
+      bottom: 300,
+      width: 300,
+      height: 300,
+      toJSON: () => ({}),
+    }) as DOMRect;
+  const piece = container.querySelector(
+    '[data-piece-id="piece-0"]',
+  ) as HTMLElement | null;
+  if (!piece) {
+    throw new Error('缺少测试拼图片');
+  }
+
+  act(() => {
+    dispatchPointerEvent(piece, 'pointerdown', {
+      pointerId: 14,
+      clientX: 40,
+      clientY: 40,
+    });
+  });
+
+  expect(screen.getByText('已选择')).toBeTruthy();
+
+  act(() => {
+    dispatchPointerEvent(piece, 'pointermove', {
+      pointerId: 14,
+      clientX: 70,
+      clientY: 70,
+    });
+  });
+
+  expect(screen.queryByText('已选择')).toBeNull();
+  expect(piece.className).not.toContain('puzzle-runtime-piece--selected');
+});
+
 test('通关�显示结算弹窗�排行榜和下一关按钮', () => {
   vi.useFakeTimers();
   const onAdvanceNextLevel = vi.fn();
@@ -842,7 +914,11 @@ test('�上角设置按钮打开拼图设置并支�音�调节', () => {
     authValue,
   );
 
-  fireEvent.click(screen.getByRole('button', { name: '打开拼图设置' }));
+  const settingsButton = screen.getByRole('button', { name: '打开拼图设置' });
+  expect(settingsButton.querySelector('img')).toBeNull();
+  expect(settingsButton.querySelector('svg')).toBeTruthy();
+
+  fireEvent.click(settingsButton);
 
   const dialog = screen.getByRole('dialog', { name: '拼图设置' });
   const slider = within(dialog).getByRole('slider', { name: '拼图音�音�' });
@@ -852,6 +928,44 @@ test('�上角设置按钮打开拼图设置并支�音�调节', () => {
   expect(authValue.setMusicVolume).toHaveBeenCalledWith(0.77);
 });
 
+test('拼图设置��展示进行中关�的实时当�用时', () => {
+  vi.useFakeTimers();
+  vi.setSystemTime(new Date('2026-05-15T08:00:10.000Z'));
+  const startedAtMs = Date.now() - 8_500;
+  const playingRun: PuzzleRunSnapshot = {
+    ...clearedRun,
+    clearedLevelCount: 0,
+    currentLevel: {
+      ...clearedRun.currentLevel!,
+      status: 'playing',
+      startedAtMs,
+      clearedAtMs: null,
+      elapsedMs: null,
+      remainingMs: 291_500,
+      board: {
+        ...clearedRun.currentLevel!.board,
+        allTilesResolved: false,
+      },
+    },
+  };
+
+  renderPuzzleRuntime(
+    <PuzzleRuntimeShell
+      run={playingRun}
+      onBack={vi.fn()}
+      onSwapPieces={vi.fn()}
+      onDragPiece={vi.fn()}
+      onAdvanceNextLevel={vi.fn()}
+    />,
+  );
+
+  fireEvent.click(screen.getByRole('button', { name: '打开拼图设置' }));
+
+  const dialog = screen.getByRole('dialog', { name: '拼图设置' });
+  expect(within(dialog).getByText('0:08.50')).toBeTruthy();
+  vi.useRealTimers();
+});
+
 test('推�页嵌入拼图时��返回和设置里的退出入�', () => {
   renderPuzzleRuntime(
     <PuzzleRuntimeShell
@@ -926,17 +1040,37 @@ test('拼图�行�主体使用主题语义类承接明暗主题', () => {
   expect(container.firstElementChild?.className).toContain(
     'puzzle-runtime-shell',
   );
+  expect(container.firstElementChild?.className).toContain(
+    'platform-theme--light',
+  );
   expect(container.querySelector('.puzzle-runtime-pill')).toBeTruthy();
 });
 
+test('拼图直达页在没有外层主题壳时也会自行补�平�主题类', () => {
+  const { container } = render(
+    <PuzzleRuntimeShell
+      run={null}
+      onBack={vi.fn()}
+      onSwapPieces={vi.fn()}
+      onDragPiece={vi.fn()}
+      onAdvanceNextLevel={vi.fn()}
+    />,
+  );
+
+  expect(container.firstElementChild?.className).toContain(
+    'platform-theme--light',
+  );
+});
+
 test('�并���加��轮廓和��阴影', () => {
   const mergedRun: PuzzleRunSnapshot = {
     ...clearedRun,
     currentLevel: {
-      ...clearedRun.currentLevel!,
-      status: 'playing',
-      startedAtMs: Date.now(),
-      board: {
+        ...clearedRun.currentLevel!,
+        status: 'playing',
+        startedAtMs: Date.now(),
+        coverImageSrc: '/puzzle.png',
+        board: {
         ...clearedRun.currentLevel!.board,
         allTilesResolved: false,
         mergedGroups: [
@@ -974,26 +1108,33 @@ test('�并���加��轮廓和��阴影', () => {
 
   expect(outlinedPieces).toHaveLength(3);
   expect(container.querySelector('.ring-2.ring-emerald-100\\/58')).toBeNull();
-  expect(
-    container.querySelector('[data-merged-group-outline="true"]'),
-  ).toBeNull();
-  const outlineStroke = container.querySelector(
-    '[data-merged-group-outline-stroke="true"]',
+  const mergedGroupClipLayer = container.querySelector(
+    '[data-merged-group-id="group-l"] [data-merged-group-clip="true"]',
+  ) as SVGSVGElement | null;
+  const mergedGroupClipPath = mergedGroupClipLayer?.querySelector('path');
+  const mergedPieceVisuals = container.querySelectorAll(
+    '[data-merged-piece-visual="true"]',
   );
-  expect(outlineStroke).toBeNull();
-  expect((outlinedPieces[0] as HTMLElement).style.clipPath).toBe('');
+  expect(mergedGroupClipLayer?.tagName.toLowerCase()).toBe('svg');
+  expect(mergedGroupClipLayer?.getAttribute('viewBox')).toBe('0 0 2 2');
+  expect(mergedGroupClipPath?.getAttribute('d')).toContain('Q 2 1 1.84 1');
+  expect(mergedGroupClipPath?.getAttribute('d')).toContain('Q 1 1 1 1.192');
+  expect(mergedPieceVisuals).toHaveLength(3);
+  const mergedImageSlices = mergedGroupClipLayer?.querySelectorAll('image');
+  expect(mergedImageSlices).toHaveLength(3);
+  expect(mergedImageSlices?.[0]?.getAttribute('href')).toBe('/puzzle.png');
+  expect(mergedImageSlices?.[0]?.getAttribute('width')).toBe('3');
+  expect(mergedImageSlices?.[0]?.getAttribute('height')).toBe('3');
   for (const outlinedPiece of outlinedPieces) {
     const outlinedPieceElement = outlinedPiece as HTMLElement;
+    expect(outlinedPieceElement.style.clipPath).toBe('');
+    expect(outlinedPieceElement.querySelector('.absolute.inset-0')).toBeNull();
     expect(outlinedPieceElement.className).not.toContain('bg-emerald-300/10');
     expect(outlinedPieceElement.className).not.toContain('shadow-[');
     expect(
       outlinedPieceElement.querySelector('.absolute.inset-0.bg-black\\/8'),
     ).toBeNull();
   }
-  const clippedLayer = container.querySelector(
-    '[style*="clip-path"]',
-  ) as HTMLElement | null;
-  expect(clippedLayer).toBeNull();
 });
 
 test('�并�轮廓路径为内凹角生�圆角曲线', () => {
@@ -1017,10 +1158,10 @@ test('�并�轮廓路径为内凹角生�圆角曲线', () => {
   });
 
   expect(outlinePath).toContain('Q 2 1 1.84 1');
-  expect(outlinePath).toContain('Q 1 1 1 1.16');
+  expect(outlinePath).toContain('Q 1 1 1 1.192');
 });
 
-test('基础����加边框圆角或图片蒙版', () => {
+test('基础��使用圆角�切且��加图片蒙版', () => {
   const playingRun: PuzzleRunSnapshot = {
     ...clearedRun,
     currentLevel: {
@@ -1050,7 +1191,7 @@ test('基础����加边框圆角或图片蒙版', () => {
   ) as HTMLElement | null;
   expect(basePiece?.className).toContain('overflow-hidden');
   expect(basePiece?.className).toContain('border-0');
-  expect(basePiece?.className).not.toContain('rounded-[0.85rem]');
+  expect(basePiece?.style.clipPath).toContain('url(#');
   expect(basePiece?.className).not.toContain('border-2');
   expect(basePiece?.querySelector('.puzzle-runtime-piece-overlay')).toBeNull();
 });
@@ -1442,7 +1583,7 @@ test('失败续时扣费失败时�留确认弹窗', async () => {
   expect(screen.getByText('泥点余��足')).toBeTruthy();
 });
 
-test('查看原图开关打开覆盖层并在关闭���计时', async () => {
+test('查看原图显示独立原图层并在关闭���计时', async () => {
   const onPauseChange = vi.fn();
   const onUseProp = vi.fn().mockResolvedValue(clearedRun);
   const playingRun: PuzzleRunSnapshot = {
@@ -1478,12 +1619,21 @@ test('查看原图开关打开覆盖层并在关闭���计时', async () =>
   });
 
   expect(onUseProp).toHaveBeenCalledWith('reference');
-  expect(screen.getByTestId('puzzle-original-overlay')).toBeTruthy();
+  const originalViewer = screen.getByTestId('puzzle-original-viewer');
+  const board = screen.getByTestId('puzzle-board');
+  expect(originalViewer).toBeTruthy();
+  expect(originalViewer.parentElement).not.toBe(board);
+  expect(
+    within(originalViewer)
+      .getByRole('img', { name: '潮雾拼图 原图' })
+      .getAttribute('src'),
+  ).toBe('/puzzle.png');
+  expect(screen.queryByTestId('puzzle-original-overlay')).toBeNull();
   expect(onPauseChange).toHaveBeenLastCalledWith(true);
 
-  fireEvent.click(screen.getByRole('button', { name: '原图' }));
+  fireEvent.click(screen.getByRole('button', { name: '关闭原图' }));
 
-  expect(screen.queryByTestId('puzzle-original-overlay')).toBeNull();
+  expect(screen.queryByTestId('puzzle-original-viewer')).toBeNull();
   expect(onPauseChange).toHaveBeenLastCalledWith(false);
 });
 
diff --git a/src/components/puzzle-runtime/PuzzleRuntimeShell.tsx b/src/components/puzzle-runtime/PuzzleRuntimeShell.tsx
index c2743dc9..a9917344 100644
--- a/src/components/puzzle-runtime/PuzzleRuntimeShell.tsx
+++ b/src/components/puzzle-runtime/PuzzleRuntimeShell.tsx
@@ -5,11 +5,13 @@ import {
   Eye,
   Lightbulb,
   Loader2,
+  Settings,
   Snowflake,
   Sparkles,
   Trophy,
+  X,
 } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 
 import type {
   DragPuzzlePieceRequest,
@@ -39,14 +41,15 @@ import {
   playRuntimeLevelClearSound,
   resolveRuntimeCountdownSecondBucket,
 } from '../../services/runtimeAudioFeedback';
-import { CHROME_ICONS, getNineSliceStyle, UI_CHROME } from '../../uiAssets';
 import { useAuthUi } from '../auth/AuthUiContext';
-import { PixelIcon } from '../PixelIcon';
 import { ResolvedAssetImage } from '../ResolvedAssetImage';
 import {
+  buildMergedGroupOutlinePath,
+  buildRoundedGridCellClipPath,
   resolveDraggedMergedGroupLayer,
   resolveDraggedPieceCellLayer,
   resolveDraggedPieceLayer,
+  sanitizeSvgId,
 } from './puzzleRuntimeShape';
 
 type PuzzleRuntimeShellProps = {
@@ -215,6 +218,25 @@ function resolveRuntimeRemainingMs(
   return Math.max(0, timeLimitMs - effectiveElapsedMs);
 }
 
+function resolveRuntimeElapsedMs(
+  level: PuzzleRuntimeLevelSnapshot,
+  nowMs: number,
+  uiPauseStartedAtMs: number | null,
+) {
+  // 进行中关�的 elapsedMs �在通关结算�写入，设置��需�实时派生。
+  if (level.status !== 'playing') {
+    return level.elapsedMs ?? Math.max(0, level.timeLimitMs - level.remainingMs);
+  }
+
+  const timeLimitMs = level.timeLimitMs || level.remainingMs;
+  const remainingMs = resolveRuntimeRemainingMs(
+    level,
+    nowMs,
+    uiPauseStartedAtMs,
+  );
+  return Math.max(0, timeLimitMs - remainingMs);
+}
+
 const DEFAULT_PUZZLE_MUSIC_VOLUME = 0.6;
 const PUZZLE_CLEAR_FLASH_DURATION_MS = 900;
 const PUZZLE_CLEAR_DIALOG_DELAY_MS = 500;
@@ -341,6 +363,7 @@ export function PuzzleRuntimeShell({
   onUseProp,
   onTimeExpired,
 }: PuzzleRuntimeShellProps) {
+  const runtimeSvgClipId = useId();
   const authUi = useAuthUi();
   const [selectedPieceId, setSelectedPieceId] = useState<string | null>(null);
   const selectedPieceIdRef = useRef<string | null>(null);
@@ -351,7 +374,7 @@ export function PuzzleRuntimeShell({
   const [propDialog, setPropDialog] = useState<PuzzlePropDialogState | null>(
     null,
   );
-  const [isOriginalOverlayVisible, setIsOriginalOverlayVisible] =
+  const [isOriginalImageViewerVisible, setIsOriginalImageViewerVisible] =
     useState(false);
   const [isFreezeEffectVisible, setIsFreezeEffectVisible] = useState(false);
   const [isPropConfirming, setIsPropConfirming] = useState(false);
@@ -384,8 +407,6 @@ export function PuzzleRuntimeShell({
     pieceId: string;
     groupId: string | null;
   } | null>(null);
-  const dragVisualFrameRef = useRef<number | null>(null);
-  const dragOffsetRef = useRef<{ x: number; y: number } | null>(null);
   const pieceCellElementRefMap = useRef(new Map<string, HTMLDivElement>());
   const pieceElementRefMap = useRef(new Map<string, HTMLDivElement>());
   const groupElementRefMap = useRef(new Map<string, HTMLDivElement>());
@@ -415,13 +436,23 @@ export function PuzzleRuntimeShell({
   const displayRemainingMs = currentLevel
     ? resolveRuntimeRemainingMs(currentLevel, timerNowMs, uiPauseStartedAtMs)
     : 0;
+  const displayElapsedMs = currentLevel
+    ? resolveRuntimeElapsedMs(currentLevel, timerNowMs, uiPauseStartedAtMs)
+    : 0;
   const runtimeStatus = currentLevel
     ? currentLevel.status === 'playing' && displayRemainingMs <= 0
       ? 'failed'
       : currentLevel.status
     : 'playing';
+  const platformThemeClass =
+    authUi?.platformTheme === 'dark'
+      ? 'platform-theme--dark'
+      : 'platform-theme--light';
   const isInteractionLocked =
-    isBusy || runtimeStatus !== 'playing' || Boolean(propDialog);
+    isBusy ||
+    runtimeStatus !== 'playing' ||
+    Boolean(propDialog) ||
+    isOriginalImageViewerVisible;
   const clearResultKey = currentLevel
     ? `${run?.runId ?? 'run'}:${currentLevel.profileId}:${currentLevel.levelIndex}`
     : null;
@@ -524,6 +555,10 @@ export function PuzzleRuntimeShell({
     () => new Map(pieces.map((piece) => [piece.pieceId, piece])),
     [pieces],
   );
+  const singlePieceClipId = sanitizeSvgId(
+    `puzzle-single-piece-${runtimeSvgClipId}`,
+  );
+  const singlePieceClipUrl = `url(#${singlePieceClipId})`;
 
   useEffect(() => {
     const signature =
@@ -601,6 +636,7 @@ export function PuzzleRuntimeShell({
       pieceElement.style.willChange = '';
       pieceElement.style.zIndex = '';
       pieceElement.style.opacity = '';
+      pieceElement.style.transition = '';
     }
 
     if (dragVisualTarget.groupId) {
@@ -612,23 +648,14 @@ export function PuzzleRuntimeShell({
         groupElement.style.willChange = '';
         groupElement.style.zIndex = '';
         groupElement.style.opacity = '';
+        groupElement.style.transition = '';
       }
     }
 
     dragVisualTargetRef.current = null;
   };
 
-  const cancelDragVisualFrame = () => {
-    if (dragVisualFrameRef.current === null) {
-      return;
-    }
-    window.cancelAnimationFrame(dragVisualFrameRef.current);
-    dragVisualFrameRef.current = null;
-  };
-
   const resetDragInteractionState = () => {
-    cancelDragVisualFrame();
-    dragOffsetRef.current = null;
     dragSessionRef.current = null;
     draggingTargetRef.current = null;
     resetDragVisualTarget();
@@ -639,7 +666,6 @@ export function PuzzleRuntimeShell({
   };
 
   const flushDragVisual = () => {
-    dragVisualFrameRef.current = null;
     const dragSession = dragSessionRef.current;
     if (!dragSession || !dragSession.dragging) {
       resetDragVisualTarget();
@@ -653,28 +679,10 @@ export function PuzzleRuntimeShell({
       pieceId: dragSession.pieceId,
       groupId,
     };
-    const previousTarget = dragVisualTargetRef.current;
-    if (
-      previousTarget &&
-      (previousTarget.pieceId !== nextTarget.pieceId ||
-        previousTarget.groupId !== nextTarget.groupId)
-    ) {
-      resetDragVisualTarget();
-    }
     dragVisualTargetRef.current = nextTarget;
-    setDragRenderTarget((currentTarget) => {
-      if (
-        currentTarget?.pieceId === nextTarget.pieceId &&
-        currentTarget.groupId === nextTarget.groupId
-      ) {
-        return currentTarget;
-      }
-      return nextTarget;
-    });
 
     const offsetX = dragSession.currentX - dragSession.startX;
     const offsetY = dragSession.currentY - dragSession.startY;
-    dragOffsetRef.current = { x: offsetX, y: offsetY };
 
     if (groupId) {
       const groupElement = groupElementRefMap.current.get(groupId);
@@ -684,6 +692,7 @@ export function PuzzleRuntimeShell({
         groupElement.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0) scale(1.02)`;
         groupElement.style.zIndex = '90';
         groupElement.style.opacity = '0.95';
+        groupElement.style.transition = 'none';
       }
       const pieceCellElement = resolvePieceCellElement(dragSession.pieceId);
       if (pieceCellElement) {
@@ -695,6 +704,7 @@ export function PuzzleRuntimeShell({
         pieceElement.style.willChange = '';
         pieceElement.style.zIndex = '';
         pieceElement.style.opacity = '';
+        pieceElement.style.transition = '';
       }
       return;
     }
@@ -710,19 +720,12 @@ export function PuzzleRuntimeShell({
       pieceElement.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0) scale(1.03)`;
       pieceElement.style.zIndex = '81';
       pieceElement.style.opacity = '0.95';
+      pieceElement.style.transition = 'none';
     }
   };
 
-  const scheduleDragVisual = () => {
-    if (dragVisualFrameRef.current !== null) {
-      return;
-    }
-    dragVisualFrameRef.current = window.requestAnimationFrame(flushDragVisual);
-  };
-
   useEffect(
     () => () => {
-      cancelDragVisualFrame();
       resetDragVisualTarget();
     },
     [],
@@ -754,7 +757,7 @@ export function PuzzleRuntimeShell({
     isSettingsPanelOpen ||
     isExitRemodelPromptOpen ||
     Boolean(propDialog) ||
-    isOriginalOverlayVisible;
+    isOriginalImageViewerVisible;
 
   useEffect(() => {
     if (previousUiPauseActiveRef.current === isUiPauseActive) {
@@ -986,7 +989,6 @@ export function PuzzleRuntimeShell({
 
     if (session.dragging) {
       flushDragVisual();
-      scheduleDragVisual();
     }
   };
 
@@ -1002,6 +1004,11 @@ export function PuzzleRuntimeShell({
     onDragStart: (session) => {
       draggingTargetRef.current = resolvePuzzleRuntimeDragTarget(session.targetId);
       syncRuntimeDragFromController(session);
+      setDragRenderTarget({
+        pieceId: session.targetId,
+        groupId: draggingTargetRef.current?.groupId ?? null,
+      });
+      flushDragVisual();
     },
     onDragMove: (session) => {
       syncRuntimeDragFromController(session);
@@ -1029,7 +1036,7 @@ export function PuzzleRuntimeShell({
   if (!run || !currentLevel || !board) {
     return (
       <div
-        className={`puzzle-runtime-shell ${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex items-center justify-center`}
+        className={`platform-ui-shell platform-theme ${platformThemeClass} puzzle-runtime-shell ${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex items-center justify-center`}
       >
         <div className="puzzle-runtime-pill flex items-center gap-2 rounded-full px-5 py-3 text-sm">
           <Loader2 className="h-4 w-4 animate-spin" />
@@ -1076,6 +1083,7 @@ export function PuzzleRuntimeShell({
 
   const draggingPieceId = dragRenderTarget?.pieceId ?? null;
   const draggingGroupId = dragRenderTarget?.groupId ?? null;
+  const shouldDisplaySelectedState = !dragRenderTarget;
   const freezeRemainingMs =
     currentLevel.freezeUntilMs && currentLevel.status === 'playing'
       ? Math.max(0, currentLevel.freezeUntilMs - timerNowMs)
@@ -1201,7 +1209,7 @@ export function PuzzleRuntimeShell({
       playHintDemo();
     }
     if (propKind === 'reference') {
-      setIsOriginalOverlayVisible(true);
+      setIsOriginalImageViewerVisible(true);
     }
     if (propKind === 'freezeTime') {
       // 中文注释：正� run �能在冻结确认期间已被�务端结算为失败�；
@@ -1224,7 +1232,7 @@ export function PuzzleRuntimeShell({
 
   return (
     <div
-      className={`puzzle-runtime-shell ${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex justify-center`}
+      className={`platform-ui-shell platform-theme ${platformThemeClass} puzzle-runtime-shell ${embedded ? 'relative h-full min-h-0 w-full' : 'fixed inset-0 z-[100]'} flex justify-center`}
     >
       {resolvedBackgroundMusicSrc ? (
         <audio
@@ -1303,10 +1311,7 @@ export function PuzzleRuntimeShell({
               title="打开拼图设置"
               className="puzzle-runtime-icon-button inline-flex h-10 w-10 items-center justify-center rounded-full transition duration-150 hover:-translate-y-px hover:brightness-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--platform-button-primary-border)] sm:h-11 sm:w-11"
             >
-              <PixelIcon
-                src={CHROME_ICONS.settings}
-                className="h-5 w-5 drop-shadow-[0_4px_10px_rgba(0,0,0,0.45)] sm:h-[1.4rem] sm:w-[1.4rem]"
-              />
+              <Settings className="h-5 w-5 drop-shadow-[0_4px_10px_rgba(0,0,0,0.25)] sm:h-[1.4rem] sm:w-[1.4rem]" />
             </button>
           </div>
         </div>
@@ -1321,12 +1326,28 @@ export function PuzzleRuntimeShell({
               gridTemplateRows: `repeat(${board.rows}, minmax(0, 1fr))`,
             }}
           >
+            <svg
+              aria-hidden="true"
+              className="pointer-events-none absolute h-0 w-0 overflow-hidden"
+              focusable="false"
+            >
+              <defs>
+                <clipPath
+                  id={singlePieceClipId}
+                  clipPathUnits="objectBoundingBox"
+                >
+                  <path d={buildRoundedGridCellClipPath()} />
+                </clipPath>
+              </defs>
+            </svg>
             {buildBoardCells(board).map((cell) => {
               const piece = pieceByCell.get(`${cell.row}:${cell.col}`) ?? null;
               const occupied = Boolean(piece);
               const isMerged = mergedCellKeys.has(boardCellKey(cell));
               const isSelected =
-                !isMerged && piece?.pieceId === selectedPieceId;
+                shouldDisplaySelectedState &&
+                !isMerged &&
+                piece?.pieceId === selectedPieceId;
 
               return (
                 <div
@@ -1372,7 +1393,7 @@ export function PuzzleRuntimeShell({
                       pieceElementRefMap.current.delete(piece.pieceId);
                     }}
                     data-piece-id={piece?.pieceId ?? undefined}
-                    className={`puzzle-runtime-piece relative flex h-full items-center justify-center overflow-hidden border-0 text-sm font-black transition ${
+                    className={`puzzle-runtime-piece relative flex h-full items-center justify-center overflow-hidden border-0 text-sm font-black ${
                       occupied
                         ? isSelected
                           ? 'puzzle-runtime-piece--selected'
@@ -1386,6 +1407,10 @@ export function PuzzleRuntimeShell({
                         : 'transition-[opacity,transform]'
                     }`}
                     style={{
+                      clipPath: isMerged ? undefined : singlePieceClipUrl,
+                      WebkitClipPath: isMerged
+                        ? undefined
+                        : singlePieceClipUrl,
                       zIndex: resolveDraggedPieceLayer(
                         piece?.pieceId,
                         draggingPieceId,
@@ -1447,6 +1472,10 @@ export function PuzzleRuntimeShell({
               );
             })}
             {mergedGroups.map((group) => {
+              const mergedGroupClipId = sanitizeSvgId(
+                `${runtimeSvgClipId}-${group.groupId}`,
+              );
+              const mergedGroupClipPath = buildMergedGroupOutlinePath(group);
               return (
                 <div
                   key={group.groupId}
@@ -1480,8 +1509,71 @@ export function PuzzleRuntimeShell({
                     height: `${(group.rowSpan / board.rows) * 100}%`,
                   }}
                 >
+                  <svg
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-0 h-full w-full overflow-visible"
+                    data-merged-group-clip="true"
+                    viewBox={`0 0 ${group.colSpan} ${group.rowSpan}`}
+                    preserveAspectRatio="none"
+                  >
+                    <defs>
+                      <clipPath
+                        id={mergedGroupClipId}
+                        clipPathUnits="userSpaceOnUse"
+                      >
+                        <path d={mergedGroupClipPath} />
+                      </clipPath>
+                    </defs>
+                    <g clipPath={`url(#${mergedGroupClipId})`}>
+                      {group.pieces.map((piece) => (
+                        <g
+                          key={piece.pieceId}
+                          data-merged-piece-visual="true"
+                        >
+                          <clipPath
+                            id={sanitizeSvgId(
+                              `${runtimeSvgClipId}-${group.groupId}-${piece.pieceId}`,
+                            )}
+                            clipPathUnits="userSpaceOnUse"
+                          >
+                            <rect
+                              x={piece.localCol}
+                              y={piece.localRow}
+                              width={1}
+                              height={1}
+                            />
+                          </clipPath>
+                          <g
+                            clipPath={`url(#${sanitizeSvgId(
+                              `${runtimeSvgClipId}-${group.groupId}-${piece.pieceId}`,
+                            )})`}
+                          >
+                            {resolvedCoverImage ? (
+                              <image
+                                href={resolvedCoverImage}
+                                xlinkHref={resolvedCoverImage}
+                                x={piece.localCol - piece.correctCol}
+                                y={piece.localRow - piece.correctRow}
+                                width={board.cols}
+                                height={board.rows}
+                                preserveAspectRatio="none"
+                              />
+                            ) : (
+                              <rect
+                                x={piece.localCol}
+                                y={piece.localRow}
+                                width={1}
+                                height={1}
+                                fill="rgba(16,185,129,0.42)"
+                              />
+                            )}
+                          </g>
+                        </g>
+                      ))}
+                    </g>
+                  </svg>
                   <div
-                    className="pointer-events-none relative z-10 grid h-full w-full touch-none overflow-hidden active:scale-[0.992]"
+                    className="pointer-events-none relative z-10 grid h-full w-full touch-none active:scale-[0.992]"
                     style={{
                       gridTemplateColumns: `repeat(${group.colSpan}, minmax(0, 1fr))`,
                       gridTemplateRows: `repeat(${group.rowSpan}, minmax(0, 1fr))`,
@@ -1490,7 +1582,7 @@ export function PuzzleRuntimeShell({
                     {group.pieces.map((piece) => (
                       <div
                         key={piece.pieceId}
-                        className="pointer-events-auto relative touch-none overflow-hidden"
+                        className="pointer-events-auto relative touch-none"
                         data-merged-piece-outline="true"
                         style={{
                           gridColumn: piece.localCol + 1,
@@ -1511,48 +1603,12 @@ export function PuzzleRuntimeShell({
                         onLostPointerCapture={() => {
                           resetDragInteraction();
                         }}
-                      >
-                        {resolvedCoverImage ? (
-                          <div
-                            className="absolute inset-0"
-                            style={{
-                              backgroundImage: `url("${resolvedCoverImage}")`,
-                              backgroundSize: `${board.cols * 100}% ${board.rows * 100}%`,
-                              backgroundPosition: `${
-                                board.cols > 1
-                                  ? (piece.correctCol / (board.cols - 1)) * 100
-                                  : 0
-                              }% ${
-                                board.rows > 1
-                                  ? (piece.correctRow / (board.rows - 1)) * 100
-                                  : 0
-                              }%`,
-                            }}
-                          />
-                        ) : (
-                          <div className="absolute inset-0 bg-[linear-gradient(145deg,rgba(52,211,153,0.38),rgba(6,78,59,0.68))]" />
-                        )}
-                      </div>
+                      />
                     ))}
                   </div>
                 </div>
               );
             })}
-            {isOriginalOverlayVisible && resolvedCoverImage ? (
-              <div
-                data-testid="puzzle-original-overlay"
-                className="pointer-events-none absolute inset-0 z-40 bg-black/10"
-              >
-                <div
-                  className="absolute inset-0 opacity-70"
-                  style={{
-                    backgroundImage: `url("${resolvedCoverImage}")`,
-                    backgroundSize: '100% 100%',
-                    backgroundPosition: 'center',
-                  }}
-                />
-              </div>
-            ) : null}
             {mergeFlash ? (
               <div
                 key={mergeFlash.key}
@@ -1575,7 +1631,9 @@ export function PuzzleRuntimeShell({
               {error}
             </div>
           ) : null}
-          {selectedPieceId && runtimeStatus === 'playing' ? (
+          {selectedPieceId &&
+          shouldDisplaySelectedState &&
+          runtimeStatus === 'playing' ? (
             <div className="puzzle-runtime-status-chip rounded-full px-3 py-1 text-xs">
               已选择
             </div>
@@ -1614,17 +1672,17 @@ export function PuzzleRuntimeShell({
             </button>
             <button
               type="button"
-              disabled={runtimeStatus !== 'playing'}
-              aria-pressed={isOriginalOverlayVisible}
+              disabled={runtimeStatus !== 'playing' || !resolvedCoverImage}
+              aria-pressed={isOriginalImageViewerVisible}
               onClick={() => {
-                if (isOriginalOverlayVisible) {
-                  setIsOriginalOverlayVisible(false);
+                if (isOriginalImageViewerVisible) {
+                  setIsOriginalImageViewerVisible(false);
                   return;
                 }
                 openPropDialog('reference', '查看原图');
               }}
               className={`inline-flex h-16 min-w-[5.75rem] flex-col items-center justify-center gap-1 rounded-full px-4 text-sm font-black transition disabled:opacity-45 ${
-                isOriginalOverlayVisible
+                isOriginalImageViewerVisible
                   ? 'puzzle-runtime-tool-button--active'
                   : 'puzzle-runtime-tool-button'
               }`}
@@ -1667,6 +1725,39 @@ export function PuzzleRuntimeShell({
           </div>
         ) : null}
 
+        {isOriginalImageViewerVisible && resolvedCoverImage ? (
+          <div
+            data-testid="puzzle-original-viewer"
+            className="puzzle-runtime-modal-overlay absolute inset-0 z-40 flex items-center justify-center px-4 py-4 backdrop-blur-sm"
+            style={{ background: 'rgba(2, 6, 23, 0.94)' }}
+            onClick={() => {
+              setIsOriginalImageViewerVisible(false);
+            }}
+          >
+            <button
+              type="button"
+              aria-label="关闭原图"
+              className="puzzle-runtime-secondary-button absolute right-4 top-4 inline-flex h-10 w-10 items-center justify-center rounded-full transition hover:brightness-105"
+              onClick={(event) => {
+                event.stopPropagation();
+                setIsOriginalImageViewerVisible(false);
+              }}
+            >
+              <X className="h-4 w-4" />
+            </button>
+            <div
+              className="flex h-full w-full items-center justify-center"
+              onClick={(event) => event.stopPropagation()}
+            >
+              <img
+                src={resolvedCoverImage}
+                alt={`${currentLevel.levelName} 原图`}
+                className="max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)] object-contain"
+              />
+            </div>
+          </div>
+        ) : null}
+
         {propDialog ? (
           <div
             className="puzzle-runtime-modal-overlay absolute inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
@@ -1680,8 +1771,7 @@ export function PuzzleRuntimeShell({
               role="dialog"
               aria-modal="true"
               aria-labelledby="puzzle-prop-confirm-title"
-              className="puzzle-runtime-dialog pixel-nine-slice pixel-modal-shell w-full max-w-[22rem] overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.24)]"
-              style={getNineSliceStyle(UI_CHROME.modalPanel)}
+              className="puzzle-runtime-dialog w-full max-w-[22rem] overflow-hidden rounded-[1.35rem] shadow-[0_24px_80px_rgba(0,0,0,0.24)]"
               onClick={(event) => event.stopPropagation()}
             >
               <header className="puzzle-runtime-dialog__line flex items-center gap-3 border-b px-5 py-4">
@@ -1739,8 +1829,7 @@ export function PuzzleRuntimeShell({
               role="dialog"
               aria-modal="true"
               aria-labelledby="puzzle-settings-title"
-              className="puzzle-runtime-dialog pixel-nine-slice pixel-modal-shell flex max-h-[min(88vh,36rem)] w-full max-w-md flex-col overflow-hidden shadow-[0_24px_80px_rgba(0,0,0,0.24)]"
-              style={getNineSliceStyle(UI_CHROME.modalPanel)}
+              className="puzzle-runtime-dialog flex max-h-[min(88vh,36rem)] w-full max-w-md flex-col overflow-hidden rounded-[1.5rem] shadow-[0_24px_80px_rgba(0,0,0,0.24)]"
               onClick={(event) => event.stopPropagation()}
             >
               <header className="puzzle-runtime-dialog__line relative border-b px-4 py-3 sm:px-5 sm:py-4">
@@ -1763,7 +1852,7 @@ export function PuzzleRuntimeShell({
                   onClick={() => setIsSettingsPanelOpen(false)}
                   className="puzzle-runtime-dialog__soft absolute right-4 top-3 p-1 transition-colors hover:brightness-75 sm:right-5 sm:top-4"
                 >
-                  <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
+                  <X className="h-4 w-4" />
                 </button>
               </header>
 
@@ -1827,7 +1916,7 @@ export function PuzzleRuntimeShell({
                     <div className="flex items-center justify-between gap-3">
                       <span className="puzzle-runtime-dialog__soft">当�用时</span>
                       <span className="font-mono font-semibold">
-                        {formatElapsedMs(currentLevel.elapsedMs)}
+                        {formatElapsedMs(displayElapsedMs)}
                       </span>
                     </div>
                   </div>
@@ -1987,7 +2076,7 @@ export function PuzzleRuntimeShell({
                     setDismissedClearKey(clearResultKey);
                   }}
                 >
-                  <PixelIcon src={CHROME_ICONS.close} className="h-4 w-4" />
+                  <X className="h-4 w-4" />
                 </button>
               </header>
 
diff --git a/src/components/puzzle-runtime/puzzleRuntimeShape.ts b/src/components/puzzle-runtime/puzzleRuntimeShape.ts
index 248f395f..f7c51dda 100644
--- a/src/components/puzzle-runtime/puzzleRuntimeShape.ts
+++ b/src/components/puzzle-runtime/puzzleRuntimeShape.ts
@@ -18,6 +18,7 @@ type GridEdge = {
 };
 
 const MERGED_GROUP_OUTLINE_CORNER_RADIUS = 0.16;
+const MERGED_GROUP_CONCAVE_CORNER_RADIUS_FACTOR = 1.2;
 
 function buildLocalCellKey(row: number, col: number) {
   return `${row}:${col}`;
@@ -78,15 +79,38 @@ function removeCollinearGridPoints(points: GridPoint[]) {
   });
 }
 
+function computePolygonSignedArea(points: GridPoint[]) {
+  let area = 0;
+  for (let index = 0; index < points.length; index += 1) {
+    const current = points[index];
+    const next = points[(index + 1) % points.length];
+    if (!current || !next) {
+      continue;
+    }
+    area += current.x * next.y - next.x * current.y;
+  }
+  return area / 2;
+}
+
+type CornerRadiusResolver = (corner: {
+  point: GridPoint;
+  previous: GridPoint;
+  next: GridPoint;
+  isConvex: boolean;
+  radius: number;
+}) => number;
+
 function buildRoundedGridCyclePath(
   points: GridPoint[],
   radius: number,
   transformPoint: (point: GridPoint) => GridPoint = (point) => point,
+  resolveCornerRadius?: CornerRadiusResolver,
 ) {
   const cyclePoints = removeCollinearGridPoints(points);
   if (cyclePoints.length < 3) {
     return '';
   }
+  const polygonOrientation = computePolygonSignedArea(cyclePoints) >= 0 ? 1 : -1;
   const resolveCorner = (index: number) => {
     const point = cyclePoints[index];
     const previous = cyclePoints[
@@ -96,8 +120,25 @@ function buildRoundedGridCyclePath(
     if (!point || !previous || !next) {
       return null;
     }
+    const previousVectorX = point.x - previous.x;
+    const previousVectorY = point.y - previous.y;
+    const nextVectorX = next.x - point.x;
+    const nextVectorY = next.y - point.y;
+    const turnCross =
+      previousVectorX * nextVectorY - previousVectorY * nextVectorX;
+    const isConvex = turnCross * polygonOrientation > 0;
+    const resolvedRadius = Math.max(
+      0,
+      resolveCornerRadius?.({
+        point,
+        previous,
+        next,
+        isConvex,
+        radius,
+      }) ?? radius,
+    );
     const safeRadius = Math.min(
-      radius,
+      resolvedRadius,
       distanceBetweenGridPoints(point, previous) / 2,
       distanceBetweenGridPoints(point, next) / 2,
     );
@@ -216,13 +257,34 @@ function buildMergedGroupBoundaryCycles(group: PuzzleMergedGroupShape) {
   return cycles;
 }
 
+export function buildRoundedGridCellClipPath(
+  radius = MERGED_GROUP_OUTLINE_CORNER_RADIUS,
+) {
+  return buildRoundedGridCyclePath([
+    { x: 0, y: 0 },
+    { x: 1, y: 0 },
+    { x: 1, y: 1 },
+    { x: 0, y: 1 },
+  ], radius);
+}
+
 export function buildMergedGroupOutlinePath(
   group: PuzzleMergedGroupShape,
   radius = MERGED_GROUP_OUTLINE_CORNER_RADIUS,
 ) {
   // �并�的凹入角�能��格 border-radius 稳定拼出�，必须先生�整体外轮廓。
   return buildMergedGroupBoundaryCycles(group)
-    .map((cycle) => buildRoundedGridCyclePath(cycle, radius))
+    .map((cycle) =>
+      buildRoundedGridCyclePath(
+        cycle,
+        radius,
+        (corner) => corner,
+        ({ isConvex }) =>
+          isConvex
+            ? radius
+            : radius * MERGED_GROUP_CONCAVE_CORNER_RADIUS_FACTOR,
+      ),
+    )
     .filter(Boolean)
     .join(' ');
 }
@@ -233,10 +295,18 @@ export function buildMergedGroupClipPath(
 ) {
   return buildMergedGroupBoundaryCycles(group)
     .map((cycle) =>
-      buildRoundedGridCyclePath(cycle, radius, (point) => ({
-        x: point.x / group.colSpan,
-        y: point.y / group.rowSpan,
-      })),
+      buildRoundedGridCyclePath(
+        cycle,
+        radius,
+        (point) => ({
+          x: point.x / group.colSpan,
+          y: point.y / group.rowSpan,
+        }),
+        ({ isConvex }) =>
+          isConvex
+            ? radius
+            : radius * MERGED_GROUP_CONCAVE_CORNER_RADIUS_FACTOR,
+      ),
     )
     .filter(Boolean)
     .join(' ');
diff --git a/src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx b/src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx
index b61de0aa..351ef722 100644
--- a/src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx
+++ b/src/components/rpg-entry/RpgEntryFlowShell.agent.interaction.test.tsx
@@ -6682,6 +6682,97 @@ test('first puzzle runtime back click can open remix result page', async () => {
   expect(screen.getByDisplayValue('改造�的雨夜猫塔')).toBeTruthy();
 });
 
+test('recommend puzzle remix return restarts recommendation instead of stale loading run', async () => {
+  const user = userEvent.setup();
+  const puzzleWork: PuzzleWorkSummary = {
+    workId: 'puzzle-work-public-1',
+    profileId: 'puzzle-profile-public-1',
+    ownerUserId: 'user-2',
+    sourceSessionId: null,
+    authorDisplayName: '拼图作者',
+    levelName: '雨夜猫塔',
+    summary: '一张�焦�光猫咪与�迹�阶的雨夜拼图。',
+    themeTags: ['雨夜', '猫咪', '�迹'],
+    coverImageSrc: null,
+    coverAssetId: null,
+    publicationStatus: 'published',
+    updatedAt: '2026-04-25T12:10:00.000Z',
+    publishedAt: '2026-04-25T12:10:00.000Z',
+    playCount: 8,
+    remixCount: 0,
+    likeCount: 0,
+    publishReady: true,
+  };
+  const anchorPack = buildPuzzleAnchorPack();
+  const remixDraft: PuzzleResultDraft = {
+    workTitle: '改造�的雨夜猫塔',
+    workDescription: '准备改造的拼图�稿。',
+    levelName: '改造�的雨夜猫塔',
+    summary: '一�猫站在雨夜塔顶。',
+    themeTags: ['雨夜', '猫咪', '塔'],
+    forbiddenDirectives: [],
+    creatorIntent: null,
+    anchorPack,
+    candidates: [],
+    selectedCandidateId: null,
+    coverImageSrc: null,
+    coverAssetId: null,
+    generationStatus: 'idle',
+    levels: [],
+    metadata: null,
+  };
+  const remixSession: PuzzleAgentSessionSnapshot = {
+    sessionId: 'puzzle-session-remix-1',
+    currentTurn: 1,
+    progressPercent: 100,
+    stage: 'ready_to_publish',
+    anchorPack,
+    draft: remixDraft,
+    messages: [],
+    lastAssistantReply: null,
+    publishedProfileId: null,
+    suggestedActions: [],
+    resultPreview: null,
+    updatedAt: '2026-04-25T12:12:00.000Z',
+  };
+
+  vi.mocked(listPuzzleGallery).mockResolvedValue({
+    items: [puzzleWork],
+  });
+  vi.mocked(getPuzzleGalleryDetail).mockResolvedValue({
+    item: puzzleWork,
+  });
+  vi.mocked(remixPuzzleGalleryWork).mockResolvedValue({
+    session: remixSession,
+  });
+
+  render(<TestWrapper withAuth />);
+
+  await waitFor(() => {
+    expect(screen.getByTestId('puzzle-board')).toBeTruthy();
+  });
+
+  await user.click(screen.getByRole('button', { name: '改造 0' }));
+
+  expect(await screen.findByText('拼图结果页')).toBeTruthy();
+  expect(screen.getByDisplayValue('改造�的雨夜猫塔')).toBeTruthy();
+
+  vi.mocked(startPuzzleRun).mockClear();
+  await user.click(screen.getByRole('button', { name: '返回' }));
+  await clickFirstButtonByName(user, '推�');
+
+  await waitFor(() => {
+    expect(startPuzzleRun).toHaveBeenCalledWith(
+      {
+        profileId: 'puzzle-profile-public-1',
+        levelId: null,
+      },
+      ISOLATED_RUNTIME_AUTH_OPTIONS,
+    );
+  });
+  expect(screen.queryByText('正在进入拼图关�')).toBeNull();
+});
+
 test('public code search opens a published puzzle by PZ code', async () => {
   const user = userEvent.setup();
   const puzzleWork: PuzzleWorkSummary = {
diff --git a/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx b/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
index 5aa54429..8bd0e419 100644
--- a/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
+++ b/src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx
@@ -1526,6 +1526,23 @@ test('profile played works card shows count unit', () => {
   expect(within(playedCard).getByText('1个')).toBeTruthy();
 });
 
+test('profile stats cards are centered without update timestamp', () => {
+  renderProfileView(vi.fn(), {
+    updatedAt: '2026-05-03T08:01:00Z',
+  });
+
+  const walletCard = screen.getByRole('button', { name: /泥点\s*0/u });
+  const playTimeCard = screen.getByRole('button', { name: /游�时长/u });
+  const playedCard = screen.getByRole('button', { name: /玩过\s*0个/u });
+
+  for (const card of [walletCard, playTimeCard, playedCard]) {
+    expect(card.className).toContain('items-center');
+    expect(card.className).toContain('justify-center');
+    expect(card.className).toContain('text-center');
+  }
+  expect(screen.queryByText(/更新于/u)).toBeNull();
+});
+
 test('desktop account entry uses saved avatar image when available', () => {
   mockDesktopLayout();
   const avatarUrl = 'data:image/png;base64,AAAA';
@@ -2815,9 +2832,7 @@ test('mobile game category filter dialog filters by play type', async () => {
 
   await user.click(within(filterDialog).getByRole('button', { name: '抓鹅' }));
 
-  expect(
-    screen.queryByRole('button', { name: /奇幻拼图，试玩/u }),
-  ).toBeNull();
+  expect(screen.queryByRole('button', { name: /奇幻拼图，试玩/u })).toBeNull();
   expect(screen.getByRole('button', { name: /奇幻抓鹅，进入/u })).toBeTruthy();
 });
 
diff --git a/src/components/rpg-entry/RpgEntryHomeView.tsx b/src/components/rpg-entry/RpgEntryHomeView.tsx
index de56f3fe..b5b7fd9c 100644
--- a/src/components/rpg-entry/RpgEntryHomeView.tsx
+++ b/src/components/rpg-entry/RpgEntryHomeView.tsx
@@ -2118,24 +2118,6 @@ function formatDashboardCount(value: number) {
   return normalizedValue.toLocaleString('zh-CN');
 }
 
-function formatDashboardUpdatedAt(value: string | null | undefined) {
-  if (!value) {
-    return '暂无更新记录';
-  }
-
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return value;
-  }
-
-  return date.toLocaleString('zh-CN', {
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-  });
-}
-
 function isWithinProfileInviteRedeemWindow(
   createdAt: string | null | undefined,
 ) {
@@ -2309,13 +2291,15 @@ function ProfileStatCard({
     <button
       type="button"
       onClick={onClick ? () => onClick(cardKey) : undefined}
-      className="platform-subpanel rounded-[1.35rem] px-4 py-3 text-left transition hover:border-[var(--platform-surface-hover-border)] hover:bg-[var(--platform-button-secondary-fill)]"
+      className="platform-subpanel flex min-h-[5.75rem] flex-col items-center justify-center rounded-[1.35rem] px-3 py-3 text-center transition hover:border-[var(--platform-surface-hover-border)] hover:bg-[var(--platform-button-secondary-fill)]"
     >
-      <div className="flex items-center gap-2 text-[var(--platform-text-soft)]">
+      <div className="flex w-full items-center justify-center gap-2 text-[var(--platform-text-soft)]">
         <Icon className="h-4 w-4" />
-        <span className="text-[11px] tracking-[0.16em]">{label}</span>
+        <span className="whitespace-nowrap text-[11px] tracking-[0.16em]">
+          {label}
+        </span>
       </div>
-      <div className="mt-3 text-lg font-black text-[var(--platform-text-strong)]">
+      <div className="mt-2 whitespace-nowrap text-lg font-black leading-none text-[var(--platform-text-strong)]">
         {value}
       </div>
     </button>
@@ -2324,9 +2308,9 @@ function ProfileStatCard({
 
 function ProfileStatCardSkeleton() {
   return (
-    <div className="platform-subpanel rounded-[1.35rem] px-4 py-3">
+    <div className="platform-subpanel flex min-h-[5.75rem] flex-col items-center justify-center rounded-[1.35rem] px-3 py-3 text-center">
       <div className="h-4 w-20 animate-pulse rounded-full bg-[var(--platform-subpanel-border)]" />
-      <div className="mt-3 h-7 w-16 animate-pulse rounded-full bg-[var(--platform-line-soft)]" />
+      <div className="mt-2 h-7 w-16 animate-pulse rounded-full bg-[var(--platform-line-soft)]" />
     </div>
   );
 }
@@ -5656,11 +5640,6 @@ export function RpgEntryHomeView({
                 </>
               )}
             </div>
-            <div className="mt-3 text-[11px] text-[var(--platform-text-soft)]">
-              {dashboardError
-                ? dashboardError
-                : `更新于 ${formatDashboardUpdatedAt(profileDashboard?.updatedAt)}`}
-            </div>
           </section>
 
           <section
diff --git a/src/index.css b/src/index.css
index 3b66fac5..1af40768 100644
--- a/src/index.css
+++ b/src/index.css
@@ -616,8 +616,17 @@ body {
   --puzzle-runtime-danger-fill: rgba(255, 228, 233, 0.9);
   --puzzle-runtime-danger-text: #c2415d;
   --puzzle-runtime-backdrop-fill: rgba(43, 20, 32, 0.34);
-  --puzzle-runtime-dialog-fill: var(--platform-modal-fill);
-  --puzzle-runtime-dialog-border: var(--platform-modal-border);
+  --puzzle-runtime-dialog-fill: radial-gradient(
+      circle at 12% 0%,
+      rgba(255, 91, 132, 0.18),
+      transparent 36%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.98),
+      rgba(255, 246, 249, 0.95)
+    );
+  --puzzle-runtime-dialog-border: rgba(255, 126, 154, 0.3);
   --puzzle-runtime-table-fill: rgba(255, 255, 255, 0.62);
   --puzzle-runtime-table-row-fill: rgba(255, 91, 132, 0.12);
   --puzzle-runtime-next-card-fill: rgba(255, 255, 255, 0.66);
@@ -848,8 +857,13 @@ body {
   --puzzle-runtime-danger-fill: rgba(239, 68, 68, 0.2);
   --puzzle-runtime-danger-text: #fee2e2;
   --puzzle-runtime-backdrop-fill: rgba(2, 6, 23, 0.68);
-  --puzzle-runtime-dialog-fill: rgba(2, 6, 23, 0.94);
-  --puzzle-runtime-dialog-border: rgba(255, 255, 255, 0.14);
+  --puzzle-runtime-dialog-fill: radial-gradient(
+      circle at 14% 0%,
+      rgba(251, 191, 36, 0.16),
+      transparent 36%
+    ),
+    linear-gradient(180deg, rgba(29, 17, 12, 0.96), rgba(2, 6, 23, 0.96));
+  --puzzle-runtime-dialog-border: rgba(251, 191, 36, 0.22);
   --puzzle-runtime-table-fill: rgba(255, 255, 255, 0.06);
   --puzzle-runtime-table-row-fill: rgba(251, 191, 36, 0.14);
   --puzzle-runtime-next-card-fill: rgba(255, 255, 255, 0.06);
@@ -1735,14 +1749,6 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   line-height: 1;
 }
 
-.creation-work-card__swipe-button--share {
-  background: linear-gradient(
-    180deg,
-    color-mix(in srgb, var(--platform-cool-text) 56%, #2563eb 44%),
-    #172554
-  );
-}
-
 .creation-work-card__swipe-button--danger {
   background: linear-gradient(180deg, #fb7185, #e11d48);
 }
@@ -1805,6 +1811,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 
 .creation-work-card__title-lockup {
   display: flex;
+  flex: 1 1 auto;
   min-width: 0;
   align-items: flex-start;
   gap: 0.42rem;
@@ -1853,6 +1860,34 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
   white-space: normal;
 }
 
+.creation-work-card__share-button {
+  display: inline-flex;
+  width: 2rem;
+  height: 2rem;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 9999px;
+  background: transparent;
+  color: var(--platform-text-soft);
+  transition:
+    background-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+}
+
+.creation-work-card__share-button:hover {
+  transform: translateY(-1px);
+  background: color-mix(in srgb, var(--platform-cool-bg) 24%, transparent);
+  color: var(--platform-cool-text);
+}
+
+.creation-work-card__share-button:focus-visible {
+  outline: 2px solid var(--platform-cool-border);
+  outline-offset: 2px;
+}
+
 .creation-work-card__meta {
   display: flex;
   min-width: 0;
@@ -2651,9 +2686,38 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
 }
 
 .puzzle-runtime-dialog {
+  position: relative;
   border: 1px solid var(--puzzle-runtime-dialog-border);
   background: var(--puzzle-runtime-dialog-fill);
   color: var(--puzzle-runtime-text-strong);
+  box-shadow:
+    0 24px 80px rgba(0, 0, 0, 0.24),
+    inset 0 1px 0 rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(18px);
+}
+
+.puzzle-runtime-dialog::before {
+  content: '';
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background:
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.16),
+      transparent 36%
+    ),
+    radial-gradient(
+      circle at 86% 8%,
+      var(--puzzle-runtime-control-hover-fill),
+      transparent 28%
+    );
+}
+
+.puzzle-runtime-dialog > * {
+  position: relative;
+  z-index: 1;
 }
 
 .puzzle-runtime-dialog__line {
diff --git a/src/routing/RouteImageReadyGate.test.ts b/src/routing/RouteImageReadyGate.test.ts
index 9cd4bed7..f6a4f3da 100644
--- a/src/routing/RouteImageReadyGate.test.ts
+++ b/src/routing/RouteImageReadyGate.test.ts
@@ -59,7 +59,7 @@ describe('RouteImageReadyGate image url helpers', () => {
         RouteImageReadyGate,
         {
           eyebrow: '正在载入游�',
-          text: '正在载入冒险...',
+          text: '正在加载内容',
         },
         createElement(
           'section',
@@ -100,7 +100,7 @@ describe('RouteImageReadyGate image url helpers', () => {
     const { container } = render(
       createElement(RouteLoadingScreen, {
         eyebrow: '正在载入游�',
-        text: '正在载入冒险...',
+        text: '正在加载内容',
       }),
     );
     const shell = container.firstElementChild;
diff --git a/src/routing/appRoutes.tsx b/src/routing/appRoutes.tsx
index 87de1131..27ffa541 100644
--- a/src/routing/appRoutes.tsx
+++ b/src/routing/appRoutes.tsx
@@ -164,7 +164,7 @@ export function resolveAppRoute(pathname: string): ResolvedAppRoute {
   return {
     kind: 'game',
     loadingEyebrow: '正在载入游�',
-    loadingText: '正在载入冒险...',
+    loadingText: '正在加载内容',
     Component: GameApp,
   };
 }