Flint (free)

We need answer user. Need craft final with exactly one fenced code block containing complete file. Need build polished Breakout in single HTML. Must follow constraints. We need produce code likely large. Must ensure no external files except CDN allowed, but can use none. Vanilla JS canvas. No localStorage etc. No alert/confirm/prompt. No window.open. No storage. Start self-playing demo mode behind click/keypress. Keyboard after click. Mouse paddle. Arrow keys. Bounce angle depends hit position. One level at least 6 rows bricks, mix normal and tougher 2 hits crack after first. Some bricks carry power-up icon; when broken drop it, catching with paddle gives wider paddle (10 sec) or multi-ball (3 balls). Ball never pass through bricks/paddle. Particles when brick breaks. 3 lives, score displayed. Game over and victory screens with restart option.

Need final exactly code block. Could include full HTML. Must be careful no text outside. Need maybe code length huge. We can design.

We need final answer only code block. Since final should be code. But before final maybe no text? User rules: Reply with exactly ONE fenced code block containing complete file. No text before/after. So final should start ```html and end ```.

Need implement. Let's plan code.

Single HTML file. Canvas responsive, view 1280x800 maybe internal logical size 1280x800. Scale to fit? Could set canvas width 1280 height 800, CSS max width 100%, maintain aspect. For sandbox likely viewport 1280x800. At 375 adapt. Use canvas fixed logical 1280x800, CSS width min(100%, ...) maybe aspect ratio. To avoid horizontal scrollbar. Could set canvas style width:100%; height:auto; aspect-ratio. But in iframe maybe. Simpler canvas width=1280 height=800 style width:100%; height:auto. Coordinates logical.

Game states: menu/start? Requirements games must start in self-playing demo mode behind "Click or press a key to start". Could state 'ready' with overlay. On click/key starts demo AI? Or starts game with AI controlling paddle? Self-playing demo mode: maybe AI paddle moves automatically toward ball. Behind click. After start, AI controls paddle automatically. But requirement paddle controlled with mouse and arrows. For demo, maybe AI. But they want self-playing demo mode. Could have start button? No external. Overlay "Click or press a key to start". On click/key start: state 'playing', demo mode true, AI enabled. Mouse control maybe still works? But self-playing demo mode likely AI. We can keep AI until user controls? Maybe after start, AI plays demo. But requirement paddle controlled with mouse and arrows. Could have if user pressed arrow/mouse move, disable AI? But start requires click. Hmm.

Better: state 'ready'. Click/key starts. During 'playing', if mouse move over canvas, human control? But first paint after 3 sec no interaction; if human control, nothing happens. So demo mode: AI enabled. Overlay says click or press key to start. On start, demo AI enabled. If user moves mouse or presses arrows, human control enabled? But after click, keyboard events go to window. We can track. Mouse move on canvas. Arrow keys. But demo AI should play until user takes over? Simpler: after start, AI always controls paddle for self-playing demo; but requirement paddle controlled with mouse and arrows might be judged? To satisfy, implement input: AI enabled by default after start (demo). If mouse moved or arrow key pressed, set aiEnabled=false. But arrow key also used to move if human. But start key might trigger. We can ignore when ready. After start, arrows set aiEnabled=false and move paddle. Mouse move sets aiEnabled=false if moved. AI moves toward ball when aiEnabled. That satisfies.

Ball physics: ball radius ~8. Speed maybe 420 px/s. On paddle bounce: compute hit pos relative paddle center. angle = (hitX / paddleWidth - 0.5) * maxBounceAngle (60 deg?) Center = straight up, edges = sharp. Ball vx = speed * cos(angle) * direction? Let's define angle from vertical. hitPos = (ball.x - paddle.x) / paddle.width - 0.5, clamp -1..1. theta = hitPos * maxBounce (e.g. 65°). vx = speed * sin(theta) * (ball moving left?1:-1). vy = -speed * cos(theta)? Need bounce upward. If ball moving down, vy negative after bounce. Let's use angle from vertical. incoming direction: vx sign. After bounce upward: vy = -speed * cos(theta); vx = speed * sin(theta) * (incomingVx >=0 ? 1 : -1)? Actually if ball moving right, bounce angle right. If moving left, left. So vx = Math.sign(ball.vx) * speed * sin(theta). vy = -speed * cos(theta). Speed constant maybe increase on brick. If theta max 65°, not super sharp but okay.

Brick collision: iterate rows. Bricks have x,y,w,h, hp, maxHp, tough, cracked, powerUp, alive. Collision circle? Simple AABB with radius. For each alive brick, check ball center within bounds maybe inset radius. If collide, determine side by overlap. Push out and reflect. Could be tricky. Simpler: check if ball intersects brick rect (with radius inset). Determine collision based on previous position? For bounce not pass. Use axis overlap. We can just reverse appropriate axis based on overlap depth. Or compute closest point. Need ball never pass through bricks. With fixed timestep maybe okay. Use small dt clamp.

Brick layout: one level, at least 6 rows. Logical canvas height 800, paddle around 90, top 60. Brick rows maybe y start 70, rowHeight 34, height 24. 6 rows = 204 px plus. Could have 8 rows? At least 6. Width 1280. Bricks maybe 8 columns. Mix normal hp1, tough hp2 cracked after first, power-ups. Need some bricks carry power-up icon; when broken they drop it, catching with paddle gives wider paddle (10 sec) or multi-ball (3 balls).

Power-up design: brick has powerUp type maybe 'wide' or 'multi'. When brick broken (hp<=0), if powerUp, create powerup at brick position falling? Could just drop with vy. Paddle catch if ball? Or powerup falls, paddle catches if overlapping x within paddle width and y near top? Requirement when broken they drop it, and catching it with paddle gives... So implement falling power-up: on break with powerUp, set active powerup {x,y,vx,vy,type, active}. Gravity? Or straight down. Paddle catches if ball? Actually falling object. If paddle rect overlaps powerup and powerup.y + h/2 >= paddle.y? Could catch if powerup.y + radius > paddle.y - 10 and within x. Then apply powerup, remove. Else continue fall, off screen maybe remove. But in Breakout, powerup often from brick goes to paddle via ball. Falling is fine.

Wider paddle: 10 seconds. Multi-ball: 3 balls. Multi-ball: on apply, remove current balls, create 3 balls from maybe center top with angles spread. Keep score etc. Lives? Multi-ball not extra life. Wider paddle: paddle width multiplier 1.6 for 10 sec, timer. Or width increase. Maybe also color.

Tough bricks need 2 hits and visibly crack after first. Normal brick color. Tough: brick color darker/red, hp2. After first hit hp=1 and cracked=true, draw crack lines and maybe brick slightly offset? "visibly crack after first one." Draw crack path. After second break particle etc. Tough may carry power-up? Could be normal or tough. Some bricks carry power-up icon; maybe tough ones? Requirement mix normal and tougher; some bricks visibly carry power-up icon; when broken they drop it. Could have normal bricks with power-up. Tough maybe no power-up. Need icon visible. Draw small circle/star above brick or inside. Use text? Canvas no external fonts? Can use system fonts. Draw circle and cross. Maybe power-up icon: cyan/white. Brick with powerUp draws star or orb. When broken, drop.

Particles: when brick breaks, spawn particles at brick center with random velocity, life, color. Update, draw circles. Also maybe paddle/ball break? Just brick.

Lives: 3. Lose life when ball hits bottom. Reset ball to paddle. If lives 0 game over. Score: brick hp maybe 50 normal, 100 tough? Power-ups no score? Display score, lives. Victory when all bricks destroyed. Then state 'victory'. Restart option.

Game over and victory screens with restart option. Overlay with text and "Click or press a key to restart". Since no alert/confirm. Use state overlay. Restart resets game. Click/key starts/restarts.

Ball never pass through bricks/paddle. Paddle collision: if ball moving down and ball.y + r >= paddle.y and ball.y - r <= paddle.y + height and x within paddle rect, bounce. Need not double. Use paddle.y top? Paddle y = 70, height 14. Ball bottom >= paddle.y && ball top <= paddle.y+height. Compute relative hit. Clamp. Reflect. If missed, life lost, reset ball.

Ball never pass through bricks: Use collision each frame before update? Could update ball position then check. To prevent passing, check previous position? Simpler: after moving, check each brick; if collide, resolve and don't move ball into brick? We can do continuous. But likely okay. To be robust: before update, compute newPos. For each brick, if circle intersects, reflect. But multiple. Simpler: move ball, then check collisions; if hit, push out and reflect. Since dt small speed maybe not tunnel. Speed max maybe 700, brick height 24, dt 1/60 => 11px < height, okay. Paddle height 14, okay.

Collision resolution: For each alive brick, use circle vs AABB. Compute closest point. dx = clamp(ball.x, brick.x, brick.x+brick.w) - ball.x etc? Actually closestX = Math.max(brick.x, Math.min(ball.x, brick.x+brick.w)); closestY similarly. distX = ball.x - closestX; distY = ball.y - closestY; dist = sqrt. If dist < r, collision. Determine overlap in x/y. To reflect: if distX > distY? Or compute penetration. Simpler: compute overlapX = r*2 - (rect width?) Hmm.

Use method: nx = (ball.x - closestX)/r? Actually normal from ball to closest point? If closest point is corner, normal not axis. Simpler axis: if ball center x < brick.x, vx = -|vx|; if > brick.x+w, vx = -|vx|; if ball y < brick.y, vy = -|vy|; if > top, vy = -|vy|. But order can cause issues. Use smallest penetration axis: compute overlapLeft = ball.x - brick.x (if ball.x < brick.x+w?), etc. Let's define distance from center to sides:
leftDist = ball.x - brick.x
rightDist = brick.x + brick.w - ball.x
topDist = ball.y - brick.y
bottomDist = brick.y + brick.h - ball.y
If ball inside, distances negative. Penetration depth = -min? Hmm.

For reflection, determine axis by overlap:
overlapLeft = brick.x - ball.x + r? Actually if ball moving left/right. Maybe use previous position. But can just set velocity based on which side ball came from. Since ball moves mostly down, check vertical. If ball.y < brick.y + brick.h/2? hit top => vy = -abs(vy); vx maybe adjust? If hit bottom => vy = abs(vy). If hit left/right => vx = ... But if moving down and hit top, reflect vy. If moving up and hit bottom, reflect vy. If moving horizontally and hit side, reflect vx. Use:
if (ball.vy > 0 && ball.y - r < brick.y + brick.h && ball.y + r > brick.y) { // hit top? Actually moving down, bottom enters top? 
}
Better: if ball moving down (vy>0) and ball.y + r - brick.y < brick.h? Hmm.

Let's do circle-AABB collision:
Compute closestX = clamp(ball.x, brick.x, brick.x + brick.w);
Compute closestY = clamp(ball.y, brick.y, brick.y + brick.h);
const dx = ball.x - closestX;
const dy = ball.y - closestY;
const distSq = dx*dx + dy*dy;
const minDist = r;
if (distSq < minDist*minDist) {
  // collision
  // Determine normal by smallest penetration? Use axis overlap:
  const overlapLeft = (ball.x + r) - brick.x; // positive if ball right edge past left
  const overlapRight = (brick.x + brick.w) - (ball.x - r); // positive if ball left edge before right
  const overlapTop = (ball.y + r) - brick.y;
  const overlapBottom = (brick.y + brick.h) - (ball.y - r);
  // penetration depths maybe negative if overlapping. But we know collision.
  // Choose axis with minimum penetration? Actually if ball just touching, overlaps tiny.
  // Simpler: compute distance from center to each edge inside brick? 
}
Maybe easier: resolve by checking previous position. Store prevX, prevY. If new position collides and previous didn't, determine direction by prev - new? But not necessary.

Let's implement simple: before moving, check if ball would collide with brick? Or move and reflect. For no pass, after moving, if collision:
- Calculate overlap on axes: overlapX = Math.max(0, Math.min(ball.x + r, brick.x + brick.w) - Math.max(ball.x - r, brick.x)); overlapY similarly. Actually overlap is penetration.
- If overlapX < overlapY, reflect x: if ball.x < brick.x + brick.w/2? vx = -Math.abs(vx); else vx = Math.abs(vx)? But if moving down and hit top, overlapY smaller, reflect y.
Better: compute penetration depths from center to sides within brick:
leftPen = (ball.x - r) - brick.x; // positive if ball left edge > brick left? Not good.
Let's just use axis sign based on ball position relative to brick center and velocity:
if (ball.x < brick.x + brick.w/2) { // hit left side
   if (Math.abs(vx) > 0) vx = -Math.abs(vx); else ...
} else { vx = Math.abs(vx); }
if (ball.y < brick.y + brick.h/2) { // hit top side
   if (Math.abs(vy) > 0) vy = -Math.abs(vy); else ...
} else { vy = Math.abs(vy); }
But this flips if ball center crosses half? Might be okay. For paddle, hit position uses relative.

Maybe for brick, determine collision normal by comparing ball center to brick center: nx = ball.x - centerX, ny = ball.y - centerY; if |nx| > |ny| reflect x else reflect y. Then flip sign of velocity component. This gives angle based on hit position? For brick, just bounce away. If hit top, ny negative? Let's not overcomplicate.

We'll do:
function resolveBrickCollision(ball, brick) {
  const cx = brick.x + brick.w/2, cy = brick.y + brick.h/2;
  const nx = ball.x - cx;
  const ny = ball.y - cy;
  const len = Math.hypot(nx, ny) || 1;
  const nxn = nx/len, nyn = ny/len;
  // reflect velocity across normal
  const dot = ball.vx*nxn + ball.vy*nyn;
  ball.vx -= 2*dot*nxn;
  ball.vy -= 2*dot*nyn;
  // push out
  const overlap = brick.h/2 + ball.r - Math.max(Math.abs(nx), Math.abs(ny));? Not needed if small.
}
But for paddle angle not this.

For no pass, after reflect, okay.

Brick hit detection: circle intersects rect. Use closest point method. If collision, reflect using normal from center? Actually normal from brick center to ball is fine. Then push out by setting position = closest point + normal*r. Compute closest point. Then reflect. That should work.

Pseudo:
function circleRectCollide(ball, b) {
  const closestX = clamp(ball.x, b.x, b.x+b.w);
  const closestY = clamp(ball.y, b.y, b.y+b.h);
  const dx = ball.x - closestX;
  const dy = ball.y - closestY;
  const distSq = dx*dx+dy*dy;
  const minDist = ball.r;
  if (distSq > minDist*minDist) return false;
  // normal
  let nx, ny;
  if (distSq === 0) { // inside
    nx = ball.x - (b.x+b.w/2);
    ny = ball.y - (b.y+b.h/2);
  } else {
    nx = dx/distSq *? Actually normal from closest point to ball: nx = dx / Math.sqrt(distSq) if distSq>0 else ball - center.
  }
  // reflect
  const dot = ball.vx*nx + ball.vy*ny;
  ball.vx -= 2*dot*nx;
  ball.vy -= 2*dot*ny;
  // normalize velocity to speed
  const sp = Math.hypot(ball.vx, ball.vy);
  if (sp===0) sp=1;
  ball.vx = ball.vx/sp*ball.speed;
  ball.vy = ball.vy/sp*ball.speed;
  // push out
  const d = Math.sqrt(distSq);
  if (d < ball.r) { // inside
    ball.x = closestX + (nx||1)*ball.r? Need normal unit.
  }
  return true;
}
If inside, normal = (ball - center)/len. Then push out: ball.x = brick center + normal*r? Actually if inside, push to boundary along normal. ball.x = cx + nx*r; ball.y = cy + ny*r. But if nx=0? Use axis.

Let's implement robust enough.

Brick iteration order: rows top to bottom, cols left to right. Ball may collide with one. After collision, break brick? Usually ball only loses hp; if hp>1, decrement, cracked=true, no break. If hp<=0, break, particles, maybe powerup, score. Then continue? Could break multiple? Not needed.

Score: normal brick 50, tough 100? Or hp*? Display. When brick hit and hp decreases, maybe score += value? Better score when destroyed. Tough destroyed second hit score 100. Normal destroyed 50.

Brick creation: rows = 6? Let's do 7 rows for at least 6. Top y=80, rowHeight=36, height=24. Brick width: available 1280 minus margins. Maybe 8 columns with gaps. Let's compute: marginX=40, gap=16, brickWidth = (1280 - 2*marginX - (cols-1)*gap)/cols = (1280-80-112)/8=136. So each 136x24. Rows:
y start 90, rowHeight 38, height 26. 7 rows => 90+7*38=316. Bottom safe. Paddle y=660? Canvas height 800, paddle at 720? Let's set paddle y=690, height 14. Ball start x=640, y=600. Top 60. Brick top 90. Good. Paddle y=700? Height 14, bottom 714, ball reset y=700 - r - 2? Actually ball above paddle. Set paddle.y = 690, height=14, ball.y = paddle.y - ball.r - 2. Bottom at 800, ball radius 8, safe.

Rows colors: normal #ef4444? Tough #7f1d1d? Background dark. Bricks rounded? Draw rect with slight top highlight. Tough cracked after first: draw crack lines. Use save/translate? Just draw.

Brick layout: Maybe 8 cols, 7 rows. Types: for each row, pattern. Need at least 6 rows. Mix normal and tougher. Power-ups on some normal bricks. Let's define rows with hp and powerUp. Could manually create array of objects per cell. 8 columns x 7 rows. For each col,row, decide type.

Let's design:
cols=8, rows=7.
Brick area top=90, rowH=38, height=26, gapX=16, marginX=40, width=(1280-80-112)/8=136.
Row types:
Row 0 y=90: tough at cols 0,3,6? normal others. No power? maybe power at col 2? Hmm.
Need mix normal and tougher. Tough hp2 cracked. Some bricks carry power-up. Let's assign randomly or fixed. Fixed for determinism.

Maybe:
for r in 0..6:
  for c in 0..7:
    // pattern
    if r==0: hp = (c%3==0)?2:1; powerUp = (c==4)?'wide':'none';
    if r==1: hp = (c%4==0)?2:1; powerUp = (c==2)?'multi':'none';
    if r==2: hp=1; powerUp = (c==5)?'wide':'none';
    if r==3: hp = (c%2==0)?2:1; powerUp = (c==1)?'multi':'none';
    if r==4: hp=1; powerUp = (c==6)?'wide':'none';
    if r==5: hp = (c%3==0)?2:1; powerUp = (c==3)?'multi':'none';
    if r==6: hp=1; powerUp = null;
This gives tough in rows 0,1,3,5; power-ups in rows 0,1,2,3,4. Some tough maybe not power. At least 6 rows. 7 rows. Good.

But ball speed and gameplay: 56 bricks, tough more. Fine.

Power-up falling: when brick destroyed, if brick.powerUp, create powerUp {x: brick.x + w/2, y: brick.y + h/2, type, vy: 150, active:true}. It should fall. Paddle catch: if powerUp.y + 10 >= paddle.y && powerUp.y - 10 <= paddle.y + paddle.height && overlap x within paddle. Apply. For wide: paddle.wideUntil = now + 10000; paddle.w = base*1.6; maybe score? For multi: create 3 balls. Need maybe if multi, clear balls, create balls from top center with angles -30,0,30? Or from paddle. We'll create from ball launch position with directions. For demo AI, okay.

Wider paddle: during 10 sec, paddle width = baseWidth * 1.6. Draw label? maybe not.

Multi-ball: when applied, remove all balls? Actually current ball maybe should stay? Requirement multi-ball (3 balls). So set balls = [current?, new...]? Simpler: convert current ball into first, spawn 2 more. Or remove all and spawn 3 from paddle area. Let's do: const old = balls.pop(); const newBalls = [old? ...]. To not lose, create 3 balls all from launch pos: center with up, left-up, right-up. But current ball maybe not at launch. Better: on multi, set balls = []; launch 3 from (paddle.x+w/2, paddle.y - r - 2) with angles. But if no ball? There is always ball. Do:
const b = balls[0];
balls = [b, makeBall(b.x,b.y,-30), makeBall(b.x,b.y,30)]? But duplicates. Or just create 3 new from paddle. For game, okay.

Ball object: x,y,vx,vy,r,speed. makeBall(x,y,angleDeg?) with direction up. For launch: angle from vertical, e.g. -30 deg left, 0, 30 right. vx = speed*sin(rad), vy = -speed*cos(rad). For initial ball: x=640, y=600, vx=0, vy=-speed? Or random slight. Set vx=0, vy=-360. After launch.

Game loop: requestAnimationFrame. dt = min(0.033, (now-last)/1000). Update AI, input, balls, powerups, bricks, particles, collisions, camera? No camera.

State: 'ready', 'playing', 'gameover', 'victory'. Score, lives, high? no storage. Maybe local score? no storage. Just score.

Overlay: if state != playing, draw semi-transparent panel, text. For ready: "CLICK OR PRESS A KEY TO START". For gameover: "GAME OVER" "Score: X" "Click or press a key to restart". For victory: "VICTORY!" "Score: X" "Click or press a key to restart". Restart on click/keydown. Need no alert.

Start: state='playing'; initGame(); lives=3; score=0; balls=[makeBall...]; bricks created. demo mode true. aiEnabled true. Paddle reset. Powerup timer reset.

Click/press key start: In ready/gameover/victory, if click/key pressed -> start/restart. But after playing, clicking shouldn't restart. Need keydown handler: if state != playing and (e.key === 'Enter' || e.key === ' ' || e.key.length===1) start/restart. For click, overlay click listener. But if canvas click during playing maybe maybe launch ball? Not necessary but could. We'll add only when state != playing. Or start button? Overlay clickable.

Keyboard: ArrowLeft/ArrowRight set human control. Also maybe A/D? Not required. When state playing and (ArrowLeft/Right) pressed, aiEnabled=false, move paddle. For start, if state ready and key Enter/Space/Arrow? Avoid starting on arrows? Use e.key === 'Enter' || e.key === ' ' || e.key === 'r'? But user says Click or press a key to start. Any key maybe. But if arrow during play moves. So in keydown, if state!=='playing' and (e.key==='Enter'||e.key===' '||e.key==='r'||e.key==='R') start/restart. For ready, any key? Could use e.key.length===1 or Enter/Space. But simpler: Enter/Space/KeyR. "press a key" maybe any. Could start on any key except arrows? Let's do if state!=='playing' && (e.key === 'Enter' || e.key === ' ' || e.key === 'r' || e.key === 'R') start/restart. Maybe also 'y'? Not needed.

Click: overlay.addEventListener('click', start). Canvas click during ready. After playing, no overlay, so click no restart. Good.

Mouse: canvas mousemove -> if state playing, set human control true, aiEnabled=false, move paddle to mouse x. Need getBoundingClientRect and logical coords. Use rect = canvas.getBoundingClientRect(); x = (clientX-rect.left)/rect.width*1280. Clamp. On mousedown? Not needed. But to ensure control after click? Start overlay click sets state. Mouse move after click works. Keyboard after click: keydown handles arrows. Good.

AI: if aiEnabled, paddle.x = ball.x - paddle.w/2, maybe clamp. Ball moving down; if ball moving up maybe still track? AI should track ball. For self-playing, paddle follows ball x. If ball moving left/right, fine.

Paddle: y=690, height=14, width=90 (base). Wider timer. Draw rounded rect. Color. Maybe bounce zone.

Ball: radius 8, speed starts 380, increases 6 per brick destroyed? Max 700. Paddle bounce maybe keep speed. If multi, speed same.

Collisions:
- Ball vs bricks: loop alive bricks. If collide, handle. Since circle-AABB function returns normal maybe. We can just check and reflect. If brick destroyed, mark dead, particles, score, powerup. Break out? Could continue. But if one collision, maybe stop loop for this ball to avoid double. We'll use flag.

- Ball vs paddle: if ball.vy > 0 and ball.y + r >= paddle.y and ball.y - r <= paddle.y + paddle.h and ball.x >= paddle.x - r? Actually paddle rect x..x+w, y..y+h. Circle intersects if ball.x + r > paddle.x && ball.x - r < paddle.x + paddle.w && ball.y + r > paddle.y && ball.y - r < paddle.y + paddle.h. If true, bounce. Compute hit pos = clamp((ball.x - paddle.x)/paddle.w, 0,1). angle. Set position above paddle to prevent repeat: ball.y = paddle.y - ball.r - 2; maybe adjust vx/vy. Then bounce.

- Ball vs bottom: if ball.y - r > 800? Actually if ball.y - r > canvas.height + 20 => lose life. Or if ball.y - r > 800. Lose life: lives--; if lives<0? set lives=0? Start 3. If lives <=0 gameover. Else reset ball to paddle.

- Ball vs top: if ball.y - r < 0, ball.y = r, vy = Math.abs(vy).

- Ball vs walls: left/right. vx = ±speed.

Particles: array {x,y,vx,vy,life,maxLife,color,size}. On brick break, spawn 12 particles. Update life -= dt*60? Use life in ms? Use life = 0.5 seconds, decay dt. alpha = life/max. Draw circle size*alpha. Remove if life<=0.

Power-up: falling. Update y += vy*dt; vy += 900*dt? Or constant. Paddle catch. If y > canvas.height + 20 remove. Draw icon: circle with letter? Use type 'wide' draw arrows? 'multi' draw three dots. Simple: outer circle, inner icon. For wide: draw horizontal double arrow? For multi: draw three small circles. Or use text? Canvas fillText might use default font, okay. But icon should be clear. Draw circle + star. For wide: two triangles? Simpler: if wide, draw wide arrow (horizontal double arrow) maybe. If multi, draw three dots vertically? We'll draw circle and inner shape.

Wider paddle: paddle.w = baseWidth * (1 + 0.6) = 144. Timer until. Maybe visual pulse. Wider paddle might make bounce angle less sharp? Fine.

Multi-ball: set balls array. Need update all balls. Lives not changed. Score? no.

Victory: when all bricks dead (destroyed count == total bricks? or alive count==0). Check after brick update. If no alive bricks, state='victory'. But if multi etc. Victory overlay.

Game over: lives <=0.

Restart: reset all. Keep score? Maybe reset score to 0? Could keep high? No storage. Reset score. Maybe keep score? For restart option, reset score and lives.

Rendering:
- Clear background: fillRect #0f172a? Maybe dark navy. Or gradient. Use fillStyle '#0b1020', fillRect.
- Draw bricks area? maybe subtle grid? Not necessary. Could draw top wall? No.
- Draw bricks: for each alive, fillRect with color, rounded? Use fillRect. Top highlight: fillRect same with lighter? Simpler: fillStyle base; fillRect; fillStyle 'rgba(255,255,255,0.25)'; fillRect(x, y, w, 4)? Actually top highlight. Tough cracked: after first hit, hp=1, cracked=true. Draw darker base, then crack lines: moveTo random? Use fixed crack paths per brick? Could store crackSeed and draw polyline. Simpler: draw brick with hp==1 && cracked: fillStyle '#7f1d1d'? Wait tough base maybe '#dc2626'? Let's set normal '#3b82f6'? Breakout classic white? Let's choose modern: normal '#38bdf8' (cyan), tough '#f97316'? Hmm. Need mix. Normal bricks: '#22d3ee'? Tough: '#f87171'? Power-up icon. Background '#0f172a'. Paddle '#e2e8f0'. Ball '#facc15'. Let's pick normal '#38bdf8', tough '#ef4444'. Tough cracked after first: draw '#991b1b' and crack lines '#fbbf24'. Normal hp1: draw '#38bdf8'. Tough hp2: draw '#ef4444'. Cracked: draw '#7f1d1d', crack lines. Power-up icon: draw '#f0abfc'? Maybe white star.

Draw brick:
ctx.fillStyle = b.tough && b.hp===1 && b.cracked ? '#7f1d1d' : (b.tough ? '#ef4444' : '#38bdf8');
roundRect? Use ctx.fillRect(b.x, b.y, b.w, b.h). Then top highlight: ctx.fillStyle='rgba(255,255,255,0.35)'; ctx.fillRect(b.x, b.y, b.w, Math.min(4,b.h)); Then maybe bottom shade. For cracked: draw lines: ctx.strokeStyle='#fbbf24'; ctx.lineWidth=2; begin path; moveTo(b.x+6,b.y+4); lineTo(b.x+10,b.y+12); lineTo(b.x+6,b.y+18); lineTo(b.x+12,b.y+8); stroke. Could vary by crackSeed. Store crackSeed per brick. Or just static. Fine.

Power-up icon: if b.powerUp, draw small circle at top? Actually inside brick? Bricks occupy. Draw above brick: x+w/2, y-8? Or inside top. Since brick height 26, maybe draw icon at top center above? Better inside: circle at (b.x+w/2, b.y+h/2) r=6, color type. For wide: draw arrows. For multi: draw dots. But tough? Only normal with powerUp. Draw after brick.

Paddle: if wide timer > now, paddle.w = baseW*1.6. Draw rounded rect: ctx.fillStyle '#e2e8f0'; roundRect(paddle.x, paddle.y, paddle.w, paddle.h, 7). Maybe glow if wide. Ball reset y = paddle.y - ball.r - 2.

HUD: score top-left, lives top-right, power status? Draw text with font 'bold 20px system-ui'. Score: `SCORE ${score}`. Lives: draw small circles? Or text `LIVES ${lives}`. Requirement score displayed. We'll draw score top-left, lives top-right. Maybe power status bottom? Not necessary.

Overlay: if state != playing, draw dark translucent rect. Text centered. For ready: title "BREAKOUT",3 lives? Actually ready overlay. "CLICK OR PRESS A KEY TO START". For gameover: "GAME OVER", "SCORE 123", "CLICK OR PRESS A KEY TO RESTART". For victory: "VICTORY!", "SCORE 123", "CLICK OR PRESS A KEY TO RESTART". Use ctx.textAlign center. Font bold 48px. Panel. No interaction except click/key.

Restart option: click/key. Good.

Demo AI: aiEnabled. Paddle follows ball. Maybe if ball moving, ai.x = clamp(ball.x - paddle.w/2, 0, 1280 - paddle.w). If ai disabled, human.

Input: mousemove. Also touch? Maybe touchmove for mobile? Requirement adapt down to 375. Should support touch? Not explicitly but adapt gracefully. Could add touchmove. But iframe maybe. Add pointer events? Use mouse and touch. For touch, paddle follows. But start overlay click works. Add canvas pointerdown? Maybe not. Use mousemove and touchmove. For AI demo, fine.

Prevent default on arrows/space to avoid scroll. keydown: if e.key starts Arrow, preventDefault; if state playing and arrow, human control. If state != playing and key is Enter/Space/R/r, start/restart. Also maybe any key? We'll do.

Canvas scaling: CSS width 100%, height auto, aspect-ratio 1280/800. In HTML style: canvas { width: 100%; height: auto; aspect-ratio: 1280 / 800; display:block; }. But canvas internal width/height set 1280x800. CSS width 100% may stretch? aspect-ratio with height auto? Better set style width:100%; height:auto; aspect-ratio:1280/800. Or set canvas style width: min(100%, 1280px)? For 1280 viewport, 100% = 1280. For 375, scales. No horizontal scrollbar. Good.

Need maybe container max-width 1280 margin auto. body margin 0, background. Canvas display block. Overlay absolute? Use canvas parent position relative, overlay absolute inset 0. Or draw overlay on canvas. Easier draw on canvas. But click on overlay? If drawing on canvas, click canvas works. For start overlay, canvas receives click. But to restart, click canvas. So no HTML overlay needed. But text "Click or press a key to start" drawn. Click canvas starts if state != playing. Good. But after gameover, click canvas restarts? If state != playing, click anywhere starts/restarts. During playing, click does nothing. That's okay.

But requirement "Click or press a key to start" message. Draw text. Good.

Need first paint meaningful visible: background, bricks, paddle, ball, HUD, start message. Good.

No external files. Inline CSS/JS. No localStorage etc. No alert/confirm/prompt. No window.open. No storage. No cookies. Good.

No network requests. No fonts external. Use system fonts.

Console zero errors. Need avoid TS. Plain JS.

Let's write code carefully.

HTML structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breakout</title>
<style>
  html, body { margin:0; padding:0; background:#020617; height:100%; }
  body { display:flex; align-items:center; justify-content:center; min-height:100vh; font-family: system-ui, sans-serif; }
  #game { width:100%; max-width:1280px; aspect-ratio: 1280 / 800; }
  canvas { display:block; width:100%; height:auto; aspect-ratio: 1280 / 800; background:#0f172a; }
  @media (max-width: 480px) { #game { max-width:none; } }
</style>
</head>
<body>
<div id="game">
<canvas id="gameCanvas" width="1280" height="800"></canvas>
</div>
<script>
...
</script>
</body>
</html>

But CSS aspect-ratio maybe okay. body flex center. For 375 width, canvas width 375, height 234? Actually aspect ratio 1280/800=1.6, height=234. That's small but adapts. Requirement look right in 1280x800 and adapt down to 375. Maybe for mobile, min height? Could set canvas width:100%; height:auto; aspect-ratio. At 375, height 234, playable but small. Could use width:100%; height:auto; max-height:80vh? Hmm. To adapt gracefully, maybe set canvas width: min(100%, 1280px); height: auto; aspect-ratio. At 375, width=375, height=234. Fine.

Maybe better: #game { width: min(100%, 1280px); margin: 0 auto; } canvas { width: 100%; height: auto; display:block; aspect-ratio: 1280/800; }. No horizontal scrollbar. Body background.

JS:
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const W = 1280, H = 800;
const BASE_PADDLE_WIDTH = 90;
const PADDLE_HEIGHT = 14;
const PADDLE_Y = 690;
const BALL_RADIUS = 8;
const BRICK_TOP = 90;
const BRICK_HEIGHT = 26;
const ROW_HEIGHT = 38;
const COLS = 8;
const MARGIN_X = 40;
const GAP_X = 16;
const BRICK_WIDTH = (W - MARGIN_X*2 - (COLS-1)*GAP_X)/COLS; // 136

let state = 'ready';
let score = 0;
let lives = 3;
let bricks = [];
let balls = [];
let particles = [];
let powerUp = null;
let paddle = { x: (W - BASE_PADDLE_WIDTH)/2, y: PADDLE_Y, w: BASE_PADDLE_WIDTH, h: PADDLE_HEIGHT };
let wideUntil = 0;
let aiEnabled = true;
let lastTime = 0;
let lastKeyTime = 0;

function resetGame() {
  score = 0; lives = 3; particles = []; powerUp = null; wideUntil = 0;
  paddle.w = BASE_PADDLE_WIDTH; paddle.x = W/2 - BASE_PADDLE_WIDTH/2;
  balls = [];
  const b = makeBall(W/2, PADDLE_Y - BALL_RADIUS - 2, 0);
  balls.push(b);
  bricks = createBricks();
}

function createBricks() {
  const arr = [];
  const totalRows = 7;
  for (let r=0; r<totalRows; r++) {
    const y = BRICK_TOP + r*ROW_HEIGHT;
    for (let c=0; c<COLS; c++) {
      const x = MARGIN_X + c*(BRICK_WIDTH+GAP_X);
      let hp=1, tough=false, cracked=false, powerUp=null;
      // pattern
      if (r===0) {
        if (c%3===0) { hp=2; tough=true; }
        if (c===4) powerUp='wide';
      } else if (r===1) {
        if (c%4===0) { hp=2; tough=true; }
        if (c===2) powerUp='multi';
      } else if (r===2) {
        if (c===5) powerUp='wide';
      } else if (r===3) {
        if (c%2===0) { hp=2; tough=true; }
        if (c===1) powerUp='multi';
      } else if (r===4) {
        if (c===6) powerUp='wide';
      } else if (r===5) {
        if (c%3===0) { hp=2; tough=true; }
        if (c===3) powerUp='multi';
      }
      arr.push({ x, y, w: BRICK_WIDTH, h: BRICK_HEIGHT, hp, maxHp: hp, tough, cracked, powerUp, alive: true, crackSeed: Math.floor(Math.random()*100) });
    }
  }
  return arr;
}

Wait: if tough hp=2, maxHp=2. When hit hp-- to 1, cracked=true. When hp-- to 0, destroyed. Normal hp=1. Good.

But when creating tough, maxHp=2. For normal maxHp=1. When hit:
brick.hp -= 1;
if (brick.hp > 0) { brick.cracked = true; } // tough cracked after first
else { destroyBrick(brick); }
But for tough, after first hit hp=1, cracked true. After second hit hp=0, destroy. For normal hp=1 -> destroy. Good. But maxHp set to hp initial. For tough maxHp=2. Good.

Score: normal destroyed 50, tough destroyed 100? Could use brick.maxHp * 50? Let's set scoreValue = brick.tough ? 100 : 50.

makeBall(x,y,angleDeg):
const speed = 380;
const rad = angleDeg * Math.PI/180;
const b = { x, y, vx: Math.sin(rad)*speed, vy: -Math.cos(rad)*speed, r: BALL_RADIUS, speed };
return b;

For initial, angle 0.

Game loop:
function gameLoop(time) {
  const dt = Math.min(0.033, (time - lastTime)/1000 || 0.016);
  lastTime = time;
  update(dt, time);
  render();
  requestAnimationFrame(gameLoop);
}

update:
if state === 'playing':
  // AI
  if (aiEnabled) {
    paddle.x = clamp(ball.x - paddle.w/2, 0, W - paddle.w);
  }
  // balls
  for (let i=balls.length-1; i>=0; i--) {
    const b = balls[i];
    // walls
    if (b.vx > b.speed) b.vx = b.speed; else if (b.vx < -b.speed) b.vx = -b.speed;
    if (b.vy > b.speed) b.vy = b.speed; else if (b.vy < -b.speed) b.vy = -b.speed;
    b.x += b.vx*dt; b.y += b.vy*dt;
    // top
    if (b.y - b.r < 0) { b.y = b.r; b.vy = Math.abs(b.vy); }
    // sides
    if (b.x - b.r < 0) { b.x = b.r; b.vx = Math.abs(b.vx); }
    if (b.x + b.r > W) { b.x = W - b.r; b.vx = -Math.abs(b.vx); }
    // paddle
    if (b.vy > 0 && b.y + b.r >= paddle.y && b.y - b.r <= paddle.y + paddle.h && b.x + b.r > paddle.x && b.x - b.r < paddle.x + paddle.w) {
      const hit = clamp((b.x - paddle.x)/paddle.w, 0, 1);
      const angle = (hit - 0.5) * Math.PI * 0.9; // max ~86? Actually hit 0..1, angle from vertical max 0.45π=81 deg? Too sharp. Use max 60 deg = 1.047 rad. Let's do angle = (hit - 0.5) * Math.PI * 0.6; // max 54 deg.
      const rad = angle;
      const sp = b.speed;
      b.vx = Math.sin(rad) * sp * (b.vx >= 0 ? 1 : -1);
      b.vy = -Math.cos(rad) * sp;
      b.y = paddle.y - b.r - 2;
      // maybe if hit center, vy=-sp, vx=0.
    }
    // bricks
    let collided = false;
    for (const br of bricks) {
      if (!br.alive) continue;
      if (circleBrickCollide(b, br)) {
        collided = true;
        hitBrick(br, b); // may destroy
        break;
      }
    }
    if (collided) continue; // don't move further? Actually we already moved. Fine.

    // bottom
    if (b.y - b.r > H + 20) {
      lives--;
      if (lives <= 0) { state='gameover'; return; }
      // reset ball
      const nb = makeBall(W/2, PADDLE_Y - BALL_RADIUS - 2, 0);
      // replace ball
      balls[i] = nb;
      // maybe power? no
    }
  }

  // particles
  for (let i=particles.length-1; i>=0; i--) {
    const p = particles[i];
    p.life -= dt*60? Let's use life in seconds: p.life -= dt; if (p.life<=0) remove.
    p.x += p.vx*dt; p.y += p.vy*dt; p.vx *= (1 - 0.8*dt); etc.
  }

  // powerup
  if (powerUp) {
    powerUp.y += powerUp.vy*dt;
    powerUp.vy += 800*dt;
    // catch
    if (powerUp.y + 10 >= paddle.y && powerUp.y - 10 <= paddle.y + paddle.h && powerUp.x + 10 > paddle.x && powerUp.x - 10 < paddle.x + paddle.w) {
      applyPowerUp(powerUp.type);
      powerUp = null;
    }
    if (powerUp.y > H + 30) powerUp = null;
  }

  // check victory
  const anyAlive = bricks.some(b => b.alive);
  if (!anyAlive) { state = 'victory'; return; }

// update AI when playing etc.

Need dt in update for particles: p.life -= dt; maxLife maybe 0.6. alpha.

circleBrickCollide: returns bool and maybe reflects. We'll implement inside update or function. Function needs ball. It reflects and returns true. It should not destroy? hitBrick uses ball maybe not needed.

function circleBrickCollide(ball, b) {
  const closestX = Math.max(b.x, Math.min(ball.x, b.x + b.w));
  const closestY = Math.max(b.y, Math.min(ball.y, b.y + b.h));
  const dx = ball.x - closestX;
  const dy = ball.y - closestY;
  const distSq = dx*dx + dy*dy;
  const minDist = ball.r;
  if (distSq > minDist*minDist) return false;
  // normal
  let nx, ny;
  const cx = b.x + b.w/2, cy = b.y + b.h/2;
  const nx0 = ball.x - cx, ny0 = ball.y - cy;
  const len = Math.hypot(nx0, ny0) || 1;
  nx = nx0/len; ny = ny0/len;
  const dot = ball.vx*nx + ball.vy*ny;
  ball.vx -= 2*dot*nx;
  ball.vy -= 2*dot*ny;
  // normalize speed
  const sp = Math.hypot(ball.vx, ball.vy);
  const target = ball.speed;
  if (sp === 0) { ball.vx = 0; ball.vy = -target; }
  else {
    ball.vx = ball.vx/sp*target;
    ball.vy = ball.vy/sp*target;
  }
  // push out
  const d = Math.sqrt(distSq);
  if (d < ball.r) {
    ball.x = cx + nx*ball.r;
    ball.y = cy + ny*ball.r;
  } else {
    // move to boundary
    // not needed if just collided, but set to closest + normal*r
    ball.x = closestX + nx*ball.r;
    ball.y = closestY + ny*ball.r;
  }
  return true;
}

Wait if d < r, closest point may be corner? But okay. Pushing along normal from center to ball may not be exactly boundary if closest is corner, but okay.

Potential issue: reflecting using normal from brick center to ball may not reflect correctly if ball hits corner, but fine.

hitBrick(br, ball?):
function hitBrick(br, ball) {
  br.hp -= 1;
  if (br.hp > 0) {
    br.cracked = true;
    return;
  }
  // destroyed
  br.alive = false;
  const value = br.tough ? 100 : 50;
  score += value;
  spawnParticles(br.x + br.w/2, br.y + br.h/2, br.tough ? '#ef4444' : '#38bdf8');
  if (br.powerUp) {
    powerUp = { x: br.x + br.w/2, y: br.y + br.h/2, type: br.powerUp, vy: 180, active: true };
  }
}

But if tough hp=2, after first hit br.hp=1, cracked true, no destroy. After second hit br.hp=0, destroy. maxHp=2. Good.

Particles: spawnParticles(x,y,color) push 12. p = {x,y,vx:(Math.random()-0.5)*200, vy:(Math.random()-0.5)*200, life:0.5, maxLife:0.5, color, size:2+Math.random()*2}.

Render:
function render() {
  // bg
  ctx.fillStyle = '#0b1020';
  ctx.fillRect(0,0,W,H);
  // maybe subtle top gradient? skip.
  // bricks
  for (const b of bricks) {
    if (!b.alive) continue;
    ctx.fillStyle = b.tough && b.cracked ? '#7f1d1d' : (b.tough ? '#ef4444' : '#38bdf8');
    ctx.fillRect(b.x, b.y, b.w, b.h);
    // top highlight
    ctx.fillStyle = 'rgba(255,255,255,0.25)';
    ctx.fillRect(b.x, b.y, b.w, Math.min(4, b.h));
    // maybe bottom shade
    // cracked
    if (b.tough && b.cracked) {
      ctx.strokeStyle = '#fbbf24';
      ctx.lineWidth = 2;
      ctx.beginPath();
      const seed = b.crackSeed;
      const cx = b.x + b.w/2, cy = b.y + b.h/2;
      ctx.moveTo(cx - 6 + (seed%3), cy - 6);
      ctx.lineTo(cx - 2 + (seed%2), cy - 2);
      ctx.lineTo(cx + 4 - (seed%3), cy + 2);
      ctx.lineTo(cx + 2 + (seed%2), cy + 6);
      ctx.stroke();
    }
    // powerup icon
    if (b.powerUp) {
      const px = b.x + b.w/2, py = b.y + b.h/2;
      ctx.fillStyle = '#f0abfc';
      ctx.beginPath();
      ctx.arc(px, py, 7, 0, Math.PI*2);
      ctx.fill();
      ctx.strokeStyle = 'rgba(255,255,255,0.8)';
      ctx.lineWidth = 1.5;
      ctx.stroke();
      if (b.powerUp === 'wide') {
        // draw wide arrows
        ctx.strokeStyle = '#0f172a';
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(px-5, py); ctx.lineTo(px-1, py);
        ctx.moveTo(px+1, py); ctx.lineTo(px+5, py);
        ctx.stroke();
        // maybe double arrow
      } else if (b.powerUp === 'multi') {
        ctx.fillStyle = '#0f172a';
        ctx.beginPath();
        ctx.arc(px-2, py, 2, 0, Math.PI*2);
        ctx.arc(px+2, py, 2, 0, Math.PI*2);
        ctx.fill();
      }
    }
  }

  // powerup falling
  if (powerUp) {
    ctx.fillStyle = '#f0abfc';
    ctx.beginPath();
    ctx.arc(powerUp.x, powerUp.y, 10, 0, Math.PI*2);
    ctx.fill();
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 2;
    ctx.stroke();
    // icon
    if (powerUp.type === 'wide') { ... } else { ... }
  }

  // paddle
  const wide = Date.now() < wideUntil; // or performance.now. Use time param? render(time). Let's pass time.
  const pW = wide ? BASE_PADDLE_WIDTH * 1.6 : BASE_PADDLE_WIDTH;
  ctx.fillStyle = wide ? '#a5f3fc' : '#e2e8f0';
  ctx.beginPath();
  ctx.roundRect(paddle.x, paddle.y, pW, paddle.h, 7); // roundRect supported? Chrome yes. But to be safe use fillRect? roundRect is supported in modern Chrome. Fine.
  ctx.fill();
  // draw wide timer bar? maybe not.

  // balls
  for (const b of balls) {
    ctx.fillStyle = '#facc15';
    ctx.beginPath();
    ctx.arc(b.x, b.y, b.r, 0, Math.PI*2);
    ctx.fill();
    ctx.strokeStyle = 'rgba(255,255,255,0.6)';
    ctx.lineWidth = 1;
    ctx.stroke();
  }

  // particles
  for (const p of particles) {
    ctx.globalAlpha = Math.max(0, Math.min(1, p.life / p.maxLife));
    ctx.fillStyle = p.color;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.size * (p.life / p.maxLife), 0, Math.PI*2);
    ctx.fill();
  }
  ctx.globalAlpha = 1;

  // HUD
  ctx.textAlign = 'left';
  ctx.fillStyle = '#e2e8f0';
  ctx.font = 'bold 20px system-ui, sans-serif';
  ctx.fillText(`SCORE ${score}`, 20, 40);
  ctx.textAlign = 'right';
  ctx.fillText(`LIVES ${lives}`, W-20, 40);
  // wide status
  if (wide) { ctx.textAlign='center'; ctx.fillStyle='#a5f3fc'; ctx.font='bold 16px system-ui'; ctx.fillText('WIDE PADDLE 10s', W/2, H-20); }

  // overlays
  if (state === 'ready') drawOverlay('CLICK OR PRESS A KEY TO START', 'BREAKOUT', '...');
  else if (state === 'gameover') drawOverlay('GAME OVER', `SCORE ${score}`, 'CLICK OR PRESS A KEY TO RESTART');
  else if (state === 'victory') drawOverlay('VICTORY!', `SCORE ${score}`, 'CLICK OR PRESS A KEY TO RESTART');

}

function drawOverlay(title, subtitle, hint) {
  ctx.fillStyle = 'rgba(2,6,23,0.75)';
  ctx.fillRect(0,0,W,H);
  ctx.textAlign = 'center';
  ctx.fillStyle = '#f8fafc';
  ctx.font = 'bold 56px system-ui, sans-serif';
  ctx.fillText(title, W/2, H/2 - 20);
  if (subtitle) { ctx.font = 'bold 24px system-ui'; ctx.fillStyle = '#93c5fd'; ctx.fillText(subtitle, W/2, H/2 + 30); }
  ctx.font = '20px system-ui';
  ctx.fillStyle = '#cbd5e1';
  ctx.fillText(hint, W/2, H/2 + 70);
}

Need render(time) for wide. Or use Date.now(). Better pass time.

gameLoop(time) calls render(time).

Update wide: if (time < wideUntil) paddle.w = ... else paddle.w = BASE. But paddle.w used for physics. Keep paddle.w dynamic. In update: if (time > wideUntil) paddle.w = BASE_PADDLE_WIDTH; else paddle.w = BASE_PADDLE_WIDTH*1.6; But paddle object w maybe. We'll set in update. On reset paddle.w=BASE.

ApplyPowerUp(type):
if type === 'wide':
  wideUntil = performance.now() + 10000; // or time. Use performance.now.
if type === 'multi':
  // create 3 balls
  balls = [];
  const base = balls? no. We need current ball maybe. In update, powerUp catch may happen during ball loop; balls array current. We can create new balls from current ball position.
  const b = balls[0]; // but loop over balls; if catch during loop, modifying array? Better handle powerUp in update after balls? Or applyPowerUp can use last ball. Simpler: in update, after ball loop, handle powerUp. Then balls not being modified. Let's restructure: handle powerUp after balls loop. Then applyPowerUp can use balls[0].
  const b = balls[0];
  balls = [];
  balls.push(makeBall(b.x, b.y, -30));
  balls.push(makeBall(b.x, b.y, 0));
  balls.push(makeBall(b.x, b.y, 30));
  // maybe remove old? We replaced. Fine.

But makeBall with angle -30 gives vx negative, vy negative (up). For angle 0 vy=-speed. For 30 vx positive. Good. They all from same point. Multi-ball.

For wide: wideUntil = performance.now() + 10000. paddle.w maybe updated next frame. Or set paddle.w = BASE*1.6 immediately.

Input:
canvas.addEventListener('mousemove', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = (e.clientX - rect.left) * (W / rect.width);
  paddle.x = clamp(x - paddle.w/2, 0, W - paddle.w);
  aiEnabled = false;
});
canvas.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const rect = canvas.getBoundingClientRect();
  const touch = e.touches[0];
  const x = (touch.clientX - rect.left) * (W / rect.width);
  paddle.x = clamp(x - paddle.w/2, 0, W - paddle.w);
  aiEnabled = false;
});

keydown:
window.addEventListener('keydown', (e) => {
  const key = e.key;
  if (['ArrowLeft','ArrowRight','ArrowUp','ArrowDown',' '].includes(key)) e.preventDefault();
  if (state !== 'playing') {
    if (key === 'Enter' || key === ' ' || key === 'r' || key === 'R') {
      startGame();
    }
    return;
  }
  if (key === 'ArrowLeft' || key === 'ArrowRight') {
    aiEnabled = false;
    paddle.x = clamp(paddle.x + (key === 'ArrowRight' ? 500 : -500) * (1/60), 0, W - paddle.w);
  }
});

But for start, pressing arrow in ready? Not needed. For play, arrow moves. For ready, any key? The requirement "Click or press a key to start". Maybe better: if state !== 'playing' && (key === 'Enter' || key === ' ' || key === 'r' || key === 'R') start. But pressing arrow won't start. Could be okay? To be safe, start on any key except when playing? But if playing, arrows move. If ready, any key could start. Let's do:
if (state !== 'playing') {
  if (key === 'Enter' || key === ' ' || key === 'r' || key === 'R' || key.length === 1) startGame();
  return;
}
But key.length===1 includes arrows? No arrows length >1. Space length 1? Actually ' ' length 1, but we preventDefault. Might start on space. Fine. But if user presses Shift? length 1, starts. Okay. Might start on any key. Good. But when playing, handle arrows.

Need startGame:
function startGame() {
  state = 'playing';
  score = 0;
  lives = 3;
  particles = [];
  powerUp = null;
  wideUntil = 0;
  paddle.w = BASE_PADDLE_WIDTH;
  paddle.x = W/2 - BASE_PADDLE_WIDTH/2;
  aiEnabled = true;
  balls = [makeBall(W/2, PADDLE_Y - BALL_RADIUS - 2, 0)];
  bricks = createBricks();
}

For restart same.

Click: canvas.addEventListener('click', () => {
  if (state !== 'playing') startGame();
});
But during playing, click might not start. Good. However clicking during play might also not move paddle. Not needed.

But start overlay: after clicking, state becomes playing. The same click might also trigger? No.

Need initial render in ready. reset? We should create bricks? For first paint ready, maybe bricks visible? Yes, create bricks, paddle, ball? For ready, show background bricks and paddle? Could call resetGame() initially? But startGame resets. For first paint, set state='ready', score=0, lives=3, bricks=createBricks(), paddle reset, balls=[makeBall...]? The ready screen should show game behind? "Something meaningful must be visible on first paint" so show bricks, paddle, ball, HUD, start message. So initialize:
state='ready';
score=0; lives=3; particles=[]; powerUp=null; wideUntil=0;
paddle.w=BASE_PADDLE_WIDTH; paddle.x=W/2-...
balls=[makeBall(W/2, PADDLE_Y - BALL_RADIUS - 2, 0)];
bricks=createBricks();
aiEnabled=true;

But if ready, AI maybe not update? We can still update ball? Maybe not. Just render. But ball should be visible. For ready, maybe no update or update ball? Could update ball in ready? Better just render static. But AI not needed.

In update, if state === 'playing', do game logic. Else maybe update particles? Not needed. But for ready, render.

Initial state ready. Click starts. Good.

Need game loop always running. requestAnimationFrame. lastTime init 0. dt calculation: if lastTime is 0, dt = (time - 0)/1000 huge? Actually first frame time from performance.now ~ small? Could be large. Better:
let lastTime = performance.now();
function gameLoop(time) {
  let dt = (time - lastTime) / 1000;
  lastTime = time;
  if (dt > 0.05) dt = 0.016;
  update(dt, time);
  render(time);
  requestAnimationFrame(gameLoop);
}
Good.

Need performance.now for wideUntil. Use time from rAF? rAF timestamp is performance.now. So use time. wideUntil = time + 10000.

Render wide: const wide = time < wideUntil; But if time is rAF timestamp. Good.

Update: if (time < wideUntil) paddle.w = BASE_PADDLE_WIDTH*1.6; else paddle.w = BASE_PADDLE_WIDTH;

But paddle.w changes, and human paddle position clamp. Fine.

AI: if aiEnabled, paddle.x = clamp(ball... ) but if multi-ball, maybe use first ball. Use balls[0]. If no balls? shouldn't.

Brick update: only alive. After ball collision, hitBrick may destroy. Need if ball destroyed? No.

Victory check: after all updates, if bricks.every(b=>!b.alive) && state==='playing' -> state='victory'. But if no balls? maybe.

Game over: lives <= 0. When ball hits bottom, lives--. If lives < 0? Set lives=0? Start 3. If lives <=0 -> gameover. Else reset ball.

Ball reset: replace current ball in array. In loop with index, set balls[i] = makeBall(...). But if multi, okay.

Paddle collision: need to avoid ball stuck. Set ball.y = paddle.y - ball.r - 2; Also maybe recompute vx/vy. If hit from left/right? Since ball moving down, vy>0. Set vy = -Math.cos(rad)*speed; vx = Math.sin(rad)*speed * (b.vx >= 0 ? 1 : -1). But if b.vx=0, direction? okay.

Bounce angle: hit = clamp((b.x - paddle.x)/paddle.w, 0, 1). angle = (hit - 0.5) * Math.PI * 0.6; // max 0.3π = 54°. Center hit=0.5 -> angle=0 -> straight up. Edges -> ±27°? Wait (hit-0.5)*0.6π = at hit 0 => -0.3π = -54°, at hit 1 => +54°. That's sharp enough? Max 54° from vertical. Maybe max 65°: (hit-0.5)*Math.PI*0.65 => ±58°. Let's use 0.65. Center straight up. Good.

Paddle width wide increases, hit range larger. Fine.

Ball speed: starts 380. On brick destroy maybe increase? We can increase ball speed by 4 per destroyed brick? Might make tough impossible? Keep constant or +2. For polish, increase speed slightly when destroying brick? But not required. Could leave constant. Maybe set b.speed += 2 when brick destroyed? But ball object in loop. Could just keep speed. For challenge, okay.

Score display: `SCORE ${score}`. Lives: `LIVES ${lives}`.

Power-up catch: need handle after balls loop. In update, if state playing and powerUp:
  const p = powerUp;
  const catchNow = p.y + 10 >= paddle.y && p.y - 10 <= paddle.y + paddle.h && p.x + 10 > paddle.x && p.x - 10 < paddle.x + paddle.w;
  if (catchNow) { applyPowerUp(p.type); powerUp = null; }
  else { p.y += p.vy*dt; p.vy += 800*dt; if (p.y > H+30) powerUp = null; }
But catch should not require moving? Check overlap. If p.y + r >= paddle.y and p.y - r <= paddle.y + h. Since falling downward, when reaches top. Good. If paddle wider, catch wider? Use paddle.w.

When apply multi, balls array changes. Need if powerUp catch after ball loop, okay.

When wide, set wideUntil = time + 10000; paddle.w = BASE*1.6.

When multi,:
const b = balls[0];
const newBalls = [];
newBalls.push(makeBall(b.x, b.y, -30));
newBalls.push(makeBall(b.x, b.y, 0));
newBalls.push(makeBall(b.x, b.y, 30));
balls = newBalls;
Maybe if current ball had velocity, ignore. Fine.

Particles update:
for (let i=particles.length-1; i>=0; i--) {
  const p = particles[i];
  p.life -= dt;
  if (p.life <= 0) { particles.splice(i,1); continue; }
  p.x += p.vx*dt;
  p.y += p.vy*dt;
  p.vx *= (1 - 2*dt);
  p.vy *= (1 - 2*dt);
}

Spawn particles: for 12, push.

Rendering power-up falling: if powerUp. Draw circle, icon.

Overlay: draw text. For ready, maybe title "BREAKOUT" and hint. For gameover, "GAME OVER" and score. For victory, "VICTORY!". The requirement: Game over and victory screens with restart option. Overlay hint says click or press key to restart. Good.

Restart: click canvas when state != 'playing'. But if state is 'gameover', click starts new game. Good.

Need ensure no localStorage etc.

Let's write final code. Must be one fenced code block. We can include full HTML.

Let's consider potential bugs:
- ctx.roundRect may not be supported? Modern Chrome supports. Fine. But to be safe, implement roundRect helper? Could use fillRect to avoid issues. But roundRect supported in Chrome 99+. Latest Chrome yes. Fine.
- Canvas CSS aspect-ratio: need set. Use style="width:100%; height:auto; aspect-ratio: 1280 / 800; display:block;" But height auto with aspect-ratio maybe works? Better set canvas { width: 100%; height: auto; aspect-ratio: 1280 / 800; display: block; } In Chrome, aspect-ratio with height auto works? Yes. Or set style height: auto; aspect-ratio: 1.6. Should be okay.
- Body flex center may cause overflow? Use min-height 100vh, align center. For 375, canvas height 234, okay.
- No horizontal scrollbar: body overflow-x hidden? Add html,body { overflow-x: hidden; }.
- If canvas internal 1280x800 and CSS width 100%, height auto, aspect ratio. Good.

- Ball vs brick: circleBrickCollide reflects, but if brick destroyed, ball may still be inside? We push out. Good.
- Multiple bricks: break after one. Fine.

- Paddle bounce: condition b.y + b.r >= paddle.y && b.y - b.r <= paddle.y + paddle.h. Since paddle.y=690, height=14, ball.r=8. If ball moving down, eventually b.y + r >= 690 and b.y - r <= 704. Good. Bounce sets b.y = paddle.y - b.r - 2 = 680. Next frame vy negative, moves up. No immediate re-collide because vy<0. Good.
- If ball hits paddle side? Since vy>0, mostly top. If hit position edge, angle sharp. Good.
- Ball never pass through paddle: if missed, falls bottom. Condition for bottom: b.y - b.r > H + 20. Since H=800, ball bottom maybe 800? If ball.y - r > 820? Actually if ball.y - r > H + 20 = 820, it's below. But ball can go beyond bottom. Better if (b.y - b.r > H) lose life. Since canvas bottom 800, if ball top > 800, lost. Use > H + 10. Fine. If ball.y - r > H + 20 maybe too late? At y=820, top=812, already below 800. So lose when b.y - b.r > H. Use > H. But to be safe > H + 20? No, use > H. Let's use if (b.y - b.r > H) { ... }.

- Ball top: if (b.y - b.r < 0) { b.y = b.r; b.vy = Math.abs(b.vy); } Good.

- Ball walls: if (b.x - b.r < 0) { b.x = b.r; b.vx = Math.abs(b.vx); } etc.

- Brick collision: circleBrickCollide uses ball.r=8, brick.h=26. Should detect. Push out. Reflect. If ball speed high, might tunnel? dt clamp 0.033, speed max maybe 700, distance 23 > height, okay. But if multi speed same.

- Score: when brick destroyed, score += value. If tough destroyed after two hits, score 100. Good.

- Victory: when all bricks destroyed. Since bricks array includes dead, check some alive. If no alive, state='victory'. But if player loses life before victory? okay.

- Restart: startGame resets bricks, etc.

- AI: if aiEnabled, paddle.x = clamp(ball.x - paddle.w/2, 0, W - paddle.w). If ball moving up, AI might move down? It just follows x. Fine. For demo, if ball at top, AI may not move but ball goes up? Actually ball starts at y=600 moving up? makeBall with angle 0 gives vy=-380, so ball moves up immediately! That's bad. Initial ball should move down or slight. For ready, ball should be stationary? For start, maybe launch downward. makeBall for initial should have vy = speed (down) or small random. Let's set makeBall(x,y,angleDeg=0) gives vy=-speed*cos. For initial, we want moving down? In breakout, ball starts top moving down. Use angle -90? Actually angle from vertical, up is negative? We defined vy = -speed*cos, so 0 gives vy=-speed (up). For initial, set vy = speed (down) and vx=0. Or call makeBall(W/2, 600, -90)? That gives vy = -speed*cos(-90)=0? Wait cos(-90)=0, so vy=0. Not good. Better custom: makeBall(x,y,angleDeg) with vy = -speed*cos(rad). For down, need vy = +speed, so angle = -90? cos(-90)=0, no. Actually angle from vertical, up is negative y. If we want down, y positive. So set vy = speed * cos(rad)? Let's redefine: angle from vertical, positive to right? Center straight up: vx=0, vy=-speed. So vy = -speed * cos(rad). For down, rad = 180? cos(180)=-1, vy= speed. vx=sin(180)=0. So initial can be makeBall(x,y,180) for down. Or just set b.vy = 380, b.vx=0. Let's make makeBall(x,y,angleDeg) with rad = angleDeg*π/180; vx = Math.sin(rad)*speed; vy = -Math.cos(rad)*speed. For angle=180, vx=0, vy=380 (down). For multi, angles -30,0,30 give up. Good. Initial use angle=180 (down). Paddle launch: rad = angle from vertical, up is negative. We can use same. For launch after paddle: set b.vx = Math.sin(rad)*sp; b.vy = -Math.cos(rad)*sp; where rad from hit. For rad=0, vy=-sp up. Good.

Initial ball: makeBall(W/2, PADDLE_Y - BALL_RADIUS - 2, 180). That moves down. Good.

- AI: paddle follows ball. If ball moving down, AI centers. Good.

- Wide paddle: paddle.w changes. AI clamp uses paddle.w. Good.

- Human control: arrow keys move paddle. But if state playing and arrow pressed, we set aiEnabled=false and move. Good.

- Mouse: mousemove sets aiEnabled=false and moves paddle. But if paddle.w changes due to wide, mousemove uses new paddle.w. Good.

- Touch: touchmove sets aiEnabled=false.

- Prevent context menu? Not needed.

- Console errors: ensure no undefined variables. Use let/const. Function declarations hoisted.

Let's draft code fully.

Potential issue: In update, we loop balls and when bottom lose life, we replace ball. If state changes to gameover, we should return from update to avoid further. Good.

When brick destroyed, we might want to continue checking collisions? We break after hitBrick. But if hitBrick destroys brick, ball reflected. Break out of brick loop. Then continue ball update? We used `if (collided) continue;` which continues the balls for loop, not brick loop. Wait inside ball for loop, after brick collision we `if (collided) continue;` which goes to next ball. That's wrong; should not continue to next ball? Actually if collided, we might still want to process bottom? No, better break out of brick loop and not check bottom this frame? We can just not continue to next ball; weilded. Let's structure:
for (let i=balls.length-1; i>=0; i--) {
  const b = balls[i];
  // move etc
  // paddle
  // brick
  let collided = false;
  for (const br of bricks) {
    if (!br.alive) continue;
    if (circleBrickCollide(b, br)) { collided = true; hitBrick(br); break; }
  }
  // bottom
  if (!collided && b.y - b.r > H) { ... }
}
So if collided, skip bottom. Good.

- hitBrick signature: function hitBrick(br) { ... } no ball needed.

- When brick destroyed, spawn particles, maybe powerup.

- Score increase.

- Check victory after all balls processed and powerups etc. Could check after bricks.

Let's write update carefully.

```
function update(dt, time) {
  // update wide paddle width
  if (time < wideUntil) paddle.w = BASE_PADDLE_WIDTH * 1.6;
  else paddle.w = BASE_PADDLE_WIDTH;

  if (state !== 'playing') return;

  if (aiEnabled && balls.length > 0) {
    const b = balls[0];
    paddle.x = clamp(b.x - paddle.w/2, 0, W - paddle.w);
  }

  for (let i = balls.length - 1; i >= 0; i--) {
    const b = balls[i];
    // walls
    if (b.vx > b.speed) b.vx = b.speed; else if (b.vx < -b.speed) b.vx = -b.speed;
    if (b.vy > b.speed) b.vy = b.speed; else if (b.vy < -b.speed) b.vy = -b.speed;
    b.x += b.vx * dt;
    b.y += b.vy * dt;

    if (b.y - b.r < 0) { b.y = b.r; b.vy = Math.abs(b.vy); }
    if (b.x - b.r < 0) { b.x = b.r; b.vx = Math.abs(b.vx); }
    if (b.x + b.r > W) { b.x = W - b.r; b.vx = -Math.abs(b.vx); }

    // paddle
    if (b.vy > 0 && b.y + b.r >= paddle.y && b.y - b.r <= paddle.y + paddle.h && b.x + b.r > paddle.x && b.x - b.r < paddle.x + paddle.w) {
      const hit = clamp((b.x - paddle.x) / paddle.w, 0, 1);
      const rad = (hit - 0.5) * Math.PI * 0.65;
      const sp = b.speed;
      b.vx = Math.sin(rad) * sp * (b.vx >= 0 ? 1 : -1);
      b.vy = -Math.cos(rad) * sp;
      b.y = paddle.y - b.r - 2;
    }

    // bricks
    let collided = false;
    for (const br of bricks) {
      if (!br.alive) continue;
      if (circleBrickCollide(b, br)) {
        collided = true;
        hitBrick(br);
        break;
      }
    }

    if (!collided) {
      if (b.y - b.r > H) {
        lives--;
        if (lives <= 0) { state = 'gameover'; return; }
        balls[i] = makeBall(W/2, PADDLE_Y - BALL_RADIUS - 2, 180);
      }
    }
  }

  // particles
  for (let i = particles.length - 1; i >= 0; i--) { ... }

  // powerup
  if (powerUp) { ... }

  // victory
  if (bricks.every(b => !b.alive)) { state = 'victory'; return; }
}
```

Note: `bricks.every` on array with dead/alive. If all dead, victory. But at start some alive. Good.

When state changes to gameover/victory, return from update. The game loop will still render because update returns but render continues. Good.

PowerUp update:
```
if (powerUp) {
  const p = powerUp;
  const catchNow = p.y + 10 >= paddle.y && p.y - 10 <= paddle.y + paddle.h && p.x + 10 > paddle.x && p.x - 10 < paddle.x + paddle.w;
  if (catchNow) {
    applyPowerUp(p.type, time);
    powerUp = null;
  } else {
    p.y += p.vy * dt;
    p.vy += 800 * dt;
    if (p.y > H + 30) powerUp = null;
  }
}
```
But if catchNow, we don't move. Good.

applyPowerUp:
```
function applyPowerUp(type, time) {
  if (type === 'wide') {
    wideUntil = time + 10000;
    paddle.w = BASE_PADDLE_WIDTH * 1.6;
  } else if (type === 'multi') {
    const b = balls[0];
    if (b) {
      balls = [ makeBall(b.x, b.y, -30), makeBall(b.x, b.y, 0), makeBall(b.x, b.y, 30) ];
    }
  }
}
```

Wait multi: makeBall with angle -30 gives vx negative, vy=-speed*cos(-30)=-0.866speed (up). Angle 0 gives vx=0, vy=-speed (up). Angle 30 gives vx positive, vy=-0.866speed. Good.

But if balls array replaced while iterating? We call applyPowerUp after ball loop, so okay.

Particles update: life in seconds. spawnParticles life 0.5.

```
function spawnParticles(x,y,color) {
  for (let i=0; i<14; i++) {
    particles.push({ x, y, vx: (Math.random()-0.5)*220, vy: (Math.random()-0.5)*220, life: 0.5, maxLife: 0.5, color, size: 2+Math.random()*2 });
  }
}
```

Render: need time param. For wide: const wide = time < wideUntil; But time from rAF timestamp is performance.now, and wideUntil set with time. Good.

In render, draw HUD. If wide, maybe paddle color. Already.

Overlay: draw only if state != 'playing'. For ready, gameover, victory. For playing, no overlay.

Need maybe draw ball even in ready? Yes. In render, draw balls. In ready, ball moving? update returns early, so ball static. Good.

But initial ball: makeBall(W/2, PADDLE_Y - BALL_RADIUS - 2, 180) -> down. In ready, update returns early, so static. Good.

Now, check start overlay: state ready, drawOverlay. Click starts. Good.

Let's consider first paint: state ready, bricks created, ball static, paddle, HUD, overlay. Good.

Potential issue: `canvas.addEventListener('click', ...)` will also fire when clicking during playing? We check state !== 'playing'. Good.

Potential issue: keydown start: if state !== 'playing' and key is 'r' etc. But when playing, pressing 'r' does nothing. Fine.

Potential issue: arrow keys during playing: we preventDefault. Good.

Potential issue: `e.key.length === 1` might include 'r', so any letter starts. Fine.

Let's write final code. Need ensure no syntax errors. Let's mentally compile.

HTML:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Breakout</title>
<style>
  html, body { margin:0; padding:0; background:#020617; overflow-x:hidden; }
  body { min-height:100vh; display:flex; align-items:center; justify-content:center; font-family: system-ui, sans-serif; }
  #game { width: min(100%, 1280px); }
  canvas { display:block; width:100%; height:auto; aspect-ratio: 1280 / 800; background:#0f172a; }
</style>
</head>
<body>
<div id="game">
<canvas id="gameCanvas" width="1280" height="800"></canvas>
</div>
<script>
...
</script>
</body>
</html>
```

CSS: `#game { width: min(100%, 1280px); }` but min() maybe okay. For 1280 viewport, width 1280. For 375, 375. Canvas width 100%, height auto, aspect-ratio. Good.

JS:
```
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const W = 1280;
const H = 800;
const BASE_PADDLE_WIDTH = 90;
const PADDLE_HEIGHT = 14;
const PADDLE_Y = 690;
const BALL_RADIUS = 8;
const BRICK_TOP = 90;
const BRICK_HEIGHT = 26;
const ROW_HEIGHT = 38;
const COLS = 8;
const MARGIN_X = 40;
const GAP_X = 16;
const BRICK_WIDTH = (W - (MARGIN_X * 2) - ((COLS - 1) * GAP_X)) / COLS;
...
```

Compute BRICK_WIDTH: (1280 - 80 - 112)/8 = 136. Good.

Functions:
```
function clamp(v, min, max) { return Math.max(min, Math.min(max, v)); }
function makeBall(x, y, angleDeg) {
  const speed = 380;
  const rad = angleDeg * Math.PI / 180;
  return { x, y, vx: Math.sin(rad) * speed, vy: -Math.cos(rad) * speed, r: BALL_RADIUS, speed };
}
```

State variables.

`createBricks` uses Math.random for crackSeed. Fine.

In createBricks, for r from 0 to 6, y = BRICK_TOP + r*ROW_HEIGHT = 90 + r*38. Last row y=90+6*38=318, h=26, bottom=344. Fine.

Now render:
```
function render(time) {
  ctx.fillStyle = '#0b1020';
  ctx.fillRect(0, 0, W, H);
  // bricks
  for (const b of bricks mans) ...
```
Careful typo.

Draw brick:
```
ctx.fillStyle = b.tough && b.cracked ? '#7f1d1d' : (b.tough ? aref4444' : '#38bdf8');
```
Need quotes.

Let's write clean.

```
ctx.fillStyle = b.tough && b.cracked ? '#7f1d1d' : (b.tough ? '#ef4444' : is the '#38bdf8' : ...
```
No, write properly.

```
ctx.fillStyle = (b.tough && b.cracked) ? '#7f1d1d' : (b.tough ? '#ef4444' : '#38bdf8');
ctx.fillRect(b.x, b.y, b.w, b.h);
ctx.fillStyle = incomes... 
```
Top highlight:
```
ctx.fillStyle = 'rgba(255,255,255,0.25)';
ctx.fillRect(b.x, b.y, b.w, Math.min(4, b.h));
```

Cracked:
```
if (b.tough && b.cracked) {
  ctx.strokeStyle = '#fbbf24';
  ctx.lineWidth = 2;
  ctx.beginPath();
  const seed = b.cplus? 
```
Use `b.crackSeed`.

```
ctx.moveTo(b.x + 8 + (b.crackSeed % 5), b.y + 4);
ctx.lineTo(b.x + 12 + ((b.crackSeed >> 2) % 3), b.y + 10);
ctx.lineTo(b.x + 6 + ((b.crackSeed >> 1) % 4), b.y + 14);
ctx.line with? 
```
Simpler static lines:
```
ctx.moveTo(b.x + 8, b.y + 4);
ctx.lineTo(b.x + 12, b.y + 10);
ctx.lineTo(b.x + 6, b.y + 14);
ctx.lineTo(b.x + 12, b.y + 20);
ctx.stroke();
```
Good.

Power icon:
```
if (b.powerUp) {
  const px = b.x + b.w/2;
  const py = b.y + b.h/2;
  ctx.fillStyle = '#f0abfc';
  ctx.beginPath();
  ctx.arc(px, py, 7, 0, Math.PI*2);
  ctx.fill();
  ctx.strokeStyle = 'rgba(255,255,255,0.9)';
  ctx.lineWidth = 1.5;
  ctx.stroke();
  if (b.powerUp === 'wide') {
    ctx.strokeStyle = '#0f172a';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(px - 5, py);
    ctx.lineTo(px - 1, py);
    ctx.move, etc.
```
Use `ctx.moveTo`, `ctx.lineTo`.

For multi:
```
ctx.fillStyle = '#0f172a';
ctx.beginPath();
ctx.arc(px - 2, py, 2, 0, Math.PI*2);
ctx.arc(px + 2, py, 2, 0, Math.PI*2);
ctx.fill();
```

Paddle:
```
const wide = time < wideUntil;
const pW = wide ? BASE_PADDLE_WIDTH * 1.6 : BASE_PADDLE_WIDTH;
ctx.fillStyle = wide ? '#a5f3fc' : '#e2e8f0';
ctx.beginPath();
ctx.roundRect(paddle.x, paddle.y, pW, paddle.h, 7);
ctx.fill();
```
roundRect may need radius Away? okay.

Balls:
```
for (const b of balls) { ... }
```

Particles:
```
for (const p of particles) {
  const alpha = Math.max(0, Math.min(1, p.life / p.maxLife));
  ctx.globalAlpha = alpha;
  ctx.fillStyle = p.color;
  ctx.beginPath();
  ctx.arc(p.x, p.y, p.size * alpha, 0, Math.PI*2);
  ctx.fill();
}
ctx.globalAlpha = 1;
```

HUD:
```
ctx.textAlign = 'left';
ctx.fillStyle = '#e2e8f0';
ctx.font = 'bold 20px system-ui, sans-serif';
ctx.fillText('SCORE ' + score, 20, 40);
ctx.textAlign = 'right';
ctx.fillText('LIVES ' + lives, W - 20, 40);
if (wide) { ctx.textAlign='center'; ctx.fillStyle = '#a5folog'; ...}
```
Use '#a5f3fc'.

Overlay:
```
function drawOverlay(title, subtitle) {
  ctx.fillStyle = 'rgba(2,6,23,0.78)';
  ctx.fillRect(0,0,W,H);
  ctx.textAlign = 'center';
  ctx.fillStyle = '#f8fafc';
  ctx.font = 'bold 56px system-ui, sans-serif';
  ctx.fillText(title, W/2, H/2 - 20);
  if (subtitle) {
    ctx.font = 'bold 24px system-ui, sans-serif';
    ctx.fillStyle = '#93c5fd';
    ctx.fillText(subtitle, W/2, H/2 + 30);
  }
  ctx.font = '20px system-ui, sans-serif';
  ctx.fillStyle = '#cbd5e1';
  ctx.fillText('CLICK OR PRESS A KEY TO START', W/2, H/2 + 70);
}
```
But for gameover/victory, hint should be restart. Pass moe.

```
function drawOverlay(title, subtitle, hint) { ... }
```

Render end:
```
if (state === 'ready') drawOverlay('BREAKOUT', 'CLICK OR PRESS A KEY TO START');
else if (state === post) drawOverlay('GAME OVER', 'SCORE NEW', 'CLICK OR PRESS A KEY TO RESTART',);
...
```
Better:
```
if (state === 'ready') drawOverlay('BREAKOUT', null, 'CLICK OR PRESS A KEY TO START');
else if (state === 'gameover') drawOverlay('GAME OVER', 'SCORE ' + score, 'CLICK OR PRESS A KEY TO RESTART');
else if (state === 'victory') drawOverlay('VICTORY!', 'SCORE ' + score, 'CLICK OR PRESS A KEY TO RESTART');
```

Draw overlay function:
```
function drawOverlay(title, subtitle, hint) {
  ctx.fillStyle = 'rgba(2,6,23,0.78)';
  ctx.fillRect(0,0,W,H);
  ctx.textAlign = 'center';
  ctx.fillStyle = '#f8fafc';
  ctx.font = 'bold 56px system-ui, sans-serif';
  ctx.fillText(title, W/2, H/2 - 20);
  if (subtitle) {
    ctx.font = 'bold 24px system- sys? Mist.
```
Need no typo.

```
    ctx.font = 'bold 24px system-ui, sans-serif';
```

```
  }
  ctx.font = '20px system-ui, sans-serif';
  ctx.fillStyle = '#cbd5e1';
  ctx.fillText(hint, W/2, H/2 + 70);
}
```

Now game loop:
```
let lastTime = performance.now();
let state = 'ready';
...
function gameLoop(time) {
  let dt = (time - lastTime) / 1000;
  lastTime = time;
  if (dt > 0.05) dt = 0.016;
  update(dt, time);
  render(time);
  requestAnimationFrame(gameLoop);
}
requestAnimationFrame(gameLoop);
```

Input:
```
canvas.addEventListener('mousemove', (e) => { ... });
canvas.addEventListener('touchmove', (e) => { ... });
canvas.addEventListener('click', () => { if (state !== 'playing') startGame(); });
window.addEventListener('keydown', (e) => { ... });
```

In keydown, need use `e.key`. For start:
```
if (state !== 'playing') {
  if (e.key === 'Enter' || e.key === ' ' || e.key === 'r' || e.key === 'R' || e.key.length === 1) {
    startGame();
  }
  substitute...
  return;
}
```
But `e.key.length === 1` includes space? space key is ' ' length 1, so starts. Good. But during playing, we handle arrows. For arrows, e.key is 'ArrowLeft' length >1, so not start.

```
hello
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
  e.preventDefault();
  aiEnabled = false;
  const move = (e.key === 'ArrowRight' ? 520 : -520) * dt? We don't have dt in keydown. Use 600 per key press? Better move by paddle speed * dt. But keydown can use Date.now? Simpler: paddle.x += (e key right ? 600 : -600); (per press). Not frame-rate independent but okay. Or use e.repeat? Better just set based on key down. It's fine.
  paddle.x = clamp(paddle.x + (e.key === 'ArrowRight' ? 600 : -600), 0, W - paddle.w);
}
```
But if key held, repeats. Fine.

Mouse move:
```
const rect = canvas.getBoundingClientRect();
const x = (e.clientX - rect.left) * (W / rect.width);
paddle.x = clamp(x - paddle.w / 2, 0, W - paddle.w);
aiEnabled = false;
```
Touch similar.

Now final code. Let's ensure no `alert`, etc.

Let's write final answer with code block. Since final must be exactly one fenced code block, no text outside. We'll output.

Double-check requirements:
- Paddle controlled with mouse and left/right arrow keys. Yes.
- Bounce angle depends on hit position center straight, edges sharp. Yes rad max ~54°? Actually 0.65π = 117? Wait (hit-0 speaking, let's compute: hit=0, (0-0.5)*Math.PI*0.65 = -0.5*3.14159*0.65 = -1.022 rad = -58.5°. hit=1 => +58.5°. That's 58° from vertical, fairly sharp. Good. Center 0 => straight up. Good.
- One level with at least 6 rows of bricks, mixing normal and tougher that need 2 hits and visibly crack after first. Yes 7 rows, tough hp2, cracked.
- Some bricks visibly carry power-up icon; when broken they drop it, and catching it with paddle gives either wider paddle (10 seconds) or multi-ball (3 balls). Yes. We have power-ups on some bricks. When destroyed, powerUp set. Falling. Catch. Apply. Wide 10s, multi 3 balls. Good.
- Ball must never pass through bricks or paddle. We do collisions. Good.
- Particles when brick breaks. Yes.
- 3 lives, score displayed. Yes.
- Game over and victory screens with restart option. Yes.

- Games must start in 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. Yes. AI enabled on start. Overlay text.
- Iframe only receives keyboard events after user clicks it: if demo uses keyboard, display clear message. We use click to start, key starts. We don't rely on keyboard for demo. We have arrows. Good.
- Page must look right in 1280x800 and adapt down to 375. Yes.
- No horizontal scrollbar. Add overflow-x hidden.
- Something meaningful visible first paint. Yes.
- Everything interesting visible within first seconds. Yes.
- Nothing hidden behind high score, later level, long play. Yes.
- Games start unblocked? No.
- Reply exactly one fenced code block. Yes.

Let's now produce final code. Need be careful with quotes and syntax.

I'll write the full HTML in final. Let's compose.

Check JS syntax mentally:

- `const BRICK_WIDTH = channel` no.
- `function clamp(v, min, max) { return Math.max(min, Math.min(max, v)); }`
- `function makeBall(x, y, angleDeg) { const speed = 380; const rad = angleDeg * Math.PI / 180; return { x, y, vx: Math.sin(rad) * speed, vy: -Math.cos(rad) * speed, r: BALL_RADIUS, speed }; }`
- `let state_int = 'ready';` use `state`.
 be okay.

In update, `if (state !== 'playing') return;` so render continues. Good.

In game loop, `let>dt = (time - lastTime) / 1000;` first frame lastTime = performance.now() set before loop? We set `let lastTime = performance.now();` then loop. Good.

In update, wide: `if (time < wideUntil) paddle.w = BASE_PADDLE_WIDTH * 1.6; else paddle.w = BASE_PADDLE 20_int(some text) * 1.6; NEWPE和一个 NEWPE paddle.w = BASE_PADDLE_WIDTH;`

In render, `const wide = time < wideUntil; const pW = wide ? BASE_PADDLE_WIDTH * 1.6 : BASE_PADDLE_WIDTH和一个 NEWPE paddle.w = BASE_PADDLE 20? no.

Let's write carefully.

I'll now produce final code block.