Nemotron 3.5 Super VL (free)

The user wants a Breakout-style game with these specifics:
1. Paddle is a hamburger
2. Bricks break into tons of little hearts (particle explosion effect)
3. Self-contained web demo (single HTML file)
4. Everything inline (CSS in <style>, JS in <script>)
5. No external resources except allowed CDNs (but better to avoid network entirely for reliability)
6. Responsive: 1280x800 viewport, adapt down to 375px, no horizontal scrollbar
7. Something meaningful visible on first paint (screenshot at 3s)
8. Self-playing demo mode behind "Click or press a key to start" message
9. Keyboard events only after click
10. Zero errors in latest Chrome

I need to:
- Create an HTML5 canvas game
- Draw a hamburger paddle (since no external images, I'll draw it with canvas paths)
- Draw bricks that when destroyed spawn many heart particles
- Heart particles should be little hearts (can draw with canvas path or use emoji? Emoji might not render consistently but "💖" could work. Better to draw heart shapes with canvas for control)
- Demo mode: AI plays automatically until user clicks/presses key
- Start screen overlay
- Responsive canvas scaling
- Collision detection, ball physics
- Score, lives maybe
- Colors: hamburger brown/tan, bricks colorful, hearts red/pink

Structure:
- HTML: canvas, overlay div with "Click or press a key to start", maybe score/lives HUD
- CSS: full screen, flexbox center, canvas max-width etc, responsive
- JS:
  - Canvas setup with resize handling
  - Game state: startScreen, demoMode, playing, gameOver
  - Entities: ball, paddle (hamburger), bricks array, particles array
  - Hamburger drawing function: bun top, patty, cheese, lettuce, bun bottom
  - Heart particle class: position, velocity, life, draw heart shape
  - Brick class: x,y,w,h,color, alive
  - Input handling: mouse/touch for paddle, keyboard arrows
  - AI demo: paddle follows ball x
  - Update loop: move ball, wall collisions, paddle collision, brick collisions -> spawn hearts
  - Render loop: clear, draw bricks, draw paddle, draw ball, draw particles, draw HUD
  - Start overlay click/key to transition to playing (or demo mode playing behind it)

First paint: The canvas should show bricks, hamburger paddle, ball, and the start overlay immediately. That's meaningful.

Responsive: canvas should fit container, maybe use CSS `max-width: 100%; height: auto;` but canvas internal resolution vs display size. Better to set canvas width/height via JS to match container but capped. Or use a fixed logical resolution (e.g., 800x600) and scale via CSS. For simplicity, logical width = min(window.innerWidth, 800) maybe, height = 600 scaled down? Let's do a container with max-width 100%, canvas display block max-width 100%, and internally set canvas dimensions to something like 700x500 but scale down on small screens using CSS transform? Simpler: make canvas resolution match CSS size via `canvas.width = container.clientWidth`, `canvas.height = container.clientHeight` but cap height. However game logic depends on aspect ratio. Let's use fixed logical size 800x600 and scale canvas to fit parent using CSS `object-fit: contain` inside a fixed aspect-ratio container? That might be complex.

Alternative: Use `canvas { width: 100%; height: auto; }` and set internal resolution to `displayWidth x displayHeight` but that changes physics. Better to keep internal resolution fixed at 800x600, and CSS scales it down to fit screen. Container: `width: 100%; max-width: 800px; aspect-ratio: 4/3; position: relative; canvas { width: 100%; height: 100%; }`. This preserves aspect ratio and no horizontal scrollbar. On mobile 375px, canvas will be 375x281 roughly, scaled down. Game remains playable.

No external images. Draw hamburger with canvas.

Heart drawing: A heart shape can be made with bezier curves:
```
ctx.beginPath();
ctx.moveTo(x, y);
ctx.bezierCurveTo(x, y, x - size, y - size, x - size, y + size/2);
... etc
```
Simpler heart: two circles and a triangle bottom, or path:
```
ctx.beginPath();
ctx.moveTo(x, y);
ctx.bezierCurveTo(x - s, y - s, x - s*2, y + s*0.5, x, y + s*1.5);
ctx.bezierCurveTo(x + s*2, y + s*0.5, x + s, y - s, x, y);
ctx.fill();
ctx.stroke();
```
Need to verify heart path looks decent. Common heart path:
```
beginPath();
moveTo(x, y);
bezierCurveTo(x - size, y - size, x - size*1.5, y + size, x, y + size*1.5);
bezierCurveTo(x + size*1.5, y + size, x + size, y - size, x, y);
closePath();
```
Actually standard:
```
ctx.beginPath();
ctx.moveTo(x, y);
ctx.bezierCurveTo(x, y, x - r, y - r, x - r, y + r/2);
ctx.bezierCurveTo(x - r, y + r, x, y + r*1.5, x, y + r*1.5);
ctx.bezierCurveTo(x, y + r*1.5, x + r, y + r, x + r, y + r/2);
ctx.bezierCurveTo(x + r, y - r, x, y, x, y);
```
I'll make a `drawHeart(ctx, x, y, size, color)` function.

Particles: when brick breaks, spawn 20-40 hearts with random velocities, gravity, fade out.

Paddle hamburger drawing:
- Top bun: rounded rectangle, tan color (#D2B48C)
- Sesame seeds: small ovals
- Patty: dark brown circle/oval
- Cheese: yellow rectangle dripping
- Lettuce: green wavy shape
- Bottom bun: tan rounded rect

Since paddle moves, drawing relative to paddle center.

Ball: white circle with maybe a red outline.

Bricks: rows of colored rectangles with slight gap.

Game over / win: restart demo.

Demo mode: AI paddle moves toward ball.x with some lag/speed limit.

Overlay: semi-transparent dark background, text "Click or press a key to start", maybe "Hamburger Breakout" title.

Controls: Arrow keys / A-D / mouse move. Touch drag.

Let's write code carefully.

Canvas sizing:
```
const container = document.getElementById('game-container');
const canvas = document.getElementById('game');
function resize() {
  const w = Math.min(window.innerWidth, 800);
  const h = Math.floor(w * 0.75); // 4:3
  container.style.width = w + 'px';
  container.style.height = h + 'px';
  canvas.width = w;
  canvas.height = h;
}
```
But game logic coordinates should scale. Better to keep internal coordinate system fixed at 800x600 and scale drawing via CSS. But if canvas width/height change, coordinate system changes. Could use a fixed internal resolution and `ctx.scale()` based on display size. Let's do:

```
const GAME_W = 800;
const GAME_H = 600;
canvas.width = GAME_W;
canvas.height = GAME_H;
```
CSS:
```
#game-container { width: 100%; max-width: 800px; aspect-ratio: 4/3; margin: 0 auto; position: relative; }
canvas { width: 100%; height: 100%; display: block; }
#overlay { position: absolute; inset: 0; ... }
```
This way internal coords are always 800x600, CSS scales it. On mobile 375px width, canvas is scaled down but coords remain 800x600. Perfect.

Overlay text should be visible on first paint. Yes.

Demo mode starts automatically: ball moves, AI paddle moves. Overlay says click to start. When clicked, overlay hides, game continues but now player controls (or still demo? Usually "click to start" means take over). I'll make it: overlay visible, demo AI playing behind it. On click/key, overlay removed, player controls active. Ball and bricks continue from where they were? Or reset? Better reset when starting to give clean state. But user said "self-playing demo mode behind a Click or press a key to start message". So demo is active behind message. When they click, they start playing (probably reset level). I'll reset game on start.

Lives: 3. Score: 0.

Brick layout: rows, colors. When all bricks cleared, reset level (demo continues or player continues). Simple.

Particle system:
```
class Particle {
  constructor(x, y) {
    this.x = x; this.y = y;
    const angle = Math.random() * Math.PI * 2;
    const speed = 2 + Math.random() * 6;
    this.vx = Math.cos(angle) * speed;
    this.vy = Math.sin(angle) * speed;
    this.life = 1.0;
    this.decay = 0.015 + Math.random() * 0.02;
    this.size = 4 + Math.random() * 6;
    this.color = `hsl(${320 + Math.random()*40}, 100%, 60%)`; // pink/red
  }
  update() { this.x += this.vx; this.y += this.vy; this.vy += 0.15; this.life -= this.decay; }
  draw(ctx) { ctx.globalAlpha = this.life; drawHeart(...); ctx.globalAlpha = 1; }
}
```

Brick break: spawn ~25 particles at brick center.

Ball-paddle collision: reflect based on hit position.

Ball-brick collision: simple AABB, reflect velocity.

Drawing hamburger paddle:
Paddle width maybe 120, height 40.
Draw at paddle.x - w/2, paddle.y - h/2.
Layers:
- Bottom bun: fill #CD853F, rounded rect, y offset +10
- Lettuce: #4CAF50, wavy rect above bottom bun
- Cheese: #FFEB3B, rect above lettuce, dripping triangles
- Patty: #5D4037, circle/oval above cheese
- Top bun: #DEB887, rounded rect top, sesame seeds.

I'll write a `drawBurger(ctx, x, y, w, h)` function.

Ball: draw circle at ball.x, ball.y radius 8, white with orange outline maybe to look like a food item? Could be a "cherry" or just ball. Keep white.

Let's code.

Edge cases: `globalAlpha` needs restore. `ctx.save()`/`ctx.restore()`.

Responsive overlay text size: use relative units or JS font size based on canvas width. CSS can handle with `clamp()`. But overlay is inside container absolute. Use `font-size: clamp(1rem, 5vw, 1.5rem);`.

No horizontal scrollbar: `body { margin: 0; overflow: hidden; }`.

Start overlay:
```
<div id="overlay" class="overlay">
  <h1>Hamburger Breakout</h1>
  <p>Click or press any key to start</p>
</div>
```

Click on canvas or document to start. Keypress to start (only after click? The instructions say iframe only receives keyboard after click. So we can listen for click anywhere to start, then keydown works. Or just click to start and also enable keys after click.)

Implementation:
```
let started = false;
function startGame() { if(started) return; started = true; overlay.style.display='none'; resetGame(); requestAnimationFrame(loop); }
canvas.addEventListener('pointerdown', startGame);
window.addEventListener('keydown', (e)=>{ if(!started) startGame; });
```
But if user presses key before click, it starts. That's okay because click on page focuses it? Actually iframe only receives keyboard after click, but `window.addEventListener('keydown')` might not work before click in cross-origin iframe. However since we start on any click, and demo is running before that, it's fine. After click, keyboard works. I'll add click listener on document to be safe.

Demo AI:
```
if (demoMode) {
  const target = ball.x;
  paddle.x += (target - paddle.x) * 0.1;
  clamp paddle.x
}
```
When started, demoMode = false.

Controls:
- Pointer move: paddle.x = clientX scaled to canvas coords. Need to handle CSS scaling. Since canvas is 800x600 internal but displayed scaled, we need to get mouse position relative to canvas and map to internal coords.
```
function getMouseX(e) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = GAME_W / rect.width;
  return (e.clientX - rect.left) * scaleX;
}
```
- Arrow keys left/right move paddle.

Game loop:
```
function loop() {
  update();
  draw();
  requestAnimationFrame(loop);
}
```

Update:
- move ball
- wall collisions: left/right reverse vx; top reverse vy; bottom: lose life, reset ball/paddle, if lives 0 game over (reset to demo)
- paddle collision: if ball.y + r > paddle.y - h/2 && ball.y - r < paddle.y + h/2 && x overlap: reverse vy, adjust vx based on hit position. Push ball out.
- brick collision: iterate bricks, if intersect, mark dead, spawn particles, reverse vy (simple). Break out after one collision per frame or handle multiple? Simple one per frame.
- particles update, remove dead.
- if all bricks dead, reset level.

Reset level: generate bricks. Reset ball, paddle.

Brick generation:
```
const cols = 10, rows = 6;
const brickW = 70, brickH = 24;
const gap = 6;
const offsetTop = 50;
const offsetLeft = (GAME_W - (cols*(brickW+gap) - gap))/2;
for r... for c... color = hue based on row.
```

Colors: `hsl(${r*40 + c*10}, 70%, 60%)`.

Hearts: `tons of little hearts` -> maybe 30 per brick.

Let's write full HTML.

Check for console errors: ensure all variables defined, no external assets.

Heart path function:
```
function drawHeart(ctx, x, y, size, color) {
  ctx.save();
  ctx.translate(x, y);
  ctx.scale(size, size);
  ctx.fillStyle = color;
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.bezierCurveTo(-1, -1, -2, 0, 0, 2);
  ctx.bezierCurveTo(2, 0, 1, -1, 0, 0);
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}
```
Does this look like a heart? Let's test mentally:
Points: (0,0) bottom? Curve to (-1,-1), (-2,0), (0,2) -> left top bump to top center. Then (2,0), (1,-1), (0,0) -> right bump back to bottom. Actually (0,0) is bottom center? Let's trace:
start at (0,0).
curve to (-1,-1), control (-2,0), end (0,2): This goes up-left then to top center.
curve to (2,0), control (1,-1), end (0,0): from top center down-right to bottom center.
This creates a heart shape pointing down? Actually top center is (0,2), bottom is (0,0). Left bump around (-1,-1), right bump around (1,-1). Yes that's a heart upright. Good. Scale will make size.

But `ctx.scale(size, size)` scales line width too, but we just fill so fine.

Hamburger drawing function:
```
function drawBurger(ctx, x, y, w, h) {
  const cx = x, cy = y;
  // shadow? skip
  // bottom bun
  ctx.fillStyle = '#D2691E';
  ctx.beginPath();
  ctx.roundRect(cx - w/2, cy + h/4, w, h/2, h/4); // maybe not supported? roundRect is newer but Chrome supports. To be safe use arc or rect.
```
`roundRect` is supported in latest Chrome. But safest to use rect or custom. I'll use `rect` with some manual rounding or just rect. It's a demo, rects are okay but burger looks better rounded. I can do:
```
ctx.beginPath();
ctx.moveTo(cx-w/2, cy+h/4+h/8);
ctx.arcTo(cx-w/2, cy+h/2, cx, cy+h/2, h/8);
...
```
Too complex. Let's just use `rect` and colors, maybe add arc for bun top. Actually bun top can be arc.

Simpler burger:
- Bottom bun: rect fill #D2691E at bottom half.
- Lettuce: rect fill #7CB342 above bottom bun, slightly wavy? just rect.
- Cheese: rect fill #FFD54F above lettuce.
- Patty: arc fill #5D4037 above cheese (semi circle).
- Top bun: arc fill #DEB887 top.

Paddle y is center. Let's define burger height h. Bottom bun occupies cy + h/4 to cy + h/2. Lettuce cy + h/8 to cy + h/4. Cheese cy to cy + h/8. Patty cy - h/8 to cy? Top bun cy - h/2 to cy - h/8.

I'll draw:
```
ctx.fillStyle = '#8D6E63'; // bottom bun darker
ctx.fillRect(cx - w/2, cy + h*0.35, w, h*0.55);
// lettuce
ctx.fillStyle = '#66BB6A';
ctx.fillRect(cx - w/2 + 4, cy + h*0.25, w - 8, h*0.2);
// cheese
ctx.fillStyle = '#FFEB3B';
ctx.fillRect(cx - w/2 + 6, cy + h*0.1, w - 12, h*0.18);
// patty
ctx.fillStyle = '#5D4037';
ctx.beginPath();
ctx.arc(cx, cy - h*0.1, h*0.35, 0, Math.PI);
ctx.fill();
// top bun
ctx.fillStyle = '#D2B48C';
ctx.beginPath();
ctx.arc(cx, cy - h*0.35, h*0.35, Math.PI, 0);
ctx.lineTo(cx + h*0.35, cy - h*0.35);
ctx.lineTo(cx - h*0.35, cy - h*0.35);
ctx.fill();
// sesame seeds
ctx.fillStyle = '#fff';
for (...) ctx.fillRect(...)
```
This is rough but recognizable as a hamburger stack. Add outline stroke for definition.

Actually to make it look more like a bun, top bun should be a dome:
```
ctx.beginPath();
ctx.arc(cx, cy - h*0.3, h*0.4, Math.PI, 0, true); // top half?
```
I'll just draw it stylized.

Let's ensure `ctx.arc` calls are correct.

Full code now.

Also include "Score" and "Lives" text at top.

Game over: if lives <=0, show overlay again with "Game Over - Click to restart". Demo resumes.

Win: if no bricks, next level or reset.

Let's code.

Potential issue: `document.fonts` not needed.

Use `requestAnimationFrame`.

No network.

Let's write it.

I'll keep the code clean and comment.

One more thing: "something meaningful must be visible on first paint". The canvas with bricks and burger and ball will be visible behind overlay. Overlay has text. Good.

Responsive: body overflow hidden, container centered.

Let's produce final HTML.