Cursor rule

1---
2description: Genesis Colonies industrial sci-fi UI — angular panels, no pill/mobile-app look
3alwaysApply: true
4---
5 
6# Genesis Colonies — UI Design Language
7 
8Genesis Colonies uses a **sharp, industrial sci-fi** visual language (military / technical / colony-industrial).
9 
10## Forbidden
11 
12- Large `border-radius` on panels, cards, modals, popovers, tooltips
13- Modern **pill** buttons or chip styling (`border-radius: 999px`, fully rounded badges)
14- Strongly rounded cards or bubble / mobile-app aesthetics
15- Soft, consumer-SaaS rounding as default for new components
16 
17## Required
18 
19- Rectangular panels with clear edges
20- Thin, technical borders
21- Subtle chamfered or square corners only
22- Sci-fi / military / industrial tone
23 
24## Radius guidelines
25 
26| Element | Radius |
27|---------|--------|
28| Panels / cards | 0–4px (prefer **0–2px**) |
29| Buttons | max **2–4px** |
30| Chips / badges | angular — use `--gc-radius-sm` (2px), not pills |
31| Modals / popovers / tooltips | same as panels |
32 
33Use existing tokens in `static/style.css`:
34 
35- `--gc-radius-xs` (0px) through `--gc-radius-lg` (4px)
36- `--gc-radius-pill` is **2px** in this project — not a true pill; do not use `999px` for new UI
37 
38**Exception:** `border-radius: 50%` only for intentional circles (avatars, status dots, orbital markers).
39 
40## When building or reviewing UI
41 
421. Prefer `var(--gc-radius-sm)` or `0` over literal `6px+` or `999px`.
432. On PE / expansion / command-map work, audit new classes for accidental rounding.
443. Match surrounding `gc-btn`, `gc-panel`, and HUD patterns — do not introduce a softer sub-style.
45 
46## Known PE outliers (align when touching those files)
47 
48- `.pe-tech-reward-chip` — currently `999px`; should become `--gc-radius-sm` in a focused UI pass.
49 
50## Global shared components — no accidental layout regressions
51 
52Existing **global UI components must not unintentionally change layout** during feature work.
53 
54Especially protected:
55 
56- Queue cards (`.gc-card-queue-*`, `.gc-mini-queue-*`)
57- Header / planet switcher
58- Resource bar
59- Fleet header
60- Sidebar navigation
61- Card system (`.gc-building-card`, `.gc-research-card`, `.gc-panel`, …)
62 
63When editing shared CSS (`.gc-*`, `.card-*`, `.queue-*`, `.header-*`):
64 
651. **Grep** which templates/pages still use the class.
662. Check whether the change affects **all** consumers (Buildings, Research, Shipyard, Defense, Planet Evolution, …).
673. Prefer **scoped** selectors (page prefix, component modifier) over changing a global rule.
684. Add or extend a **CSS contract test** in `tests/test_queue_card_global_ux.py` or similar when layout behavior is canonical.
69 
70### Completion report (required when global CSS changed)
71 
72If a ticket touches **global** classes (`.gc-*`, `.queue-*`, `.header-*`, `.card-*`), the implementation summary must list which pages were **visually or contract-checked**:
73 
74- [ ] Buildings
75- [ ] Research
76- [ ] Shipyard
77- [ ] Defense
78- [ ] Planet Evolution
79- [ ] Overview
80 
81Unchecked pages must be called out explicitly. Takes minutes; prevents regressions like the horizontal queue card layout break.
82