diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..c2742b5
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1" />
+  <title>Newbury Nights — AR Ghost Hunt</title>
+  <link rel="stylesheet" href="/css/app.css" />
+  <link rel="stylesheet" href="/css/game.css" />
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"
+    }
+  }
+  </script>
+</head>
+<body>
+  <!-- ============ TITLE SCREEN ============ -->
+  <section id="screen-title" class="screen">
+    <div class="title-wrap">
+      <div class="eyebrow">Newbury · After Dark</div>
+      <h1 class="game-title">Newbury<span>Nights</span></h1>
+      <p class="tagline">The town is glooming over. Raise your detector, find the cold spots, and clear them before your battery dies.</p>
+
+      <div class="title-actions">
+        <button class="primary" id="btn-scan-set">Scan a Set</button>
+        <button id="btn-freehunt">Free Hunt</button>
+        <button id="btn-roster">Ghost Index</button>
+      </div>
+
+      <div class="battery-hint mono">DETECTOR ONLINE · v0.1</div>
+    </div>
+    <div class="disclaimer">
+      Fan-made tribute. Not affiliated with, sponsored by, or endorsed by the LEGO Group.
+      LEGO® and Hidden Side™ are trademarks of the LEGO Group.
+    </div>
+  </section>
+
+  <!-- ============ SCAN SCREEN ============ -->
+  <section id="screen-scan" class="screen hidden">
+    <button class="back" data-back>← Back</button>
+    <div class="scan-wrap">
+      <h2>Scan a Set</h2>
+      <p class="muted">Point your camera at the set's code, or type it in.</p>
+      <div id="scan-video-wrap" class="scan-video">
+        <video id="scan-video" playsinline muted></video>
+        <div class="scan-reticle"></div>
+        <div id="scan-status" class="scan-status mono">Starting camera…</div>
+      </div>
+      <div class="manual-entry">
+        <label for="manual-code">Set code</label>
+        <div class="row">
+          <input id="manual-code" placeholder="e.g. NN-70419" autocomplete="off" />
+          <button class="primary" id="btn-manual-go">Go</button>
+        </div>
+        <div id="scan-error" class="scan-error hidden"></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ HUNT (AR) SCREEN ============ -->
+  <section id="screen-hunt" class="screen hidden">
+    <video id="ar-video" playsinline muted></video>
+    <canvas id="ar-canvas"></canvas>
+
+    <!-- HUD overlay -->
+    <div class="hud">
+      <div class="hud-top">
+        <button class="back small" data-back>✕</button>
+        <div class="battery">
+          <div class="battery-label mono">BATTERY</div>
+          <div class="battery-bar"><div id="battery-fill" class="battery-fill"></div></div>
+          <div id="battery-pct" class="mono">100%</div>
+        </div>
+        <div class="gloom-count mono"><span class="dot" style="background:var(--gloom);box-shadow:0 0 8px var(--gloom)"></span> <span id="gloom-count">0</span></div>
+      </div>
+
+      <!-- color wheel scanner -->
+      <div class="wheel" id="color-wheel" aria-label="Gloom detector color wheel">
+        <button class="wheel-seg seg-red"    data-type="red"    aria-label="Scan red gloom"></button>
+        <button class="wheel-seg seg-yellow" data-type="yellow" aria-label="Scan yellow gloom"></button>
+        <button class="wheel-seg seg-blue"   data-type="blue"   aria-label="Scan blue gloom"></button>
+        <div class="wheel-core mono" id="wheel-core">SCAN</div>
+      </div>
+
+      <!-- lock-on label -->
+      <div id="lockon" class="lockon hidden">
+        <div class="lockon-name display" id="lockon-name">—</div>
+        <div class="lockon-sub mono"><span id="lockon-type">—</span> · <span id="lockon-rarity">—</span> · <span id="lockon-ability">—</span></div>
+        <div class="ghost-hp"><div id="ghost-hp-fill" class="ghost-hp-fill"></div></div>
+      </div>
+
+      <!-- blaster -->
+      <div class="hud-bottom">
+        <div class="overheat" id="overheat-wrap"><div id="overheat-fill" class="overheat-fill"></div></div>
+        <button id="btn-blast" class="blaster">HOLD TO BLAST</button>
+      </div>
+
+      <!-- jumpscare / toast -->
+      <div id="toast" class="toast hidden"></div>
+      <div id="result" class="result hidden">
+        <div class="result-card">
+          <div id="result-title" class="display">Set Cleared</div>
+          <div id="result-body" class="muted"></div>
+          <button class="primary" data-back>Return to Newbury</button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============ ROSTER / INDEX ============ -->
+  <section id="screen-roster" class="screen hidden">
+    <button class="back" data-back>← Back</button>
+    <div class="roster-wrap">
+      <h2>Ghost Index</h2>
+      <div class="roster-filters">
+        <select id="filter-type">
+          <option value="">All types</option>
+          <option value="red">Red</option>
+          <option value="yellow">Yellow</option>
+          <option value="blue">Blue</option>
+        </select>
+        <select id="filter-rarity">
+          <option value="">All rarities</option>
+          <option value="1">★</option>
+          <option value="2">★★</option>
+          <option value="3">★★★</option>
+          <option value="4">★★★★</option>
+        </select>
+        <label class="boss-toggle"><input type="checkbox" id="filter-boss" /> Bosses only</label>
+      </div>
+      <div id="roster-grid" class="roster-grid"></div>
+    </div>
+    <div class="disclaimer">
+      Fan-made tribute. Not affiliated with, sponsored by, or endorsed by the LEGO Group.
+      LEGO® and Hidden Side™ are trademarks of the LEGO Group.
+    </div>
+  </section>
+
+  <script type="module" src="/js/game.js"></script>
+</body>
+</html>
