Game: Breakout
Theme: Neon Arcade
Date: 2026-04-06

## Prompt

Create a single-file HTML5 Canvas Breakout game with the Neon Arcade visual theme. The game must be fully self-contained with all HTML, CSS, and JavaScript inline, no external images.

### Game Mechanics
- Paddle at bottom controlled by mouse/touch movement.
- Ball bounces off walls, paddle, and bricks.
- Bricks arranged in multiple rows (5 rows, 10 columns) with 1-3 hit points depending on color (cyan = 1, magenta = 2, purple = 3).
- Ball angle varies based on where it hits the paddle: center yields a straight upward angle, edges produce steeper angles.
- Ball speed increases slightly each level (start at moderate speed, increment by 5% per level).
- Life system: 3 lives, lose one when ball passes below paddle.
- Levels: each level adds one more row of bricks and increases brick durability.
- Power-up drops: randomly (10% chance) when a brick is destroyed, a power-up item falls that can be caught by paddle:
  - Wider paddle (extends paddle width by 50% for 10 seconds)
  - Multi-ball (adds two extra balls for 20 seconds)
  - Slow motion (ball speed halved for 8 seconds)
- Win condition: destroy all bricks; advance to next level with increased speed and brick count.

### Visual Treatment (Neon Arcade)
- **Palette:** deep void (#0a0a1a), electric cyan (#00f0ff), hot magenta (#ff00aa), laser purple (#8800ff), soft white glow.
- **Background:** Dark with animated perspective grid lines receding to vanishing point, drawn each frame with semi-transparent overlay for afterglow trail effect.
- **Neon glow:** All game elements (paddle, ball, bricks, UI) have `shadowBlur` glow matching their color.
- **CRT vignette:** edges darkened with radial gradient.
- **Particle effects:** Brick shatter releases particles of the brick's color; ball trail (short fading glow behind ball); paddle hit ripple (circular wave on paddle impact).
- **Screen shake** on life lost and on level completion.
- **UI:** Score display in pixel/arcade font with outer glow; lives shown as neon hearts; level indicator.

### Controls
- **Desktop:** Mouse moves paddle horizontally within canvas bounds. SPACE to launch ball (when in start state). P key pauses/unpauses.
- **Mobile:** Touch drag moves paddle. Tap anywhere to launch ball. On-screen pause button.
- **Directional input:** Not needed for Breakout.
- **Pause:** overlay with semi-transparent "PAUSED" text and resume hint.

### Mobile Support
- Detect touch capability; render visible semi-transparent touch controls (left/right arrows for paddle movement and a launch button) on mobile.
- Ensure touch events don't cause page scroll (`touch-action: none`).
- Hit areas at least 44x44px.
- Swipe detection not needed.

### Game States
1. **Start:** Title "Neon Breakout" with theme art (animated grid), controls reference, "Press SPACE / Tap to start". Score and high score displayed.
2. **Playing:** Active gameplay with live score, lives, level.
3. **Paused:** Semi-transparent overlay, "PAUSED" indicator, resume hint.
4. **Game Over:** Final score, high score comparison, "Play Again" prompt.

### Difficulty Curve
- Starting speed moderate.
- Each level: ball speed increases by 5%, brick rows increase by 1 (up to max 8 rows).
- Brick durability: level 1: all bricks 1 hit; level 2: bottom row 2 hits; level 3: bottom two rows 2 hits, etc.
- Power-ups become rarer at higher levels.

### Scoring
- Brick destroyed: +10 per hit point (cyan=10, magenta=20, purple=30).
- Level completion bonus: +500 × level.
- Power-up collected: +100.
- High score persisted in localStorage.

### Polish Details
- Smooth animation using `requestAnimationFrame` with delta‑time scaling.
- Retina/HiDPI support (`devicePixelRatio` scaling).
- `prefers‑reduced‑motion` respected (reduce particles, disable screen shake).
- Inline SVG favicon themed (neon cyan paddle).
- SEO & social sharing metadata: description "A neon‑glow Breakout game where you shatter glowing bricks in a synthwave arcade world. How many levels can you conquer?"
- Responsive canvas sizing (fills viewport, maintains 16:9 aspect ratio).

### Audio (optional)
- Procedural Web Audio API for short feedback sounds: brick hit (short sine wave), paddle bounce (square wave), power‑up collect (rising pitch), life lost (low sawtooth).
- Mute toggle.

## Notes
- Follow the universal game requirements from the oneshot‑game skill.
- Ensure all code is written out fully; no trimming or placeholders.
- The game must be playable and enjoyable on both desktop and mobile.