# Awning
Mái hiên sọc hồng trắng ngay dưới HUD, viền vỏ sò rủ xuống phía dưới.

## Khi nào dùng
- Một lần duy nhất dưới thanh HUD, trên cả màn chuẩn bị và lúc đang bán.
- Lúc đang bán thu mỏng thành `--compact` để nhường chỗ cho quầy.

## Biến thể
| Biến thể | Lớp | Dùng khi |
|---|---|---|
| Đầy đủ | `tt-awning` | Màn chuẩn bị, cao 26px |
| Thu gọn | `tt-awning tt-awning--compact` | Đang bán, cao 10px |

## Cấu trúc
```html
<div class="tt-awning" role="presentation"></div>
<div class="tt-awning tt-awning--compact" role="presentation"></div>
```
Không có nội dung bên trong. Viền vỏ sò vẽ bằng `::after`, tràn 10px xuống dưới nên cần chừa khoảng trống phía dưới (biển tên có `margin-top` 18px).

## Trạng thái
| Trạng thái | Hiệu ứng |
|---|---|
| Mặc định | Sọc `pink` / `awning-white` mỗi sọc 30px, viền vỏ sò dưới |
| `--compact` | Cao 10px (game: `body.selling .awning`) |

## Token sử dụng
`pink`, `awning-white`.

## Khả năng tiếp cận
Chỉ trang trí: dùng `role="presentation"` hoặc `aria-hidden="true"`. Không đặt chữ hay nút lên mái hiên.

## Nên / Không nên
| Nên | Không nên |
|---|---|
| Đặt ngay dưới HUD, rộng hết bề ngang | Bo góc hay thu hẹp mái hiên |
| Chừa 10px phía dưới cho viền vỏ sò | Để phần tử khác đè lên viền vỏ sò |
| Đổi sang `--compact` khi đang bán | Tự đặt `height` khác 26px / 10px |

## Nguồn
`.awning`, `.awning::after`, `body.selling .awning` — css/style.css.