11 — UI / UX

1Theme — "Đèn Hồn trong Vực"

1.1 Nguyên tắc

1.2 Màu (token)

Token gốc ở hub §2 (ink, scene-*, floor*, mortar, hot-white, rarity-1…7) và §8b (chrome-*, overlay-dim). Deepstair đề xuất thêm (coordinator đưa vào hub §2/§8b — rule art-style: token mới cần lý do + màn dùng):

• Độ hiếm Hồi Âm và anh hùng dùng cùng token: C/R/E/L = rarity-1/3/4/5 (hex đúng PAL). Bảng hex trong 06 §3 (#8b8798, #3f8fd8, #a24fe0, #f0b030, #b0182c) lệch PAL → thay bằng token trên khi đồng bộ.
• Di Vật 6 độ hiếm = rarity-1…6 (khung RaritiesCurrency/1–6.png có sẵn).
• Mọi thông tin màu đi kèm hình (huy hiệu độ hiếm 06 §3, glyph báo hiệu §3.3) — §10.

1.3 Chữ

Font: Tiny5 (Assets/Fonts/Tiny5-Regular.ttf, SIL OFL 1.1 — dùng thương mại được, kèm Tiny5-OFL.txt trong Credits).

Kiểm cmap bằng fontTools (2026-11-01, phiên bản 2.007, 1,940 mã ký tự, unitsPerEm 1024, lưới 128 = 1 font px, em 8 px, chữ hoa 5 px):

• Tiếng Việt: đủ 186/186 ký tự (mọi nguyên âm thường + hoa với 5 dấu thanh, ă â ê ô ơ ư đ) + 8 dấu kết hợp U+0300/0301/0303/0309/0323/0302/0306/031B. Không cần font dự phòng cho VI/EN.
• Thiếu ★ và ▣ → dùng sprite (px_icon_star, px_icon_build mới).
• Dấu chồng chữ hoa (vd Ấ) cao tới 11 font px trên baseline, ascent 9, descent 2 → chữ nhiều dòng tiếng Việt đặt lineSpacing 1.25 (khoảng baseline 13.75 font px) để dấu không chạm dòng trên.
• Đo bề rộng thật: ~18 đơn vị canvas/ký tự ở cỡ 40 (chữ thường VI); "Trăng Khuyết Rút Đao" = 370 @40; dòng ngắn 40 ký tự ≈ 624 @32 / 780 @40.
• Ngôn ngữ thêm sau (zh/ja/ko/th) cần font dự phòng (như CjkFontFallback của StickBattle) — ngoài phạm vi ra mắt.

Cỡ chữ: luật chung 30–72 (new-ui §0c) + override hub §8f: chỉ 32 · 40 · 48 · 56 · 64 · 72 (bội 8 → font px nguyên); 16/24 chỉ cho tag rất nhỏ trong kit, không dùng cho chữ đọc.

1.4 Thành phần

1.5 Chuyển động

Bốn lớp (polish §6.1) với cảm giác hub §8e — bước, gắt, có hit-stop: vào = nền mờ dần 0.15 s → khung 0.9→1 OutBack (bước theo 2 art px) → con stagger 0.04 s, tổng ≤ 0.6 s; idle chỉ ở tiêu điểm (lửa đèn thở 2 s, tia px_rays quay chậm); phản hồi = giữ–lóe–bay (nhận thưởng), thẻ chọn nảy lên + nháy trắng 1 khung, thẻ khác tối 50%, giữ 0.5 s; ra ≤ 0.2 s. DOTween SetUpdate(true) + SetLink, kill ở OnDisable; mọi vị trí tween làm tròn bội 4 đơn vị canvas. Full-screen fade, Popup pop (MainUI rỗng).

2Bố cục & đa tỷ lệ

2.1 Canvas

• CanvasScaler Scale With Screen Size 1080×1920, Expand, ref PPU 100; sprite UI PPU 25 → ×4. Vị trí/kích thước/padding mới là bội 4 (hub §8c), lưới thiết kế 8.
• Thế giới (02 §2.2) render toàn màn bên dưới UI; dải HUD trên và panel dưới là sprite đá đặc che thế giới.
• FullScreen có Crystal.SafeArea; HUD trận là canvas riêng có SafeArea; Popup không có SafeArea → neo giữa, cao ≤ 1,920 − lề.

2.2 Bố cục dọc

Menu (1080×1920)                       Trong run (1080×1920)
┌──────────────────────────┐ 0         ┌──────────────────────────┐ 0
│ Top: ResourceView (Vàng · │           │ Dải trên: II · B23 · Than │
│ KC · Tro Hồn)             │ 160       │ Hồng · x2 · wave          │ 176
├──────────────────────────┤           ├──────────────────────────┤
│ Mid (stretch, nhận chiều  │           │ KHUNG CHIẾN ĐẤU (thế giới)│
│ cao dư 19.5:9 – 21:9)     │           │ sàn ở 66% khung (y 1000)  │
│                          │           │ nhận chiều cao dư         │
│                          │           │                          │
├──────────────────────────┤ 1771      ├──────────────────────────┤ 1424
│ Bot: TabBottomTemplate    │           │ Panel dưới 496: HP · Khí  │
│ (5 tab)                   │           │ Thủ · Cổng · Kỹ Năng ·    │
└──────────────────────────┘ 1920      │ Build · AUTO · Bộc Phá    │ 1920
                                        └──────────────────────────┘

Vùng tương tác trong run (INV-07): y ≥ 1,056 (45% dưới); ngoại lệ duy nhất Tạm dừng + Tốc độ ở dải trên.

2.3 Đa tỷ lệ (new-ui §3f)

Nền full-bleed phủ tới 1440×2520 (FullScreen/Background stretch); chi tiết quan trọng trong 1080×1920 giữa. Chụp kiểm 1080×1920, 1080×2520, 1536×2048 (+1125×2436 SafeArea sim).

3HUD trong run

3.1 Wireframe

┌────────────────────────────────────────────┐ 0
│[II]        B23 · HẦM MỘ        🔥145  [x2] │ 24–152  (II, x2: 128×128)
│            ●●○ wave · 9 địch                │ 104–144
├────────────────────────────────────────────┤ 176
│ GORRAK KẺ GÁC CỔNG                  ◆◆     │ 184  (chỉ tầng Thủ Vệ/Boss)
│ █████████████████████░░░░░ (HP)            │ 240
│ ▬▬▬▬▬▬▬▬▬▬▬░░░░░░ (Thế)                     │ 288
│                                    87      │ 320  combo (digit XL)
│                                  GREAT!     │
│                                    [ A ]    │ 488  hạng Phong Độ
│        !            GẠT!                    │      glyph & chữ neo thế giới
│      (địch)       (Kaito)        (địch)     │
│ ═════════════════ sàn y 1000 ═════════════ │
│                                              │
├────────────────────────────────────────────┤ 1424
│ ♥ ███████████████░░░ 4,210/6,100   ☾☾☾     │ 1448–1504  HP + Cổng
│   ▬▬▬▬▬▬▬▬▬▬▬▬ (Khí Thủ)                     │ 1512
│ [A ◔3] [B ◔9]  [▣×12] [TỰ ĐỘNG]   ( 87% )  │ 1576–1800  Bộc Phá Ø224
│                                   BỘC PHÁ   │
└────────────────────────────────────────────┘ 1920

3.2 Spec-sheet (1080×1920)

Panel dưới chứa ≤ 7 phần tử thường trực; Kỹ Năng A/B chỉ hiển thị (tự dùng — INV-01), không bấm được. Nút DEV/cheat chỉ ở bản dev (ButtonCheatMenu), ẩn hoàn toàn khi tắt cheat.

3.3 Lớp phủ khung chiến đấu

Bộ digit sprite (1 art px, 12 §7):

Chí mạng: tăng 1 bộ + ! + màu ds-dmg-crit. Anh hùng nhận sát thương: bộ M ds-dmg-taken bay xuống. Hồi máu ds-heal "+". Rút gọn số theo 01 §4.1 (12.3K).

3.4 Widget Cổng cơ chế (240×96, góc phải panel dưới)

Mặc định dưới đây; chương anh hùng (gauge.ui trong hero_*.py) thắng khi khác.

3.5 Bộc Phá, AUTO, Build

• Bộc Phá Ø224: vành 8 đoạn ds-od lấp theo %, % ở giữa (40); đầy → vành quay bước 45°/0.25 s + od_ready + rung nhẹ. Chế độ TỰ ĐỘNG: nút hiện nhưng chỉ báo trạng thái (bấm → toast "Đang TỰ ĐỘNG"); THỦ CÔNG: bấm khi đầy → kích hoạt ở cửa sổ hủy kế (01 §8).
• AUTO 176×128: xanh px_btn_green = TỰ ĐỘNG, xám = THỦ CÔNG; Auto-Rerun ép TỰ ĐỘNG (khóa + lý do).
• Build ▣×N 208×112: N = số Hồi Âm đã nhặt; bấm → Tạm dừng + Xem Build (S07). Chấm GameNotification khi có lộ trình mới chưa xem.

4Màn chính

4.1 Trạm Đầu Thang (Home, S03)

┌────────────────────────────────────────────┐ 0
│[Ava Lv12]  Vàng 12.3K · KC 450 · Tro 320    │ Top ResourceView
├────────────────────────────────────────────┤ 160
│[Sự kiện●]                      [Gói 47:12]  │ rail trái ≤ 3 · rail phải ≤ 2 (OfferDirector)
│[Nhiệm vụ●]                     [Pass●]      │
│[Thư]                                         │
│      ⌒⌒ vòm hang · xích · bảng "KỶ LỤC B23" │ diorama 270×400 art px ×4
│   (lửa trại) 🔥  túi AFK ●(2h 14m)           │ chạm lửa → Lửa Trại S32
│   Kaito ngồi (camp_idle)       ╲ miệng       │ chạm anh hùng → victory + 1 câu
│                                  ╲ thang xoắn│ chạm thang = CTA
│  ┌─────────────────────────────────────────┐│
│  │      XUỐNG THANG · Kaito ★2 Lv18        ││ CTA 760×176, y 1560
│  └─────────────────────────────────────────┘│
├────────────────────────────────────────────┤ 1771
│[Cửa Hàng][Anh Hùng][ TRẠM ][Rèn Luyện][Sổ] │ TabBottomTemplate (5 tab, icon 200)
└────────────────────────────────────────────┘ 1920

Diorama là cảnh pixel thật (PPU 16, camera riêng ×4): lửa fire/campfire, anh hùng đang chọn ở clip camp_idle, miệng thang tối có bậc đá xoáy xuống. Tab bị khóa hiện xám + lý do (00 §8). Thứ tự lần về Home: thưởng còn sót → 1 tính năng mới (S38) → chào AFK → FTUE → offer (chỉ khi Home đã yên). Có run dở → popup "Tiếp tục run? (B23 · Kaito)" [Bỏ run] [TIẾP TỤC].

4.2 Chuẩn bị run (S04, Popup lớn 960×1500)

┌──────────────── CHUẨN BỊ XUỐNG THANG ────────────────┐
│  ◄  [ Kaito idle ×4 trên bệ đá ]  ►    Kaito ★2 Lv18  │
│      Gạt 15% · Chặn 8% · Né 10%  ·  Ý Kiếm             │
│  Tầng bắt đầu: [B1] [B11] [B21] … (Xuống Nhanh ≤ kỷ lục − 25) │
│  Bậc Kinh Hoàng: [0 ▬▬○ 20] (khóa tới khi hạ B100)      │
│  Auto-Pick: [BẬT]   Tiêu Điểm Build: [Combo ▼]          │
│  Tốc độ: [x1][x1.5][x2][x3🔒]                            │
│              [        BẮT ĐẦU        ]                   │
└───────────────────────────────────────────────────────┘

Anh hùng chưa sở hữu không hiện trong carousel (xem ở Sảnh). Xuống Nhanh hiện số lượt thẻ tự chọn sẽ nhận (06 §5.5).

4.3 HUD — §3.

4.4 Chọn Hồi Âm khi đi xuống (S08)

Cảnh diegetic (00 §5.2): camera trượt dọc trục cầu thang xoắn, anh hùng chạy clip descent, phòng cũ mờ lên trên, bảng đá khắc "B23 → B24". Sheet neo đáy; mọi phần tử bấm được nằm ở y ≥ 1,056 (INV-07) → thẻ xếp ngang.

(trên y 972: cảnh đi xuống thang — 243 art px)
┌──────── B23 XONG — CHỌN 1 HỒI ÂM ────────┐ 972  ribbon 112 (Tiny5 48)
│ ┌────────┐ ┌────────┐ ┌────────┐          │ 1108 thẻ 320×612 (×3, cách 20)
│ │[icon 64│ │        │ │ TIẾN   │          │
│ │ ×4 động]│ │        │ │ HÓA    │          │
│ │Trăng    │ │Mắt Tinh│ │        │          │
│ │Khuyết…  │ │ ◆ R    │ │        │          │
│ │ ●○○     │ │ ●●○→●●●│ │        │          │
│ │Combo mới│ │+12% Gạt│ │        │          │
│ │chém–hất…│ │        │ │        │          │
│ │[AIR ×2] │ │        │ │        │          │
│ └────────┘ └────────┘ └────────┘          │ 1720
│ [Đổi thẻ (1)] [Loại bỏ (1)] [Bỏ qua +40🔥] │ 1744 hàng nút 136
└────────────────────────────────────────────┘ 1920 (lề 40 + SafeArea)

Phép tính (1080×1920):

Chiều cao thẻ = 16 + 256 (icon) + 12 + 96 (tên ≤ 2 dòng @40, dòng 48) + 8 + 32 (pip cấp) + 8 + 120 (dòng ngắn ≤ 3 dòng @32, dòng 40) + 8 + 40 (chip) + 16 = 612. Hàng thẻ chiếm y 1,108–1,720 ✔ (≥ 1,056).

Mặt thẻ (06 §9):

• Khung px_card_echo (9-slice, tint ds-stone-deep), viền 2 art px màu độ hiếm + huy hiệu hình 16×16 art góc phải trên (tròn/thoi/lục giác/sao/sao + mũi tên/sao đôi/giọt — 06 §3). Thẻ riêng anh hùng: dải chữ ký 4 art px mép trái + icon vũ khí 8×8 art.
• Icon 64×64 art (256): ảnh động 8 khung, 8 fps, từ echo-icon.mjs (02 §3.7). Nội dung trong vùng an toàn 56×56 giữa; biến thể 4 thẻ hiển thị đúng 56×56 giữa (224) — không scale.
• Tên Tiny5 40 (> 2 dòng → 32); pip cấp ●●○ (sprite 6×6 art) + "→ ●●● Nâng cấp" 32; dòng ngắn #echo_<id>_short 32 (≤ 40 ký tự, 3 dòng); hàng chip: " ×N" (pill 32) · đỏ "● Thay: <tên>" · vàng "TIẾN HÓA SẴN SÀNG".
• Hàng nút 1,000 × 136: [Đổi thẻ (n)] [Loại bỏ (n)] [Bỏ qua +40] = 3 × 312 + 2 × 32; có Phước Lành → 4 × 232 + 3 × 24: [Đổi thẻ] [Loại bỏ] [▶ +1 Thẻ] [Bỏ qua]. Hết lượt → xám + "(0)"; Đổi thẻ bằng KC hiện giá trên nút (30/60/90 KC). Đổi thẻ không bao giờ ra lại 3 thẻ vừa thấy (06 §5).

Tương tác: khóa chạm 0.6 s sau khi sheet hiện (polish §9.9); chạm thẻ = chọn → thẻ nảy 8 px + nháy trắng 1 khung + sfx_card_pick, thẻ khác tối, giữ 0.5 s → sheet rơi xuống, anh hùng xuống nốt thang; nhấn giữ 0.4 s = Chi tiết (S09: mô tả đầy đủ, chuỗi đòn của lộ trình bằng icon loại đòn, điều kiện xuất hiện, thẻ liên quan; nhả tay không chọn). Auto-Pick: vành đếm 3 s (1.5 s ở ≥ x2) quanh thẻ được chọn, chạm bất kỳ → dừng. Lần lật thẻ: 3 thẻ lật lần lượt 0.08 s, âm theo độ hiếm (sfx_echo_*), thẻ L/EVO thêm ui_card_flip + tia.

4.5 Chiếu Nghỉ & Cổng Boss (S10, S11)

Bottom sheet cùng khung với S08: ảnh sự kiện 270×110 art (1080×440) trên đầu sheet (không bấm được), tiêu đề 48, mô tả 32–40 (≤ 3 dòng), 2–3 lựa chọn 1,000×136 xếp dọc trong vùng y ≥ 1,056, mỗi lựa chọn có chip giá (Than Hồng/HP) bên phải; "Rời đi" luôn là nút cuối (px_btn_dark). Thương Nhân (LD01, LD00): 3 thẻ Hồi Âm mặt nhỏ (238×420, icon 56-crop) + giá + [Mua]. Cổng Boss thêm thẻ gợi ý Boss: chân dung 32×32 art, 3 dòng ("Đòn nặng đỏ: Gạt được", "Mũi tên đỏ thẫm: chỉ Né", "Vỡ Thế → Tuyệt Sát 10% Max HP").

4.6 Gục / Hồi sinh (S13)

┌─────────────── ĐÈN HỒN CHẬP CHỜN ───────────────┐ (sheet neo đáy, y 980)
│      (Kaito quỳ, đèn hồn nhấp nháy — clip downed)│
│      vòng đếm 8 s · B23 · còn 2 tầng tới Boss   │
│ [Hồi sinh miễn phí (Cây D07)]                    │ nếu có
│ [▶ Hồi sinh — Quảng cáo]                         │ ≤ 1/run
│ [Hồi sinh — 100 KC]                               │ ≤ 1/run
│ [Bỏ cuộc]                                         │
└───────────────────────────────────────────────────┘

Popup ép chọn: ClickBackgroundToExit ✗, back = Bỏ cuộc (xác nhận). Nút xếp dọc 1,000×136 ở y ≥ 1,240. Hết giờ = Bỏ cuộc. Không quảng cáo → nút xám "Chưa có quảng cáo".

4.7 Kết Quả (S14)

┌──────────────────── KẾT QUẢ ────────────────────┐
│        B37 · SẢNH NGẬP      ★ KỶ LỤC MỚI!        │ 64
│ Kaito ngã trước Thủ Vệ Thuyền Trưởng Chìm (B35)  │ lý do + gợi ý + [Rèn Luyện]
│ ┌ Phần thưởng ─────────────────────────────┐    │
│ │ Vàng 8,420 · Tro Hồn 46 · EXP 830          │    │
│ │ XP Thông Thạo +52 · Rương ×2               │    │
│ └────────────────────────────────────────────┘    │
│ ┌ Phòng thủ ────────────────────────────────┐    │
│ │ [■■■■■■■■■■■■■□□□□□] Gạt 31 · Chặn 14 · Né 17 · Trúng 38 %│
│ │ Gạt Hoàn Hảo 38 · Chuỗi Gạt dài nhất 7 · Va Kiếm 12 │
│ │ Tuyệt Sát 41 · Phong Độ cao nhất SS                 │
│ └────────────────────────────────────────────┘    │
│ ┌ Lộ trình dùng nhiều ──────────────────────┐    │
│ │ ◆ Trăng Khuyết Rút Đao ████████████ 18%     │    │
│ │ ● Nhất Thiểm           ████████ 12%         │    │
│ │ … (top 8; ◆ = từ Hồi Âm, ● = gốc)           │    │
│ └────────────────────────────────────────────┘    │
│ [▶ x2 Quảng cáo]                 [ TIẾP TỤC ]    │ y ≥ 1,600
│          (Auto-Rerun: run mới sau 5…)            │
└──────────────────────────────────────────────────┘

• Thanh phòng thủ chồng 4 màu theo token (ds-posture Gạt, metal Chặn, ds-guard Né, ds-hp Trúng) kèm icon hình từng loại; số % tính trên đòn địch đã roll.
• Biểu đồ lộ trình: thanh ngang bước 4 px, tối đa 8 dòng, % = số lần chọn / tổng; nhấn dòng → mở S18 xem đòn.
• Run 1–3: bản gọn (ẩn khối Phòng thủ + Lộ trình sau "Xem phân tích"); từ run 4 bản đủ. Sau TIẾP TỤC: S15 (Hồi Âm mới mở) nếu có → Home. Quảng cáo xen kẽ chỉ ở đây hoặc rời tầng Boss (INV-10).

4.8 Sảnh Anh Hùng (S16)

Lưới 2 cột (thẻ 488×640, cách 24, ScrollLoopTemplate): anh hùng idle ×4 trên bệ (sprite thế giới qua RenderTexture ×4 — cùng cỡ pixel), tên 40, danh hiệu 32, huy hiệu độ hiếm, ★ hàng sao, Lv, vòng Thông Thạo 0–20. Chưa sở hữu: bóng ink đặc + nguồn ("Quà hạ Boss B20 lần đầu") + mảnh x/y. Đang chọn: viền ds-lantern 1 art px + ✓. Chấm đỏ: nâng cấp/sao được. Chỉ 8 anh hùng ra mắt (không ô "sắp ra mắt").

4.9 Chi tiết anh hùng (S17) & Cây Combo (S18)

┌──────────────────────────────────────────────┐
│ ◄ KAITO — Lãng Nhân Cuối Cùng    ★★☆☆☆☆  R  │
│ ┌─ diorama 270×200 art (1080×800) ─────────┐ │ anh hùng vs hình nộm rơm
│ │   Kaito ⟶ ⚔ hình nộm  (lộ trình đang xem)│ │ hit-stop, VFX, chữ chiến đấu thật
│ └───────────────────────────────────────────┘ │
│ [Tổng quan][Cây Combo][Hồi Âm][Trang Phục]    │ tab
│ Lv18/30 · ATK 412 · HP 3,980                   │
│ Gạt 15% · Chặn 8% · Né 10% · Ý Kiếm (3)        │
│ Thông Thạo 6 ▬▬▬▬○ 120/170 XP                  │
│ [Nâng sao 18/40]            [ NÂNG CẤP 2,340 ] │
└──────────────────────────────────────────────┘

• Cây Combo: danh sách nhóm theo loại lộ trình (GROUND ×5, LAUNCH, AIR, CROWD, BREAK, GAP, WALL/OTG, SIGNATURE + nhóm "Từ Hồi Âm"); mỗi dòng: tên, chuỗi icon loại đòn (8×8 art: chém, đâm, hất, trên không, đập, xoay, túm), điều kiện bằng lời ("Khi địch ở gần", "Khi địch đang thủ"), sức mạnh ●●●○ — không id, không số nội bộ (06 §9). Chạm → diorama phát lộ trình lặp (từng đòn có tên Tiny5 32 bên dưới). Lộ trình Hồi Âm chưa mở: xám + "Mở ở Thông Thạo 6".
• Hồi Âm: lưới icon động theo Thông Thạo mở khóa; chưa mở → bóng + cấp mở.
• Trang Phục (S19): đổi LUT hoặc costume (02 §3.4) xem ngay trong diorama; giá IAP/KC; thưởng sưu tầm +1% ATK.

4.10 Triệu Hồi (S25)

Banner: anh hùng nổi bật idle ×4 + nền diorama sự kiện, thời gian còn lại (cooldown sống), tỉ lệ (GachaRateInfo), pity "Huyền Thoại chắc chắn sau N lượt". Nút [x1] (phụ) [x10] (chính), mỗi nút ghi giá Ấn Triệu Hồi hoặc KC theo 09 §4 (ưu tiên trừ Ấn). Lộ diện: đèn hồn rơi xuống trục thang, màu theo độ hiếm (R water, E arcane, L gold + loot_beam), anh hùng mới phát clip intro, mảnh trùng hiện "+10 Mảnh"; x10 lộ từng ô, chạm để bỏ qua (giữ L vẫn dừng 1 nhịp).

4.11 Màn meta khác

5Danh sách màn hình

6Luồng

flowchart TD
  A[S01 Splash] -->|lần đầu| B[S02 Cinematic] --> R1[Run B1 FTUE]
  A -->|đã chơi| H[S03 Trạm Đầu Thang]
  H -->|run dở| C{Tiếp tục?} -->|Có| RUN
  C -->|Bỏ| X[S14 Kết Quả] --> H
  H -->|XUỐNG THANG| P[S04 Chuẩn bị] --> RUN[S05 HUD trận]
  RUN -->|hạ hết wave| D{x3/x7/x9?}
  D -->|có| L[S10/S11 Chiếu Nghỉ · Cổng Boss] --> E
  D -->|không| E[S08 Chọn Hồi Âm khi đi xuống] --> RUN
  RUN -->|tầng x0| BI[S12 BossIntro] --> RUN
  RUN -->|HP = 0| V[S13 Gục] -->|hồi sinh| RUN
  V -->|bỏ cuộc / hết giờ| X
  RUN -->|II| PZ[S06 Tạm dừng] -->|Xem Build| BV[S07] --> PZ
  PZ -->|Bỏ cuộc| X
  X -->|Auto-Rerun| RUN
  X -->|Hồi Âm mới| U[S15] --> H

flowchart LR
  H[Trạm] --> HH[S16 Sảnh Anh Hùng] --> HD[S17 Chi tiết] --> CT[S18 Cây Combo]
  HD -->|Nâng cấp / Nâng sao| HD
  HD -->|Chọn| H
  H --> SH[S24 Cửa Hàng] --> SU[S25 Triệu Hồi] -->|anh hùng mới| HD
  SH --> RC[S26 Rương Di Vật] --> RL[S22 Di Vật]
  H --> TR[S20 Rèn Luyện] --> LT[S21 Cây Đèn Hồn]

7Trạng thái & badge (polish §9.10)

Chấm đỏ (GameNotification, góc trên phải, −20/−20): nhiệm vụ nhận được · Rèn Luyện rẻ nhất đủ tiền · nút Cây mở được · anh hùng nâng cấp/sao được · Hồi Âm mới trong Sổ · thư chưa đọc · Pass có thưởng · AFK ≥ 2 h · lộ trình mới chưa xem (chip Build).

8Cài đặt (S36)

9Rung (VibrateManager)

Không rung theo từng hit thường; trần toàn cục 1 rung / 150 ms; tắt khi Tiết kiệm pin.

10Tiếp cận

• Báo hiệu không chỉ bằng màu: ! / mũi tên / sóng / bàn tay / đường ngắm / dither đất là 6 hình khác nhau; đỏ #ff2040 vs đỏ thẫm #a0102a còn khác độ sáng (L* 55 vs 34) — phân biệt được ở protanopia/deuteranopia (kiểm bằng mô phỏng mù màu khi QA). Chế độ tương phản cao §8.
• Độ hiếm: huy hiệu hình (06 §3) + màu; phòng thủ: icon riêng mỗi loại.
• Chữ ≥ 32; vùng chạm ≥ 112 (đa số ≥ 128); nhấn giữ thay cho chạm đúp.
• Giảm nhấp nháy tắt mọi nháy toàn màn (01 §14.2); không nháy > 3 lần/giây ở vùng > 25% màn.
• Không thông tin chỉ có ở âm thanh (mọi âm báo hiệu đều có glyph).

11Bản địa hóa

Với Tiny5, chuỗi VI thường dài hơn EN (đo: "Combo mới: chém–hất tung–3 nhát trên không" 624 vs "New combo: cut, launch, 3 air slashes" 508 @32); layout tính theo chuỗi dài nhất của mỗi key ở cả hai ngôn ngữ. Số: phân tách nghìn theo ngôn ngữ, rút gọn K/M/B/aa (01 §4.1).

12QA checklist

• [ ] Mọi màn chụp ở 1080×1920, 1080×2520, 1536×2048 (+1125×2436 SafeArea): không lỗ, nền phủ kín, phần tử neo cạnh không rời khối.
• [ ] Cỡ chữ chỉ 32/40/48/56/64/72; chữ Việt nhiều dòng lineSpacing 1.25, dấu không chạm dòng trên.
• [ ] Trong run: không phần tử bấm được ở y < 1,056 trừ Tạm dừng/Tốc độ (INV-07) — gồm EchoPick, Chiếu Nghỉ, Gục, Tạm dừng.
• [ ] EchoPick 3 và 4 thẻ vừa khung 1080×1920 với chuỗi dài nhất (tên 24 ký tự, dòng ngắn 40 ký tự VI/EN).
• [ ] Chữ phòng thủ & số sát thương xuất hiện đúng hit-frame địch (so log tick).
• [ ] Mọi sprite UI ×4 (không ×8, không scale lẻ); vị trí bội 4.
• [ ] Một CTA chính/màn; nút khóa có lý do; không "sắp ra mắt".
• [ ] Mọi chuỗi tĩnh có LocalizesUI + key VI/EN; chuỗi động không có.
• [ ] Giảm nhấp nháy tắt mọi nháy toàn màn; tương phản cao đổi glyph.
• [ ] Popup thường: chạm ngoài + back đóng; Gục/Chọn Hồi Âm: ép chọn.