What qwen3.6-27b-q6 did

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bounce — Level 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game-container">
  <canvas id="world"></canvas>
  <div id="hud">
    <div id="hud-lives"></div>
    <div id="hud-hoops"></div>
    <div id="hud-score">00000000</div>
  </div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bounce — Level 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="game-container">
  <canvas id="world"></canvas>
  <div id="hud">
    <div id="hud-lives"></div>
    <div id="hud-hoops"></div>
    <div id="hud-score">00000000</div>
  </div>
</div>
<script src="game.js"></script>
</body>
</html>

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100%;
  background: #0a0a12;
  overflow: hidden;
  font-family: monospace;
  user-select: none;
}
#game-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
}
canvas#world {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0e0e1a;
  border: 2px solid #2a2a3a;
}
#hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 768px;
  height: 28px;
  padding: 0 8px;
  background: #0e0e1a;
  border: 2px solid #2a2a3a;
  border-top: none;
  color: #ccc;
  font-size: 14px;
  font-family: monospace;
}
#hud-lives {
  display: flex;
  gap: 3px;
  align-items: center;
}
#hud-lives .life-icon {
  width: 10px; height: 10px;
  background: #e33;
  border-radius: 50%;
  display: inline-block;
}
#hud-hoops {
  color: #5cf;
  font-size: 13px;
  letter-spacing: 1px;
}
#hud-score {
  color: #fd0;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: right;
}

/* =========================================================
   Bounce — Level 1
   A horizontal puzzle-platformer about carrying momentum.
   ========================================================= */

// --- Constants ---
const TILE = 8;                  // logical pixels per tile
const VP_TILES = 16;             // viewport: 16×16 tiles
const VP_SIZE = VP_TILES * TILE; // 128 logical pixels

// Physics (tiles / second)
const GRAVITY      = 22;
const TERM_FALL    = 14;
const G_ACCEL      = 18;
const MAX_SPEED    = 6;
const FRICTION     = 12;
const AIR_CTRL     = G_ACCEL * 0.4;
const RESTITUTION  = 0.35;
const BOUNCE_H     = 3.0;
const BOUNCE_VEL   = Math.sqrt(2 * GRAVITY * BOUNCE_H); // ~11.49 t/s

// Timing
const FIXED_DT     = 1 / 120;    // fixed physics step
const SETTLE_FRIC  = 20;        // extra friction when settling after non-bounce landing

// Game
const MAX_LIVES    = 5;
const START_LIVES  = 3;
const HOOP_SCORE   = 100;
const CP_SCORE     = 200;
const CRYSTAL_SCORE= 1000;
const CLEAR_SCORE  = 500;
const LIFE_BONUS   = 1000;
const DEATH_DELAY  = 0.5;       // seconds for death burst
const GAME_OVER_DELAY = 2.0;    // seconds before returning to title
const COMPLETE_DELAY = 3.0;     // seconds on level complete

// Tile types
const T = {
  EMPTY: 0, SOLID: 1, SPIKE: 2,
  HOOP: 3, CHECKPOINT: 4, CRYSTAL: 5,
  EXIT_TOP: 6, EXIT_BOTTOM: 7
};

// Game states
const S = { TITLE: 0, PLAYING: 1, DYING: 2, COMPLETE: 3, OVER: 4 };

// --- Canvas & scaling ---
const canvas = document.getElementById('world');
const ctx = canvas.getContext('2d');
canvas.width = VP_SIZE;
canvas.height = VP_SIZE;

function resizeCanvas() {
  const maxW = window.innerWidth - 16;
  const maxH = window.innerHeight - 56; // room for HUD
  const scale = Math.min(Math.floor(maxW / VP_SIZE), Math.floor(maxH / VP_SIZE), 6);
  const s = Math.max(scale, 2);
  canvas.style.width  = (VP_SIZE * s) + 'px';
  canvas.style.height = (VP_SIZE * s) + 'px';
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

// --- Level Map ---
// 16 rows × 95 columns
// Legend: . empty # solid ^ spike O hoop C checkpoint B crystal E exit-top e exit-bottom
const LEVEL_STR = [
  // row  0
  '...................................................................................................',
  // row  1
  '...................................................................................................',
  // row  2
  '...................................................................................................',
  // row  3
  '...................................................................................................',
  // row  4
  '...................................................................................................',
  // row  5
  '...................................................................................................',
  // row  6
  '...................................................................................................',
  // row  7
  '...................................................................................................',
  // row  8
  '...................................................................................................',
  // row  9
  '...................................................................................................',
  // row 10  -- crystal ledge at x=77-80
  '................................................###................................................',
  // row 11  -- wall tops at x=24,33  ; crystal ledge at x=77-80
  '..#....................................#.........................................................',
  // row 12  -- wall mids at x=24,33  ; exit top at x=90; ledge at x=77-80
  '..#....................................#.##......................................................',
  // row 13  -- wall bots, hoops, spikes, checkpoints, exit bottom
  '..#O...O...#O...O...#O...O.........^O^O^O^O^O........C...B..C..e..................................',
  // row 14  -- floor with gap at x=42-48, spikes in gap
  '...................####................^^^^^^^^^^^^####...................####....................',
  // row 15  -- floor continuation
  '###################################################################################################'
];

const LEVEL_W = LEVEL_STR[0].length;
const LEVEL_H = LEVEL_STR.length;

// Parse level
let levelMap = [];
let spawnX = 2, spawnY = 13;
let hoopPositions = [];
let checkpointPositions = [];
let crystalPos = null;
let exitPos = null;

function parseLevel() {
  levelMap = [];
  hoopPositions = [];
  checkpointPositions = [];
  crystalPos = null;
  exitPos = null;
  for (let y = 0; y < LEVEL_H; y++) {
    const row = [];
    for (let x = 0; x < LEVEL_W; x++) {
      const ch = LEVEL_STR[y][x] || '.';
      switch (ch) {
        case '#': row.push(T.SOLID); break;
        case '^': row.push(T.SPIKE); break;
        case 'O': row.push(T.HOOP); hoopPositions.push({x, y}); break;
        case 'C': row.push(T.CHECKPOINT); checkpointPositions.push({x, y}); break;
        case 'B': row.push(T.CRYSTAL); crystalPos = {x, y}; break;
        case 'E': row.push(T.EXIT_TOP); exitPos = {x, y, type:'top'}; break;
        case 'e': row.push(T.EXIT_BOTTOM); if (!exitPos) exitPos = {x, y, type:'bottom'}; else exitPos.h = y - exitPos.y + 1; break;
        default:  row.push(T.EMPTY); break;
      }
    }
    levelMap.push(row);
  }
  // Verify counts
  if (hoopPositions.length !== 6) console.error('Expected 6 hoops, got', hoopPositions.length);
  if (checkpointPositions.length !== 2) console.error('Expected 2 checkpoints, got', checkpointPositions.length);
  if (!crystalPos) console.error('Missing crystal ball');
  if (!exitPos) console.error('Missing exit');
}

function tileAt(x, y) {
  if (x < 0 || x >= LEVEL_W || y < 0 || y >= LEVEL_H) return T.SOLID;
  return levelMap[y][x];
}

function isSolid(x, y) {
  const t = tileAt(x, y);
  return t === T.SOLID;
}

// --- Game State ---
let state = S.TITLE;
let score = 0;
let lives = START_LIVES;
let hoopsRemaining = 6;
let hoopsCollected = new Set();
let crystalCollected = false;
let checkpoints = [];       // array of {x, y, active}
let activeCheckpoint = null; // {x, y}
let cpScores = new Set();    // which checkpoints have been scored

let ball = { x: 0, y: 0, vx: 0, vy: 0 };
let squash = 1, stretch = 1; // visual deformation
let deathTimer = 0;
let deathFx = [];             // fragment particles for death burst
let completeTimer = 0;
let overTimer = 0;

// Camera
let camX = 0;

// Input
let keys = { left: false, right: false, bounce: false };
let keysJustPressed = { bounce: false };

// --- Input Handling ---
const LEFT_KEYS = new Set(['ArrowLeft', 'KeyA', 'Numpad4']);
const RIGHT_KEYS = new Set(['ArrowRight', 'KeyD', 'Numpad6']);
const BOUNCE_KEYS = new Set(['ArrowUp', 'KeyW', 'Space', 'Numpad2']);
const ALL_GAME_KEYS = new Set([...LEFT_KEYS, ...RIGHT_KEYS, ...BOUNCE_KEYS]);

document.addEventListener('keydown', (e) => {
  if (ALL_GAME_KEYS.has(e.code)) e.preventDefault();
  if (LEFT_KEYS.has(e.code))  keys.left = true;
  if (RIGHT_KEYS.has(e.code)) keys.right = true;
  if (BOUNCE_KEYS.has(e.code)) {
    keys.bounce = true;
    keysJustPressed.bounce = true;
  }
  // Title screen: space to start
  if (state === S.TITLE && (e.code === 'Space' || e.code === 'ArrowUp' || e.code === 'KeyW')) {
    e.preventDefault();
    startGame();
  }
});

document.addEventListener('keyup', (e) => {
  if (ALL_GAME_KEYS.has(e.code)) e.preventDefault();
  if (LEFT_KEYS.has(e.code))  keys.left = false;
  if (RIGHT_KEYS.has(e.code)) keys.right = false;
  if (BOUNCE_KEYS.has(e.code)) keys.bounce = false;
});

// --- Game Flow ---
function startGame() {
  state = S.PLAYING;
  score = 0;
  lives = START_LIVES;
  hoopsRemaining = 6;
  hoopsCollected = new Set();
  crystalCollected = false;
  cpScores = new Set();
  activeCheckpoint = null;
  checkpoints = checkpointPositions.map((p, i) => ({x: p.x, y: p.y, id: i, active: false}));
  parseLevel();
  respawnBall();
}

function respawnBall() {
  if (activeCheckpoint) {
    ball.x = activeCheckpoint.x + 0.5;
    ball.y = activeCheckpoint.y - 0.5;
  } else {
    ball.x = spawnX + 0.5;
    ball.y = spawnY - 0.5;
  }
  ball.vx = 0;
  ball.vy = 0;
  squash = 1;
  stretch = 1;
}

function killBall() {
  if (state !== S.PLAYING) return;
  state = S.DYING;
  deathTimer = DEATH_DELAY;
  // Create burst fragments
  deathFx = [];
  for (let i = 0; i < 16; i++) {
    const angle = (Math.PI * 2 * i) / 16 + Math.random() * 0.3;
    const speed = 3 + Math.random() * 5;
    deathFx.push({
      x: ball.x, y: ball.y,
      vx: Math.cos(angle) * speed,
      vy: Math.sin(angle) * speed,
      life: 1.0,
      size: 0.15 + Math.random() * 0.15
    });
  }
}

function loseLife() {
  lives--;
  if (lives <= 0) {
    state = S.OVER;
    overTimer = GAME_OVER_DELAY;
  } else {
    state = S.PLAYING;
    respawnBall();
  }
}

function completeLevel() {
  if (state !== S.PLAYING) return;
  state = S.COMPLETE;
  completeTimer = COMPLETE_DELAY;
  // Calculate bonus
  score += CLEAR_SCORE;
  score += lives * LIFE_BONUS;
}

// --- Physics ---
let accum = 0;

function physicsStep(dt) {
  if (state !== S.PLAYING) return;

  const r = 0.5; // ball radius in tiles

  // Input acceleration
  let accelX = 0;
  if (keys.left)  accelX -= 1;
  if (keys.right) accelX += 1;

  // Determine if on ground
  const onGround = ball.y + r >= 13.5 - 0.01; // floor level check
  const grounded = isOnGround();

  // Horizontal acceleration
  if (accelX !== 0) {
    const a = grounded ? G_ACCEL : AIR_CTRL;
    ball.vx += accelX * a * dt;
  }

  // Clamp speed
  ball.vx = Math.max(-MAX_SPEED, Math.min(MAX_SPEED, ball.vx));

  // Friction (when no input on ground)
  if (accelX === 0 && grounded) {
    if (Math.abs(ball.vx) < FRICTION * dt + 0.01) {
      ball.vx = 0;
    } else {
      ball.vx -= Math.sign(ball.vx) * FRICTION * dt;
      if (Math.sign(ball.vx) !== Math.sign(ball.vx + Math.sign(ball.vx) * FRICTION * dt)) ball.vx = 0;
    }
  }

  // Gravity
  ball.vy += GRAVITY * dt;
  if (ball.vy > TERM_FALL) ball.vy = TERM_FALL;

  // Move X
  ball.x += ball.vx * dt;
  resolveCollisionX(r);

  // Move Y
  ball.y += ball.vy * dt;
  const wasGrounded = grounded;
  const justLanded = resolveCollisionY(r);

  // Bounce / settle on landing
  if (justLanded && ball.vy > 0) {
    if (keys.bounce) {
      ball.vy = -BOUNCE_VEL;
      squash = 0.6;
      stretch = 1.4;
    } else {
      ball.vy *= -RESTITUTION;
      if (Math.abs(ball.vy) < 0.5) {
        ball.vy = 0;
        ball.y = getLowestY(r);
      }
      squash = 0.7;
      stretch = 1.3;
    }
  }

  // Ceiling collision
  if (ball.y - r < 0) {
    ball.y = r;
    ball.vy = Math.max(0, ball.vy);
  }

  // World bounds
  if (ball.x - r < 0) { ball.x = r; ball.vx = 0; }
  if (ball.x + r > LEVEL_W) { ball.x = LEVEL_W - r; ball.vx = 0; }

  // Squash/stretch decay
  squash += (1 - squash) * 12 * dt;
  stretch += (1 - stretch) * 12 * dt;

  // Collect pickups
  checkPickups();
}

function isOnGround() {
  const r = 0.5;
  // Check if ball is touching a solid tile below
  const bx = ball.x;
  const by = ball.y + r;
  const tileX1 = Math.floor(bx - r + 0.001);
  const tileX2 = Math.floor(bx + r - 0.001);
  const tileY = Math.floor(by);
  for (let tx = tileX1; tx <= tileX2; tx++) {
    if (isSolid(tx, tileY)) return true;
  }
  return false;
}

function getLowestY(r) {
  // Find the lowest valid Y for the ball (resting on ground)
  const bx = ball.x;
  const tileX1 = Math.floor(bx - r + 0.01);
  const tileX2 = Math.floor(bx + r - 0.01);
  let lowest = ball.y;
  for (let tx = tileX1; tx <= tileX2; tx++) {
    for (let ty = Math.floor(ball.y - r); ty <= Math.floor(ball.y + r) + 1; ty++) {
      if (isSolid(tx, ty)) {
        // Solid tile top is at ty, ball bottom should be at ty
        const restY = ty - r;
        if (restY < lowest) lowest = restY;
      }
    }
  }
  return lowest;
}

function resolveCollisionX(r) {
  const bx = ball.x;
  const by = ball.y;
  // Check tiles overlapping the ball's horizontal extent
  const tileY1 = Math.floor(by - r + 0.001);
  const tileY2 = Math.floor(by + r - 0.001);
  const tileX1 = Math.floor(bx - r + 0.001);
  const tileX2 = Math.floor(bx + r - 0.001);

  for (let ty = tileY1; ty <= tileY2; ty++) {
    for (let tx = tileX1; tx <= tileX2; tx++) {
      if (!isSolid(tx, ty)) continue;
      // Resolve X overlap
      const tileLeft = tx;
      const tileRight = tx + 1;
      const tileTop = ty;
      const tileBottom = ty + 1;

      // Check if ball overlaps this tile
      if (bx + r > tileLeft && bx - r < tileRight &&
          by + r > tileTop && by - r < tileBottom) {
        // Find overlap on X axis
        const overlapLeft = (bx + r) - tileLeft;
        const overlapRight = tileRight - (bx - r);
        if (overlapLeft < overlapRight) {
          ball.x = tileLeft - r;
        } else {
          ball.x = tileRight + r;
        }
        ball.vx = 0;
      }
    }
  }
}

function resolveCollisionY(r) {
  let landed = false;
  const bx = ball.x;
  const by = ball.y;
  const tileY1 = Math.floor(by - r + 0.001);
  const tileY2 = Math.floor(by + r - 0.001);
  const tileX1 = Math.floor(bx - r + 0.001);
  const tileX2 = Math.floor(bx + r - 0.001);

  for (let ty = tileY1; ty <= tileY2; ty++) {
    for (let tx = tileX1; tx <= tileX2; tx++) {
      if (!isSolid(tx, ty)) continue;
      const tileLeft = tx;
      const tileRight = tx + 1;
      const tileTop = ty;
      const tileBottom = ty + 1;

      if (bx + r > tileLeft && bx - r <  tileRight &&
          by + r > tileTop &&  by - r < tileBottom) {
        const overlapTop = (by + r) - tileTop;
        const overlapBottom = tileBottom - (by - r);
        if (overlapTop < overlapBottom) {
          // Landing on top
          ball.y = tileTop - r;
          if (ball.vy > 0) landed = true;
          ball.vy = 0;
        } else {
          // Hitting bottom
          ball.y = tileBottom + r;
          ball.vy = 0;
        }
      }
    }
  }
  return landed;
}

function checkPickups() {
  const r = 0.5;
  const bx = ball.x;
  const by = ball.y;

  // Check hoops
  for (let i = 0; i < hoopPositions.length; i++) {
    if (hoopsCollected.has(i)) continue;
    const h = hoopPositions[i];
    const dx = bx - (h.x + 0.5);
    const dy = by - (h.y + 0.5);
    if (Math.sqrt(dx*dx + dy*dy) < 1.0) {
      hoopsCollected.add(i);
      hoopsRemaining--;
      score += HOOP_SCORE;
    }
  }

  // Check checkpoints
  for (let i = 0; i < checkpoints.length; i++) {
    const cp = checkpoints[i];
    const dx = bx - (cp.x + 0.5);
    const dy = by - (cp.y + 0.5);
    if (Math.sqrt(dx*dx + dy*dy) < 1.0) {
      if (!cpScores.has(i)) {
        score += CP_SCORE;
        cpScores.add(i);
      }
      // Activate this checkpoint, deactivate others
      checkpoints.forEach(c => c.active = false);
      cp.active = true;
      activeCheckpoint = {x: cp.x, y: cp.y};
    }
  }

  // Check crystal
  if (crystalPos && !crystalCollected) {
    const dx = bx - (crystalPos.x + 0.5);
    const dy = by - (crystalPos.y + 0.5);
    if (Math.sqrt(dx*dx + dy*dy) < 1.0) {
      crystalCollected = true;
      score += CRYSTAL_SCORE;
      if (lives < MAX_LIVES) lives++;
    }
  }

  // Check exit
  if (exitPos && hoopsRemaining <= 0) {
    const ex = exitPos.x + 0.5;
    const ey = exitPos.y + 0.5;
    const dx = bx - ex;
    const dy = by - ey;
    if (Math.abs(dx) < 0.8 && Math.abs(dy) < 1.2) {
      completeLevel();
    }
  }

  // Check spikes
  for (let y = 0; y < LEVEL_H; y++) {
    for (let x = 0; x < LEVEL_W; x++) {
      if (levelMap[y][x] !== T.SPIKE) continue;
      // Spike hitbox: smaller region centered in tile
      const sx = x + 0.5;
      const sy = y + 0.5;
      const hitR = 0.35; // hitbox radius
      const dx = bx - sx;
      const dy = by - sy;
      if (Math.sqrt(dx*dx + dy*dy) < (r + hitR)) {
        killBall();
        return;
      }
    }
  }
}

// --- Death FX ---
function updateDeathFX(dt) {
  if (state !== S.DYING) return;
  deathTimer -= dt;
  for (const p of deathFx) {
    p.x += p.vx * dt;
    p.y += p.vy * dt;
    p.vy += GRAVITY * 0.3 * dt;
    p.life -= dt / DEATH_DELAY;
  }
  if (deathTimer <= 0) {
    loseLife();
  }
}

// --- Camera ---
function updateCamera() {
  const targetX = ball.x - VP_TILES / 2;
  camX += (targetX - camX) * 0.1;
  camX = Math.max(0, Math.min(LEVEL_W - VP_TILES, camX));
}

// --- Rendering ---
function drawTile(tx, ty, type, screenX, screenY) {
  const sx = Math.floor(screenX);
  const sy = Math.floor(screenY);

  switch (type) {
    case T.SOLID:
      ctx.fillStyle = '#4a4a5a';
      ctx.fillRect(sx, sy, TILE, TILE);
      ctx.fillStyle = '#5a5a6a';
      ctx.fillRect(sx, sy, TILE - 1, TILE - 1);
      ctx.fillStyle = '#3a3a4a';
      ctx.fillRect(sx + TILE - 1, sy, 1, TILE);
      ctx.fillRect(sx, sy + TILE - 1, TILE, 1);
      break;

    case T.SPIKE:
      // Draw as a triangle spike
      ctx.fillStyle = '#c44';
      ctx.beginPath();
      ctx.moveTo(sx + TILE/2, sy);
      ctx.lineTo(sx + TILE, sy + TILE);
      ctx.lineTo(sx, sy + TILE);
      ctx.closePath();
      ctx.fill();
      // Highlight
      ctx.fillStyle = '#e66';
      ctx.beginPath();
      ctx.moveTo(sx + TILE/2, sy + 2);
      ctx.lineTo(sx + TILE - 2, sy + TILE);
      ctx.lineTo(sx + TILE/2, sy + TILE);
      ctx.closePath();
      ctx.fill();
      break;

    case T.HOOP:
      // Draw as a ring
      ctx.strokeStyle = '#5cf';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.arc(sx + TILE/2, sy + TILE/2, TILE/2 - 1, 0, Math.PI * 2);
      ctx.stroke();
      break;

    case T.CHECKPOINT:
      // Draw as a flag
      ctx.fillStyle = '#5f5';
      ctx.fillRect(sx + 3, sy + 1, 2, TILE - 1);
      ctx.fillStyle = '#8f8';
      ctx.fillRect(sx + 5, sy + 1, 3, 3);
      break;

    case T.CRYSTAL:
      // Draw as a diamond
      ctx.fillStyle = '#f0f';
      ctx.beginPath();
      ctx.moveTo(sx + TILE/2, sy + 1);
      ctx.lineTo(sx + TILE - 1, sy + TILE/2);
      ctx.lineTo(sx + TILE/2, sy + TILE - 1);
      ctx.lineTo(sx + 1, sy + TILE/2);
      ctx.closePath();
      ctx.fill();
      ctx.fillStyle = '#faf';
      ctx.beginPath();
      ctx.moveTo(sx + TILE/2, sy + 2);
      ctx.lineTo(sx + TILE - 3, sy + TILE/2);
      ctx.lineTo(sx + TILE/2, sy + TILE/2);
      ctx.closePath();
      ctx.fill();
      break;

    case T.EXIT_TOP:
    case T.EXIT_BOTTOM:
      // Draw door
      if (hoopsRemaining <= 0) {
        // Open
        ctx.fillStyle = '#2a4';
        ctx.fillRect(sx, sy, TILE, TILE);
        ctx.fillStyle = '#4f6';
        ctx.fillRect(sx + 1, sy + 1, TILE - 2, TILE - 2);
      } else {
        // Closed
        ctx.fillStyle = '#666';
        ctx.fillRect(sx, sy, TILE, TILE);
        ctx.fillStyle = '#888';
        ctx.fillRect(sx + 1, sy + 2, TILE - 2, TILE - 4);
        ctx.fillStyle = '#fd0';
        ctx.fillRect(sx + 3, sy + TILE/2 - 1, 2, 2);
      }
      break;
  }
}

function render() {
  ctx.clearRect(0, 0, VP_SIZE, VP_SIZE);

  // Background
  ctx.fillStyle = '#0e0e1a';
  ctx.fillRect(0, 0, VP_SIZE, VP_SIZE);

  // Draw background grid dots
  ctx.fillStyle = '#1a1a2a';
  for (let y = 0; y < VP_TILES; y++) {
    for (let x = 0; x < VP_TILES; x++) {
      if ((x + y) % 4 === 0) {
        ctx.fillRect(Math.floor(x * TILE - camX % TILE), y * TILE, 1, 1);
      }
    }
  }

  // Draw tiles
  const startTX = Math.max(0, Math.floor(camX));
  const endTX = Math.min(LEVEL_W, Math.ceil(camX + VP_TILES));

  for (let ty = 0; ty < LEVEL_H; ty++) {
    for (let tx = startTX; tx < endTX; tx++) {
      const type = levelMap[ty][tx];
      if (type === T.EMPTY) continue;
      const sx = tx * TILE - camX * TILE / TILE; // screen x in logical pixels
      const sy = ty * TILE;
      drawTile(tx, ty, type, sx, sy);
    }
  }

  // Draw collected hoop indicators (dim)
  for (let i = 0; i < hoopPositions.length; i++) {
    if (hoopsCollected.has(i)) {
      const h = hoopPositions[i];
      const sx = h.x * TILE - camX;
      const sy = h.y * TILE;
      ctx.strokeStyle = 'rgba(85,204,255,0.2)';
      ctx.lineWidth = 1;
      ctx.beginPath();
      ctx.arc(sx + TILE/2, sy + TILE/2, TILE/2 - 1, 0, Math.PI * 2);
      ctx.stroke();
    }
  }

  // Draw active checkpoint glow
  for (const cp of checkpoints) {
    if (cp.active) {
      const sx = cp.x * TILE - camX;
      const sy = cp.y * TILE;
      ctx.fillStyle = 'rgba(85,255,85,0.15)';
      ctx.fillRect(sx - 2, sy - 2, TILE + 4, TILE + 4);
    }
  }

  // Draw ball (if not dying)
  if (state === S.PLAYING || state === S.COMPLETE) {
    const bx = ball.x * TILE - camX;
    const by = ball.y * TILE;
    const r = TILE / 2;

    ctx.save();
    ctx.translate(bx, by);
    ctx.scale(stretch, squash);

    // Shadow
    ctx.fillStyle = 'rgba(0,0,0,0.3)';
    ctx.beginPath();
    ctx.arc(1, 1, r, 0, Math.PI * 2);
    ctx.fill();

    // Ball body
    ctx.fillStyle = '#e33';
    ctx.beginPath();
    ctx.arc(0, 0, r, 0, Math.PI * 2);
    ctx.fill();

    // Highlight
    ctx.fillStyle = '#f66';
    ctx.beginPath();
    ctx.arc(-1, -1, r * 0.6, 0, Math.PI * 2);
    ctx.fill();

    // Outline
    ctx.strokeStyle = '#a22';
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.arc(0, 0, r - 0.5, 0, Math.PI * 2);
    ctx.stroke();

    ctx.restore();
  }

  // Draw death fragments
  if (state === S.DYING) {
    for (const p of deathFx) {
      if (p.life <= 0) continue;
      const px = p.x * TILE - camX;
      const py = p.y * TILE;
      const sz = p.size * TILE * p.life;
      ctx.globalAlpha = p.life;
      ctx.fillStyle = '#e33';
      ctx.fillRect(px - sz/2, py - sz/2, sz, sz);
    }
    ctx.globalAlpha = 1;
  }

  // Render overlays
  if (state === S.TITLE) renderTitle();
  else if (state === S.COMPLETE) renderComplete();
  else if (state === S.OVER) renderGameOver();
}

function renderTitle() {
  ctx.fillStyle = 'rgba(10,10,18,0.85)';
  ctx.fillRect(0, 0, VP_SIZE,  VP_SIZE);

  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // Title
  ctx.fillStyle = '#e33';
  ctx.font = 'bold 16px monospace';
  ctx.fillText('BOUNCE', VP_SIZE/2, VP_SIZE/2 - 20);

  ctx.fillStyle = '#5cf';
  ctx.font = '8px monospace';
  ctx.fillText('Level 1', VP_SIZE/2, VP_SIZE/2 - 6);

  // Blink prompt
  if (Math.floor(Date.now() / 500) % 2 === 0) {
    ctx.fillStyle = '#fd0';
    ctx.font = '7px monospace';
    ctx.fillText('Press SPACE to Start', VP_SIZE/2, VP_SIZE/2 + 14);
  }

  // Controls hint
  ctx.fillStyle = '#888';
  ctx.font = '5px monospace';
  ctx.fillText('← → or A/D to roll  |  ↑ W SPACE to bounce', VP_SIZE/2, VP_SIZE/2 + 30);
}

function renderComplete() {
  ctx.fillStyle = 'rgba(10,10,18,0)';
  ctx.fillRect(0, 0, VP_SIZE,VP_SIZE);

  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  ctx.fillStyle = '#4f6';
  ctx.font = 'bold 12px monospace';
  ctx.fillText('LEVEL COMPLETE', VP_SIZE/2, VP_SIZE/2 - 16);

  ctx.fillStyle = '#fd0';
  ctx.font = 'bold 10px monospace';
  ctx.fillText(score.toString().padStart(8, '0'), VP_SIZE/2, VP_SIZE/2 + 2);

  ctx.fillStyle = '#aaa';
  ctx.font = '6px monospace';
  ctx.fillText(`+${CLEAR_SCORE} clear  +${lives * LIFE_BONUS} lives`, VP_SIZE/2, VP_SIZE/2 + 14);
}

function renderGameOver() {
  ctx.fillStyle = 'rgba(10,10,18, 0.9)';
  ctx.fillRect(0, 0, VP_SIZE * VP_SIZE);

  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  ctx.fillStyle = '#e33';
  ctx.font = 'bold 14px monospace';
  ctx.fillText('GAME OVER', VP_SIZE/2, VP_SIZE/2 - 8);

  ctx.fillStyle = '#888';
  ctx.font = '7px monospace';
  ctx.fillText('Returning to title...', VP_SIZE/2, VP_SIZE/2 + 10);
}

// --- HUD ---
function updateHUD() {
  const livesEl = document.getElementById('hud-lives');
  livesEl.innerHTML = '';
  for (let i = 0; i < lives; i++) {
    const icon = document.createElement('span');
    icon.className = 'life-icon';
    livesEl.appendChild(icon);
  }

/* Bounce — Level 1 */
const TILE=8, VP_T=16, VP=128;
const GRAV=22, TERM=14, GAC=18, MSPD=6, FRI=12, AIRT=GAC*0.4, REST=0.35, BH=3;
const BV=Math.sqrt(2*GRAV*BH);
const FDT=1/120, MXL=5, STL=3, HOOPS=6;
const HSC=100,CPS=200,CRY=1000,CLS=500,LBS=1000;
const DDEL=0.5,ODEL=2.0,CDEL=3.0;
const T={E:0,S:1,P:2,O:3,C:4,B:5,ET:6,EB:7};
const ST={TITLE:0,PLAY:1,DYING:2,COMP:3,OVER:4};

const cvs=document.getElementById('world');
const cx=cvs.getContext('2d');
cvs.width=cvs.height=VP;

function resize(){
  const s=Math.min(Math.floor((window.innerWidth-16)/VP),Math.floor((window.innerHeight-56)/VP),6);
  const sc=Math.max(s,2);
  cvs.style.width=(VP*sc)+'px';cvs.style.height=(VP*sc)+'px';
}
window.addEventListener('resize',resize);resize();

[
 {
  "oldText": "window.addEventListener('resize',resize);resize();",
  "newText": "window.addEventListener('resize',resize);resize();\n\n// Level: 16 rows x 95 cols  .=empty #=solid ^=spike O=hoop C=checkpoint B=crystal E=exit-top e=exit-bot\nconst LM=[\n'...................................................................................................',\n'...................................................................................................',\n'...................................................................................................',\n</parameter> levelMap[y][x];\n}\nfunction isSolid(x,y){return tileAt(x,y)===T.S;}\n\n// Game state\nlet state=ST.TITLE,score=0,lives=STL,hoopsLeft=HOOPS;\nlet hCollected=new Set(),crystalGot=false,cpScores=new Set();\nlet checkpoints=[],activeCP=null;\nlet ball={x:0,y:0,vx:0,vy:0},sq=1,st=1;\nlet dTimer=0,dFx=[],cTimer=0,oTimer=0,camX=0;\nlet keys={left:false,right:false,bounce:false};\n\n// Input\nconst LK=new Set(['ArrowLeft','KeyA','Numpad4']);\nconst RK=new Set(['ArrowRight','KeyD','Numpad6']);\nconst BK=new Set(['ArrowUp','KeyW','Space','Numpad2']);\nconst GK=new Set([...LK,...RK,...BK]);\n\ndocument.addEventListener('keydown',e=>{\n  if(GK.has(e.code))e.preventDefault();\n  if(LK.has(e.code))keys.left=true;\n  if(RK.has(e.code))keys.right=true;\n  if(BK.has(e.code))keys.bounce=true;\n  if(state===ST.TITLE&&(e.code==='Space'||e.code==='ArrowUp'||e.code==='KeyW')){e.preventDefault();startGame();}\n});\ndocument.addEventListener('keyup',e=>{\n  if(GK.has(e.code))e.preventDefault();\n  if(LK.has(e.code))keys.left=false;\n  if(RK.has(e.code))keys.right=false;\n  if(BK.has(e.code))keys.bounce=false;\n});\n\nfunction startGame(){\n  state=ST.PLAY;score=0;lives=STL;hoopsLeft=HOOPS;\n  hCollected=new Set();crystalGot=false;cpScores=new Set();activeCP=null;\n  parseLevel();respawn();\n}\nfunction respawn(){\n  if(activeCP){ball.x=activeCP.x+0.5;ball.y=activeCP.y-0.5;}\n  else{ball.x=2.5;ball.y=13.0;}\n  ball.vx=ball.vy=0;sq=st=1;\n}\nfunction killBall(){\n  if(state!==ST.PLAY)return;\n  state=ST.DYING;dTimer=DDEL;dFx=[];\n  for(let i=0;i<16;i++){\n    const a=Math.PI*2*i/16+Math.random()*0.3,sp=3+Math.random()*5;\n    dFx.push({x:ball.x,y:ball.y,vx:Math.cos(a)*sp,vy:Math.sin(a)*sp,life:1,sz:0.15+Math.random()*0.15});\n  }\n}\nfunction loseLife(){\n  lives--;\n  if(lives<=0){state=ST.OVER;oTimer=ODEL;}\n  else{state=ST.PLAY;respawn();}\n}\nfunction completeLevel(){\n  if(state!==ST.PLAY)return;\n  state=ST.COMP;cTimer=CDEL;\n  score+=CLS+lives*LBS;\n}\n\n// Physics\nfunction physics(dt){\n  if(state!==ST.PLAY)return;\n  const r=0.5,grounded=isGrounded();\n  let ax=0;\n  if(keys.left)ax-=1;if(keys.right)ax+=1;\n  if(ax!==0){ball.vx+=ax*(grounded?GAC:AIRT)*dt;}\n  ball.vx=Math.max(-MSPD,Math.min(MSPD,ball.vx));\n  if(ax===0&&grounded){\n    const f=FRI*dt;\n    if(Math.abs(ball.vx)<f+0.01)ball.vx=0;\n    else{ball.vx-=Math.sign(ball.vx)*f;if(ball.vx===0||Math.sign(ball.vx)!==Math.sign(ball.vx+Math.sign(ball.vx)*f))ball.vx=0;}\n  }\n  ball.vy+=GRAV*dt;if(ball.vy>TERM)ball.vy=TERM;\n  ball.x+=ball.vx*dt;colX(r);\n  const landed=colY(r);\n  if(landed&&ball.vy>0){\n    if(keys.bounce){ball.vy=-BV;sq=0.6;st=1.4;}\n    else{ball.vy*=-REST;if(Math.abs(ball.vy)<0.5){ball.vy=0;ball.y=restY(r);}sq=0.7;st=1.3;}\n  }\n  if(ball.y-r<0){ball.y=r;ball.vy=Math.max(0,ball.vy);}\n  if(ball.x-r<0){ball.x=r;ball.vx=0;}\n  if(ball.x+r>LEVEL_W){ball.x=LEVEL_W-r;ball.vx=0;}\n  sq+=(1-sq)*12*dt;st+=(1-st)*12*dt;\n  pickups();\n}\n\nfunction isGrounded(){\n  const r=0.5,bx=ball.x,by=ball.y+r;\n  const t1=Math.floor(bx-r+0.001),t2=Math.floor(bx+r-0.001),ty=Math.floor(by);\n  for(let tx=t1;tx<=t2;tx++)if(isSolid(tx,ty))return true;\n  return false;\n}\nfunction restY(r){\n  const bx=ball.x,t1=Math.floor(bx-r+0.01),t2=Math.floor(bx+r-0.01);\n  let lo=ball.y;\n  for(let tx=t1;tx<=t2;tx++)for(let ty=Math.floor(ball.y-r);ty<=Math.floor(ball.y+r)+1;ty++)\n    if(isSolid(tx,ty)){const ry=ty-r;if(ry<lo)lo=ry;}\n  return lo;\n}\nfunction colX(r){\n  const bx=ball.x,by=ball.y;\n  const y1=Math.floor(by-r+0.001),y2=Math.floor(by+r-0.001);\n  const x1=Math.floor(bx-r+0.001),x2=Math.floor(bx+r-0.001);\n  for(let ty=y1;ty<=y2;ty++)for(let tx=x1;tx<=x2;tx++){\n    if(!isSolid(tx,ty))continue;\n    if(bx+r>tx&&bx-r<tx+1&&by+r>ty&&by-r<ty+1){\n      const ol=(bx+r)-tx,or2=(tx+1)-(bx-r);\n      if(ol<or2)ball.x=tx-r;else ball.x=tx+1+r;\n      ball.vx=0;\n    }\n  }\n}\nfunction colY(r){\n  let landed=false;\n  const bx=ball.x,by=ball.y;\n  const y1=Math.floor(by-r+0.001),y2=Math.floor(by+r-0.001);\n  const x1=Math.floor(bx-r+0.001),x2=Math.floor(bx+r-0.001);\n  for(let ty=y1;ty<=y2;ty++)for(let tx=x1;tx<=x2;tx++){\n    if(!isSolid(tx,ty))continue;\n    if(bx+r>tx&&bx-r<  tx+1&&by+r>ty&&by-r<  ty+1){\n      const ot=(by+r)-ty,ob=(ty+1)-(by-r);\n      if(ot<ob){ball.y=ty-r;if(ball.vy>0)landed=true;ball.vy=0;}\n      else{ball.y=ty+1+r;ball.vy=0;}\n    }\n  }\n  return landed;\n}\n\nfunction pickups(){\n  const r=0.5,bx=ball.x,by=ball.y;\n  for(let i=0;i<hoopPos.length;i++){\n    if(hCollected.has(i))continue;\n    const h=hoopPos[i],dx=bx-(h.x+0.5),dy=by-(h.y+0.5);\n    if(dx*dx+dy*dy<1){hCollected.add(i);hoopsLeft--;score+=HSC;}\n  }\n  for(let i=0;i<checkpoints.length;i++){\n    const cp=checkpoints[i],dx=bx-(cp.x+0.5),dy=by-(cp.y+0.5);\n    if(dx*dx+dy*dy<1){\n      if(!cpScores.has(i)){score+=CPS;cpScores.add(i);}\n      checkpoints.forEach(c=>c.active=false);cp.active=true;activeCP={x:cp.x,y:cp.y};\n    }\n  }\n  if(cPos&&!crystalGot){\n    const dx=bx-(cPos.x+0.5),dy=by-(cPos.y+0.5);\n    if(dx*dx+dy*dy<1){crystalGot=true;score+=CRY;if(lives<MXL)lives++;}\n  }\n  if(ePos&&hoopsLeft<=0){\n    const ex=ePos.x+0.5,ey=ePos.y+0.5,dx=bx-ex,dy=by-ey;\n    if(dx*dx<0.64&&dy*dy<1.44)completeLevel();\n  }\n  for(let y=0;y<LEVEL_H;y++)for(let x=0;x<LEVEL_W;x++){\n    if(lmap[y][x]!==T.P)continue;\n    const dx=bx-(x+0.5),dy=by-(y+0.5);\n    if(dx*dx+dy*dy<(r+0.35)*(r+0.35)){killBall();return;}\n  }\n}\n\nfunction updateDeath(dt){\n  if(state!==ST.DYING)return;\n  dTimer-=dt;\n  for(const p of dFx){p.x+=p.vx*dt;p.y+=p.vy*dt;p.vy+=GRAV*0.3*dt;p.life-=dt/DDEL;}\n  if(dTimer<=0)loseLife();\n}\n\nfunction updateCam(){\n  const tx=ball.x-VP_T/2;camX+=(tx-camX)*0.1;\n  camX=Math.max(0,Math.min(LEVEL_W-VP_T,camX));\n}\n\n// Render\nfunction render(){\n  cx.clearRect(0,0,VP,VP);\n  cx.fillStyle='#0e0e1a';cx.fillRect(0,0,VP,VP);\n  cx.fillStyle='#1a1a2a';\n  for(let y=0;y<VP_T;y++)for(let x=0;x<VP_T;x++)\n    if((x+y)%4===0)cx.fillRect((x*TILE-camX*TILE/VP)%1,y*TILE,1,1);\n\n  const sTX=Math.max(0,Math.floor(camX)),eTX=Math.min(LEVEL_W,Math.ceil(camX+VP_T));\n  for(let ty=0;ty<LEVEL_H;ty++)for(let tx=sTX;tx<eTX;tx++){\n    const t=lmap[ty][tx];if(t===T.E)continue;\n    drawT(tx,ty,t,tx*TILE-camX,ty*TILE);\n  }\n  // dim collected hoops\n  for(let i=0;i<hoopPos.length;i++){\n    if(hCollected.has(i)){const h=hoopPos[i];\n      cx.strokeStyle='rgba(85,204,255,0.2)';cx.lineWidth=1;\n      cx.beginPath();cx.arc(h.x*TILE-camX+TILE/2,h.y*TILE+TILE/2,TILE/2-1,0,Math.PI*2);cx.stroke();\n    }\n  }\n  // active CP glow\n  for(const cp of checkpoints){\n    if(cp.active){cx.fillStyle='rgba(85,255,85,0.15)';cx.fillRect(cp.x*TILE-camX-2,cp.y*TILE-2,TILE+4,TILE+4);}\n  }\n  // ball\n  if(state===ST.PLAY||state===ST.COMP){\n    const bx=ball.x*TILE-camX,by=ball.y*TILE,r=TILE/2;\n    cx.save();cx.translate(bx,by);cx.scale(st,sq);\n    cx.fillStyle='rgba(0,0,0,0.3)';cx.beginPath();cx.arc(1,1,r,0,Math.PI*2);cx.fill();\n    cx.fillStyle='#e33';cx.beginPath();cx.arc(0,0,r,0,Math.PI*2);cx.fill();\n    cx.fillStyle='#f66';cx.beginPath();cx.arc(-1,-1,r*0.6,0,Math.PI*2);cx.fill();\n    cx.strokeStyle='#a22';cx.lineWidth=1;cx.beginPath();cx.arc(0,0,r-0.5,0,Math.PI*2);cx.stroke();\n    cx.restore();\n  }\n  // death fx\n  if(state===ST.DYING){\n    for(const p of dFx){if(p.life<=0)continue;\n      cx.globalAlpha=p.life;cx.fillStyle='#e33';\n      cx.fillRect(p.x*TILE-camX-p.sz*TILE*p.life/2,p.y*TILE-p.sz*TILE*p.life/2,p.sz*TILE*p.life,p.sz*TILE*p.life);\n    }\n    cx.globalAlpha=1;\n  }\n  if(state===ST.TITLE)drawTitle();\n  else if(state===ST.COMP)drawComp();\n  else if(state===ST.OVER)drawOver();\n}\n\nfunction drawT(tx,ty,type,sx,sy){\n  const s=Math.floor(sx),y=Math.floor(sy);\n  switch(type){\n    case T.S:\n      cx.fillStyle='#4a4a5a';cx.fillRect(s,y,TILE,TILE);\n      cx.fillStyle='#5a5a6a';cx.fillRect(s,y,TILE-1,TILE-1);\n      cx.fillStyle='#3a3a4a';cx.fillRect(s+TILE-1,y,1,TILE);cx.fillRect(s,y+TILE-1,TILE,1);\n      break;\n    case T.P:\n      cx.fillStyle='#c44';cx.beginPath();cx.moveTo(s+TILE/2,y);cx.lineTo(s+TILE,y+TILE);cx.lineTo(s,y+TILE);cx.closePath();cx.fill();\n      cx.fillStyle='#e66';cx.beginPath();cx.moveTo(s+TILE/2,y+2);cx.lineTo(s+TILE-2,y+TILE);cx.lineTo(s+TILE/2,y+TILE);cx.closePath();cx.fill();\n      break;\n    case T.O:\n      cx.strokeStyle='#5cf';cx.lineWidth=2;cx.beginPath();cx.arc(s+TILE/2,y+TILE/2,TILE/2-1,0,Math.PI*2);cx.stroke();\n      break;\n    case T.C:\n      cx.fillStyle='#5f5';cx.fillRect(s+3,y+1,2,TILE-1);\n      cx.fillStyle='#8f8';cx.fillRect(s+5,y+1,3,3);\n      break;\n    case T.B:\n      cx.fillStyle='#f0f';cx.beginPath();cx.moveTo(s+TILE/2,y+1);cx.lineTo(s+TILE-1,y+TILE/2);cx.lineTo(s+TILE/2,y+TILE-1);cx.lineTo(s+1,y+TILE/2);cx.closePath();cx.fill();\n      cx.fillStyle='#faf';cx.beginPath();cx.moveTo(s+TILE/2,y+2);cx.lineTo(s+TILE-3,y+TILE/2);cx.lineTo(s+TILE/2,y+TILE/2);cx.closePath();cx.fill();\n      break;\n    case T.ET:case T.EB:\n      if(hoopsLeft<=0){cx.fillStyle='#2a4';cx.fillRect(s,y,TILE,TILE);cx.fillStyle='#4f6';cx.fillRect(s+1,y+1,TILE-2,TILE-2);}\n      else{cx.fillStyle='#666';cx.fillRect(s,y,TILE,TILE);cx.fillStyle='#888';cx.fillRect(s+1,y+2,TILE-2,TILE-4);cx.fillStyle='#fd0';cx.fillRect(s+3,y+TILE/2-1,2,2);}\n      break;\n  }\n}\n\nfunction drawTitle(){\n  cx.fillStyle='rgba(10,10,18,0.85)';cx.fillRect(0,0,VP,VP);\n  cx.textAlign='center';cx.textBaseline='middle';\n  cx.fillStyle='#e33';cx.font='bold 16px monospace';cx.fillText('BOUNCE',VP/2,VP/2-20);\n  cx.fillStyle='#5cf';cx.font='8px monospace';cx.fillText('Level 1',VP/2,VP/2-6);\n  if(Math.floor(Date.now()/500)%2===0){cx.fillStyle='#fd0';cx.font='7px monospace';cx.fillText('Press SPACE to Start',VP/2,VP/2+14);}\n  cx.fillStyle='#888';cx.font='5px monospace';cx.fillText('← → or A/D to roll  |  ↑ W SPACE to bounce',VP/2,VP/2+30);\n}\nfunction drawComp(){\n  cx.textAlign='center';cx.textBaseline='middle';\n  cx.fillStyle='rgba(10,10,18, 0.6)';cx.fillRect(0,VP/2-24,VP,56);\n  cx.fillStyle='#4f6';cx.font='bold 12px monospace';cx.fillText('LEVEL COMPLETE',VP/2,VP/2-16);\n  cx.fillStyle='#fd0';cx.font='bold 10px monospace';cx.fillText(score.toString().padStart(8,'0'),VP/2,VP/2+2);\n  cx.fillStyle='#aaa';cx.font='6px monospace';cx.fillText('+'+CLS+' clear  +'+(lives*LBS)+' lives',VP/2,VP/2+14);\n}\nfunction drawOver(){\n  cx.fillStyle='rgba(10,10,18,0)';cx.fillRect(0,0,VP,VP);\n  cx.textAlign='center';cx.textBaseline='middle';\n  cx.fillStyle='#e33';cx.font='bold 14px monospace';cx.fillText('GAME OVER',VP/2,VP/2-8);\n  cx.fillStyle='#888';cx.font='7px monospace';cx.fillText('Returning to title...',VP/2,VP/2+10);\n}\n\n// HUD\nfunction updateHUD(){\n  const le=document.getElementById('hud-lives');le.innerHTML='';\n  for(let i=0;i<lives;i++){const ic=document.createElement('span');ic.className='life-icon';le.appendChild(ic);}\n  document.getElementById('hud-hoops').textContent='HOOPS '+hoopsLeft;\n  document.getElementById('hud-score').textContent=score.toString().padStart(8,'0');\n}\n\n// Main loop\nlet lastT=0,acc=0;\nfunction loop(ts){\n  const dt=Math.min((ts-lastT)/1000,0.1);lastT=ts;\n  if(state===ST.PLAY)acc+=dt;\n  while(acc>=FDT){physics(FDT);acc-=FDT;}\n  if(state===ST.DYING){updateDeath(dt);}\n  else if(state===ST.COMP){cTimer-=dt;if(cTimer<=0){state=ST.TITLE;}}\n  else if(state===ST.OVER){oTimer-=dt;if(oTimer<=0){state=ST.TITLE;}}\n  if(state===ST.PLAY||state===ST.DYING)updateCam();\n  render();updateHUD();\n  requestAnimationFrame(loop);\n}\n\n// Init\nparseLevel();requestAnimationFrame(loop);\n</parameter> levelMap[y][x];\n}\nfunction isSolid(x,y){return tileAt(x,y)===T.S;}\n\n// Game state\nlet state=ST.TITLE,score=0,lives=STL,hoopsLeft=HOOPS;\nlet hCollected=new Set(),crystalGot=false,cpScores=new Set();\nlet checkpoints=[],activeCP=null;\nlet ball={x:0,y:0,vx:0,vy:0},sq=1,st=1;\nlet dTimer=0,dFx=[],cTimer=0,oTimer=0,camX=0;\nlet keys={left:false,right:false,bounce:false};\n\n// Input\nconst LK=new Set(['ArrowLeft','KeyA','Numpad4']);\nconst RK=new Set(['ArrowRight','KeyD','Numpad6']);\nconst BK=new Set(['ArrowUp','KeyW','Space','Numpad2']);\nconst GK=new Set([...LK,...RK,...BK]);\n\ndocument.addEventListener('keydown',e=>{\n  if(GK.has(e.code))e.preventDefault();\n  if(LK.has(e.code))keys.left=true;\n  if(RK.has(e.code))keys.right=true;\n  if(BK.has(e.code))keys.bounce=true;\n  if(state===ST.TITLE&&(e.code==='Space'||e.code==='ArrowUp'||e.code==='KeyW')){e.preventDefault();startGame();}\n});\ndocument.addEventListener('keyup',e=>{\n  if(GK.has(e.code))e.preventDefault();\n  if(LK.has(e.code))keys.left=false;\n  if(RK.has(e.code))keys.right=false;\n  if(BK.has(e.code))keys.bounce=false;\n});\n\nfunction startGame(){\n  state=ST.PLAY;score=0;lives=STL;hoopsLeft=HOOPS;\n  hCollected=new Set();crystalGot=false;cpScores=new Set();activeCP=null;\n  parseLevel();respawn();\n}\nfunction respawn(){\n  if(activeCP){ball.x=activeCP.x+0.5;ball.y=activeCP.y-0.5;}\n  else{ball.x=2.5;ball.y=13.0;}\n  ball.vx=ball.vy=0;sq=st=1;\n}\nfunction killBall(){\n  if(state!==ST.PLAY)return;\n  state=ST.DYING;dTimer=DDEL;dFx=[];\n  for(let i=0;i<16;i++){\n    const a=Math.PI*2*i/16+Math.random()*0.3,sp=3+Math.random()*5;\n    dFx.push({x:ball.x,y:ball.y,vx:Math.cos(a)*sp,vy:Math.sin(a)*sp,life:1,sz:0.15+Math.random()*0.15});\n  }\n}\nfunction loseLife(){\n  lives--;\n  if(lives<=0){state=ST.OVER;oTimer=ODEL;}\n  else{state=ST.PLAY;respawn();}\n}\nfunction completeLevel(){\n  if(state!==ST.PLAY)return;\n  state=ST.COMP;cTimer=CDEL;\n  score+=CLS+lives*LBS;\n}\n\n// Physics\nfunction physics(dt){\n  if(state!==ST.PLAY)return;\n  const r=0.5,grounded=isGrounded();\n  let ax=0;\n  if(keys.left)ax-=1;if(keys.right)ax+=1;\n  if(ax!==0){ball.vx+=ax*(grounded?GAC:AIRT)*dt;}\n  ball.vx=Math.max(-MSPD,Math.min(MSPD,ball.vx));\n  if(ax===0&&grounded){\n    const f=FRI*dt;\n    if(Math.abs(ball.vx)<f+0.01)ball.vx=0;\n    else{ball.vx-=Math.sign(ball.vx)*f;if(ball.vx===0||Math.sign(ball.vx)!==Math.sign(ball.vx+Math.sign(ball.vx)*f))ball.vx=0;}\n  }\n  ball.vy+=GRAV*dt;if(ball.vy>TERM)ball.vy=TERM;\n  ball.x+=ball.vx*dt;colX(r);\n  const landed=colY(r);\n  if(landed&&ball.vy>0){\n    if(keys.bounce){ball.vy=-BV;sq=0.6;st=1.4;}\n    else{ball.vy*=-REST;if(Math.abs(ball.vy)<0.5){ball.vy=0;ball.y=restY(r);}sq=0.7;st=1.3;}\n  }\n  if(ball.y-r<0){ball.y=r;ball.vy=Math.max(0,ball.vy);}\n  if(ball.x-r<0){ball.x=r;ball.vx=0;}\n  if(ball.x+r>LEVEL_W){ball.x=LEVEL_W-r;ball.vx=0;}\n  sq+=(1-sq)*12*dt;st+=(1-st)*12*dt;\n  pickups();\n}\n\nfunction isGrounded(){\n  const r=0.5,bx=ball.x,by=ball.y+r;\n  const t1=Math.floor(bx-r+0.001),t2=Math.floor(bx+r-0.001),ty=Math.floor(by);\n  for(let tx=t1;tx<=t2;tx++)if(isSolid(tx,ty))return true;\n  return false;\n}\nfunction restY(r){\n  const bx=ball.x,t1=Math.floor(bx-r+0.01),t2=Math.floor(bx+r-0.01);\n  let lo=ball.y;\n  for(let tx=t1;tx<=t2;tx++)for(let ty=Math.floor(ball.y-r);ty<=Math.floor(ball.y+r)+1;ty++)\n    if(isSolid(tx,ty)){const ry=ty-r;if(ry<lo)lo=ry;}\n  return lo;\n}\nfunction colX(r){\n  const bx=ball.x,by=ball.y;\n  const y1=Math.floor(by-r+0.001),y2=Math.floor(by+r-0.001);\n  const x1=Math.floor(bx-r+0.001),x2=Math.floor(bx+r-0.001);\n  for(let ty=y1;ty<=y2;ty++)for(let tx=x1;tx<=x2;tx++){\n    if(!isSolid(tx,ty))continue;\n    if(bx+r>tx&&bx-r<tx+1&&by+r>ty&&by-r<ty+1){\n      const ol=(bx+r)-tx,or2=(tx+1)-(bx-r);\n      if(ol<or2)ball.x=tx-r;else ball.x=tx+1+r;\n      ball.vx=0;\n    }\n  }\n}\nfunction colY(r){\n  let landed=false;\n  const bx=ball.x,by=ball.y;\n  const y1=Math.floor(by-r+0.001),y2=Math.floor(by+r-0.001);\n  const x1=Math.floor(bx-r+0.001),x2=Math.floor(bx+r-0.001);\n  for(let ty=y1;ty<=y2;ty++)for(let tx=x1;tx<=x2;tx++){\n    if(!isSolid(tx,ty))continue;\n    if(bx+r>tx&&bx-r<  tx+1&&by+r>ty&&by-r<  ty+1){\n      const ot=(by+r)-ty,ob=(ty+1)-(by-r);\n      if(ot<ob){ball.y=ty-r;if(ball.vy>0)landed=true;ball.vy=0;}\n      else{ball.y=ty+1+r;ball.vy=0;}\n    }\n  }\n  return landed;\n}\n\nfunction pickups(){\n  const r=0.5,bx=ball.x,by=ball.y;\n  for(let i=0;i<hoopPos.length;i++){\n    if(hCollected.has(i))continue;\n    const h=hoopPos[i],dx=bx-(h.x+0.5),dy=by-(h.y+0.5);\n    if(dx*dx+dy*dy<1){hCollected.add(i);hoopsLeft--;score+=HSC;}\n  }\n  for(let i=0;i<checkpoints.length;i++){\n    const cp=checkpoints[i],dx=bx-(cp.x+0.5),dy=by-(cp.y+0.5);\n    if(dx*dx+dy*dy<1){\n      if(!cpScores.has(i)){score+=CPS;cpScores.add(i);}\n      checkpoints.forEach(c=>c.active=false);cp.active=true;activeCP={x:cp.x,y:cp.y};\n    }\n  }\n  if(cPos&&!crystalGot){\n    const dx=bx-(cPos.x+0.5),dy=by-(cPos.y+0.5);\n    if(dx*dx+dy*dy<1){crystalGot=true;score+=CRY;if(lives<MXL)lives++;}\n  }\n  if(ePos&&hoopsLeft<=0){\n    const ex=ePos.x+0.5,ey=ePos.y+0.5,dx=bx-ex,dy=by-ey;\n    if(dx*dx<0.64&&dy*dy<1.44)completeLevel();\n  }\n  for(let y=0;y<LEVEL_H;y++)for(let x=0;x<LEVEL_W;x++){\n    if(lmap[y][x]!==T.P)continue;\n    const dx=bx-(x+0.5),dy=by-(y+0.5);\n    if(dx*dx+dy*dy<(r+0.35)*(r+0.35)){killBall();return;}\n  }\n}\n\nfunction updateDeath(dt){\n  if(state!==ST.DYING)return;\n  dTimer-=dt;\n  for(const p of dFx){p.x+=p.vx"
 }
]