diff --git a/camera-tetris.html b/camera-tetris.html
new file mode 100644
index 0000000..ad9af8c
--- /dev/null
+++ b/camera-tetris.html
@@ -0,0 +1,744 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Camera Tetris - 体感俄罗斯方块</title>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  background: #000;
+  color: #fff;
+  font-family: 'Courier New', monospace;
+  overflow: hidden;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+#container {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+}
+#camera {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  object-fit: cover;
+  transform: scaleX(-1);
+  z-index: 1;
+}
+#poseCanvas {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  z-index: 2;
+  pointer-events: none;
+}
+#gameCanvas {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 3;
+  opacity: 0.85;
+}
+#ui {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  z-index: 4;
+  pointer-events: none;
+}
+#score {
+  position: absolute;
+  top: 20px; left: 20px;
+  font-size: 24px;
+  color: #0f0;
+  text-shadow: 0 0 10px #0f0;
+}
+#level {
+  position: absolute;
+  top: 55px; left: 20px;
+  font-size: 18px;
+  color: #0ff;
+  text-shadow: 0 0 8px #0ff;
+}
+#nextBox {
+  position: absolute;
+  top: 20px; right: 20px;
+  text-align: center;
+}
+#nextBox .label {
+  font-size: 16px;
+  color: #ff0;
+  margin-bottom: 5px;
+}
+#nextCanvas {
+  border: 2px solid #ff0;
+  background: rgba(0,0,0,0.6);
+}
+#controls {
+  position: absolute;
+  bottom: 20px; left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 20px;
+  font-size: 14px;
+  color: #aaa;
+}
+.ctrl-item {
+  background: rgba(0,0,0,0.6);
+  padding: 8px 16px;
+  border-radius: 8px;
+  border: 1px solid #555;
+}
+.ctrl-item .key { color: #ff0; font-weight: bold; }
+#gesture {
+  position: absolute;
+  bottom: 80px; left: 50%;
+  transform: translateX(-50%);
+  font-size: 20px;
+  color: #f0f;
+  text-shadow: 0 0 10px #f0f;
+  transition: opacity 0.3s;
+}
+#startScreen {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  z-index: 10;
+  background: rgba(0,0,0,0.85);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: all;
+}
+#startScreen h1 {
+  font-size: 48px;
+  color: #0f0;
+  text-shadow: 0 0 20px #0f0;
+  margin-bottom: 10px;
+}
+#startScreen h2 {
+  font-size: 20px;
+  color: #ff0;
+  margin-bottom: 40px;
+}
+#startScreen .instructions {
+  font-size: 16px;
+  color: #ccc;
+  line-height: 2;
+  text-align: center;
+  margin-bottom: 30px;
+}
+#startScreen .instructions span { color: #0ff; }
+#startBtn {
+  font-size: 24px;
+  padding: 15px 60px;
+  background: #0f0;
+  color: #000;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: bold;
+  pointer-events: all;
+}
+#startBtn:hover { background: #0a0; }
+#gameOver {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%; height: 100%;
+  z-index: 10;
+  background: rgba(0,0,0,0.85);
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  pointer-events: all;
+}
+#gameOver h1 { font-size: 48px; color: #f00; text-shadow: 0 0 20px #f00; margin-bottom: 20px; }
+#gameOver .final-score { font-size: 28px; color: #ff0; margin-bottom: 30px; }
+#restartBtn {
+  font-size: 24px;
+  padding: 15px 60px;
+  background: #f00;
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: bold;
+}
+#modeSelect {
+  display: flex;
+  gap: 15px;
+  margin-bottom: 30px;
+}
+.mode-btn {
+  padding: 10px 25px;
+  font-size: 16px;
+  border: 2px solid #0ff;
+  background: transparent;
+  color: #0ff;
+  border-radius: 8px;
+  cursor: pointer;
+  font-family: inherit;
+  pointer-events: all;
+}
+.mode-btn.active {
+  background: #0ff;
+  color: #000;
+}
+.mode-btn:hover { opacity: 0.8; }
+#cameraStatus {
+  position: absolute;
+  top: 20px; left: 50%;
+  transform: translateX(-50%);
+  z-index: 20;
+  font-size: 16px;
+  color: #fff;
+  background: rgba(200, 0, 0, 0.9);
+  padding: 12px 20px;
+  border-radius: 8px;
+  max-width: 90%;
+  text-align: center;
+  display: none;
+}
+#cameraStatus code {
+  background: rgba(0,0,0,0.5);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 13px;
+}
+</style>
+</head>
+<body>
+<div id="container">
+  <video id="camera" autoplay playsinline></video>
+  <canvas id="poseCanvas"></canvas>
+  <canvas id="gameCanvas"></canvas>
+  <div id="ui">
+    <div id="score">SCORE: 0</div>
+    <div id="level">LEVEL: 1</div>
+    <div id="nextBox">
+      <div class="label">NEXT</div>
+      <canvas id="nextCanvas" width="120" height="120"></canvas>
+    </div>
+    <div id="gesture"></div>
+    <div id="controls">
+      <div class="ctrl-item"><span class="key">← →</span> Move</div>
+      <div class="ctrl-item"><span class="key">↑</span> Rotate</div>
+      <div class="ctrl-item"><span class="key">↓</span> Soft Drop</div>
+      <div class="ctrl-item"><span class="key">Space</span> Hard Drop</div>
+      <div class="ctrl-item"><span class="key">P</span> Pause</div>
+    </div>
+  </div>
+  <div id="startScreen">
+    <h1>🎮 体感俄罗斯方块</h1>
+    <h2>Camera Tetris</h2>
+    <div class="instructions">
+      <div><span>🎥 Camera Mode:</span> raise LEFT hand = move left, raise RIGHT hand = move right</div>
+      <div><span>🙌 Both hands up</span> = rotate | <span>🏋️ Squat down</span> = hard drop</div>
+      <div><span>⌨️ Keyboard:</span> Arrow keys to move/rotate, Space to drop</div>
+    </div>
+    <div id="modeSelect">
+      <button class="mode-btn active" data-mode="camera">📷 Camera + Keyboard</button>
+      <button class="mode-btn" data-mode="keyboard">⌨️ Keyboard Only</button>
+    </div>
+    <button id="startBtn">START GAME</button>
+  </div>
+  <div id="gameOver">
+    <h1>GAME OVER</h1>
+    <div class="final-score"></div>
+    <button id="restartBtn">PLAY AGAIN</button>
+  </div>
+  <div id="cameraStatus"></div>
+</div>
+
+<script type="module">
+// ========== MediaPipe Pose Detection ==========
+import vision from 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.18/+esm';
+const { PoseLandmarker, FilesetResolver, DrawingUtils } = vision;
+
+let poseLandmarker = null;
+let poseRunning = false;
+let lastGesture = '';
+let gestureTimer = 0;
+let useCamera = true;
+
+async function initPose() {
+  try {
+    const filesetResolver = await FilesetResolver.forVisionTasks(
+      'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.18/wasm'
+    );
+    poseLandmarker = await PoseLandmarker.createFromOptions(filesetResolver, {
+      baseOptions: {
+        modelAssetPath: 'https://storage.googleapis.com/mediapipe-models/pose_landmarker/pose_landmarker_lite/float16/1/pose_landmarker_lite.task',
+        delegate: 'GPU'
+      },
+      runningMode: 'VIDEO',
+      numPoses: 1
+    });
+    console.log('Pose model loaded');
+  } catch (e) {
+    console.warn('Pose init failed, falling back to keyboard only:', e);
+    useCamera = false;
+  }
+}
+
+// ========== Camera ==========
+const video = document.getElementById('camera');
+const poseCanvas = document.getElementById('poseCanvas');
+const poseCtx = poseCanvas.getContext('2d');
+
+async function startCamera() {
+  const statusEl = document.getElementById('cameraStatus');
+  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+    const insecure = location.protocol !== 'https:' && location.hostname !== 'localhost' && location.hostname !== '127.0.0.1';
+    statusEl.innerHTML = insecure
+      ? '⚠️ Camera requires HTTPS or localhost.<br>Open via <code>python3 -m http.server</code> then http://localhost:8000/camera-tetris.html'
+      : '⚠️ getUserMedia not supported in this browser';
+    statusEl.style.display = 'block';
+    useCamera = false;
+    return false;
+  }
+  try {
+    const stream = await navigator.mediaDevices.getUserMedia({
+      video: { width: { ideal: 1280 }, height: { ideal: 720 }, facingMode: 'user' }
+    });
+    video.srcObject = stream;
+    await video.play();
+    poseCanvas.width = video.videoWidth;
+    poseCanvas.height = video.videoHeight;
+    return true;
+  } catch (e) {
+    console.warn('Camera not available:', e);
+    let msg = '⚠️ Camera error: ' + e.name;
+    if (e.name === 'NotAllowedError') msg = '⚠️ Camera permission denied. Allow it in browser settings and reload.';
+    else if (e.name === 'NotFoundError') msg = '⚠️ No camera found on this device.';
+    else if (location.protocol === 'file:') msg = '⚠️ file:// blocks camera. Serve via http://localhost instead.';
+    statusEl.innerHTML = msg;
+    statusEl.style.display = 'block';
+    useCamera = false;
+    return false;
+  }
+}
+
+// ========== Pose Detection Loop ==========
+let lastPoseTime = -1;
+const GESTURE_COOLDOWN = 300;
+let lastGestureTime = 0;
+
+function detectPose() {
+  if (!poseRunning || !poseLandmarker || !useCamera) {
+    if (poseRunning) requestAnimationFrame(detectPose);
+    return;
+  }
+  const now = performance.now();
+  if (video.currentTime !== lastPoseTime && video.readyState >= 2) {
+    lastPoseTime = video.currentTime;
+    const results = poseLandmarker.detectForVideo(video, now);
+    drawPose(results);
+    if (results.landmarks && results.landmarks.length > 0) {
+      processGesture(results.landmarks[0], now);
+    }
+  }
+  requestAnimationFrame(detectPose);
+}
+
+function drawPose(results) {
+  poseCtx.clearRect(0, 0, poseCanvas.width, poseCanvas.height);
+  poseCtx.save();
+  poseCtx.translate(poseCanvas.width, 0);
+  poseCtx.scale(-1, 1);
+  if (results.landmarks) {
+    for (const lm of results.landmarks) {
+      // Draw connections
+      const connections = [
+        [11,12],[11,13],[13,15],[12,14],[14,16],
+        [11,23],[12,24],[23,24],[23,25],[24,26],[25,27],[26,28]
+      ];
+      poseCtx.strokeStyle = 'rgba(0, 255, 255, 0.6)';
+      poseCtx.lineWidth = 3;
+      for (const [a, b] of connections) {
+        if (lm[a] && lm[b] && lm[a].visibility > 0.5 && lm[b].visibility > 0.5) {
+          poseCtx.beginPath();
+          poseCtx.moveTo(lm[a].x * poseCanvas.width, lm[a].y * poseCanvas.height);
+          poseCtx.lineTo(lm[b].x * poseCanvas.width, lm[b].y * poseCanvas.height);
+          poseCtx.stroke();
+        }
+      }
+      // Draw joints
+      for (let i = 0; i < lm.length; i++) {
+        if (lm[i].visibility > 0.5) {
+          poseCtx.fillStyle = '#0f0';
+          poseCtx.beginPath();
+          poseCtx.arc(lm[i].x * poseCanvas.width, lm[i].y * poseCanvas.height, 5, 0, Math.PI * 2);
+          poseCtx.fill();
+        }
+      }
+    }
+  }
+  poseCtx.restore();
+}
+
+function processGesture(lm, now) {
+  if (now - lastGestureTime < GESTURE_COOLDOWN) return;
+  if (!gameRunning || paused) return;
+
+  // Key landmarks: 11=left shoulder, 12=right shoulder, 15=left wrist, 16=right wrist
+  // 23=left hip, 24=right hip, 25=left knee, 26=right knee
+  const ls = lm[11], rs = lm[12];
+  const lw = lm[15], rw = lm[16];
+  const lh = lm[23], rh = lm[24];
+  const nose = lm[0];
+
+  if (!ls || !rs || !lw || !rw) return;
+
+  const shoulderY = (ls.y + rs.y) / 2;
+  const hipY = (lh.y + rh.y) / 2;
+  const leftHandUp = lw.y < ls.y - 0.05;
+  const rightHandUp = rw.y < rs.y - 0.05;
+
+  // Both hands raised = rotate
+  if (leftHandUp && rightHandUp) {
+    showGesture('🙌 ROTATE');
+    rotatePiece();
+    lastGestureTime = now;
+    return;
+  }
+
+  // Squat detection: nose drops significantly relative to normal position
+  if (nose.y > hipY - 0.05) {
+    showGesture('⬇️ DROP');
+    hardDrop();
+    lastGestureTime = now + 500; // longer cooldown for drop
+    return;
+  }
+
+  // Left hand raised = move left (mirrored: visual left)
+  if (leftHandUp && !rightHandUp) {
+    showGesture('👈 LEFT');
+    movePiece(-1);
+    lastGestureTime = now;
+    return;
+  }
+
+  // Right hand raised = move right (mirrored: visual right)
+  if (rightHandUp && !leftHandUp) {
+    showGesture('👉 RIGHT');
+    movePiece(1);
+    lastGestureTime = now;
+    return;
+  }
+}
+
+function showGesture(text) {
+  const el = document.getElementById('gesture');
+  el.textContent = text;
+  el.style.opacity = 1;
+  clearTimeout(gestureTimer);
+  gestureTimer = setTimeout(() => { el.style.opacity = 0; }, 600);
+}
+
+// ========== Tetris Game ==========
+const COLS = 10, ROWS = 20, BLOCK = 30;
+const gameCanvas = document.getElementById('gameCanvas');
+const ctx = gameCanvas.getContext('2d');
+gameCanvas.width = COLS * BLOCK;
+gameCanvas.height = ROWS * BLOCK;
+
+const PIECES = {
+  I: { shape: [[0,0],[1,0],[2,0],[3,0]], color: '#00f0f0' },
+  O: { shape: [[0,0],[1,0],[0,1],[1,1]], color: '#f0f000' },
+  T: { shape: [[0,0],[1,0],[2,0],[1,1]], color: '#a000f0' },
+  S: { shape: [[1,0],[2,0],[0,1],[1,1]], color: '#00f000' },
+  Z: { shape: [[0,0],[1,0],[1,1],[2,1]], color: '#f00000' },
+  J: { shape: [[0,0],[0,1],[1,1],[2,1]], color: '#0000f0' },
+  L: { shape: [[2,0],[0,1],[1,1],[2,1]], color: '#f0a000' }
+};
+const PIECE_KEYS = Object.keys(PIECES);
+
+let board = [];
+let currentPiece = null;
+let nextPiece = null;
+let score = 0;
+let level = 1;
+let lines = 0;
+let gameRunning = false;
+let paused = false;
+let dropInterval = 800;
+let lastDrop = 0;
+let animFrameId = null;
+
+function createBoard() {
+  board = Array.from({ length: ROWS }, () => Array(COLS).fill(null));
+}
+
+function randomPiece() {
+  const key = PIECE_KEYS[Math.floor(Math.random() * PIECE_KEYS.length)];
+  const p = PIECES[key];
+  return {
+    blocks: p.shape.map(([x, y]) => [x, y]),
+    color: p.color,
+    x: Math.floor(COLS / 2) - 1,
+    y: 0,
+    type: key
+  };
+}
+
+function validPos(piece, dx = 0, dy = 0) {
+  for (const [bx, by] of piece.blocks) {
+    const nx = piece.x + bx + dx;
+    const ny = piece.y + by + dy;
+    if (nx < 0 || nx >= COLS || ny >= ROWS) return false;
+    if (ny >= 0 && board[ny][nx]) return false;
+  }
+  return true;
+}
+
+function lockPiece() {
+  for (const [bx, by] of currentPiece.blocks) {
+    const x = currentPiece.x + bx;
+    const y = currentPiece.y + by;
+    if (y < 0) { endGame(); return; }
+    board[y][x] = currentPiece.color;
+  }
+  clearLines();
+  currentPiece = nextPiece;
+  nextPiece = randomPiece();
+  drawNext();
+  if (!validPos(currentPiece)) endGame();
+}
+
+function clearLines() {
+  let cleared = 0;
+  for (let r = ROWS - 1; r >= 0; r--) {
+    if (board[r].every(c => c)) {
+      board.splice(r, 1);
+      board.unshift(Array(COLS).fill(null));
+      cleared++;
+      r++;
+    }
+  }
+  if (cleared) {
+    const pts = [0, 100, 300, 500, 800];
+    score += (pts[cleared] || 800) * level;
+    lines += cleared;
+    level = Math.floor(lines / 10) + 1;
+    dropInterval = Math.max(100, 800 - (level - 1) * 60);
+    document.getElementById('score').textContent = 'SCORE: ' + score;
+    document.getElementById('level').textContent = 'LEVEL: ' + level;
+  }
+}
+
+function movePiece(dx) {
+  if (validPos(currentPiece, dx, 0)) currentPiece.x += dx;
+}
+
+function rotatePiece() {
+  const rotated = currentPiece.blocks.map(([x, y]) => [-y, x]);
+  // Normalize
+  const minX = Math.min(...rotated.map(([x]) => x));
+  const minY = Math.min(...rotated.map(([, y]) => y));
+  const normalized = rotated.map(([x, y]) => [x - minX, y - minY]);
+  const old = currentPiece.blocks;
+  currentPiece.blocks = normalized;
+  // Wall kicks
+  for (const kick of [0, -1, 1, -2, 2]) {
+    if (validPos(currentPiece, kick, 0)) {
+      currentPiece.x += kick;
+      return;
+    }
+  }
+  currentPiece.blocks = old;
+}
+
+function softDrop() {
+  if (validPos(currentPiece, 0, 1)) {
+    currentPiece.y++;
+    score += 1;
+  } else {
+    lockPiece();
+  }
+}
+
+function hardDrop() {
+  let drop = 0;
+  while (validPos(currentPiece, 0, drop + 1)) drop++;
+  currentPiece.y += drop;
+  score += drop * 2;
+  document.getElementById('score').textContent = 'SCORE: ' + score;
+  lockPiece();
+}
+
+function getGhostY() {
+  let dy = 0;
+  while (validPos(currentPiece, 0, dy + 1)) dy++;
+  return currentPiece.y + dy;
+}
+
+// ========== Drawing ==========
+function drawBoard() {
+  ctx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
+
+  // Background grid
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+  ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height);
+  ctx.strokeStyle = 'rgba(255,255,255,0.08)';
+  for (let r = 0; r < ROWS; r++) {
+    for (let c = 0; c < COLS; c++) {
+      ctx.strokeRect(c * BLOCK, r * BLOCK, BLOCK, BLOCK);
+    }
+  }
+
+  // Placed blocks
+  for (let r = 0; r < ROWS; r++) {
+    for (let c = 0; c < COLS; c++) {
+      if (board[r][c]) drawBlock(c, r, board[r][c]);
+    }
+  }
+
+  if (!currentPiece) return;
+
+  // Ghost piece
+  const ghostY = getGhostY();
+  for (const [bx, by] of currentPiece.blocks) {
+    const x = (currentPiece.x + bx) * BLOCK;
+    const y = (ghostY + by) * BLOCK;
+    ctx.strokeStyle = currentPiece.color;
+    ctx.lineWidth = 1;
+    ctx.globalAlpha = 0.3;
+    ctx.strokeRect(x + 1, y + 1, BLOCK - 2, BLOCK - 2);
+    ctx.globalAlpha = 1;
+  }
+
+  // Current piece
+  for (const [bx, by] of currentPiece.blocks) {
+    drawBlock(currentPiece.x + bx, currentPiece.y + by, currentPiece.color);
+  }
+
+  // Border
+  ctx.strokeStyle = '#fff';
+  ctx.lineWidth = 2;
+  ctx.strokeRect(0, 0, gameCanvas.width, gameCanvas.height);
+}
+
+function drawBlock(x, y, color) {
+  const px = x * BLOCK, py = y * BLOCK;
+  ctx.fillStyle = color;
+  ctx.fillRect(px + 1, py + 1, BLOCK - 2, BLOCK - 2);
+  ctx.fillStyle = 'rgba(255,255,255,0.2)';
+  ctx.fillRect(px + 1, py + 1, BLOCK - 2, 4);
+  ctx.fillRect(px + 1, py + 1, 4, BLOCK - 2);
+  ctx.fillStyle = 'rgba(0,0,0,0.2)';
+  ctx.fillRect(px + BLOCK - 5, py + 1, 4, BLOCK - 2);
+  ctx.fillRect(px + 1, py + BLOCK - 5, BLOCK - 2, 4);
+}
+
+function drawNext() {
+  const nc = document.getElementById('nextCanvas');
+  const nctx = nc.getContext('2d');
+  nctx.clearRect(0, 0, nc.width, nc.height);
+  if (!nextPiece) return;
+  const bs = 25;
+  const maxX = Math.max(...nextPiece.blocks.map(([x]) => x));
+  const maxY = Math.max(...nextPiece.blocks.map(([, y]) => y));
+  const ox = (nc.width - (maxX + 1) * bs) / 2;
+  const oy = (nc.height - (maxY + 1) * bs) / 2;
+  for (const [bx, by] of nextPiece.blocks) {
+    nctx.fillStyle = nextPiece.color;
+    nctx.fillRect(ox + bx * bs + 1, oy + by * bs + 1, bs - 2, bs - 2);
+    nctx.fillStyle = 'rgba(255,255,255,0.2)';
+    nctx.fillRect(ox + bx * bs + 1, oy + by * bs + 1, bs - 2, 3);
+  }
+}
+
+// ========== Game Loop ==========
+function gameLoop(timestamp) {
+  if (!gameRunning) return;
+  animFrameId = requestAnimationFrame(gameLoop);
+  if (paused) { drawBoard(); return; }
+  if (timestamp - lastDrop > dropInterval) {
+    softDrop();
+    lastDrop = timestamp;
+  }
+  drawBoard();
+}
+
+function startGame() {
+  createBoard();
+  score = 0; level = 1; lines = 0;
+  dropInterval = 800;
+  paused = false;
+  document.getElementById('score').textContent = 'SCORE: 0';
+  document.getElementById('level').textContent = 'LEVEL: 1';
+  currentPiece = randomPiece();
+  nextPiece = randomPiece();
+  drawNext();
+  gameRunning = true;
+  lastDrop = performance.now();
+  document.getElementById('startScreen').style.display = 'none';
+  document.getElementById('gameOver').style.display = 'none';
+  if (animFrameId) cancelAnimationFrame(animFrameId);
+  animFrameId = requestAnimationFrame(gameLoop);
+  if (useCamera) {
+    poseRunning = true;
+    detectPose();
+  }
+}
+
+function endGame() {
+  gameRunning = false;
+  poseRunning = false;
+  document.getElementById('gameOver').style.display = 'flex';
+  document.querySelector('#gameOver .final-score').textContent = 'Final Score: ' + score;
+}
+
+// ========== Keyboard Controls ==========
+document.addEventListener('keydown', (e) => {
+  if (!gameRunning) return;
+  if (e.key === 'p' || e.key === 'P') {
+    paused = !paused;
+    showGesture(paused ? '⏸ PAUSED' : '▶ RESUME');
+    return;
+  }
+  if (paused) return;
+  switch (e.key) {
+    case 'ArrowLeft': movePiece(-1); break;
+    case 'ArrowRight': movePiece(1); break;
+    case 'ArrowUp': rotatePiece(); break;
+    case 'ArrowDown': softDrop(); score += 1; break;
+    case ' ':
+      e.preventDefault();
+      hardDrop();
+      break;
+  }
+});
+
+// ========== UI Events ==========
+document.getElementById('startBtn').addEventListener('click', async () => {
+  if (useCamera) {
+    await startCamera();
+    await initPose();
+  }
+  startGame();
+});
+
+document.getElementById('restartBtn').addEventListener('click', () => {
+  startGame();
+});
+
+document.querySelectorAll('.mode-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    useCamera = btn.dataset.mode === 'camera';
+  });
+});
+</script>
+</body>
+</html>
