Nemotron 3 Super

We need to produce HTML+CSS+JS inline for a breakout game where paddle is a hamburger (image? can't use external images, but we can use emoji or CSS to draw a hamburger). Use Unicode hamburger emoji 🍔 maybe. Brick when broken explodes into many little hearts (emoji ❤️). Use canvas for drawing; but could also use DOM elements; but for many hearts, canvas easier.

We must ensure something visible on first paint: show the game area with paddle, ball, some bricks.

Game should start in self-playing demo mode behind a "Click or press a key to start" message.

No external resources; only allowed CDN? Not needed. Use canvas.

We need to ensure no horizontal scrollbar; viewport width adapt.

Implement using requestAnimationFrame.

When brick destroyed, generate particle hearts (little hearts) that fly outward with random velocities, fade out.

Paddle as hamburger: we can draw a rectangle with toppings? Use simple shape: a brown rectangle with sesame seeds? Or just draw the hamburger emoji via canvas fillText.

Simplify: draw paddle as a rectangle with a bun top and bottom and a patty in middle using simple shapes.

But "paddle is a hamburger" could be just using the emoji.

We'll use canvas context.fillText to draw the emoji at paddle position.

Ball: simple circle.

Bricks: array of rectangles with colors; when hit, remove brick and spawn hearts.

Hearts: particles with position, velocity, alpha, life.

Implement game loop.

Self-play demo: when not started, we can have AI that moves paddle to follow ball x.

Display message overlay: "Click or press a key to start". When click or keypress, start game (set started=true). If game over (ball falls below paddle), we can reset.

We need to ensure no horizontal scrollbar: set canvas width=window.innerWidth *0.9? Use CSS to make canvas width 100% height auto? Use CSS: canvas { display:block; max-width:100%; height:auto; } and set its width and height via JS to match container.

Simplify: set canvas width = innerWidth, height = innerHeight *0.7? But ensure no horizontal scroll: set body margin 0, overflow hidden.

We'll create a container div with width:100vw; height:100vh; overflow:hidden; and canvas inside with width=100%; height=100%; but then drawing coordinates need to match.

Better: set canvas width = window.innerWidth; height = window.innerHeight*0.8; and then CSS: body{margin:0;overflow:hidden;display:flex;align-items:center;justify-content:center;} canvas{display:block;}

But then if height less than viewport, there may be vertical space but okay.

We'll just set canvas to width=window.innerWidth, height=400 (fixed). And ensure no horizontal scroll because width equals window width, body margin 0, overflow hidden.

Add resize listener to update.

Implement.

Now code.

We'll produce:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hamburger Breakout</title>
<style>
  body{margin:0;overflow:hidden;background:#fafafa;display:flex;align-items:center;justify-content:center;height:100vh;}
  canvas{background:#fff;display:block;}
  #overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;pointer-events:none;}
  #overlay.hidden{display:none;}
</style>
</head>
<body>
<div id="overlay">Click or press a key to start</div>
<canvas id="game"></canvas>
<script>
  const canvas = document.getElementById('game');
  const ctx = canvas.getContext('2d');
  let width, height;
  function resize(){
    width = window.innerWidth;
    height = window.innerHeight * 0.7; // keep some space
    if(height<300)height=300;
    canvas.width = width;
    canvas.height = height;
  }
  window.addEventListener('resize',resize);
  resize();

  const paddle = {
    w:120,
    h:30,
    x:0,
    y:0,
    speed:6,
    dx:0
  };
  const ball = {
    radius:10,
    x:0,
    y:0,
    vx:4,
    vy:-4
  };
  const bricks = [];
  const brickRowCount = 5;
  const brickColumnCount = Math.floor(width/60)-2; // adjust later
  const brickWidth = 50;
  const brickHeight = 20;
  const brickPadding = 10;
  const brickOffsetTop = 60;
  const brickOffsetLeft = 30;

  const particles = [];

  let started = false;
  let gameOver = false;
  let score = 0;

  function initBricks(){
    bricks.length=0;
    const cols = Math.floor((width - 2*brickOffsetLeft)/(brickWidth+brickPadding));
    for(let c=0;c<cols;c++){
      bricks[c]=[];
      for(let r=0;r<brickRowCount;r++){
        const brickX = c*(brickWidth+brickPadding)+brickOffsetLeft;
        const brickY = r*(brickHeight+brickPadding)+brickOffsetTop;
        bricks[c][r]={x:brickX,y:brickY,status:1};
      }
    }
  }

  function drawPaddle(){
    ctx.save();
    ctx.translate(paddle.x + paddle.w/2, paddle.y + paddle.h/2);
    // bun top
    ctx.beginPath();
    ctx.ellipse(0, -paddle.h/2 + 5, paddle.w/2, 8, 0, 0, Math.PI*2);
    ctx.fillStyle = '#deb887'; // burlywood
    ctx.fill();
    // patty
    ctx.beginPath();
    ctx.ellipse(0, 0, paddle.w/2 - 4, paddle.h/2 - 6, 0, 0, Math.PI*2);
    ctx.fillStyle = '#8b4513'; // saddle brown
    ctx.fill();
    // bun bottom
    ctx.beginPath();
    ctx.ellipse(0, paddle.h/2 -5, paddle.w/2, 8, 0, 0, Math.PI*2);
    ctx.fillStyle = '#deb887';
    ctx.fill();
    // sesame seeds on top bun
    ctx.fillStyle = '#f5deb3';
    for(let i=0;i<8;i++){
      const angle = (i/8)*Math.PI*2;
      const rad = paddle.w/2 - 2;
      const x = Math.cos(angle)*rad;
      const y = -paddle.h/2 + 5 + Math.sin(angle)*3;
      ctx.beginPath();
      ctx.arc(x,y,2,0,Math.PI*2);
      ctx.fill();
    }
    ctx.restore();
  }

  function drawBall(){
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
    ctx.fillStyle = '#ff6f61';
    ctx.fill();
  }

  function drawBricks(){
    for(let c=0;c<bricks.length;c++){
      for(let r=0;r<bricks[c].length;r++){
        const b = bricks[c][r];
        if(b.status===1){
          ctx.fillStyle = '#4caf50';
          ctx.fillRect(b.x, b.y, brickWidth, brickHeight);
          ctx.strokeStyle = '#388e3c';
          ctx.strokeRect(b.x, b.y, brickWidth, brickHeight);
        }
      }
    }
  }

  function createParticles(x,y){
    for(let i=0;i<20;i++){
      const angle = Math.random()*Math.PI*2;
      const speed = 2+Math.random()*4;
      particles.push({
        x:x,
        y:y,
        vx:Math.cos(angle)*speed,
        vy:Math.sin(angle)*speed,
        life:1.0,
        size:8+Math.random()*4
      });
    }
  }

  function drawParticles(){
    for(let i=particles.length-1;i>=0;i--){
      const p = particles[i];
      ctx.save();
      ctx.globalAlpha = p.life;
      ctx.fillStyle = '#e91e63'; // pink heart color
      // draw heart shape using path (approx)
      ctx.beginPath();
      const size = p.size;
      ctx.moveTo(p.x, p.y);
      // left lobe
      ctx.bezierCurveTo(p.x - size/2, p.y - size, p.x - size, p.y + size/2, p.x, p.y + size);
      // right lobe
      ctx.bezierCurveTo(p.x + size, p.y + size/2, p.x + size/2, p.y - size, p.x, p.y);
      ctx.fill();
      ctx.restore();
      // update
      p.x += p.vx;
      p.y += p.vy;
      p.life -= 0.02;
      if(p.life<=0){ particles.splice(i,1);}
    }
  }

  function collisionDetection(){
    for(let c=0;c<bricks.length;c++){
      for(let r=0;r<bricks[c].length;r++){
        const b = bricks[c][r];
        if(b.status===1){
          if(ball.x > b.x && ball.x < b.x+brickWidth &&
             ball.y > b.y && ball.y < b.y+brickHeight){
            ball.vy = -ball.vy;
            b.status = 0;
            score++;
            createParticles(b.x+brickWidth/2, b.y+brickHeight/2);
          }
        }
      }
    }
  }

  function movePaddle(){
    paddle.x += paddle.dx;
    if(paddle.x < 0) paddle.x = 0;
    if(paddle.x > width - paddle.w) paddle.x = width - paddle.w;
  }

  function moveBall(){
    ball.x += ball.vx;
    ball.y += ball.vy;
    // walls
    if(ball.x + ball.radius > width || ball.x - ball.radius < 0){
      ball.vx = -ball.vx;
    }
    if(ball.y - ball.radius < 0){
      ball.vy = -ball.vy;
    }
    // paddle
    if(ball.y + ball.radius > paddle.y &&
       ball.y - ball.radius < paddle.y + paddle.h &&
       ball.x > paddle.x && ball.x < paddle.x + paddle.w){
      ball.vy = -ball.vy;
      // add some spin based on where hit
      const relativeX = (ball.x - (paddle.x + paddle.w/2))/(paddle.w/2);
      ball.vx += relativeX*2;
    }
    // bottom
    if(ball.y + ball.radius > height){
      // game over
      gameOver = true;
    }
  }

  function aiPaddle(){
    // simple AI: move paddle towards ball x
    const target = ball.x - paddle.w/2;
    if(paddle.x < target - 10) paddle.dx = paddle.speed;
    else if(paddle.x > target + 10) paddle.dx = -paddle.speed;
    else paddle.dx = 0;
  }

  function draw(){
    ctx.clearRect(0,0,width,height);
    drawBricks();
    drawBall();
    drawPaddle();
    drawParticles();
    // score
    ctx.fillStyle = '#000';
    ctx.font = '20px sans-serif';
    ctx.textAlign = 'left';
    ctx.fillText('Score: '+score,20,30);
    if(gameOver){
      ctx.fillStyle = 'rgba(0,0,0,0.6)';
      ctx.fillRect(0,0,width,height);
      ctx.fillStyle = '#fff';
      ctx.font = '40px sans-serif';
      ctx.textAlign = 'center';
      ctx.fillText('Game Over',width/2,height/2);
      ctx.font = '20px sans-serif';
      ctx.fillText('Click or press a key to restart',width/2,height/2+40);
    }
  }

  function update(){
    if(!gameOver){
      if(started){
        aiPaddle();
        movePaddle();
        moveBall();
        collisionDetection();
      }
    }
    draw();
    requestAnimationFrame(update);
  }

  function startGame(){
    started = true;
    gameOver = false;
    score = 0;
    paddle.x = width/2 - paddle.w/2;
    paddle.y = height - paddle.h - 20;
    ball.x = width/2;
    ball.y = height/2;
    ball.vx = 4 + (Math.random()-0.5)*2;
    ball.vy = -4;
    initBricks();
    particles.length=0;
    document.getElementById('overlay').classList.add('hidden');
  }

  // start on click or key
  window.addEventListener('click',()=>{if(!started) startGame();});
  window.addEventListener('keydown',(e)=>{if(!started) startGame();});

  // initial draw
  update();
</script>
</body>
</html>
```

Check for errors: In createParticles we used size param; heart drawing uses bezier; fine.

Potential bug: bricks column count computed before width defined; we compute inside initBricks after width set via resize. Since resize runs before initBricks (called in startGame after resize maybe). We'll call initBricks after width defined (we compute inside). Good.

Need to ensure ball doesn't start inside brick area; but fine.

Make sure overlay hidden after start.

Make sure no horizontal scroll: body margin 0, overflow hidden, canvas width = window.innerWidth, height = window.innerHeight*0.7 (so less than viewport height). This may cause vertical whitespace but no horizontal scroll.

All good.

Return only code block.