Nemotron 3 Ultra (free)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heartbreak Breakout</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background: linear-gradient(135deg, #1a0f2e 0%, #2d1b4e 50%, #1a0f2e 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: 'Courier New', monospace;
            overflow: hidden;
        }
        canvas { 
            border-radius: 12px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5), 
                        0 0 0 4px rgba(255, 100, 150, 0.3),
                        inset 0 0 60px rgba(255, 50, 100, 0.1);
            background: radial-gradient(ellipse at center, #2a1540 0%, #0d051a 100%);
        }
        .ui {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 40px;
            color: #ff64a0;
            font-size: 18px;
            font-weight: bold;
            text-shadow: 0 0 10px rgba(255, 100, 160, 0.8), 2px 2px 4px rgba(0,0,0,0.8);
            z-index: 10;
            pointer-events: none;
        }
        .ui span { 
            color: #fff; 
            font-family: 'Courier New', monospace;
            text-shadow: 0 0 8px rgba(255, 100, 160, 1);
        }
        .start-screen {
            position: fixed;
            inset: 0;
            background: rgba(10, 5, 20, 0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            z-index: 100;
            transition: opacity 0.5s, visibility 0.5s;
        }
        .start-screen.hidden {
            opacity: 0;
            visibility: hidden;
        }
        .title {
            font-size: clamp(32px, 8vw, 64px);
            font-weight: 900;
            background: linear-gradient(135deg, #ff64a0, #ff3366, #ff64a0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 40px rgba(255, 100, 160, 0.5);
            animation: pulse 2s ease-in-out infinite;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); filter: brightness(1); }
            50% { transform: scale(1.02); filter: brightness(1.2); }
        }
        .subtitle {
            color: #aaa;
            font-size: clamp(14px, 3vw, 18px);
            max-width: 80%;
            text-align: center;
            line-height: 1.6;
        }
        .start-btn {
            padding: 16px 48px;
            font-size: 18px;
            font-weight: bold;
            font-family: inherit;
            background: linear-gradient(135deg, #ff3366, #ff64a0);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: 0 8px 30px rgba(255, 50, 100, 0.5), inset 0 -4px 10px rgba(0,0,0,0.2);
            transition: transform 0.15s, box-shadow 0.15s;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .start-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(255, 50, 100, 0.6), inset 0 -4px 10px rgba(0,0,0,0.2); }
        .start-btn:active { transform: translateY(1px); box-shadow: 0 4px 15px rgba(255, 50, 100, 0.4), inset 0 -4px 10px rgba(0,0,0,0.2); }
        .controls-hint {
            color: #666;
            font-size: 14px;
            margin-top: 10px;
        }
        .game-over {
            position: fixed;
            inset: 0;
            background: rgba(10, 5, 20, 0.95);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
            z-index: 100;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s, visibility 0.5s;
        }
        .game-over.visible { opacity: 1; visibility: visible; }
        .game-over.win .title { background: linear-gradient(135deg, #ff64a0, #ffaa44, #ff64a0); -webkit-background-clip: text; }
        .final-score { color: #fff; font-size: 32px; font-weight: bold; }
        .final-score span { color: #ff64a0; }
    </style>
</head>
<body>
    <div class="ui">
        <div>SCORE: <span id="score">0</span></div>
        <div>LIVES: <span id="lives">3</span></div>
        <div>LEVEL: <span id="level">1</span></div>
    </div>
    <canvas id="game"></canvas>
    
    <div class="start-screen" id="startScreen">
        <h1 class="title">HEARTBREAK BREAKOUT</h1>
        <p class="subtitle">Move the hamburger paddle to catch the ball. Break bricks to release showers of hearts!</p>
        <button class="start-btn" id="startBtn">Click or Press Key to Start</button>
        <p class="controls-hint">← → or A/D to move • Space to launch</p>
    </div>
    
    <div class="game-over" id="gameOver">
        <h1 class="title">GAME OVER</h1>
        <div class="final-score">Final Score: <span id="finalScore">0</span></div>
        <button class="start-btn" id="restartBtn">Play Again</button>
    </div>

    <script>
        const canvas = document.getElementById('game');
        const ctx = canvas.getContext('2d');
        
        const WIDTH = 800;
        const HEIGHT = 600;
        canvas.width = WIDTH;
        canvas.height = HEIGHT;
        
        // Game state
        let score = 0;
        let lives = 3;
        let level = 1;
        let gameRunning = false;
        let ballLaunched = false;
        let gameWon = false;
        
        // Paddle (Hamburger)
        const paddle = {
            x: WIDTH / 2 - 60,
            y: HEIGHT - 50,
            width: 120,
            height: 30,
            speed: 8,
            dx: 0,
            wobble: 0,
            squish: 1
        };
        
        // Ball
        const ball = {
            x: WIDTH / 2,
            y: HEIGHT - 80,
            radius: 10,
            speed: 6,
            dx: 0,
            dy: 0,
            trail: [],
            spin: 0
        };
        
        // Bricks
        let bricks = [];
        const brickRows = 6;
        const brickCols = 10;
        const brickWidth = 70;
        const brickHeight = 28;
        const brickPadding = 6;
        const brickOffsetTop = 80;
        const brickOffsetLeft = (WIDTH - (brickCols * (brickWidth + brickPadding) - brickPadding)) / 2;
        
        // Particles (hearts)
        let particles = [];
        let floatingHearts = [];
        
        // Input
        const keys = { left: false, right: false };
        
        // Colors
        const brickColors = [
            { main: '#ff3366', light: '#ff64a0', dark: '#cc0033', points: 50 },  // Red
            { main: '#ff64a0', light: '#ff99bb', dark: '#cc3366', points: 40 },  // Pink
            { main: '#ffaa44', light: '#ffcc77', dark: '#cc8800', points: 30 },  // Orange
            { main: '#ffdd44', light: '#ffee77', dark: '#ccaa00', points: 20 },  // Yellow
            { main: '#88dd44', light: '#aaff66', dark: '#66aa00', points: 10 },  // Green
            { main: '#44aaff', light: '#77ccff', dark: '#0088cc', points: 10 }   // Blue
        ];
        
        // Initialize bricks
        function initBricks() {
            bricks = [];
            for (let r = 0; r < brickRows; r++) {
                for (let c = 0; c < brickCols; c++) {
                    const color = brickColors[r % brickColors.length];
                    bricks.push({
                        x: brickOffsetLeft + c * (brickWidth + brickPadding),
                        y: brickOffsetTop + r * (brickHeight + brickPadding),
                        width: brickWidth,
                        height: brickHeight,
                        color: color,
                        alive: true,
                        hp: 1,
                        maxHp: 1,
                        hitFlash: 0,
                        wobble: 0
                    });
                }
            }
        }
        
        // Reset ball
        function resetBall() {
            ball.x = paddle.x + paddle.width / 2;
            ball.y = paddle.y - ball.radius - 5;
            ball.dx = 0;
            ball.dy = 0;
            ball.trail = [];
            ball.spin = 0;
            ballLaunched = false;
        }
        
        // Launch ball
        function launchBall() {
            if (!ballLaunched) {
                ballLaunched = true;
                const angle = -Math.PI / 2 + (Math.random() - 0.5) * 0.5;
                ball.dx = Math.cos(angle) * ball.speed;
                ball.dy = Math.sin(angle) * ball.speed;
            }
        }
        
        // Spawn heart explosion
        function spawnHearts(x, y, color, count = 25) {
            for (let i = 0; i < count; i++) {
                const angle = (Math.PI * 2 / count) * i + Math.random() * 0.3;
                const speed = 2 + Math.random() * 6;
                const size = 6 + Math.random() * 12;
                particles.push({
                    x: x,
                    y: y,
                    dx: Math.cos(angle) * speed,
                    dy: Math.sin(angle) * speed - 2,
                    size: size,
                    rotation: Math.random() * Math.PI * 2,
                    rotSpeed: (Math.random() - 0.5) * 0.3,
                    color: color.main,
                    lightColor: color.light,
                    life: 1,
                    decay: 0.015 + Math.random() * 0.02,
                    gravity: 0.15,
                    bounce: 0.4 + Math.random() * 0.3
                });
            }
        }
        
        // Spawn floating hearts (bonus)
        function spawnFloatingHearts(x, y) {
            for (let i = 0; i < 8; i++) {
                floatingHearts.push({
                    x: x + (Math.random() - 0.5) * 60,
                    y: y + (Math.random() - 0.5) * 30,
                    dx: (Math.random() - 0.5) * 2,
                    dy: -1 - Math.random() * 2,
                    size: 15 + Math.random() * 10,
                    rotation: Math.random() * Math.PI * 2,
                    rotSpeed: (Math.random() - 0.5) * 0.1,
                    color: ['#ff3366', '#ff64a0', '#ff99bb', '#ff3388'][Math.floor(Math.random() * 4)],
                    life: 1,
                    decay: 0.008 + Math.random() * 0.005,
                    alpha: 1
                });
            }
        }
        
        // Draw heart shape
        function drawHeart(ctx, x, y, size, rotation, color, alpha = 1) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(rotation);
            ctx.scale(size / 30, size / 30);
            ctx.globalAlpha = alpha;
            
            ctx.beginPath();
            ctx.moveTo(0, 10);
            ctx.bezierCurveTo(0, 0, -20, 0, -20, -10);
            ctx.bezierCurveTo(-20, -20, -10, -25, 0, -15);
            ctx.bezierCurveTo(10, -25, 20, -20, 20, -10);
            ctx.bezierCurveTo(20, 0, 0, 0, 0, 10);
            ctx.closePath();
            
            const gradient = ctx.createRadialGradient(0, -5, 0, 0, -5, 25);
            gradient.addColorStop(0, color.replace(')', ', 1)').replace('rgb', 'rgba').replace('#', ''));
            gradient.addColorStop(1, color.replace(')', ', 0)').replace('rgb', 'rgba').replace('#', ''));
            
            // Simple fill with color
            ctx.fillStyle = color;
            ctx.fill();
            
            // Highlight
            ctx.beginPath();
            ctx.moveTo(-8, -5);
            ctx.bezierCurveTo(-8, -12