# PatienceBar
Thanh kiên nhẫn của khách đang đứng giữa quầy: nhãn "KIÊN NHẪN" và thanh viền đậm vơi dần, xanh rồi vàng rồi đỏ.

## Khi nào dùng
- Dưới lời gọi món của khách ở quầy pha (bong bóng 464px trên sân khấu 768×1376).
- Khối này được vẽ trên tranh quầy (màu `stage-*`, chữ `stage-ink`), chỉ dùng trong `tt-stage` hoặc trên nền `stage-ground`/`stage-paper`; đặt thẳng lên nền theme thì nhãn "KIÊN NHẪN" mất tương phản ở Đêm dịu.
- Thẻ khách nhỏ trong làn dùng `tt-progress--patience` (mảnh 5px), không dùng khối này.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Còn nhiều | `tt-patience` | Trên 50%: fill `patience` (xanh nhạt) |
| Vừa phải | `tt-patience is-mid` | 26–50%: fill `gold` |
| Sắp hết | `tt-patience is-low` | Tới 25%: fill `warn` |

## Cấu trúc
```html
<div class="tt-patience">
  <span>KIÊN NHẪN</span>
  <div class="tt-patience__bar" role="progressbar" aria-label="Độ kiên nhẫn của Bé Na"
       aria-valuemin="0" aria-valuemax="100" aria-valuenow="82">
    <i class="tt-patience__fill" style="width:82%"></i>
  </div>
</div>
```
Cỡ: px của sân khấu (cao 20px, viền 3px, nhãn 17px). Preview chạy ở px gốc vì thanh co giãn theo bề rộng khung; đặt trong `.tt-stage` đã scale thì giữ nguyên.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Đổi mức | `width` chuyển 0.25s tuyến tính |
| `is-mid` / `is-low` | Đổi màu fill; do `TTMU.patience` bật theo ngưỡng 50% / 25% |

## Hành vi JS
`TTMU.patience(root)` gắn một lần (`data-tt-bound`), trả về `{ value, set(fraction), destroy() }` hoặc `null` nếu đã gắn.
```js
var p = TTMU.patience(document.querySelector('.tt-patience'));
p.set(0.4); // width 40%, aria-valuenow 40, bật is-mid
```
`set` kẹp 0..1 (giá trị lạ thành 0), bỏ qua lần set trùng phần trăm như `_lastPct` của game, đặt cả `aria-valuetext` ("Còn 40%").

## Token sử dụng
`outline`, `stage-paper`, `stage-ink`, `patience`, `gold`, `warn`, `radius-6/10`, `space-8`.

## Khả năng tiếp cận
- Thanh có `role="progressbar"`, `aria-valuemin/max/now` và `aria-label` tên khách.
- Không chỉ dựa vào màu: lời gọi món và nhịp quầy vẫn báo khách sắp đi.
- Chuyển động width ngắn (.25s), tắt khi `prefers-reduced-motion`.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Gọi `set()` mỗi nhịp tick của quầy với tỉ lệ còn lại | Tự ghi `width` mà quên `aria-valuenow` |
| Dùng ở px sân khấu | Dùng trong thẻ khách 172px (dùng `tt-progress--patience`) |

## Nguồn
`.q3pat`, `.q3bar`, `.q3bar i` — css/style.css dòng 618–620; màu theo `updPat()` trong js/game.js (xanh `#8fcf8f` khi còn trên 50%, `#f4c04a` trên 25%, `#f08a8a` còn lại).
- `#f4c04a` đổi `gold`, `#f08a8a` đổi `warn` (token gần vai trò nhất).
- Ngưỡng mất sao nằm ở `stars()`: đợi quá 45% / 78% / 92% thời gian chờ thì mỗi mốc trừ 1★; thanh đổi màu theo phần còn lại 50% / 25%, không trùng với mốc sao.
- Nhãn "KIÊN NHẪN" là chữ của game; game không có nhãn thời gian.