---
description: Standards for building LitElement UI components in src/ui/
globs: src/ui/**
alwaysApply: false
---

# **UI Component Standards**

## **Framework**

- Use **LitElement** for all UI components.
- Styles must be scoped within static get styles().

## **Integration Logic**

1. **Event-Driven:** UI components must **never** reference the GameLoop or GameStateManager directly for write operations.
   - _Wrong:_ gameLoop.startLevel()
   - _Right:_ this.dispatchEvent(new CustomEvent('start-level', ...))
2. **Data Binding:** Components should accept data via **Properties** (static get properties()) or **Subscriptions** to Singleton EventTargets (e.g., gameStateManager).
3. **Lazy Loading:** Large UI screens (TeamBuilder, MissionBoard) must be designed to be dynamically imported only when needed.

## **Visuals**

- **Aesthetic:** "Voxel-Web" / High-Tech Fantasy.
  - Fonts: Monospace ('Courier New').
  - Colors: Dark backgrounds (rgba(0,0,0,0.8)), Neon accents (Cyan, Gold, Green).
  - Elements: Borders should look like pixel art or voxel edges.
- **Responsive:** All screens must support Mobile (vertical stack) and Desktop (horizontal layout). Use CSS Grid/Flexbox.
- **Accessibility:** Interactive elements must be \<button\>. Use aria-label for icon-only buttons.