🎨 Color System

Primary Palette:

• Neon Pink (#ff1493) - Primary accents, danger, high energy
• Neon Cyan (#00ffff) - UI borders, secondary accents, tech elements
• Neon Purple (#9d00ff) - Mystical, depth, stack indicators
• Neon Green (#39ff14) - Player identity, success states
• Neon Yellow (#ffff00) - Power, attention, warnings

Usage Rules: Always pair neon colors with corresponding glow effects (box-shadow with 50-80% opacity). Dark backgrounds (#050510) ensure maximum neon contrast.

✍️ Typography & Labeling

• Font Stack: 'Courier New', 'Consolas', monospace for authentic retro-futuristic feel
• Hierarchy: Uppercase for headers/labels, letter-spacing 0.05-0.15em for readability
• Weight: 900 (black) for emphasis, regular for body text
• Effects: Text-shadow glow matching text color for depth and neon realism

⚡ Motion Principles

• Easing: Prefer ease-out for UI, cubic for physics simulation
• Duration: 0.2-0.3s for UI transitions, 0.5-1s for dramatic effects
• Rotation: Slammers rotate 1080deg during flight for dramatic spin
• Scale: Hover states scale 1.05x; avoid jarring jumps
• Persistence: Scanlines, grid, and ring pulses create constant ambient motion

💥 FX Hierarchy

Layered Effects (bottom to top):

• Background: Grid, gradient, scanlines (z:1-10)
• Arena: Rings, center marker, pogs (z:20-50)
• UI: HUD panels, logs, controls (z:50-100)
• Slammer: Active slammer disc (z:100-125)
• Feedback: Shockwaves, floating text (z:150-200)
• Overlay: Banners, modals (z:200-500)

🖥️ UI Do/Don't

DO:

• Use consistent 2-4px borders with glow effects
• Apply backdrop-filter: blur(4-8px) for depth on panels
• Maintain touch-friendly 44px minimum tap targets
• Provide clear visual feedback for all interactions

DON'T:

• Overcrowd mobile screens—hide non-critical info
• Use pure white (#fff)—prefer neon accents
• Animate excessively—respect motion sensitivity
• Ignore contrast—ensure readability on all backgrounds

🎯 Slammer & Pog Visual Language

Slammers:

• Crusher: Pink gradient, heavy/angular aesthetic, max weight
• Spinner: Cyan gradient, smooth/circular, max spin/control
• Precision: Yellow gradient, balanced/geometric, hybrid stats

Pogs:

• Conic gradient (purple-pink) for dynamic spin appearance
• Player pogs: green border/glow | CPU pogs: cyan border/glow
• Flipped state: grayscale radial gradient, rotateY(180deg)

Visual Tells: Border color = ownership, glow intensity = state energy, rotation = physics activity