Mistral Small 4

I need to create a polished Breakout game in a single HTML file with canvas. Let me break down the requirements:

1. **Game mechanics**:
   - Paddle controlled by mouse and arrow keys
   - Bounce angle depends on where ball hits paddle (center = straight, edges = sharp angle)
   - One level with at least 6 rows of bricks
   - Mix of normal bricks (1 hit) and tough bricks (2 hits, cracks after first hit)
   - Power-ups: wider paddle (10s) and multi-ball (3 balls)
   - Ball never passes through bricks/paddle
   - Particles when bricks break
   - 3 lives, score display
   - Game over and victory screens with restart

2. **Technical constraints**:
   - Single HTML file, no external resources except CDN URLs if needed
   - Everything inline: CSS in <style>, JS in <script>
   - Must work in 1280x800 viewport and adapt to 375px
   - First paint must show meaningful content
   - Games must start in self-playing demo mode behind "Click or press a key to start"
   - Zero console errors in latest Chrome

3. **Structure planning**:
   - Canvas setup with proper dimensions
   - Game state management (menu, playing, game over, victory)
   - Paddle class with mouse and keyboard controls
   - Ball class with physics (velocity, position, collision detection)
   - Brick class with different types (normal, tough, power-up)
   - Power-up class that drops from bricks and can be caught
   - Particle system for brick breaking effects
   - Score, lives, level tracking
   - Input handling for mouse and keyboard
   - Responsive design with proper scaling

Let me think about the bounce angle physics:
- When ball hits paddle, the angle should depend on where it hits
- Center hit: straight up (0 degrees relative to vertical)
- Left edge: bounce left at sharper angle
- Right edge: bounce right at sharper angle
- I can calculate the offset from paddle center and use that to determine the angle

Power-ups:
- Need to spawn when tough bricks or power-up bricks are broken
- Two types: wide paddle (10s duration) and multi-ball (3 balls)
- Should fall down and be catchable by paddle
- Need visual representation

Particles:
- When brick breaks, emit particles in different colors based on brick type
- Should be small circles that fade out

Game states:
- MENU: Show instructions, "Click to start"
- PLAYING: Game is active
- GAME_OVER: Player lost all lives
- VICTORY: All bricks destroyed

I'll need to handle:
- Collision detection between ball and bricks/paddle/walls
- Power-up collection
- Timer for power-ups
- Multi-ball management
- Lives and score tracking

Let me sketch the HTML structure:
```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Breakout Game</title>
  <style>
    /* CSS here */
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    // Game code here
  </script>
</body>
</html>
```

For the canvas, I'll make it responsive using width/height attributes and CSS to scale.

Let me plan the JavaScript structure:

```javascript
// Game constants
const COLORS = {
  paddle: '#3498db',
  ball: '#e74c3c',
  brickNormal: '#2ecc71',
  brickTough: '#f39c12',
  brickPower: '#9b59b6',
  powerUpWide: '#3498db',
  powerUpMulti: '#e67e22'
};

// Game variables
let canvas, ctx;
let gameState = 'MENU'; // MENU, PLAYING, GAME_OVER, VICTORY
let score = 0;
let lives = 3;
let level = 1;
let bricks = [];
let balls = [];
let powerUps = [];
let particles = [];
let paddle;
let mouseX = 0;
let keys = {};
let powerUpActive = null;
let powerUpTimer = 0;

// Initialize game
function init() {
  canvas = document.getElementById('gameCanvas');
  ctx = canvas.getContext('2d');

  // Set canvas size
  resizeCanvas();

  // Event listeners
  window.addEventListener('resize', resizeCanvas);
  canvas.addEventListener('mousemove', handleMouseMove);
  canvas.addEventListener('click', startGame);
  window.addEventListener('keydown', handleKeyDown);
  window.addEventListener('keyup', handleKeyUp);

  // Create paddle
  paddle = new Paddle();

  // Create initial level
  createLevel();

  // Start game loop
  gameLoop();
}

// Game loop
function gameLoop(timestamp) {
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Update game state
  update();

  // Render
  render();

  // Continue loop
  requestAnimationFrame(gameLoop);
}

// Update game state
function update() {
  if (gameState === 'PLAYING') {
    // Update paddle
    paddle.update();

    // Update balls
    for (let i = balls.length - 1; i >= 0; i--) {
      balls[i].update();
      // Check collisions
      checkWallCollisions(balls[i]);
      checkPaddleCollision(balls[i]);
      checkBrickCollisions(balls[i]);
    }

    // Remove dead balls
    balls = balls.filter(ball => ball.active);

    // If no balls left, lose a life
    if (balls.length === 0) {
      lives--;
      if (lives <= 0) {
        gameState = 'GAME_OVER';
      } else {
        // Reset paddle and add new ball
        paddle.reset();
        balls.push(new Ball());
      }
    }

    // Update power-ups
    for (let i = powerUps.length - 1; i >= 0; i--) {
      powerUps[i].update();
      // Check if caught by paddle
      if (powerUps[i].y + powerUps[i].radius >= paddle.y &&
          powerUps[i].x > paddle.x &&
          powerUps[i].x < paddle.x + paddle.width) {
        activatePowerUp(powerUps[i].type);
        powerUps.splice(i, 1);
      }
      // Remove if off screen
      if (powerUps[i].y > canvas.height) {
        powerUps.splice(i, 1);
      }
    }

    // Update particles
    for (let i = particles.length - 1; i >= 0; i--) {
      particles[i].update();
      if (particles[i].alpha <= 0) {
        particles.splice(i, 1);
      }
    }

    // Check if all bricks are destroyed
    if (bricks.length === 0) {
      // Level complete
      if (level < 3) {
        level++;
        createLevel();
      } else {
        gameState = 'VICTORY';
      }
    }

    // Update power-up timer
    if (powerUpActive) {
      powerUpTimer -= 1/60;
      if (powerUpTimer <= 0) {
        deactivatePowerUp();
      }
    }
  }
}

// Render game
function render() {
  // Draw background
  drawBackground();

  // Draw bricks
  bricks.forEach(brick => brick.draw());

  // Draw balls
  balls.forEach(ball => ball.draw());

  // Draw paddle
  paddle.draw();

  // Draw power-ups
  powerUps.forEach(powerUp => powerUp.draw());

  // Draw particles
  particles.forEach(particle => particle.draw());

  // Draw UI
  drawUI();

  // Draw game state overlays
  if (gameState === 'MENU') {
    drawMenu();
  } else if (gameState === 'GAME_OVER') {
    drawGameOver();
  } else if (gameState === 'VICTORY') {
    drawVictory();
  }
}

// Helper classes
class Paddle {
  constructor() {
    this.width = 100;
    this.height = 15;
    this.x = (canvas.width - this.width) / 2;
    this.y = canvas.height - this.height - 20;
    this.speed = 8;
    this.color = COLORS.paddle;
    this.dx = 0;
    this.originalWidth = this.width;
  }

  update() {
    // Keyboard control
    if (keys['ArrowLeft'] || keys['a'] || keys['A']) {
      this.dx = -this.speed;
    } else if (keys['ArrowRight'] || keys['d'] || keys['D']) {
      this.dx = this.speed;
    } else {
      this.dx = 0;
    }

    // Move paddle
    this.x += this.dx;

    // Boundary check
    if (this.x < 0) this.x = 0;
    if (this.x + this.width > canvas.width) this.x = canvas.width - this.width;

    // Mouse control
    // Already handled by mouse move event
  }

  draw() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);

    // Draw center indicator
    ctx.fillStyle = 'rgba(255,255,255,0.3)';
    ctx.fillRect(this.x + this.width/2 - 2, this.y - 5, 4, 10);
  }

  reset() {
    this.width = this.originalWidth;
    this.x = (canvas.width - this.width) / 2;
  }
}

class Ball {
  constructor() {
    this.radius = 8;
    this.reset();
  }

  reset() {
    this.x = canvas.width / 2;
    this.y = canvas.height / 2;
    this.dx = 4 * (Math.random() > 0.5 ? 1 : -1);
    this.dy = -4;
    this.active = true;
  }

  update() {
    this.x += this.dx;
    this.y += this.dy;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = COLORS.ball;
    ctx.fill();
    ctx.closePath();
  }
}

class Brick {
  constructor(x, y, type) {
    this.x = x;
    this.y = y;
    this.width = 75;
    this.height = 25;
    this.type = type; // 'normal', 'tough', 'power'
    this.hits = type === 'tough' ? 2 : 1;
    this.cracked = false;
    this.color = type === 'normal' ? COLORS.brickNormal :
                 type === 'tough' ? COLORS.brickTough : COLORS.brickPower;
    this.active = true;
  }

  draw() {
    if (!this.active) return;

    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);

    // Draw crack for tough bricks that have been hit once
    if (this.type === 'tough' && this.cracked) {
      ctx.strokeStyle = 'rgba(0,0,0,0.3)';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(this.x + 5, this.y + 5);
      ctx.lineTo(this.x + this.width - 5, this.y + this.height - 5);
      ctx.stroke();

      ctx.beginPath();
      ctx.moveTo(this.x + this.width - 5, this.y + 5);
      ctx.lineTo(this.x + 5, this.y + this.height - 5);
      ctx.stroke();
    }
  }

  hit() {
    this.hits--;
    if (this.hits <= 0) {
      this.active = false;
      // Create particles
      createParticles(this.x + this.width/2, this.y + this.height/2, this.color);
      // Chance to drop power-up
      if (this.type === 'power' || Math.random() < 0.2) {
        powerUps.push(new PowerUp(this.x + this.width/2, this.y));
      }
      return true;
    } else if (this.type === 'tough') {
      this.cracked = true;
    }
    return false;
  }
}

class PowerUp {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.radius = 10;
    this.type = Math.random() < 0.5 ? 'wide' : 'multi'; // 50% chance for each
    this.speed = 3;
    this.color = this.type === 'wide' ? COLORS.powerUpWide : COLORS.powerUpMulti;
    this.active = true;
  }

  update() {
    this.y += this.speed;
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();

    // Draw icon
    ctx.fillStyle = 'white';
    ctx.font = 'bold 12px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    if (this.type === 'wide') {
      ctx.fillText('W', this.x, this.y);
    } else {
      ctx.fillText('M', this.x, this.y);
    }
  }
}

class Particle {
  constructor(x, y, color) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 3 + 1;
    this.dx = (Math.random() - 0.5) * 4;
    this.dy = (Math.random() - 0.5) * 4;
    this.alpha = 1;
    this.color = color;
    this.decay = Math.random() * 0.02 + 0.01;
  }

  update() {
    this.x += this.dx;
    this.y += this.dy;
    this.alpha -= this.decay;
  }

  draw() {
    ctx.save();
    ctx.globalAlpha = this.alpha;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = this.color;
    ctx.fill();
    ctx.closePath();
    ctx.restore();
  }
}

// Helper functions
function createParticles(x, y, color) {
  for (let i = 0; i < 30; i++) {
    particles.push(new Particle(x, y, color));
  }
}

function checkWallCollisions(ball) {
  // Top wall
  if (ball.y - ball.radius < 0) {
    ball.y = ball.radius;
    ball.dy = -ball.dy;
  }

  // Left wall
  if (ball.x - ball.radius < 0) {
    ball.x = ball.radius;
    ball.dx = -ball.dx;
  }

  // Right wall
  if (ball.x + ball.radius > canvas.width) {
    ball.x = canvas.width - ball.radius;
    ball.dx = -ball.dx;
  }
}

function checkPaddleCollision(ball) {
  if (ball.y + ball.radius > paddle.y &&
      ball.y - ball.radius < paddle.y + paddle.height &&
      ball.x > paddle.x &&
      ball.x < paddle.x + paddle.width) {

    // Calculate bounce angle based on where ball hits paddle
    const relativeIntersectX = (paddle.x + paddle.width/2) - ball.x;
    const normalizedRelativeIntersectX = relativeIntersectX / (paddle.width/2);
    const bounceAngle = normalizedRelativeIntersectX * (Math.PI / 3); // Max 60 degrees

    // Reflect ball with new angle
    const speed = Math.sqrt(ball.dx * ball.dx + ball.dy * ball.dy);
    ball.dx = speed * Math.sin(bounceAngle);
    ball.dy = -speed * Math.cos(bounceAngle);

    // Ensure ball moves upward
    if (ball.dy > 0) ball.dy = -ball.dy;
  }
}

function checkBrickCollisions(ball) {
  for (let i = bricks.length - 1; i >= 0; i--) {
    const brick = bricks[i];

    if (ball.x + ball.radius > brick.x &&
        ball.x - ball.radius < brick.x + brick.width &&
        ball.y + ball.radius > brick.y &&
        ball.y - ball.radius < brick.y + brick.height) {

      // Calculate which side was hit
      const dx = ball.x - (brick.x + brick.width/2);
      const dy = ball.y - (brick.y + brick.height/2);
      const angle = Math.atan2(dy, dx);

      // Reflect ball
      ball.dx = Math.sin(angle) * 5;
      ball.dy = Math.cos(angle) * 5;

      // Hit the brick
      if (brick.hit()) {
        score += brick.type === 'tough' ? 30 : brick.type === 'power' ? 50 : 10;
        bricks.splice(i, 1);
      }

      // Ensure ball moves away from brick
      if (ball.dx > 0) ball.dx = Math.abs(ball.dx);
      else ball.dx = -Math.abs(ball.dx);

      if (ball.dy > 0) ball.dy = Math.abs(ball.dy);
      else ball.dy = -Math.abs(ball.dy);

      break; // Only handle one collision per frame
    }
  }
}

function activatePowerUp(type) {
  if (type === 'wide') {
    paddle.width = paddle.originalWidth * 1.5;
    powerUpActive = 'wide';
    powerUpTimer = 10; // 10 seconds
  } else if (type === 'multi') {
    // Add 2 more balls
    for (let i = 0; i < 2; i++) {
      balls.push(new Ball());
      // Position new balls around the main ball
      balls[balls.length - 1].x = paddle.x + paddle.width/2;
      balls[balls.length - 1].y = paddle.y - 20;
      // Randomize direction slightly
      balls[balls.length - 1].dx = (Math.random() - 0.5) * 6;
      balls[balls.length - 1].dy = -4 - Math.random() * 2;
    }
    powerUpActive = 'multi';
    powerUpTimer = 10; // 10 seconds
  }
}

function deactivatePowerUp() {
  if (powerUpActive === 'wide') {
    paddle.width = paddle.originalWidth;
  }
  powerUpActive = null;
  powerUpTimer = 0;
}

function createLevel() {
  bricks = [];
  const rows = 6;
  const cols = Math.floor(canvas.width / 80);
  const brickWidth = canvas.width / cols - 2;
  const brickHeight = 25;

  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < cols; c++) {
      // Skip some positions for power-up bricks
      if (Math.random() < 0.1 && r > 1) {
        bricks.push(new Brick(c * (brickWidth + 2), 50 + r * (brickHeight + 10), 'power'));
      } else if (Math.random() < 0.3) {
        bricks.push(new Brick(c * (brickWidth + 2), 50 + r * (brickHeight + 10), 'tough'));
      } else {
        bricks.push(new Brick(c * (brickWidth + 2), 50 + r * (brickHeight + 10), 'normal'));
      }
    }
  }
}

function handleMouseMove(e) {
  if (gameState === 'PLAYING') {
    const rect = canvas.getBoundingClientRect();
    mouseX = e.clientX - rect.left;
    paddle.x = mouseX - paddle.width/2;

    // Boundary check
    if (paddle.x < 0) paddle.x = 0;
    if (paddle.x + paddle.width > canvas.width) paddle.x = canvas.width - paddle.width;
  }
}

function handleKeyDown(e) {
  keys[e.key] = true;
}

function handleKeyUp(e) {
  keys[e.key] = false;
}

function startGame() {
  if (gameState === 'MENU') {
    gameState = 'PLAYING';
    // Start with one ball
    balls.push(new Ball());
  } else if (gameState === 'GAME_OVER' || gameState === 'VICTORY') {
    // Reset game
    gameState = 'PLAYING';
    score = 0;
    lives = 3;
    level = 1;
    bricks = [];
    balls = [];
    powerUps = [];
    particles = [];
    createLevel();
    balls.push(new Ball());
  }
}

function resizeCanvas() {
  const container = document.body;
  const size = Math.min(container.clientWidth, container.clientHeight * 1.6);
  canvas.width = size;
  canvas.height = size / 1.6;
}

function drawBackground() {
  // Gradient background
  const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
  gradient.addColorStop(0, '#1a1a2e');
  gradient.addColorStop(1, '#16213e');
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawUI() {
  // Score
  ctx.fillStyle = 'white';
  ctx.font = 'bold 20px Arial';
  ctx.textAlign = 'left';
  ctx.fillText(`Score: ${score}`, 20, 30);

  // Lives
  ctx.fillText(`Lives: ${lives}`, 20, 60);

  // Level
  ctx.textAlign = 'right';
  ctx.fillText(`Level: ${level}`, canvas.width - 20, 30);

  // Power-up timer if active
  if (powerUpActive) {
    ctx.textAlign = 'center';
    const timerText = powerUpActive === 'wide' ? 'WIDE PADDLE' : 'MULTI-BALL';
    ctx.fillText(`${timerText} (${powerUpTimer.toFixed(1)}s)`, canvas.width/2, 30);
  }
}

function drawMenu() {
  ctx.fillStyle = 'rgba(0,0,0,0.7)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'white';
  ctx.font = 'bold 36px Arial';
  ctx.textAlign = 'center';
  ctx.fillText('BREAKOUT', canvas.width/2, canvas.height/2 - 50);

  ctx.font = '24px Arial';
  ctx.fillText('Click or press a key to start', canvas.width/2, canvas.height/2);

  ctx.font = '18px Arial';
  ctx.fillText('Use mouse or arrow keys to move paddle', canvas.width/2, canvas.height/2 + 50);
  ctx.fillText('Catch power-ups (W = wide paddle, M = multi-ball)', canvas.width/2, canvas.height/2 + 80);
}

function drawGameOver() {
  ctx.fillStyle = 'rgba(0,0,0,0.7)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'white';
  ctx.font = 'bold 36px Arial';
  ctx.textAlign = 'center';
  ctx.fillText('GAME OVER', canvas.width/2, canvas.height/2 - 30);

  ctx.font = '24px Arial';
  ctx.fillText(`Final Score: ${score}`, canvas.width/2, canvas.height/2);

  ctx.font = '18px Arial';
  ctx.fillText('Click or press a key to restart', canvas.width/2, canvas.height/2 + 50);
}

function drawVictory() {
  ctx.fillStyle = 'rgba(0,0,0,0.7)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'white';
  ctx.font = 'bold 36px Arial';
  ctx.textAlign = 'center';
  ctx.fillText('VICTORY!', canvas.width/2, canvas.height/2 - 30);

  ctx.font = '24px Arial';
  ctx.fillText(`Final Score: ${score}`, canvas.width/2, canvas.height/2);

  ctx.font = '18px Arial';
  ctx.fillText('Click or press a key to play again', canvas.width/2, canvas.height/2 + 50);
}

// Start the game
init();
```

Wait, I need to make sure the game starts in demo mode. The requirement says "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message". 

So I need to add an AI paddle that moves automatically in demo mode. Let me modify the paddle update to handle demo mode:

```javascript
update() {
  if (gameState === 'PLAYING') {
    if (keys['ArrowLeft'] || keys['a'] || keys['A']) {
      this.dx = -this.speed;
    } else if (keys['ArrowRight'] || keys['d'] || keys['D']) {
      this.dx = this.speed;
    } else {
      // In demo mode, move paddle automatically
      if (Math.random() < 0.02) {
        this.dx = Math.random() > 0.5 ? this.speed : -this.speed;
      }
    }

    // ... rest of update
  }
}
```

Actually, the requirement says "self-playing demo mode" which suggests the AI should play the game automatically. But the paddle is controlled by mouse/keys. Let me re-read: "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message"

This means the game should start with an AI controlling the paddle to demonstrate gameplay. So I need to add AI paddle logic that moves automatically when in demo mode (before the game starts).

Let me revise the paddle class and game state handling:

```javascript
class Paddle {
  // ... existing code

  update(aiControlled = false) {
    if (aiControlled) {
      // Simple AI: follow the ball
      const targetX = balls.length > 0 ? balls[0].x : canvas.width/2;
      if (targetX < this.x + this.width/2 - 20) {
        this.dx = -this.speed;
      } else if (targetX > this.x + this.width/2 + 20) {
        this.dx = this.speed;
      } else {
        this.dx = 0;
      }
    } else {
      // Keyboard control
      if (keys['ArrowLeft'] || keys['a'] || keys['A']) {
        this.dx = -this.speed;
      } else if (keys['ArrowRight'] || keys['d'] || keys['D']) {
        this.dx = this.speed;
      } else {
        this.dx = 0;
      }
    }

    this.x += this.dx;
    if (this.x < 0) this.x = 0;
    if (this.x + this.width > canvas.width) this.x = canvas.width - this.width;
  }
}
```

And in the game loop:

```javascript
function update() {
  if (gameState === 'PLAYING') {
    paddle.update(false); // Player-controlled

    // ... rest of update
  } else if (gameState === 'MENU') {
    // AI demo mode
    paddle.update(true);
    if (balls.length === 0) {
      balls.push(new Ball());
    }
    // Update the ball
    if (balls.length > 0) {
      balls[0].update();
      checkWallCollisions(balls[0]);
      checkPaddleCollision(balls[0]);
      checkBrickCollisions(balls[0]);
    }
  }
}
```

Actually, I think the requirement means that when the game first loads, it should show the menu with a demo of the game playing itself. So I need to:

1. Start in MENU state
2. In MENU state, run an AI-controlled demo
3. Show "Click to start" overlay
4. When clicked, switch to PLAYING state with player control

Let me revise the update function:

```javascript
function update() {
  if (gameState === 'PLAYING') {
    paddle.update(false); // Player-controlled

    // Update balls
    for (let i = balls.length - 1; i >= 0; i--) {
      balls[i].update();
      checkWallCollisions(balls[i]);
      checkPaddleCollision(balls[i]);
      checkBrickCollisions(balls[i]);
    }

    // ... rest of playing state logic
  } else if (gameState === 'MENU') {
    // AI demo mode - move paddle to follow ball
    paddle.update(true);

    // Keep one ball in demo
    if (balls.length === 0) {
      balls.push(new Ball());
    }
    if (balls.length > 0) {
      balls[0].update();
      checkWallCollisions(balls[0]);
      checkPaddleCollision(balls[0]);
      checkBrickCollisions(balls[0]);
      // Remove dead balls in demo
      if (!balls[0].active) {
        balls = [];
      }
    }
  }

  // ... rest of update logic (power-ups, particles, etc.)
}
```

Now let me check all requirements again:

1. ✓ Paddle controlled with mouse and left/right arrow keys
2. ✓ Bounce angle depends on where ball hits paddle (center = straight, edges = sharp angle)
3. ✓ One level with at least 6 rows of bricks
4. ✓ Mix of normal bricks (1 hit) and tough bricks (2 hits, cracks after first)
5. ✓ Some bricks carry power-up icons (W for wide paddle, M for multi-ball)
6. ✓ Power-ups drop and can be caught
7. ✓ Ball never passes through bricks/paddle (collision detection)
8. ✓ Particles when brick breaks
9. ✓ 3 lives, score displayed
10. ✓ Game over and victory screens with restart
11. ✓ Starts in self-playing demo mode behind "Click to start" message
12. ✓ Single HTML file, no external resources
13. ✓ Responsive design
14. ✓ First paint shows meaningful content

I need to make sure the bounce angle is correct. Let me refine the checkPaddleCollision function:

```javascript
function checkPaddleCollision(ball) {
  if (ball.y + ball.radius > paddle.y &&
      ball.y - ball.radius < paddle.y + paddle.height &&
      ball.x > paddle.x &&
      ball.x < paddle.x + paddle.width) {

    // Calculate bounce angle based on where ball hits paddle
    const relativeIntersectX = (paddle.x + paddle.width/2) - ball.x;
    const normalizedRelativeIntersectX = relativeIntersectX / (paddle.width/2);
    const bounceAngle = normalizedRelativeIntersectX * (Math.PI / 3); // Max 60 degrees from vertical

    // Reflect ball with new angle
    const speed = Math.sqrt(ball.dx * ball.dx + ball.dy * ball.dy);
    ball.dx = speed * Math.sin(bounceAngle);
    ball.dy = -speed * Math.cos(bounceAngle);

    // Ensure ball moves upward
    if (ball.dy > 0) ball.dy = -ball.dy;
  }
}
```

This should give a nice angle effect where hitting the center gives a straight up bounce, and hitting the edges gives a sharper angle.

Now let me check the power-up system:
- Wide paddle: increases paddle width by 50% for 10 seconds
- Multi-ball: adds 2 more balls for 10 seconds
- Power-ups drop from bricks (20% chance from normal bricks, 100% from power bricks)
- Power-ups are caught when paddle overlaps them

I think this covers everything. Let me now write the complete HTML file with all the code properly integrated.

I need to make sure:
- The canvas is centered and responsive
- The game starts in demo mode
- All visual elements are polished
- The game is playable after clicking

Let me write the final code: