# Mascot
Linh vật mèo đứng ở mặt tiền: chạm để chào mời khách, có bong bóng lời nhắc, nhãn nhỏ phía dưới và trạng thái hồi chiêu đếm ngược.

## Khi nào dùng
- Nút chào mời khách ở màn mặt tiền (+20s kiên nhẫn, hồi chiêu 5 phút).
- Lời nhắc ngắn của linh vật (dùng lại `tt-bubble--mascot` của Bubble).
- Không dùng làm avatar nhân vật có tên: dùng Character.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Sẵn sàng | `tt-mascot is-ready` | Mèo nhún nhẹ (`tt-mascot-idle` 3s), bấm được |
| Hồi chiêu | `tt-mascot is-cooldown` | Mèo mờ và xám, nút khoá, đồng hồ "4:59" |
| Vừa được chạm | `tt-mascot is-cheer` | Nhún mừng 0,6s (game thêm rồi gỡ) |

## Cấu trúc
```html
<div class="tt-mascot is-ready">
  <div class="tt-mascot__say"><div class="tt-bubble tt-bubble--mascot">Chạm vào tớ để chào mời khách nhé!</div></div>
  <button type="button" class="tt-mascot__box" aria-label="Chào mời khách">
    <img class="tt-mascot__img" src="assets/Mascot/cathead.png" alt="">
  </button>
  <span class="tt-mascot__badge">🛡️ BẢO VỆ TIỆM</span>
</div>
```
Hồi chiêu: thêm `disabled`, **bỏ `aria-label`** (nó sẽ đè nội dung nên chữ ẩn không bao giờ được đọc) và để tên nút lấy từ nội dung:
```html
<button type="button" class="tt-mascot__box" disabled>
  <span class="tt-sr-only">Chào mời khách, </span>
  <img class="tt-mascot__img" src="assets/Mascot/cathead.png" alt="">
  <span class="tt-mascot__timer tt-num"><span class="tt-sr-only">hồi chiêu còn </span><span data-tt-timer>4:59</span></span>
</button>
```
Tên truy cập khi đó là "Chào mời khách, hồi chiêu còn 4:59". Cập nhật đồng hồ bằng `textContent` của riêng `[data-tt-timer]`, không gán `textContent` cho `__timer` hay `__box` (sẽ xoá chữ `tt-sr-only`). Có thể dùng `TTMU.countdown` trên một phần tử ngoài nút, hoặc tự đếm rồi ghi vào `[data-tt-timer]`; hết hồi chiêu thì gỡ `disabled`, đổi `is-cooldown` thành `is-ready`, xoá `__timer` và `.tt-sr-only` thêm vào, trả lại `aria-label="Chào mời khách"`. Ảnh `cathead.png` (83×77) là mèo của game.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| `:hover` | Phóng 1.08 (lò xo .2s) |
| `:active` | Thu 0.92 |
| `is-ready` | Nhún lên 5px xoay 1° chu kỳ 3s |
| `is-cooldown` | Ảnh `opacity .5` + xám, `__box:disabled` không phóng, hiện `__timer` |
| `is-cheer` | `tt-mascot-cheer` .6s |

## Token sử dụng
`panel`, `ink`, `line`, `gold`, `on-fill`, `space-2/4/6/8`, `radius-10/16/pill`.

## Khả năng tiếp cận
- Hành động là `<button>` thật; trạng thái sẵn sàng có `aria-label`; hồi chiêu dùng `disabled`, không `aria-label`, tên lấy từ nội dung (chữ `tt-sr-only` đọc "Chào mời khách, hồi chiêu còn 4:59").
- Trạng thái hồi chiêu không chỉ là độ mờ: có đồng hồ bằng chữ và nút khoá.
- Nhãn `__badge`: chữ `on-fill` trên gradient `gold` đậm dần; đạt 7:1 ở `hc` (gold #6e4a00).
- Animation tự tắt khi `prefers-reduced-motion`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Đặt bong bóng đuôi giữa phía trên mèo | Dùng bong bóng thường `tt-bubble` cho lời linh vật |
| Báo thời gian còn lại bằng chữ | Chỉ làm mờ ảnh để báo hồi chiêu |
| Cập nhật đồng hồ bằng `textContent` của `[data-tt-timer]` | Gán `innerHTML` cho lời nhắc có chữ động, hoặc ghi đè `textContent` của cả nút khi đếm |

## Nguồn
`.frontshop-karin-wrap`, `-bubble` (+ `::after`, `floatBubble`), `-img-box` (hover 1.08, active .92, lò xo .2s), `-img` (drop-shadow `0 10px 22px`, `karinIdle` 3s), `-badge` (gradient vàng, viền 1.5px, .68rem 900, margin-top −6px), `karinBounceAnim` — css/style.css dòng 2316–2420; markup index.html dòng 137–143; hồi chiêu `getKarinCooldownRem` — js/game.js.
- Không dùng ảnh Thần Mèo Karin (bản quyền): thay bằng `cathead.png` của game, nhãn đổi thành "BẢO VỆ TIỆM".
- Bổ sung có chủ đích: ảnh rộng 96px (nguồn 155px, nhưng `cathead.png` chỉ 83px nên giữ gần cỡ gốc), đồng hồ hồi chiêu "4:59" ở giữa ảnh.