diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..d228cbf
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,329 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Snake</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    html, body {
+      height: 100%;
+      overflow: hidden;
+      background: #0a0a0f;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 10px 8px 6px;
+      font-family: 'Courier New', monospace;
+      color: #e0e0e0;
+      user-select: none;
+      gap: 6px;
+    }
+
+    h1 {
+      font-size: clamp(1.3rem, 5.5vw, 2.2rem);
+      letter-spacing: 0.25em;
+      color: #4eff91;
+      text-shadow: 0 0 20px #4eff9188;
+    }
+
+    #scoreboard {
+      display: flex;
+      gap: 2rem;
+      font-size: clamp(0.8rem, 3.5vw, 1rem);
+      letter-spacing: 0.12em;
+    }
+    #scoreboard span { color: #888; }
+    #scoreboard strong { color: #ffe44e; }
+
+    #canvas-wrap {
+      position: relative;
+      border: 2px solid #4eff9155;
+      border-radius: 4px;
+      flex-shrink: 0;
+    }
+
+    canvas { display: block; }
+
+    #overlay {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: rgba(10,10,15,0.9);
+      border-radius: 3px;
+      gap: 10px;
+      cursor: pointer;
+    }
+
+    #overlay.hidden { display: none; }
+
+    #overlay h2 {
+      font-size: clamp(1.3rem, 5.5vw, 1.8rem);
+      letter-spacing: 0.2em;
+      color: #ff4e4e;
+    }
+    #overlay p { color: #aaa; font-size: clamp(0.8rem, 3vw, 0.9rem); }
+
+    #btn {
+      padding: 12px 32px;
+      font-family: inherit;
+      font-size: clamp(0.9rem, 4vw, 1.1rem);
+      letter-spacing: 0.2em;
+      background: #4eff91;
+      color: #0a0a0f;
+      border: none;
+      border-radius: 4px;
+      font-weight: bold;
+      cursor: pointer;
+      touch-action: manipulation;
+      -webkit-tap-highlight-color: rgba(78,255,145,0.3);
+    }
+
+    #btn:active { opacity: 0.8; }
+
+    /* D-pad */
+    #dpad {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: repeat(3, 1fr);
+      gap: 8px;
+      flex-shrink: 0;
+    }
+
+    @media (min-width: 600px) and (pointer: fine) { #dpad { display: none; } }
+
+    .db {
+      background: #1a1a2e;
+      border: 2px solid #4eff9166;
+      border-radius: 50%;
+      color: #4eff91;
+      font-size: clamp(1.1rem, 4.5vw, 1.6rem);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      touch-action: manipulation;
+      -webkit-tap-highlight-color: rgba(78,255,145,0.2);
+      width: 100%;
+      aspect-ratio: 1;
+    }
+
+    .db:active { background: #4eff9133; border-color: #4eff91; }
+    .blank { visibility: hidden; }
+  </style>
+</head>
+<body>
+
+<h1>SNAKE</h1>
+
+<div id="scoreboard">
+  <div><span>SCORE </span><strong id="score">0</strong></div>
+  <div><span>BEST &nbsp;</span><strong id="best">0</strong></div>
+</div>
+
+<div id="canvas-wrap">
+  <canvas id="c"></canvas>
+  <div id="overlay" onclick="doStart()">
+    <h2 id="ot">SNAKE</h2>
+    <p id="os">tap to start</p>
+    <button id="btn" onclick="doStart()">START</button>
+  </div>
+</div>
+
+<div id="dpad">
+  <div class="blank"></div>
+  <button class="db" onclick="doDir('up')">▲</button>
+  <div class="blank"></div>
+  <button class="db" onclick="doDir('left')">◀</button>
+  <div class="blank"></div>
+  <button class="db" onclick="doDir('right')">▶</button>
+  <div class="blank"></div>
+  <button class="db" onclick="doDir('down')">▼</button>
+  <div class="blank"></div>
+</div>
+
+<script>
+  const COLS = 20, ROWS = 20;
+
+  // Compute cell size to fit screen
+  const canvas = document.getElementById('c');
+  const ctx = canvas.getContext('2d');
+
+  function computeCell() {
+    const vw = window.innerWidth, vh = window.innerHeight;
+    const dpadSize = vw < 600 ? Math.min(vw * 0.72, 260) : 0;
+    const availW = Math.min(vw - 16, 540);
+    const availH = vh - 120 - dpadSize - 20; // header + dpad + gaps
+    return Math.max(10, Math.floor(Math.min(availW / COLS, availH / ROWS)));
+  }
+
+  let CELL = computeCell();
+  canvas.width  = COLS * CELL;
+  canvas.height = ROWS * CELL;
+
+  // Also size the dpad
+  const dpad = document.getElementById('dpad');
+  const dpadSize = Math.min(window.innerWidth * 0.72, 260);
+  dpad.style.width  = dpadSize + 'px';
+  dpad.style.height = dpadSize + 'px';
+
+  let snake, dir, nextDir, food, score, hiscore = 0, timer, alive = false, foodTick = 0;
+
+  const overlay = document.getElementById('overlay');
+  const ot = document.getElementById('ot');
+  const os = document.getElementById('os');
+  const scoreEl = document.getElementById('score');
+  const bestEl  = document.getElementById('best');
+
+  function ri(n) { return Math.floor(Math.random() * n); }
+
+  function spawnFood() {
+    const occ = new Set(snake.map(s => s.x + ',' + s.y));
+    let p;
+    do { p = { x: ri(COLS), y: ri(ROWS) }; } while (occ.has(p.x + ',' + p.y));
+    food = p;
+  }
+
+  // Exposed globally so inline onclick works
+  window.doStart = function() {
+    if (alive) return;
+    const mx = COLS >> 1, my = ROWS >> 1;
+    snake = [{ x: mx, y: my }, { x: mx-1, y: my }, { x: mx-2, y: my }];
+    dir = { x: 1, y: 0 };
+    nextDir = { x: 1, y: 0 };
+    score = 0;
+    scoreEl.textContent = '0';
+    alive = true;
+    overlay.classList.add('hidden');
+    spawnFood();
+    clearInterval(timer);
+    timer = setInterval(tick, 120);
+  };
+
+  const DIRS = { up:{x:0,y:-1}, down:{x:0,y:1}, left:{x:-1,y:0}, right:{x:1,y:0} };
+
+  window.doDir = function(d) {
+    if (!alive) { doStart(); return; }
+    const nd = DIRS[d];
+    if (nd.x === -dir.x && nd.y === -dir.y) return;
+    nextDir = nd;
+  };
+
+  function tick() {
+    foodTick++;
+    dir = nextDir;
+    const h = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
+    if (h.x < 0 || h.x >= COLS || h.y < 0 || h.y >= ROWS ||
+        snake.some(s => s.x === h.x && s.y === h.y)) {
+      clearInterval(timer);
+      alive = false;
+      draw();
+      ot.textContent = 'GAME OVER';
+      os.textContent = 'Score: ' + score;
+      document.getElementById('btn').textContent = 'PLAY AGAIN';
+      overlay.classList.remove('hidden');
+      return;
+    }
+    snake.unshift(h);
+    if (h.x === food.x && h.y === food.y) {
+      score++;
+      if (score > hiscore) { hiscore = score; bestEl.textContent = hiscore; }
+      scoreEl.textContent = score;
+      spawnFood();
+    } else {
+      snake.pop();
+    }
+    draw();
+  }
+
+  function draw() {
+    ctx.fillStyle = '#0a0a0f';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    // Grid lines
+    ctx.strokeStyle = '#ffffff0a';
+    ctx.lineWidth = 1;
+    for (let x = 0; x <= COLS; x++) { ctx.beginPath(); ctx.moveTo(x*CELL,0); ctx.lineTo(x*CELL,canvas.height); ctx.stroke(); }
+    for (let y = 0; y <= ROWS; y++) { ctx.beginPath(); ctx.moveTo(0,y*CELL); ctx.lineTo(canvas.width,y*CELL); ctx.stroke(); }
+
+    // Food
+    const pulse = 0.6 + 0.4 * Math.sin(foodTick * 0.25);
+    const fx = food.x*CELL + CELL/2, fy = food.y*CELL + CELL/2;
+    const gr = ctx.createRadialGradient(fx, fy, 1, fx, fy, CELL * pulse);
+    gr.addColorStop(0, '#ff4e4ecc'); gr.addColorStop(1, '#ff4e4e00');
+    ctx.fillStyle = gr;
+    ctx.fillRect(food.x*CELL - CELL, food.y*CELL - CELL, CELL*3, CELL*3);
+    ctx.fillStyle = '#ff4e4e';
+    ctx.beginPath(); ctx.arc(fx, fy, CELL*0.32, 0, Math.PI*2); ctx.fill();
+
+    // Snake
+    snake.forEach((s, i) => {
+      const x = s.x*CELL, y = s.y*CELL, p = i ? 2 : 1, r = Math.max(2, CELL*0.22);
+      ctx.fillStyle = i === 0 ? '#4eff91' : '#29b861';
+      ctx.shadowColor = i === 0 ? '#4eff91' : 'transparent';
+      ctx.shadowBlur  = i === 0 ? 10 : 0;
+      rr(x+p, y+p, CELL-p*2, CELL-p*2, r);
+      ctx.fill();
+    });
+    ctx.shadowBlur = 0;
+  }
+
+  function rr(x, y, w, h, r) {
+    ctx.beginPath();
+    ctx.moveTo(x+r, y); ctx.lineTo(x+w-r, y); ctx.quadraticCurveTo(x+w,y,x+w,y+r);
+    ctx.lineTo(x+w, y+h-r); ctx.quadraticCurveTo(x+w,y+h,x+w-r,y+h);
+    ctx.lineTo(x+r, y+h); ctx.quadraticCurveTo(x,y+h,x,y+h-r);
+    ctx.lineTo(x, y+r); ctx.quadraticCurveTo(x,y,x+r,y);
+    ctx.closePath();
+  }
+
+  // Keyboard
+  const KEYS = { ArrowUp:'up',ArrowDown:'down',ArrowLeft:'left',ArrowRight:'right',w:'up',s:'down',a:'left',d:'right' };
+  document.addEventListener('keydown', e => {
+    const d = KEYS[e.key] || KEYS[e.key.toLowerCase()];
+    if (!d) return;
+    e.preventDefault();
+    doDir(d);
+  });
+
+  // Swipe on canvas
+  let sw = null;
+  canvas.addEventListener('touchstart', e => { sw = { x: e.touches[0].clientX, y: e.touches[0].clientY }; }, { passive: true });
+  canvas.addEventListener('touchend', e => {
+    if (!sw) return;
+    const dx = e.changedTouches[0].clientX - sw.x;
+    const dy = e.changedTouches[0].clientY - sw.y;
+    sw = null;
+    if (Math.abs(dx) < 15 && Math.abs(dy) < 15) { doStart(); return; }
+    doDir(Math.abs(dx) > Math.abs(dy) ? (dx > 0 ? 'right' : 'left') : (dy > 0 ? 'down' : 'up'));
+  }, { passive: true });
+
+  // Touchstart on dpad for instant response (no 300ms delay)
+  document.querySelectorAll('.db[onclick]').forEach(b => {
+    b.addEventListener('touchstart', e => {
+      e.preventDefault();
+      b.onclick();
+    }, { passive: false });
+  });
+
+  // Draw blank initial frame
+  ctx.fillStyle = '#0a0a0f';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  window.addEventListener('resize', () => {
+    CELL = computeCell();
+    canvas.width = COLS * CELL;
+    canvas.height = ROWS * CELL;
+    if (snake) draw();
+  });
+</script>
+</body>
+</html>
diff --git a/server.js b/server.js
new file mode 100644
index 0000000..01d4559
--- /dev/null
+++ b/server.js
@@ -0,0 +1,37 @@
+#!/usr/bin/env node
+'use strict';
+
+const http = require('http');
+const fs   = require('fs');
+const path = require('path');
+
+const PORT = 10000;
+
+const MIME = {
+  '.html': 'text/html',
+  '.js':   'text/javascript',
+  '.css':  'text/css',
+  '.ico':  'image/x-icon',
+};
+
+const server = http.createServer((req, res) => {
+  let filePath = req.url === '/' ? '/index.html' : req.url;
+  filePath = path.join(__dirname, 'public', filePath);
+
+  const ext = path.extname(filePath);
+  const mime = MIME[ext] || 'text/plain';
+
+  fs.readFile(filePath, (err, data) => {
+    if (err) {
+      res.writeHead(404);
+      res.end('Not found');
+      return;
+    }
+    res.writeHead(200, { 'Content-Type': mime, 'Cache-Control': 'no-store' });
+    res.end(data);
+  });
+});
+
+server.listen(PORT, () => {
+  console.log(`Snake running at http://localhost:${PORT}`);
+});
