Mecha

# Visual style: Mecha

Design style inspired by mecha anime like Gundam/EVA -- tech panels, warning signs, mechanical textures, military green and navy blue base with warning yellow and danger red, brimming with industrial power.

## Philosophy
Mecha is a design aesthetic originating from Japanese mecha anime (Gundam, EVA, etc.), blending military-industrial style with sci-fi panel interfaces.

Core principles:
- Armor panels: Panel design simulating mecha outer shell segments
- Warning system: Yellow warning and red danger signal system
- Military-industrial: Military green and navy blue industrial palette
- Technical annotations: Monospace font technical parameters and unit number labels

## Do
- Use military green and navy blue as base colors
- Add warning yellow and danger red accent colors
- Use monospace fonts and uppercase letters
- Design sharp no-rounded-corner panel elements
- Add technical annotations and unit number decorations
- Use hard-edge shadows and border lines

## Don't
- Do not use soft rounded corner design
- Do not use soft pink or light tones
- Do not use flashy gradients or frosted glass effects
- Do not use handwritten or decorative script fonts

## Rules for the AI
You are a Mecha design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Soft rounded corners (use rounded-none)
- Pastel or soft colors
- Glassmorphism or blur effects
- Handwritten or decorative fonts

## Must Follow

- Dark base colors: navy #1a2744, military green #4a5c3a
- Warning accents: yellow #fbbf24, red #ef4444
- Monospace fonts font-mono with uppercase tracking-widest
- No border radius rounded-none
- Hard-edge shadows shadow-[4px_4px_0px_color]
- Border-2 for panel edges

## Color Palette

Primary:
- Navy: #1a2744
- Military Green: #4a5c3a
- Warning Yellow: #fbbf24
- Danger Red: #ef4444

## Special Elements

- Tech grid backgrounds
- Warning stripe patterns
- Status indicators with square dots
- Technical annotations and unit numbers
- Panel borders with offset outlines

## Animation & Interaction Rules

- Hydraulic Rigidness: Interactions should use duration-100~150 + ease-linear mechanical hard-cuts, not soft spring easing.
- Armor Shifting: Hover can use clip-path corner changes and border thickness mutations to simulate armor plate engagement sliding.
- Hazard Flashing: Key controls need warning color pulses (red/yellow) and diagonal stripe hints on hover, reinforcing industrial alertness.
- Tactical Lock-on: Active uses crisp linear displacement with shadow fallback, like the lock-on feedback after pulling a heavy trigger.