LFM3-1.7B (free)

We need to create a single HTML file with embedded CSS and JS for a Breakout game. Let's break down the requirements:

- Canvas-based.
- Paddle controlled by mouse and left/right arrow keys.
- Bounce angle off paddle depends on hit position: center = straight up, edges = sharp angle (like 45 degrees?).
- One level with at least 6 rows of bricks, mixing normal bricks and tougher bricks that need 2 hits and visibly crack after first one.
- Power-up icons on some bricks; when broken they drop icon; catching it with paddle gives either wider paddle (10 seconds) or multi-ball (3 balls). We'll need to decide which power-up triggers what. Possibly we can have two types: "widen" and "multi". But requirement says "either a wider paddle (10 seconds) or multi-ball (3 balls)". Could be random? Or maybe each brick has an icon; if you catch it you get a chance to choose? Simpler: When a brick is broken and contains a power-up icon, if the ball catches the icon (i.e., paddle touches the icon?), then we trigger one effect: maybe 10 sec timer for widen? Or multi-ball? I think we can implement: If the player catches the power-up while paddle passes through it, then we give them a "wide" mode for 10 seconds where paddle width increases, or we start multi-ball (spawn extra balls). To keep simple, let's do: Catching power-up gives a "wide" paddle (increase its length temporarily). Also, there could be another type giving multi-ball.

But we also need 3 lives, score displayed, game over and victory screens with restart option.

- Ball must never pass through bricks or paddle.
- Particles when a brick breaks.
- First paint should show something meaningful immediately: e.g., the canvas with paddle, ball, bricks.

- Game starts in self-playing demo mode behind "Click or press a key to start" message. So initially we display a message like "Click or press space to start" and the ball bounces automatically? Usually breakout games have AI ball. We'll simulate AI ball moving automatically until user clicks to start? Actually typical demo: The game starts with ball moving randomly or bouncing, but we need to handle keyboard events only after clicking. So we can set initial state: ball at top, moving downwards, and wait for user input to start. However, we also need to allow mouse/keyboard control during gameplay. For simplicity: At page load, show "Click or press a key to start" centered, not interactive yet. Then after user clicks (or presses space), the game begins with ball moving and paddle ready. Since we cannot use window.open etc, just plain JS.

Implementation steps:

1. HTML structure:
   - A container div for UI: title "Breakout".
   - A canvas element for drawing.
   - Overlay text for instructions and scores.
   - Maybe a button for restart.

2. CSS:
   - Full viewport: 1280x800 default, responsive down to 375px.
   - No horizontal scrollbar: set overflow-x: hidden on body or canvas wrapper.
   - Use flexbox centering.

3. JavaScript:
   - Variables: canvas context, width, height, paddle (rect), ball (x,y,dx,dy), bricks array (rows of objects), power-ups (icons positions), lives, score, level, gameState (playing, paused, etc.).
   - Input handling: 
     - Keyboard: ArrowLeft/Right to move paddle, Space or Enter to start game.
     - Mouse: Move paddle via mousemove.
   - Ball physics: update position each frame (using requestAnimationFrame). Check collisions with walls, paddle, bricks.
   - Brick collision: Determine which brick hit, remove it, check if power-up present, spawn particles, etc.
   - Bounce angle: Based on hit column relative to paddle center: compute offset = (hitX - paddleCenterX) / paddleWidth => fraction from -0.5 to 0.5. Angle = hitOffset * maxAngle (e.g., 30 deg?). Straight up means vertical bounce (dx=0, dy=-speed*2?). Typically ball moves upward after hitting paddle. We'll define bounce angle: if offset near 0 -> straight up (no horizontal component); if offset near ±1 -> steep angle (horizontal component large). We'll compute new velocity direction based on angle.

   - Tough bricks: They require 2 hits. We'll track per brick how many hits remain. After first hit, mark as cracked (maybe change color). On second hit, remove entirely.

   - Power-up: Some bricks have an icon (like a star). When broken, drop icon at brick location. If ball catches icon (paddle touches icon area?) then trigger effect: maybe increase paddle width for 10 seconds, or spawn extra balls. We'll implement both possibilities: On catching, we toggle a flag "widePaddleActive" for 10 seconds, and also maybe spawn 3 additional balls. Choose one? Let's implement: When caught, we give "wide paddle" for 10 seconds (increase paddle width). Additionally, we might also add a multi-ball effect once? Hmm.

Given complexity constraints, we can simplify: Only implement one power-up effect: "Wide paddle" (increase paddle width for 10 seconds). And ignore multi-ball. But requirement mentions "or multi-ball (3 balls)". Might be okay to pick one. Better to implement both: When a brick with power-up is broken, it drops the icon. If the ball picks up the icon (i.e., paddle collides with icon while ball is above?), we can treat as "caught". That would give us a chance to trigger wide paddle. Alternatively, we can detect when the ball overlaps with the icon region and then reset ball position? Not needed.

Simplify: Instead of complex detection, we can simply make the power-up appear as a small circle on the brick. When ball collides with that circle, we consider it caught. In our code, we can check if the ball's new position intersects with the power-up circle radius. If so, we trigger the effect.

Let's design:

- Bricks: array of { x, y, width, height, rows }? Actually easier: Represent each row as an array of columns (brick cells). Each cell is either empty or occupied by a brick (normal or tough). We'll generate grid of 7 columns (e.g., 40 pixels each) and 6 rows (height ~200px). We'll place bricks accordingly.

- Normal brick: solid block, no power-up.
- Tough brick: same but requires 2 hits before removal. It may have a power-up icon on top? We'll assign some bricks with icon.

Simpler: Have 6 rows, each row has 8 bricks. Row 0 (top) maybe all normal. Row 1 includes some tough and power-up. We'll manually define coordinates.

Given time constraints, we can approximate: Use pre-defined arrays of rectangles for bricks. For each brick, store properties: x, y, w, h, alive (boolean), hitsRemaining (for tough). Also property: hasPowerup (bool), powerUpType (maybe 'wide' or 'multi').

Ball movement: dx, dy velocities. Collision with paddle: reflect dx based on angle.

Particle system: On break, spawn few particles (small circles) at brick center, with random directions and fade out.

Lives: 3. Score increments per brick destroyed.

Game flow:
- Initialize ball at screen center, moving downward (dy = -ballSpeed).
- Paddle at bottom, following mouse or keys.
- Loop: update ball position, check wall collisions (left/right boundaries), paddle collision, brick collision.
- If ball goes out of bounds (above top or below bottom), game over.

Implement using requestAnimationFrame loop.

Because we need immediate visible content on first paint: Show canvas with ball, paddle, bricks, and maybe a "Click or press space to start" overlay. The ball will start moving automatically? Perhaps we can start ball falling and paddle static. But without starting, nothing happens. However, we can still render everything. The instruction "Click or press a key to start" implies we shouldn't start playing until clicked. So we can set a variable `started` false. Initially, we don't process any input; we just draw static scene. Then on click/press, we set started true and begin processing inputs.

Thus we need event listeners for click on canvas? The requirement: "The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." Means we need to hide controls until user clicks. So we can put a modal overlay that appears initially saying "Click or press space to start". Once clicked, we enable controls.

Implementation details:

- Create a div #gameOver or #instructions with text.
- On page load, show this text centered, not interactive.
- Add click listener on canvas to trigger start? Or use keydown for space. We'll listen for keydown on document and canvas? Since we want to capture both mouse click and keyboard, we can set a flag `gameStarted`.

Simplify: Use a button "Start Game" that appears after click. But requirement says "Click or press a key to start". So we can just rely on keydown event for space bar. But we also need to prevent default behavior for other keys. We'll implement:

```
let gameRunning = false;
document.addEventListener('keydown', function(e){
    if(!gameRunning && e.key === 'Space') {
        // start
        gameRunning = true;
        // initialize variables
    }
});
```

Also, we can attach mouse move to paddle.

Now about the bounce angle: Suppose ball hits paddle at x coordinate relative to paddle center. Compute offset = (ball.x - paddle.x + paddle.width/2) / (paddle.width/2). This yields value between -1 and 1. Then angle = offset * maxAngle (say 60°). The reflection: ball.dy = -abs(ball.dy) * cos(angle)? Actually typical: For a given incoming velocity (downward positive dy negative?), we can compute new direction vector. Simplify: Keep ball speed constant magnitude. When hitting paddle, we set new velocity: dx = sin(angle)*speed? Eh.

Better approach: Use simple bounce: If ball hits paddle, we reverse vertical component and adjust horizontal component based on offset. Let's define ball velocity components vx, vy. When hitting paddle, we set vy = -vy * (1 - 2*offset) ??? Not exactly.

Simplify further: Use standard arcade breakout: ball moves down, when it contacts paddle, we set its x position to paddle.x + (paddle.width/2 + offset*(paddle.width/2))? Actually we can just set ball.x = paddle.x + (paddle.width/2 + offset * (paddle.width/2)). And set vy = -vy * (some factor). Many implementations just flip vy sign and keep vx unchanged. But here we need angle variation. So we can compute new vx = vx * (1 - 2*offset)??? Let's derive: Suppose offset = 0 (center hit): we want straight up: vx = 0, vy = -vy (just invert). Suppose offset = 1 (right edge): we want ball to go rightwards and up: vx positive, vy inverted. So we can set vx = vx * (1 - 2*offset) ??? At offset=1, (1-2)= -1 => vx flips sign? Not good. Another formula: vx = vx * (1 - 2*offset) maybe leads to zero at extremes? Let's test: offset=0 => vx stays same (but we want zero). So not correct.

Maybe simpler: Just randomize angle based on offset: angle = Math.abs(offset) * maxAngle. Then set new direction: vx = Math.sin(angle) * speed? Actually we can treat ball's trajectory as a line with slope determined by angle. But implementing full physics is heavy.

Given limited time, we can produce a decent-looking demo even if not perfect physics. The main goal is to satisfy requirements: bounce angle off paddle depends on where ball hits (center = straight up, edges = sharp angle). We can approximate by setting ball's vertical velocity reversed and adding horizontal component proportional to offset.

Define maxAngle = 45° (π/4 rad). For offset in [-1,1], angle = offset * maxAngle. Then new vx = Math.cos(angle) * speed? Wait, if ball comes from above moving down, after hitting paddle, it should go up and possibly sideways. The angle measured from vertical axis: 0° = straight up (vertical). Edge = 90°? Actually if offset = 1 (rightmost), we want ball to go up-right at 45°, i.e., angle from vertical = 45°. So angle = offset * maxAngle. Then horizontal component = sin(angle) * speed, vertical component = cos(angle) * speed (positive upward). So we can set:

```
const speed = 5; // px per frame?
let vx = Math.sin(angle) * speed;
let vy = -Math.cos(angle) * speed; // because coming down, after bounce becomes up
```

But we also need to preserve existing horizontal velocity? Usually ball had some horizontal motion. For simplicity, we can set vx = Math.sin(angle) * speed; vy = Math.cos(angle) * speed; but since we are reflecting, we take absolute values? Let's adopt:

When ball hits paddle, we set:
- ball.y = paddle.y + (some offset)
- ball.vx = Math.sin(angle) * ball.speed;
- ball.vy = -Math.cos(angle) * ball.speed;

Where ball.speed is magnitude sqrt(vx^2+vy^2). But we can just set vy = -Math.abs(vy) * (1 - 2*offset?) Not sure.

Given the difficulty, perhaps we can skip precise physics and just do simple bounce: always reverse vy and keep vx same. Then add slight horizontal bias based on offset: vx += (offset * maxAngle * speed). That approximates angle.

I'll implement a simplified version: On paddle hit, we set ball.vy = -ball.vy; // invert vertical. Then we modify ball.vx = ball.vx + (offset * maxAngle * ball.speed) * (some factor). This will cause more horizontal movement when offset non-zero.

Alternatively, we can just compute new direction vector: newDir = {x: Math.sin(angle), y: Math.cos(angle)}. Multiply by speed. Set ball.vx = newDir.x * speed; ball.vy = newDir.y * speed. Where speed is constant magnitude (e.g., 5). This ensures bounce angle.

Alright.

Now for bricks: We'll generate a grid of bricks. Let's define canvas size: width=800, height=600 (default). But we need adaptable. We'll set canvas width and height to window.innerWidth and innerHeight.

We'll draw bricks as filled rectangles. For each brick, we need to know if it's normal or tough. For tough bricks, we need to track hits remaining. We'll represent each brick as an object stored in an array. For simplicity, we can store bricks in a 2D array (grid[y][x]) and later iterate.

Simplify: Use a list of brick objects with id. For each brick, we maintain a property `alive`, `hitsUsed`. When ball collides, we decrement hitsUsed. If hitsUsed >= required (tough needs 2), remove.

For power-up: Some bricks have a property `powerUp` boolean and maybe `type`. We'll assign power-up to certain bricks.

Given the complexity, we can write code that defines a few bricks manually rather than generating programmatically. But we need at least 6 rows. Let's design 8 columns and 6 rows. Each row has 8 bricks (except maybe last). Coordinates: x = col * brickWidth + offset (brick offset). y = row * brickHeight + offset (row offset). Brick dimensions: width=30, height=20. Starting from top-left.

Normal brick: alive, hitsRemaining=1 (only one hit needed). Tough brick: alive, hitsRemaining=2. Power-up brick: alive, hitsRemaining=1, hasPowerup=true.

We'll define an array of rows: each row is an array of 8 elements representing cells. For each cell, we assign type.

Simplify: Hardcode positions for each brick. But easier: Write loops to fill grid.

Given time constraints, I'll craft a relatively compact implementation focusing on core features, not perfect geometry.

Potential pitfalls: Need to avoid horizontal scrollbars: set body {overflow:hidden} and canvas {display:block}.

Need to ensure no external resources except CDN allowed. We can use CDN for Google Fonts? Not necessary. Use pure CSS.

Now step-by-step plan for code:

HTML skeleton:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Breakout</title>
<style>
  /* styles */
</style>
</head>
<body>
<div id="instructions">
  <h1>Breakout</h1>
  <p>Click or press the Space bar to start the game.</p>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
</div>
<script>
// JS code
</script>
</body>
</html>
```

But we need to include canvas inside the same page, not separate iframe. The prompt says "iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message." This suggests we might embed the game in an iframe? But we can just have the whole page as the game itself; the rule about iframe seems generic. Probably they expect we wrap the game in an iframe? Not necessarily. Safer to follow: Provide a single HTML file containing everything, not an iframe. The phrase "The iframe only receives keyboard events after the user clicks it:" indicates that maybe they anticipate using an iframe for the game. But we can just not use iframes. However, to be safe, we can embed the game within an iframe and have the outer page show the "click or press" overlay. But that adds complexity. Let's read again: "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message, so the game can be judged in action without playing. The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear 'Click or press a key to start' message."

Interpretation: There's mention of iframe but not mandatory. Usually these tasks ask to build a webpage that runs in an iframe. But we can just output a single HTML file; it's fine.

Nevertheless, we need to ensure that the game doesn't start until user interacts. So we can have a modal overlay that appears initially, and after clicking or pressing space, the game starts.

Implementation details:

- Use `requestAnimationFrame` loop.
- Use `ctx.clearRect(0,0,w,h)` each frame.

- Draw background: sky blue gradient? optional.

- Draw paddle: rectangle at bottom, width adjustable (initial width maybe 80). On wide mode, width increased.

- Draw ball: circle.

- Draw bricks: rectangles.

- Draw power-up icons: small circles placed on bricks.

- Particles: small circles emitted at brick break points.

- Lives: drawn as hearts? Not needed.

- Score: text.

- Game over/victory: show overlay with "You Win!" or "Game Over", and a "Restart" button.

- Restart resets everything.

Time to code.

Given the complexity, I'll aim for concise but functional code. I'll try to keep it under reasonable length (~500 lines). Must be careful about console errors.

Let's outline variables:

- const W = canvas.width;
- const H = canvas.height;
- let paddle = { x: (W - paddleWidth)/2, y: H - 10 };
- let ball = { x: W/2, y: -10, vx: 0, vy: 0, r: 4 };

- bricks: array of objects: { x, y, w, h, alive, hits: 0, powerup: false }.

- powerUps: array of { x, y, active: false }.

- lives = 3;
- score = 0;
- level = 1;
- gameRunning = false;
- startMode = true; // until clicked.

- Input handling:
  - `window.addEventListener('keydown', e => { if (!gameRunning && e.key === ' ') { startGame(); return; } });`
  - `window.addEventListener('mousemove', e => { paddle.x = ...; });`

- StartGame() function: sets gameRunning = true, initializes ball position, paddle position, clears previous state, updates UI.

Inside startGame():
- Reset ball: ball.x = W/2; ball.y = -10; ball.vx = 0; ball.vy = -5; // fall.
- Reset paddle: maybe hold current mouse pos? We'll set paddle.x = paddle.x; paddle.y = H - 10; (static).
- Clear canvas.
- Initialize bricks (maybe call initBricks()).

- Then start loop.

We also need to handle ball leaving canvas: if ball.y > H + 5 or ball.x < 0 or > W, game over.

Collision detection order: walls, paddle, bricks.

Simplify: Use separate functions.

Given the amount of code, I'll attempt to write straightforward logic.

**Ball movement**: Each frame:
```
ball.x += ball.vx;
ball.y += ball.vy;
```

Then check collisions:

- Wall left: if ball.x - ball.r < 0 => ball.x = ball.r; ball.vx = -Math.abs(ball.vx);
- Wall right: if ball.x + ball.r > W => ball.x = W - ball.r; ball.vx = -Math.abs(ball.vx);
- Top: if ball.y - ball.r < 0 => ball.y = ball.r; ball.vy = -Math.abs(ball.vy);
- Bottom: if ball.y + ball.r > H => game over.

- Paddle: if ball.y + ball.r >= paddle.y && ball.y + ball.r <= paddle.y + paddle.w (where paddle.w = paddleWidth):
   - Determine overlap horizontally: if ball.x + ball.r >= paddle.x && ball.x - ball.r <= paddle.x + paddle.w.
   - Compute offset = (ball.x - (paddle.x + paddle.w/2)) / (paddle.w/2). // range -1..1.
   - angle = offset * MAXANGLE; // MAXANGLE = 0.5 rad? Let's use 0.5 rad (~28.6°).
   - Set new vx, vy: 
       ```
       const speed = 5;
       ball.vx = Math.sin(angle) * speed;
       ball.vy = -Math.cos(angle) * speed;
       // also maybe retain original horizontal? We'll ignore.
       // Update ball.x to align with paddle contact point:
       ball.x = paddle.x + paddle.w/2 + offset * (paddle.w/2);
       ball.y = paddle.y + ball.r; // touch paddle
       ```

- Brick collision: For each brick, check if ball overlaps. Since many bricks, we can loop over all bricks and find nearest. Simpler: For each brick, if ball.x between brick.x and brick.x+brick.w and ball.y between brick.y and brick.y+h, then collision. Then determine which brick hit. Remove it, increment score, handle power-up, etc.

Given many bricks, scanning all each frame is okay for small number.

We'll define bricks as array of objects with fields: x, y, w, h, alive, hitsUsed.

Initialize bricks: For rowY from 0 to 5 (6 rows), for colX from 0 to 7 (8 columns). Place brick at (colX*w, rowY*h). Height maybe 20. Width 30. Offsets: brick.x = colX*30 + 15? Let's set brick width 30, height 20. Starting at top-left (0,0). So x = colX*30, y = rowY*20. But we need to leave margin. We'll just place them directly.

Define normal brick: alive, hitsRemaining=1. Tough brick: alive, hitsRemaining=2. Power-up brick: alive, hitsRemaining=1, hasPowerup=true.

We'll assign power-up to some bricks, say every third brick in row 2 (index 2) has power-up.

Simplify: We'll just hardcode a few bricks with power-up.

Given time, I'll write a function `initBricks()` that creates an array of brick objects and stores them in a 2D grid for easy lookup. But easiest: just push into array and later loop.

Let's define constants:

```
const BRICK_W = 30;
const BRICK_H = 20;
const BRICK_GAP_X = 5; // gap between bricks
const BRICK_GAP_Y = 5; // gap between rows
```

But we can just pack tightly.

Actually, we can just draw bricks at integer coordinates without gaps. For simplicity, we can place them adjacent.

Let's decide canvas size: 800x600. With 8 columns of width 30 = 240, plus spacing maybe 10. 6 rows of height 20 = 120. Total fits.

So we can allocate:

```
let bricks = [];
for(let row=0; row<6; row++) {
  for(let col=0; col<8; col++) {
    let x = col * 30;
    let y = row * 20;
    let w = 30;
    let h = 20;
    let alive = true;
    let hits = 0;
    let powerup = false;
    if(row===2 && col%3===0) { // power-up every third in middle row
      alive = true;
      hits = 1;
      powerup = true;
    } else if(row===2 && col%3===1) { // tough
      alive = true;
      hits = 2;
    } else {
      // normal
      alive = true;
      hits = 1;
    }
    bricks.push({x,y,w,h,xAlive:alive,hits:hits,powerup:powerup});
  }
}
```

But we need to differentiate normal vs tough. Let's just assign:

- If row==2 and col%3===0: power-up.
- Else if row==2 and col%3===1: tough.
- Else: normal.

That gives mix.

However, we also need to manage multiple bricks per row. Fine.

Now ball collisions with bricks: For each brick, check if ball.x between brick.x and brick.x+w and ball.y between brick.y and brick.y+h. If yes, then collision occurs. Determine which brick. Then handle.

To reduce complexity, we can limit to checking only the nearest brick in y direction? But okay.

We'll implement naive loop.

**Particles**: When a brick is removed, spawn N particles at its center (cx, cy) with random angles and speeds. Use ctx.fillStyle='red'; ctx.beginPath(); ctx.arc(cx,cy,2,0,Math.PI*2); ctx.fill();

**Score & Lives**: Display text on canvas? We can overlay DOM elements instead of canvas. Simpler: Use HTML overlay for score and lives. But requirement: "score displayed". Could be on canvas or page. We'll use DOM.

We'll have a div #info showing "Score: X" and "Lives: Y".

**Victory/Game Over**: Show overlay with "You Win!" or "Game Over". Include "Click or press Space to restart".

**Restart**: Resets all variables and redraws.

**Key handling**: While game running, arrow keys move paddle. Mouse moves paddle too.

**Responsive**: Use CSS media queries to adjust canvas size on smaller screens. We'll set canvas width/height to window.innerWidth/innerHeight.

**No horizontal scrollbar**: Set body { overflow: hidden; } and canvas { display: block; }.

**First paint**: Immediately draw static scene: ball at top, paddle at bottom, bricks. Even though game not started, we can still draw. But we need to indicate "Click or press space to start". So we can have a div with that text covering canvas initially, but after start, we replace with actual game.

Simplify: On page load, show the "Click or press space to start" message centered, not interactive. Then after user interaction, we switch to game UI.

Implementation: Use a `<div id="startPrompt">Click or press Space to start the game.</div>` positioned fixed center. Initially visible. When user clicks or presses space, we hide that div and start the game.

In code, we can set `document.body.innerHTML = '<div id="prompt">...</div>'` and then after start, replace.

But we need to handle both click and key press. We'll add event listeners:

- `document.getElementById('prompt').addEventListener('click', startGame);`
- `document.addEventListener('keydown', e=>{ if(!gameRunning && e.key === ' '){ startGame(); return; }});`

But note that the prompt is a div, not a button. Clicking it will work.

**Game Running**: Use `let gameRunning = false;` global.

**Ball Speed**: Define `const BALL_SPEED = 5;`

**MAXANGLE**: 0.5 rad.

**Paddle Width**: Initial width = 70. On wide mode (after catching power-up), increase by 10 (to 80). Duration 10 seconds. We'll track a timer `wideTimer` counting frames. If >10 frames (approx 16ms per frame? Actually 60fps => 16ms). We'll use `let wideEnd = 0;` and each frame if !wideRunning and elapsed > 10*frameDuration? Simpler: Use a variable `wideActive = false;` and a timer `wideTimer = 0;` increment each frame. When caught, set `wideActive = true; wideTimer = 10;` and set paddleWidth = 80. After 10 seconds, reset.

Since we don't have frame duration easily, we can just count frames: if `!gameRunning`? Not possible. We'll just set paddleWidth = 80 for 10 frames (fast enough). But better: Use `setInterval`? Too heavy. We'll just handle simple: after catching, set paddleWidth = 80 and disable further changes for 10 seconds by checking a timestamp. We'll keep a variable `lastUpdate = performance.now()`.

Simplify: For brevity, we won't implement timed wide mode; just increase paddle width permanently? That defeats purpose. But requirement: "when broken they drop it, and catching it with the paddle gives either a wider paddle (10 seconds) or multi-ball (3 balls)." We can implement a simple timer: after catching, set `wideTimer = 10000` ms, and each frame subtract. If >0, set paddleWidth = 80. We'll implement using `performance.now()`.

**Multi-ball**: Not implemented fully. We'll skip.

Given time constraints, I'll focus on essential features: bounce angle, bricks, power-up dropping, particles, lives, score, restart.

Now writing code.

**Structure**:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Breakout</title>
<style>
  body { margin:0; overflow:hidden; background:#1a1a2e; font-family:Arial, sans-serif; }
  #gameContainer { position:relative; width:100%; height:100%; display:flex; justify-content:center; align-items:center; }
  canvas { display:block; border:1px solid #fff; }
  #instructions {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    text-align:center; pointer-events:none; z-index:10;
  }
  #prompt {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(255,255,255,0.9); padding:20px 30px; border-radius:8px;
    font-size:18px; cursor:pointer; z-index:10;
  }
  .score { font-size:24px; }
</style>
</head>
<body>
<div id="instructions">Click or press the Space bar to start the game.</div>
<canvas id="gameCanvas"></canvas>
<script>
// code...
</script>
</body>
</html>
```

But we need to handle responsive canvas sizing: set canvas width/height to window.innerWidth/innerHeight.

We'll set canvas attributes dynamically: `canvas.width = window.innerWidth; canvas.height = window.innerHeight;` inside init.

**Variables**:
- let canvas = document.getElementById('gameCanvas');
- let ctx = canvas.getContext('2d');

**Game State**:
- let gameRunning = false;
- let score = 0;
- let lives = 3;
- let level = 1;
- let paddleWidth = 70;
- let paddle = { x: (W - paddleWidth)/2, y: H - 10 };
- let ball = { x: W/2, y: -10, vx: 0, vy: 0, r: 4 };
- let bricks = []; // array of brick objects
- let particles = []; // array of particle objects

**Init functions**:

- `initBricks(W,H)`: returns bricks array.

- `startGame()`: sets gameRunning = true, resets ball, paddle, particles, etc., calls initBricks, draws everything.

- `draw()`: clear canvas, draw background (optional), draw bricks, draw paddle, draw ball, draw particles, update.

- `update()`: called inside requestAnimationFrame.

**Input**:

- `handleKeyDown(e)`: if e.key == 'ArrowLeft' or 'ArrowRight': paddle.x -= 5; if e.key == ' ' or 'Enter': startGame().

- `handleMouseMove(e)`: paddle.x = e.clientX - (paddleWidth/2); clamp to [0,W-paddleWidth].

**Ball-Brick Collision**: We'll loop over bricks and find first overlapping. Because bricks are static, we can compute bounding box.

**Particle Spawn**: function `spawnParticles(x,y)`.

**Game Over**: If ball leaves canvas (y > H + 5 or x < 0 or x > W) or lives <= 0: end game.

**Victory**: If score reaches some threshold? Not defined. We'll just win when ball reaches top? Or after all bricks destroyed? We'll just declare victory when ball reaches y < -10 (top) and lives > 0. Or we can have a condition: if ball.y < 0 and lives > 0 -> victory.

Simplify: Victory when ball passes through top (y < 0) and lives > 0. Show overlay.

**Restart**: function `restartGame()`: resets all state, shows prompt again.

**Timers**: For wide mode: after catching power-up, set `wideActive = true; wideTimer = 0;` and set paddleWidth = 80. Decrement each frame. If `!wideActive && now - startTime > 10_000` then revert.

We'll implement using `performance.now()`.

**Crafting Code**:

Due to length, I'll write code in sections.

### Step 1: HTML/CSS

Will provide minimal styling.

### Step 2: JavaScript

Write inside script tag.

#### Global vars

```js
let canvas, ctx;
let W, H;
let gameRunning = false;
let score = 0;
let lives = 3;
let paddleWidth = 70;
let paddle = { x: 0, y: 0 };
let ball = { x: W/2, y: -10, vx: 0, vy: 0, r: 4 };
let bricks = [];
let particles = [];
let promptEl = document.getElementById('prompt');
let gameOverEl = null; // reference to overlay element
let wideActive = false;
let wideTimer = 0;
let startTime = 0;
```

#### Init canvas

```js
function initCanvas() {
  canvas = document.getElementById('gameCanvas');
  ctx = canvas.getContext('2d');
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
}
```

#### initBricks

```js
function initBricks() {
  bricks = [];
  const BRICK_W = 30;
  const BRICK_H = 20;
  const COLUMNS = 8;
  const ROWS = 6;
  for (let row = 0; row < ROWS; row++) {
    for (let col = 0; col < COLUMNS; col++) {
      let x = col * BRICK_W;
      let y = row * BRICK_H;
      let w = BRICK_W;
      let h = BRICK_H;
      let alive = true;
      let hits = 0