Cel Shading

# Visual style: Cel Shading

A rendering style inspired by traditional cel animation, featuring bold black outlines, flat color fills, hard shadows without gradients, and vivid saturated colors full of cartoon and game energy.

## Philosophy
Cel Shading (Toon Shading) simulates the visual effect of traditional hand-drawn animation.

Core principles:
- Bold black outlines: all elements have distinct 3px black borders
- Flat color fills: using solid colors with no gradients
- Hard shadows: shadows are solid offsets, not blurred
- High saturation: vivid colors with strong contrast
- Game-like UI: buttons and cards feel lively like game menus
- Frame-skipping feel: interactions are extremely brief, simulating keyframes rather than smooth transitions

## Do
- Use 3px bold black borders on all elements border-[3px] border-[#1a1a2e]
- Hard shadow effect shadow-[3px_3px_0_#1a1a2e]
- Use solid color fills, no gradients bg-[#e63946]
- Bold fonts font-black uppercase
- Click interaction: shadow shrinks + offset hover:translate-x-0.5
- High-saturation palette: red, blue, green, yellow
- Use extremely short duration-75 to simulate animation frame-skipping
- On active, apply scale-x-110 scale-y-90 for Squash & Stretch
- On hover, a white highlight diagonal stripe sweeps across the button

## Don't
- Do not use gradient colors (maintain flat color fills)
- Do not use blurred shadows shadow-lg
- Do not use thin borders border
- Do not use low-saturation or grayish tones
- Do not use smooth transitions above duration-300 (too soft)
- Do not use ease-in-out (cartoon physics uses linear or ease-in)

## Rules for the AI
You are designing in Cel Shading (Toon Shading) style.
- All elements MUST have 3px solid black borders: border-[3px] border-[#1a1a2e]
- Use hard offset shadows ONLY: shadow-[3px_3px_0_#1a1a2e] or shadow-[4px_4px_0_#1a1a2e]
- NO gradients, NO blur shadows, NO soft edges
- Flat saturated colors: #e63946, #4ea8de, #2ecc71, #f1c40f
- Text is always bold/black weight and uppercase
- Light background #fafaf5 with dark ink outlines
- Think "video game menu" or "cartoon UI"

Animation & Interaction Rules:
- Anime Physics: Use extremely short transitions (duration-75) to simulate 2D animation keyframes. Avoid silky smooth easing.
- Squash & Stretch: On :active, use cartoon physics -- active:scale-x-110 active:scale-y-90 -- combined with translate toward click direction.
- Zero-Blur Impact: On :active, hard shadow must instantly snap to zero (active:shadow-none), creating a strong physical "hit" sensation.
- Toon Highlight: On hover, a white diagonal stripe (bg-white/30 -skew-x-12) sweeps across the button via translate-x from off-screen to [200%], simulating cel shading's hard specular highlight.
- Hover Lift: Elements can hover:-translate-y-1 with expanded shadow to "charge up" before clicking.