# Signboard
Biển tên quán: tấm giấy kem viền gỗ ở đầu màn chuẩn bị (bấm để đổi tên), và biển gỗ tối ở cửa tiệm trên màn Xuống Phố.

## Khi nào dùng
- Hiện tên quán ngay dưới mái hiên. Có thể sửa tên thì dùng nút kèm icon bút.
- Biến thể `--door` chỉ dùng ở cửa tiệm, kèm hai đèn lồng 🏮.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Tên quán | `tt-signboard` > `tt-signboard__plate` | Chỉ hiển thị |
| Sửa được | `tt-signboard__plate tt-signboard__plate--editable` | Là `<button>`, kèm `tt-signboard__hint` chứa icon bút |
| Cửa tiệm | `tt-signboard tt-signboard--door` > `tt-signboard__plate tt-signboard__plate--door` | Biển gỗ tối, viền `gold`, chữ `tt-signboard__name` |

## Cấu trúc
```html
<div class="tt-signboard">
  <button class="tt-signboard__plate tt-signboard__plate--editable" aria-label="Đổi tên quán">Tiệm Trà Mơ Ước<small class="tt-signboard__hint"><img class="tt-ico" src="assets/Icons/ic_pen.png" alt=""></small></button>
</div>
<div class="tt-signboard tt-signboard--door">
  <div class="tt-signboard__plate tt-signboard__plate--door">
    <span aria-hidden="true">🏮</span><span class="tt-signboard__name">Tiệm Trà Mơ Ước</span><span aria-hidden="true">🏮</span>
  </div>
</div>
```
Tên quán do người chơi nhập: gán bằng `textContent`.

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Tên dài | Cắt `…`, không xuống dòng (chữ biển cửa tiệm tối đa 260px) |
| `--editable` | Con trỏ tay, có icon bút mờ .6 |
| Focus bàn phím | Vòng `focus-ring` 3px |

## Token sử dụng
`counter`, `sign-paper`, `sign-ink`, `shadow-sign`, `radius-14`, `space-12`; `alpha-sign-hint` (độ đục gợi ý ✎); biển cửa: `gold-lit` (tên quán và viền, thay cho `gold`), `wood-dark`, `outline`, `on-fill`, `shadow-toast`, `space-8`.

## Khả năng tiếp cận
- Nút sửa tên cần `aria-label="Đổi tên quán"`; icon bút `alt=""`.
- Biển cửa chỉ là chữ, đèn lồng `aria-hidden`.
- `sign-ink` trên `sign-paper` đạt 7.04:1.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Một biển tên mỗi màn hình | Đặt biển cửa lên màn chuẩn bị |
| Dùng `<button>` khi bấm được | Dùng `<div>` có `onclick` |
| Đặt biển sát mái hiên (margin âm −10px đè lên viền vỏ sò) | Đặt biển cách mái hiên quá xa |

## Nguồn
`.sign`, `.sign button`, `.sign button small` — css/style.css; markup trong `menuBoard()` — js/game.js. Biến thể cửa: `.frontshop-door-plaque`, `.frontshop-door-name` (index.html dòng 117). Đổi màu gần nhất: nền gradient `#4a1e12→#2a0f08` thành `wood-dark→outline`; viền `#f59e0b` và chữ `#fef08a` thành `gold`; bóng đổ nặng hơn thành `shadow-toast`.