Ui Work

Use this workflow:

1. Classify the issue first: HUD layout, world camera framing, boot/menu flow, or page/container CSS.
2. Edit UIScene.ts for fixed-screen UI. Edit GameScene.ts only for world camera or scene-level overlays. Edit main.ts only for viewport/bootstrap behavior.
3. Use viewport-based layout math for anchored elements. Recompute positions on resize.
4. Keep minimap, stats, floor text, HP bar, coins, and hotkeys attached to screen edges instead of virtual camera space.
5. If text is added or changed, update localization paths instead of hardcoding one language.
6. Build after edits with npm run build.

Use these heuristics:

• If the player sees the wrong amount of world, inspect GameScene camera zoom logic.
• If HUD pieces drift, disappear, or cluster incorrectly, inspect UIScene viewport math and explicit scale values.
• If the canvas or page scrolls, inspect index.html and main.ts before touching scene code.
• If a new gameplay state needs UI, prefer emitting state through scene events and handling the draw logic in UIScene.

Before finishing, verify:

• HUD remains visible and anchored after resize
• UI scale matches the intended feel at the baseline viewport
• world camera framing and UI layout are not solving each other’s problems
• npm run build passes