# SplashScreen
Màn chào khi mở game: tranh tiệm trà vẽ tay, tên game, tagline, dòng chủ quán, thanh loading rồi nút "Vào tiệm".

## Khi nào dùng
- Một lần lúc mở game, phủ toàn màn hình, trong lúc tải tài nguyên.
- Vẽ trên sân khấu cố định 768×1376 và scale vừa màn bằng `TTMU.fitStage`.

## Biến thể
| Phần | Lớp | Nội dung |
|---|---|---|
| Khung | `tt-stage-frame tt-splash` | Nền `stage-ground` quanh sân khấu |
| Sân khấu | `tt-stage` | Chứa ảnh nền `tt-splash__art` (splash2.jpg) |
| Chữ | `tt-splash__title`, `__tagline`, `__owner` | Tên game 72px viền kem, tagline, "Quán · Ngày · tiền" |
| Chân | `tt-splash__foot` | `__message`, `__bar` (+ `__fill`, `__percent`), `__go`, `__help` |
| Phiên bản | `tt-splash__version` | "12.47.144" |

## Cấu trúc
```html
<div class="tt-stage-frame tt-splash">
  <div class="tt-stage" id="stage">
    <img class="tt-splash__art" src="assets/Scenes/splash2.jpg" alt="">
    <h1 class="tt-splash__title">Tiệm Trà Mơ Ước</h1>
    <p class="tt-splash__tagline">Pha trà, đón khách, mở tiệm nhỏ của riêng bạn</p>
    <p class="tt-splash__owner">Quán Test Local · Ngày 2 · 237,5k</p>
    <div class="tt-splash__foot">
      <div class="tt-splash__message">Sắp mở cửa…</div>
      <div class="tt-splash__bar" role="progressbar" aria-label="Đang tải game" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72">
        <i class="tt-splash__fill" style="width: 72%"></i><span class="tt-splash__percent">72%</span>
      </div>
      <button class="tt-splash__go" hidden>Vào tiệm</button>
    </div>
    <div class="tt-splash__version">12.47.144</div>
  </div>
</div>
<script>TTMU.fitStage(document.getElementById('stage'), { maxHeight: 520 });</script>
```
Cập nhật `width` của `__fill`, chữ `__percent` và `aria-valuenow` khi tải; xong thì ẩn (`hidden`) `__message` và `__bar`, hiện `__go`. Tuỳ chọn thêm `tt-stage__tint` ở cuối sân khấu để tô theo theme.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Đang tải | Thông báo xoay vòng ("Đang nấu trân châu…", "Sắp mở cửa…") và thanh loading có % |
| Tải xong | Nút `__go` ("Vào tiệm"; game gốc ghi "Chơi tiếp" hoặc "Bắt đầu"), thêm `__help` |
| `__go:active` | Nút lún 5px, cạnh 3D co còn 2px |

## Token sử dụng
`stage-ground`, `stage-paper`, `stage-ink`, `stage-soft`, `stage-accent`, `stage-track`, `stage-fill` (phần đã tải), `shadow-fill-edge` (cạnh sáng của phần đã tải ở `hc`), `stage-pink`, `stage-pink-d`, `alpha-splash-version`, `on-fill`, `outline`, `radius-24`.

## Khả năng tiếp cận
- Thanh loading có `role="progressbar"`, `aria-valuemin/max/now` và `aria-label`.
- Chữ trắng `%` trên rãnh sáng `stage-track` có độ tương phản thấp khi phần tải còn ít: giữ đúng game, vì vậy luôn kèm thông báo chữ ở trên.
- Ảnh nền `alt=""`; tên game là `<h1>`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Luôn dùng `fitStage`, không tự scale | Đặt kích thước bằng % trong sân khấu |
| Chỉ hiện nút khi đã tải xong | Cho bấm vào tiệm lúc dữ liệu chưa sẵn sàng |
| Tên chủ quán gán bằng `textContent` | Chèn HTML từ tên người chơi |

## Nguồn
`.splash`, `.sp4`, `.sp4-st`, `.sp4-t`, `.sp4-tag`, `.sp4-me`, `.sp4-foot`, `.sp4-msg`, `.sp4-bar`, `.sp4-go`, `.sp4-help`, `.sp4-ver` — css/style.css; `showSplash()` — js/game.js. Màu viền chữ `#fff8ee` thành `stage-paper`. Không đưa vào: đèn lồng, mây, sticker nổi, mèo ngủ (hoạt hoạ trang trí của tranh).