# IconButton
Nút tròn chỉ có icon PNG, dùng cho Tạm dừng, Cài đặt và Kho hàng ở thanh HUD lúc đang bán.

## Khi nào dùng
- Hành động có icon quen thuộc, không đủ chỗ cho chữ (thanh HUD).
- Dùng `--sm` (28px) khi nằm trong lưới nút nhỏ của HUD.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Mặc định | `tt-iconbutton` | 36px tròn, viền 2px `line`, nền `panel`, icon 26px |
| Nhỏ | `tt-iconbutton tt-iconbutton--sm` | 28px tròn, icon 18px |

## Cấu trúc
```html
<button class="tt-iconbutton" aria-label="Tạm dừng">
  <img class="tt-iconbutton__icon" src="assets/Icons/ic_pause.png" alt="">
</button>
```

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Mặc định | Viền `line`, nền `panel` |
| `:disabled` | Opacity .4, con trỏ `not-allowed` (bổ sung, game không có) |
| Focus bàn phím | Vòng `focus-ring` 3px |

## Token sử dụng
`panel`, `line`, `ink`, `radius-round`.

## Khả năng tiếp cận
- Bắt buộc có `aria-label` mô tả hành động ("Tạm dừng", "Cài đặt"); ảnh bên trong để `alt=""`.
- Vùng bấm 28px của `--sm` nhỏ hơn 44px khuyến nghị: chỉ dùng khi bố cục buộc phải thế, như game.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Dùng icon PNG của game (ic_pause, ic_set, ic_pearlbowl) | Dùng emoji thay icon giao diện |
| Luôn có `aria-label` | Để nút không có tên |

## Nguồn
`.pbtn`, `.pbtn .ico`, `.h-btns-grid .pbtn` (28px, icon 18px) — css/style.css. Các `!important` của luật `.h-btns-grid .pbtn` không được chép; `display:none` ngoài lúc bán (`body.selling`) là trạng thái của màn hình, không thuộc component.