---
name: playable_end_screen_layout.aicomponent
description: 可玩广告结算/结束全屏层框架无关布局规范（遮罩、主视觉安全区、主次 CTA、与 download CTA 关系）。Agent 按 Canon 放置胜负 UI；Phaser 默认实现见 game_over_panel。
triggers: 需要实现胜利/失败全屏结果、转化 CTA、或统一结算层与安全区/缩放规则时触发。
---

# 可玩结算屏布局（Playable End Screen Layout）

本 skill **不包含**引擎代码，只约束 **全屏结束态** 的结构与缩放；通用缩放数学见 `responsive_2d_layout.aicomponent` **第一节**。

---

## 规范（Layout Canon）

### 1. 结构（由底到顶）

1. **全屏遮罩（Dimmer）**：覆盖 \((0,0)–(W_r,H_r)\)，通常半透明深色，用于打断游玩注意力、突出结果。
2. **主视觉（Hero）**：胜负插图或动画主体，置于 **视觉安全区** 内——距各边预留 ≥ `m_hero,dp * uiScale`（建议 24–48 dp 量级，项目单点配置），避免刘海/圆角裁切。
3. **主 CTA（Primary）**：试玩转化核心按钮（如 Install）；宽度建议 ≤ \(W_r - 2 \cdot \text{margin_cta} \cdot \text{uiScale}\)，纵向位置优先 **底区偏上**（与 `playable_hud_layout` 底区协调），使用 **vScale** 锚定距底边 dp。
4. **次行动（Secondary）**：可选（再看一次、关卡提示）；尺寸与对比度低于主 CTA，避免抢转化。

### 2. 缩放与字体

- 主 CTA 高度、圆角、主文案字号：**dp × uiScale**。
- **距底 / 距顶边距**：优先 **vScale** 与 Canon 1.4 节一致。
- 结算层出现时可 **暂停或遮挡** 底部棋盘交互；**不得**在遮罩未铺满时让棋盘仍可缩放导致误触。

### 3. z-order

结算全屏层深度 **高于** 顶/底 HUD 与 **高于** 指引层（结算出现时通常已关闭教程）。若在失败态仍需展示弱提示，提示须附属于结算容器内，避免 depth 混乱。

### 4. 资源与实现对应

- 胜负 **图片** 由 `win_result_panel.aiimage` / `lose_result_panel.aiimage` 等提供；本规范只管 **占位矩形与缩放**，不规定画风。
- **Phaser 参考**：`game_over_panel.aicomponent`（遮罩 + 结果图 + 与 `download_button` 等组合）。

---

## Recipe

| 决策 | 原因 |
|------|------|
| **结算结构单独规范** | 结算屏的 CTA 位置直接影响广告转化率；明确的安全区边距和 vScale 锚点规范防止 Agent 把 CTA 放到刘海或圆角裁切区域 |
| **遮罩是必要层** | 全屏 dimmer 打断游玩注意力，引导用户聚焦结果和 CTA；没有遮罩时用户视线在游戏画面和结果按钮间分散 |
| **引用底区高度** | 主 CTA 的纵向位置必须与底区高度常量（`playable_hud_layout` 约定）一致，避免 CTA 被底部安全区遮挡 |

## Adapter

- **Role**: `playableEndScreenLayout` — 结算全屏布局规范（遮罩/主视觉/CTA 锚点 + z-order 最高），无代码产出
- **Provides**: 结算层结构规范文档、主视觉安全区边距约定、CTA 位置规范、z-order（高于所有其他层）
- **Requires**: `responsive_2d_layout.aicomponent`、`playable_hud_layout.aicomponent`（底区 CTA 锚点对齐）
- **Consumed by**: `game_over_panel.aicomponent`（按此规范实现胜败面板的布局）
- **Integration point**: 无代码集成点；Agent 加载后按规范实现 GameOverPanel 的布局

## Imports

- `responsive_2d_layout.aicomponent`（硬依赖）
- 与 `playable_hud_layout.aicomponent` **建议同时加载**：底区高度与主 CTA 锚点需一致

## Scaffold

无 scaffold；落地见 `game_over_panel.aicomponent`。

## Skill Definition

```yaml
tools:
  - read_file
  - write_file
inputs:
  - layout: end-screen structure and CTA placement rules from SKILL.md
outputs:
  - endScreenLayers: dimmer, hero safe margins, primary/secondary CTA rules
  - zOrderRelativeToHudAndGuidance: must be on top when shown
```