diff --git a/.gitea/workflows/release.yaml b/.gitea/workflows/release.yaml
new file mode 100644
index 0000000..743faab
--- /dev/null
+++ b/.gitea/workflows/release.yaml
@@ -0,0 +1,34 @@
+name: release
+
+# Build and publish a release whenever a semver tag is pushed.
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  goreleaser:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          # GoReleaser needs the full history and tags for the changelog.
+          fetch-depth: 0
+
+      - name: Set up Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: "1.26.x"
+          check-latest: false
+          cache: false
+
+      - name: Run GoReleaser
+        uses: goreleaser/goreleaser-action@v6
+        with:
+          version: "~> v2"
+          args: release --clean
+        env:
+          # Gitea injects a repo-scoped token automatically; GoReleaser reads
+          # GITEA_TOKEN to publish the release to this instance.
+          GITEA_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.goreleaser.yaml b/.goreleaser.yaml
new file mode 100644
index 0000000..ee8f6e6
--- /dev/null
+++ b/.goreleaser.yaml
@@ -0,0 +1,68 @@
+# GoReleaser configuration
+# https://goreleaser.com
+version: 2
+
+project_name: RocketLeagueBot-Renderer
+
+before:
+  hooks:
+    - go mod tidy
+
+builds:
+  - id: renderer
+    main: .
+    binary: RocketLeagueBot-Renderer
+    # Pure-Go build (WASM SQLite, no cgo) — fully static, cross-compiles cleanly.
+    env:
+      - CGO_ENABLED=0
+    goos:
+      - linux
+      - darwin
+      - windows
+    goarch:
+      - amd64
+      - arm64
+    ignore:
+      - goos: windows
+        goarch: arm64
+    flags:
+      - -trimpath
+    ldflags:
+      - -s -w -X main.version={{.Version}} -X main.commit={{.Commit}} -X main.date={{.Date}}
+
+archives:
+  - id: default
+    formats: [tar.gz]
+    format_overrides:
+      - goos: windows
+        formats: [zip]
+    name_template: >-
+      {{ .ProjectName }}_{{ .Version }}_{{ .Os }}_{{ .Arch }}
+    files:
+      - README.md
+
+checksum:
+  name_template: checksums.txt
+
+snapshot:
+  version_template: "{{ incpatch .Version }}-snapshot-{{ .ShortCommit }}"
+
+changelog:
+  sort: asc
+  filters:
+    exclude:
+      - "^docs:"
+      - "^test:"
+      - "^chore:"
+      - "Merge pull request"
+      - "Merge branch"
+
+# Publish releases to the Gitea instance.
+gitea_urls:
+  api: https://git.destefano.cloud/api/v1
+  download: https://git.destefano.cloud
+
+release:
+  gitea:
+    owner: fdestefano
+    name: RocketLeagueBot-Renderer
diff --git a/README.md b/README.md
index 2b8fd72..3532c6c 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,187 @@
 # RocketLeagueBot-Renderer
 
+A web-based 3D Rocket League **live viewer and replay system** for telemetry
+streamed from a RocketSimVis-compatible UDP source (e.g., a training bot).
+Built with Go (Fiber + SQLite + zstd) and Three.js.
+
+```
+   bot ──UDP──▶  ┌──────────────────────┐
+                  │  udpListener         │
+                  │     │                │
+                  │     ├──▶ Hub ───WS──▶│──▶ live viewers (read-only)
+                  │     │                │
+                  │     └──▶ Recorder ──▶│──▶ SQLite (zstd frames)
+                  └──────────┬───────────┘
+                             │
+                             ▼
+                         Player ──WS──▶ playback viewer (seek/pause/speed)
+```
+
+## Features
+
+- **Live UDP ingest** at any rate; non-blocking hub keeps a slow client from
+  stalling the whole pipeline.
+- **3D Three.js viewer**: orbit, zoom, pan, mobile-friendly, low-quality mode
+  for weak GPUs.
+- **Rich HUD**: ball position/height/speed/distance to each goal, per-car boost,
+  speed, distance to ball, flags (DEMO / AIR / SONIC / TOUCH), packets-per-sec
+  and last-packet age.
+- **Automatic recording** to SQLite with optional **zstd compression** (default
+  on). Typical compression ratio of 5–10× on JSON telemetry.
+- **Frame-accurate playback** with **seek bar, pause, variable speed**
+  (0.25× – 8×), keyboard shortcuts, and autoplay-to-newer.
+- **Server-pushed events**: new/stopped/deleted recordings reflect in the UI
+  without polling.
+- **Live `/api/stats`** endpoint and an in-panel stats box (uptime, packets,
+  drops, db size, compression ratio).
+- **HTTPS via Let's Encrypt autocert** with HTTP→HTTPS redirect.
+- **Basic Auth** on every endpoint (constant-time comparison).
+- **Graceful shutdown** flushes the recorder before exiting.
+
+## Example
+
+![Live viewer with ball trail and predicted path](imgs/Screenshot_2026-05-16_00-32-01.png)
+
+The viewer shows a detailed arena, car models (blue/orange), ball with ring indicator, boost pads with pulsing animation when active, and optional ball-trail/prediction lines. The HUD displays real-time metrics, and the side panel lists recordings and server stats.
+
+## Quickstart
+
+```sh
+git clone <repo>
+cd RocketLeagueBot-Renderer
+go build -o RocketLeagueBot-Renderer .
+
+# Local HTTP only
+./RocketLeagueBot-Renderer -password=secret -http=:8080
+
+# Production with HTTPS (ports 80+443 must be reachable, DNS pointed at host)
+sudo ./RocketLeagueBot-Renderer -password=secret -domain=example.com
+```
+
+Open the viewer at `http://localhost:8080` (or `https://example.com`). Log in
+with any username and the password you set.
+
+## Flags
+
+| Flag           | Default            | Purpose                                                |
+|----------------|--------------------|--------------------------------------------------------|
+| `-password`    | *(required)*       | Password for HTTP Basic Auth.                          |
+| `-domain`      | *(empty)*          | Domain for Let's Encrypt autocert. Empty → HTTP only.  |
+| `-http`        | `:80`              | HTTP listen address (must be `:80` for ACME).          |
+| `-tls`         | `:443`             | HTTPS listen address.                                  |
+| `-udp`         | `:9273`            | UDP ingest address.                                    |
+| `-certdir`     | `./certs`          | Directory for autocert cache.                          |
+| `-db`          | `./recordings.db`  | SQLite database file.                                  |
+| `-retention`   | `168h` (7 days)    | How long to keep recordings.                           |
+| `-compress`    | `true`             | zstd-compress recorded frames.                         |
+| `-verbose`     | `false`            | Log every HTTP request (including WS upgrades).        |
+| `-log-level`   | `info`             | `debug` / `info` / `warn` / `error`.                   |
+
+## UDP payload
+
+Bytes received on the UDP port are treated as **opaque** — they are recorded
+verbatim (optionally compressed) and forwarded verbatim to live viewers.
+The viewer expects each packet to be a JSON object compatible with
+[RocketSimVis](https://github.com/ZealanL/RocketSimVis), specifically:
+
+```jsonc
+{
+  "ball_phys":  { "pos": [x,y,z], "vel": [x,y,z], "ang_vel": [...] },
+  "cars": [
+    {
+      "car_id": 0, "team_num": 0,
+      "phys": { "pos": [x,y,z], "vel": [...], "forward": [...], "up": [...], "right": [...] },
+      "boost_amount": 0.0..1.0, "is_demoed": false,
+      "on_ground": true, "ball_touched": false
+    }
+  ],
+  "boost_pad_states": [true, false, ...]   // length 34, same order as PAD_DEFS in viewer.html
+}
+```
+
+Coordinates are Unreal Units (1 uu = 1 cm). Field dimensions used by the
+viewer are the official RL values (4096 × 5120 × 2044 uu).
+
+Quick UDP smoke test (requires `nc`):
+
+```sh
+echo '{"ball_phys":{"pos":[0,0,200],"vel":[0,0,0]},"cars":[]}' | nc -u -w0 127.0.0.1 9273
+```
+
+## Playback controls
+
+| Action          | Mouse/UI                | Keyboard              |
+|-----------------|-------------------------|-----------------------|
+| Play / Pause    | ⏸ / ▶ button           | `Space`               |
+| Scrub           | Drag the seek bar       | `←` / `→` (±5 s)      |
+| Step ±1 frame   | ⏮ / ⏭ buttons          | `Shift+←` / `Shift+→` |
+| Speed down/up   | Speed dropdown          | `[` / `]`             |
+| Stop playback   | ✕ button or LIVE button | —                     |
+| Toggle autoplay | "Auto: ON/OFF" button   | —                     |
+
+Speed and autoplay preferences are persisted in `localStorage`.
+
+## API
+
+All endpoints require HTTP Basic Auth.
+
+- `GET  /`                          — Viewer HTML.
+- `GET  /ws`                        — Live WebSocket stream (text JSON).
+  Also delivers out-of-band server events:
+  `{"type":"event","kind":"recording_started|stopped|deleted","recording":{...}}`.
+- `GET  /api/recordings?since=&limit=` — Newest-first JSON list of recordings.
+  `since` is RFC3339; `limit` is optional row cap.
+- `DELETE /api/recordings/:id`      — Delete a recording (cascades frames).
+- `GET  /ws/playback?id=<n>`        — Playback WebSocket. Client sends:
+  - `{"cmd":"play"}` / `{"cmd":"pause"}` / `{"cmd":"stop"}`
+  - `{"cmd":"seek","ms":12345}`
+  - `{"cmd":"speed","value":2.0}`
+
+  Server emits:
+  - `{"type":"playback_start","name":...,"frames":N,"duration_ms":D}`
+  - `{"type":"playback_frame","offset_ms":T,"frame":i,"data":<state>}`
+  - `{"type":"playback_state","playing":bool,"speed":s,"position_ms":T}` (every ~250 ms)
+  - `{"type":"playback_end"}` / `{"error":"..."}`
+
+- `GET  /api/stats`                 — Process & DB observability JSON.
+
+## Storage & tuning
+
+The recorder buffers frames in memory and flushes to SQLite either every
+**64 frames** or every **100 ms**, whichever comes first, in a single
+transaction. This collapses ~120 fsyncs/sec down to ~10/sec at typical
+telemetry rates.
+
+With `-compress=true` (default), each frame is zstd-encoded individually.
+Typical RocketSimVis JSON shrinks 5–10×. Disable with `-compress=false` if you
+want raw JSON in the DB.
+
+Idle detection automatically ends the current recording after **5 seconds**
+without packets, finalizing the row (frame count + duration).
+
+Old recordings are pruned every hour according to `-retention`.
+
+## Security
+
+- Always run behind HTTPS in production; use `-domain` for free Let's Encrypt
+  certs (ports 80 + 443 must be reachable).
+- Behind a reverse proxy: ensure it forwards `Authorization` headers and
+  supports WebSocket upgrades on `/ws` and `/ws/playback`. Disable any
+  buffering on those paths.
+
+## Dependencies
+
+- Go 1.22+ (uses `log/slog`, `signal.NotifyContext`)
+- [Fiber](https://gofiber.io/), [websocket](https://github.com/gofiber/websocket)
+- [klauspost/compress](https://github.com/klauspost/compress) (zstd)
+- [ncruces/go-sqlite3](https://github.com/ncruces/go-sqlite3) (pure-Go SQLite)
+- [Three.js](https://threejs.org/) (loaded from CDN by the viewer)
+
+## License
+
+MIT.
+
+---
+
+**Note:** Not affiliated with Psyonix or Rocket League. For educational and
+personal use only.
diff --git a/assets/assets.go b/assets/assets.go
new file mode 100644
index 0000000..5c66288
--- /dev/null
+++ b/assets/assets.go
@@ -0,0 +1,7 @@
+// Package assets embeds static files served by the renderer.
+package assets
+
+import "embed"
+
+//go:embed viewer.html
+var FS embed.FS
diff --git a/assets/viewer.html b/assets/viewer.html
new file mode 100644
index 0000000..752a70b
--- /dev/null
+++ b/assets/viewer.html
@@ -0,0 +1,1647 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>RocketSim Viewer</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { background: #0d0d1a; overflow: hidden; font-family: monospace; touch-action: none; color: #ccc; }
+    #canvas { display: block; }
+
+    #hud {
+      position: absolute; top: 12px; left: 12px;
+      color: #ccc; font-size: 12px;
+      background: rgba(0,0,0,0.6);
+      padding: 10px 14px; border-radius: 6px;
+      line-height: 1.7; pointer-events: none;
+      border: 1px solid rgba(255,255,255,0.08);
+      white-space: pre;
+      max-width: 380px;
+    }
+    #status {
+      position: absolute; top: 12px; right: 12px;
+      font-size: 12px; padding: 6px 14px;
+      border-radius: 6px; font-family: monospace;
+      z-index: 100; display: flex; gap: 8px; align-items: center;
+    }
+    .rec-dot {
+      display: inline-block; width: 8px; height: 8px; border-radius: 50%;
+      background: #ff3030; animation: pulse 1.2s infinite;
+    }
+    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
+    .connected    { background: rgba(0,180,80,0.25);  color: #00e676; border: 1px solid rgba(0,230,118,0.3); }
+    .disconnected { background: rgba(200,40,40,0.25); color: #ff5252; border: 1px solid rgba(255,82,82,0.3); }
+    #controls {
+      position: absolute; bottom: 12px; left: 12px;
+      color: #555; font-size: 11px; pointer-events: none;
+    }
+    #recordings-panel {
+      position: absolute; top: 50px; right: 12px;
+      background: rgba(0,0,0,0.85); color: #ccc; font-size: 12px;
+      padding: 10px 14px; border-radius: 6px; font-family: monospace;
+      border: 1px solid rgba(255,255,255,0.08);
+      max-height: 70vh; overflow-y: auto; min-width: 280px;
+      z-index: 50; transition: all 0.2s ease;
+    }
+    #recordings-panel.collapsed { max-height: none; overflow: visible; }
+    #recordings-panel.collapsed #rec-list,
+    #recordings-panel.collapsed #filter-row,
+    #recordings-panel.collapsed #stats-box { display: none; }
+    #recordings-panel h3 {
+      margin: -10px -14px 8px; padding: 10px 14px;
+      color: #aaa; font-size: 13px;
+      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
+      position: sticky; top: -10px; z-index: 2;
+      background: rgba(0,0,0,0.95);
+      border-bottom: 1px solid rgba(255,255,255,0.08);
+      backdrop-filter: blur(4px);
+    }
+    #recordings-panel button, #recordings-panel select {
+      background: rgba(255,255,255,0.1); color: #ccc; border: 1px solid rgba(255,255,255,0.15);
+      padding: 3px 8px; border-radius: 4px; cursor: pointer; font-family: monospace; font-size: 11px;
+      margin: 1px;
+    }
+    #recordings-panel select { padding: 3px 4px; }
+    #recordings-panel button:hover, #recordings-panel select:hover { background: rgba(255,255,255,0.2); }
+    #recordings-panel button.active { background: rgba(0,180,80,0.3); color: #00e676; border-color: rgba(0,230,118,0.3); }
+    #recordings-panel button.danger { color: #ff5252; }
+    #filter-row { margin-bottom: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
+    #filter-row label { color: #888; font-size: 10px; }
+    .rec-item { padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; gap: 6px; }
+    .rec-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
+    .rec-size { color: #666; font-size: 10px; }
+    #stats-box {
+      margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.08);
+      color: #888; font-size: 10px; line-height: 1.5;
+    }
+    #stats-box .k { color: #666; }
+    #stats-box .v { color: #aaa; }
+
+    #minimap {
+      position: absolute; bottom: 12px; right: 12px;
+      width: 180px; height: 220px;
+      background: rgba(0,0,0,0.75);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-radius: 6px;
+      display: none;
+      z-index: 40;
+    }
+    #minimap.visible { display: block; }
+    #minimap canvas { display: block; width: 100%; height: 100%; border-radius: 6px; }
+
+    #playback-bar {
+      position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
+      background: rgba(0,0,0,0.88); color: #ccc; font-size: 12px;
+      padding: 10px 16px; border-radius: 8px; font-family: monospace;
+      border: 1px solid rgba(255,255,255,0.08); display: none; gap: 10px; align-items: center;
+      z-index: 60; flex-wrap: wrap; justify-content: center; min-width: 560px;
+    }
+    #playback-bar button {
+      background: rgba(255,255,255,0.1); color: #ccc;
+      border: 1px solid rgba(255,255,255,0.15);
+      padding: 4px 10px; border-radius: 4px; cursor: pointer; font-family: monospace;
+    }
+    #playback-bar button:hover { background: rgba(255,255,255,0.2); }
+    #pb-name { font-weight: bold; color: #fff; }
+    #pb-scrub {
+      flex: 1; min-width: 200px; height: 6px; appearance: none;
+      background: rgba(255,255,255,0.1); border-radius: 3px; cursor: pointer;
+    }
+    #pb-scrub::-webkit-slider-thumb {
+      appearance: none; width: 14px; height: 14px; border-radius: 50%;
+      background: #00e676; cursor: pointer;
+    }
+    #pb-scrub::-moz-range-thumb {
+      width: 14px; height: 14px; border-radius: 50%; background: #00e676; border: none; cursor: pointer;
+    }
+    #pb-time { color: #aaa; min-width: 110px; text-align: center; font-variant-numeric: tabular-nums; }
+    #pb-speed { width: 70px; }
+
+    /* Mobile styles */
+    @media (max-width: 700px) {
+      #hud { font-size: 10px; padding: 6px 10px; top: 8px; left: 8px; max-width: 50%; line-height: 1.5; }
+      #status { font-size: 10px; padding: 4px 10px; top: 8px; right: 8px; }
+      #controls { display: none; }
+      #recordings-panel {
+        top: auto; bottom: 8px; right: 8px; left: 8px;
+        max-height: 35vh; min-width: auto;
+        font-size: 11px;
+      }
+      #recordings-panel h3 { font-size: 12px; }
+      #recordings-panel button, #recordings-panel select { padding: 6px 10px; font-size: 12px; }
+      .rec-item { padding: 6px 0; }
+      .rec-name { font-size: 12px; }
+      .rec-size { font-size: 11px; }
+      #playback-bar { bottom: auto; top: 50px; left: 8px; right: 8px; transform: none; padding: 10px; font-size: 11px; min-width: 0; }
+      #playback-bar button { padding: 6px 10px; font-size: 12px; }
+    }
+  </style>
+</head>
+<body>
+<canvas id="canvas"></canvas>
+<div id="hud">Waiting for data...</div>
+<div id="status" class="disconnected"><span id="status-text">Disconnected</span></div>
+<div id="controls">Drag to orbit · Scroll to zoom · Right-drag to pan · Space=play/pause · ←/→=±5s · [/]=speed · C=chase · V=vel · H=heat · M=map</div>
+
+<div id="minimap"><canvas id="minimap-canvas" width="180" height="220"></canvas></div>
+
+<div id="recordings-panel">
+  <h3>
+    <span onclick="togglePanel()" style="cursor:pointer">📼 Recordings</span>
+    <button onclick="togglePanel()" id="collapse-btn">▼</button>
+    <button onclick="loadRecordings()">↻</button>
+    <button id="mode-btn" class="active" onclick="stopPlayback()">● LIVE</button>
+  </h3>
+  <div id="filter-row">
+    <label>Show:</label>
+    <select id="time-filter" onchange="loadRecordings()">
+      <option value="0">All</option>
+      <option value="5">Last 5 min</option>
+      <option value="15">Last 15 min</option>
+      <option value="30">Last 30 min</option>
+      <option value="60">Last 1 hour</option>
+      <option value="360">Last 6 hours</option>
+      <option value="1440">Last 24 hours</option>
+    </select>
+    <label><input type="checkbox" id="quality-toggle"> Low Quality</label>
+    <label><input type="checkbox" id="trail-toggle"> Trail</label>
+    <label><input type="checkbox" id="predict-toggle"> Predict</label>
+    <label><input type="checkbox" id="bloom-toggle"> Bloom</label>
+    <label><input type="checkbox" id="vel-toggle"> Vel</label>
+    <label><input type="checkbox" id="heat-toggle"> Heat</label>
+    <label><input type="checkbox" id="map-toggle"> Map</label>
+    <label><input type="checkbox" id="chase-toggle"> Chase</label>
+  </div>
+  <div id="rec-list">Loading...</div>
+  <div id="stats-box"></div>
+</div>
+
+<div id="playback-bar">
+  <span id="pb-name"></span>
+  <button id="pb-prev" title="Prev frame (Shift+←)">⏮</button>
+  <button id="pb-play">⏸</button>
+  <button id="pb-next" title="Next frame (Shift+→)">⏭</button>
+  <input type="range" id="pb-scrub" min="0" max="1000" value="0">
+  <span id="pb-time">0:00.000 / 0:00.000</span>
+  <select id="pb-speed">
+    <option value="0.25">0.25×</option>
+    <option value="0.5">0.5×</option>
+    <option value="1" selected>1×</option>
+    <option value="2">2×</option>
+    <option value="4">4×</option>
+    <option value="8">8×</option>
+  </select>
+  <button id="pb-autoplay" class="active">⏭ Auto: ON</button>
+  <button onclick="stopPlayback()">✕</button>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
+<script>
+'use strict';
+
+// ── Constants (Unreal Units; 1 uu = 1 cm) ─────────────────────────────────
+const SIDE_WALL_X    = 4096;
+const BACK_WALL_Y    = 5120;
+const CEILING_Z      = 2044;
+const CORNER_CAT     = 1152;
+const GOAL_HALF_W    = 892.755;
+const GOAL_HEIGHT    = 642.775;
+const GOAL_DEPTH     = 880;
+const BALL_RADIUS    = 91.25;
+const SUPERSONIC     = 2200;
+
+const WS_LIVE = (location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/ws';
+const WS_PLAY = (location.protocol === 'https:' ? 'wss://' : 'ws://') + location.host + '/ws/playback';
+
+// ── Scene setup ───────────────────────────────────────────────────────────
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0x0d0d1a);
+scene.fog = new THREE.FogExp2(0x0d0d1a, 0.000032);
+
+const camera = new THREE.PerspectiveCamera(55, innerWidth / innerHeight, 10, 30000);
+camera.position.set(0, 5000, 4000);
+camera.lookAt(0, 0, 500);
+
+const isMobile = matchMedia('(max-width: 700px)').matches;
+let lowQuality = isMobile;
+
+const renderer = new THREE.WebGLRenderer({
+  canvas: document.getElementById('canvas'),
+  antialias: !lowQuality,
+  powerPreference: 'high-performance',
+});
+if (!renderer.getContext()) {
+  document.body.innerHTML = '<div style="color:white;padding:20px;font-family:monospace">No WebGL context available.</div>';
+  throw new Error('WebGL unavailable');
+}
+renderer.setSize(innerWidth, innerHeight);
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1.05;
+renderer.outputEncoding = THREE.sRGBEncoding;
+
+// Postprocessing (bloom) — gated by quality + toggle. Declared before applyQuality.
+let composer = null, bloomPass = null, renderPass = null;
+let useBloom = (localStorage.getItem('use_bloom') ?? (isMobile ? '0' : '1')) === '1';
+function setupComposer() {
+  if (composer) { composer.passes.length = 0; composer = null; bloomPass = null; renderPass = null; }
+  if (lowQuality || !useBloom || typeof THREE.EffectComposer === 'undefined') return;
+  composer = new THREE.EffectComposer(renderer);
+  renderPass = new THREE.RenderPass(scene, camera);
+  composer.addPass(renderPass);
+  bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(innerWidth, innerHeight), 0.55, 0.7, 0.85);
+  composer.addPass(bloomPass);
+}
+
+function applyQuality() {
+  renderer.setPixelRatio(lowQuality ? 1 : Math.min(devicePixelRatio, 2));
+  renderer.shadowMap.enabled = !lowQuality;
+  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+  scene.traverse(o => { if (o.isMesh) { o.castShadow = o.userData._castShadow && !lowQuality; o.receiveShadow = o.userData._receiveShadow && !lowQuality; } });
+  setupComposer();
+}
+
+window.addEventListener('resize', () => {
+  camera.aspect = innerWidth / innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(innerWidth, innerHeight);
+  if (composer) composer.setSize(innerWidth, innerHeight);
+  cameraDirty = true;
+});
+
+// ── Lighting ──────────────────────────────────────────────────────────────
+scene.add(new THREE.HemisphereLight(0xbcd3ff, 0x202028, 0.55));
+scene.add(new THREE.AmbientLight(0x8899bb, 0.35));
+const sun = new THREE.DirectionalLight(0xffffff, 0.85);
+sun.position.set(2000, 4000, 5000);
+sun.castShadow = true;
+sun.userData._castShadow = true;
+sun.shadow.mapSize.set(2048, 2048);
+sun.shadow.camera.near = 100;
+sun.shadow.camera.far = 20000;
+sun.shadow.camera.left = -8000; sun.shadow.camera.right = 8000;
+sun.shadow.camera.top = 8000; sun.shadow.camera.bottom = -8000;
+scene.add(sun);
+const blueLight = new THREE.PointLight(0x4488ff, 1.4, 4500);
+blueLight.position.set(0, 400, BACK_WALL_Y + 500);
+scene.add(blueLight);
+const orangeLight = new THREE.PointLight(0xff6611, 1.4, 4500);
+orangeLight.position.set(0, 400, -(BACK_WALL_Y + 500));
+scene.add(orangeLight);
+
+// ── Field geometry (unchanged from previous) ──────────────────────────────
+function line(pts, color = 0x2a4a2a) {
+  return new THREE.Line(
+    new THREE.BufferGeometry().setFromPoints(pts.map(([x,y,z]) => new THREE.Vector3(x, z ?? 1, -y))),
+    new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0.8 })
+  );
+}
+const shape = new THREE.Shape();
+const W = SIDE_WALL_X, L = BACK_WALL_Y, C = CORNER_CAT;
+shape.moveTo(-W+C, L); shape.lineTo(W-C, L);
+shape.lineTo(W, L-C); shape.lineTo(W, -L+C);
+shape.lineTo(W-C, -L); shape.lineTo(-W+C, -L);
+shape.lineTo(-W, -L+C); shape.lineTo(-W, L-C);
+shape.closePath();
+
+const floorMesh = new THREE.Mesh(new THREE.ShapeGeometry(shape), new THREE.MeshLambertMaterial({ color: 0x152515, side: THREE.DoubleSide }));
+floorMesh.rotation.x = Math.PI / 2; floorMesh.receiveShadow = true; floorMesh.userData._receiveShadow = true;
+scene.add(floorMesh);
+
+scene.add(line([[-W, 0], [W, 0]]));
+{ const c = []; for (let i = 0; i <= 64; i++) { const a = i/64*Math.PI*2; c.push([Math.cos(a)*880, Math.sin(a)*880]); } scene.add(line(c)); }
+scene.add(line([[-W, -L+C], [-W, L-C]])); scene.add(line([[W, -L+C], [W, L-C]]));
+scene.add(line([[-W+C, -L], [-GOAL_HALF_W, -L]])); scene.add(line([[GOAL_HALF_W, -L], [W-C, -L]]));
+scene.add(line([[-W+C, L], [-GOAL_HALF_W, L]])); scene.add(line([[GOAL_HALF_W, L], [W-C, L]]));
+scene.add(line([[-W+C, L], [-W, L-C]])); scene.add(line([[W-C, L], [W, L-C]]));
+scene.add(line([[-W+C, -L], [-W, -L+C]])); scene.add(line([[W-C, -L], [W, -L+C]]));
+
+function wall(w, h, pos, ry = 0) {
+  const m = new THREE.Mesh(new THREE.PlaneGeometry(w, h),
+    new THREE.MeshLambertMaterial({ color: 0x1a1a30, side: THREE.DoubleSide, transparent: true, opacity: 0.4 }));
+  m.position.set(...pos); m.rotation.y = ry; scene.add(m);
+}
+const wallSpan = (L - C) * 2;
+wall(wallSpan, CEILING_Z, [W, CEILING_Z/2, 0], Math.PI/2);
+wall(wallSpan, CEILING_Z, [-W, CEILING_Z/2, 0], Math.PI/2);
+const sidePanel = W - GOAL_HALF_W - C/2;
+wall(sidePanel, CEILING_Z, [-(GOAL_HALF_W + sidePanel/2), CEILING_Z/2, L], 0);
+wall(sidePanel, CEILING_Z, [GOAL_HALF_W + sidePanel/2, CEILING_Z/2, L], 0);
+wall(GOAL_HALF_W*2, CEILING_Z - GOAL_HEIGHT, [0, GOAL_HEIGHT + (CEILING_Z-GOAL_HEIGHT)/2, L], 0);
+wall(sidePanel, CEILING_Z, [-(GOAL_HALF_W + sidePanel/2), CEILING_Z/2, -L], 0);
+wall(sidePanel, CEILING_Z, [GOAL_HALF_W + sidePanel/2, CEILING_Z/2, -L], 0);
+wall(GOAL_HALF_W*2, CEILING_Z - GOAL_HEIGHT, [0, GOAL_HEIGHT + (CEILING_Z-GOAL_HEIGHT)/2, -L], 0);
+const diagLen = Math.sqrt(2) * C;
+[[-1,-1],[-1,1],[1,-1],[1,1]].forEach(([sx, sy]) => {
+  const m = new THREE.Mesh(new THREE.PlaneGeometry(diagLen, CEILING_Z),
+    new THREE.MeshLambertMaterial({ color: 0x1a1a30, side: THREE.DoubleSide, transparent: true, opacity: 0.35 }));
+  m.position.set(sx*(W - C/2), CEILING_Z/2, -sy*(L - C/2));
+  m.rotation.y = Math.PI/4 * (sx*sy > 0 ? 1 : -1);
+  scene.add(m);
+});
+const ceilMesh = new THREE.Mesh(new THREE.ShapeGeometry(shape),
+  new THREE.MeshLambertMaterial({ color: 0x111122, side: THREE.DoubleSide, transparent: true, opacity: 0.25 }));
+ceilMesh.rotation.x = Math.PI / 2; ceilMesh.position.y = CEILING_Z;
+scene.add(ceilMesh);
+
+const edgeC = 0x334466;
+scene.add(line([[-W, -L+C], [-W+C, -L]], edgeC));
+scene.add(line([[W, -L+C], [W-C, -L]], edgeC));
+scene.add(line([[-W, L-C], [-W+C, L]], edgeC));
+scene.add(line([[W, L-C], [W-C, L]], edgeC));
+
+function makeGoal(ySign, teamColor) {
+  const g = new THREE.Group();
+  const netMat = new THREE.MeshLambertMaterial({ color: teamColor, transparent: true, opacity: 0.3, side: THREE.DoubleSide });
+  const postMat = new THREE.MeshLambertMaterial({ color: 0xdddddd });
+  const T = 28, GW = GOAL_HALF_W * 2, GH = GOAL_HEIGHT, GD = GOAL_DEPTH;
+  const back = new THREE.Mesh(new THREE.BoxGeometry(GW, T, GH), netMat);
+  back.position.set(0, GH/2, -ySign*(BACK_WALL_Y + GD)); g.add(back);
+  for (const sx of [-1, 1]) {
+    const s = new THREE.Mesh(new THREE.BoxGeometry(T, GD, GH), netMat);
+    s.position.set(sx*GOAL_HALF_W, GH/2, -ySign*(BACK_WALL_Y + GD/2)); g.add(s);
+  }
+  const fn = new THREE.Mesh(new THREE.BoxGeometry(GW, GD, T), netMat);
+  fn.position.set(0, T/2, -ySign*(BACK_WALL_Y + GD/2)); g.add(fn);
+  const cb = new THREE.Mesh(new THREE.BoxGeometry(GW + T*2, T, T), postMat);
+  cb.position.set(0, GH, -ySign*BACK_WALL_Y); g.add(cb);
+  for (const sx of [-1, 1]) {
+    const p = new THREE.Mesh(new THREE.BoxGeometry(T, GH, T), postMat);
+    p.position.set(sx*GOAL_HALF_W, GH/2, -ySign*BACK_WALL_Y); g.add(p);
+  }
+  scene.add(g);
+}
+makeGoal(-1, 0x3366ff);
+makeGoal(1, 0xff6600);
+
+// ── Boost pads ────────────────────────────────────────────────────────────
+const PAD_DEFS = [
+  {p:[-3584, 0], big:true}, {p:[3584, 0], big:true},
+  {p:[-3072, 4096], big:true}, {p:[3072, 4096], big:true},
+  {p:[-3072, -4096], big:true}, {p:[3072, -4096], big:true},
+  {p:[0, 4240]}, {p:[1792, 4184]}, {p:[-1792, 4184]},
+  {p:[2048, 1024]}, {p:[-2048, 1024]},
+  {p:[512, 512]}, {p:[-512, 512]},
+  {p:[512, -512]}, {p:[-512, -512]},
+  {p:[2048, -1024]}, {p:[-2048, -1024]},
+  {p:[1792, -4184]}, {p:[-1792, -4184]}, {p:[0, -4240]},
+  {p:[1024, 0]}, {p:[-1024, 0]}, {p:[0, 1024]}, {p:[0, -1024]},
+  {p:[3584, 2484]}, {p:[-3584, 2484]},
+  {p:[3584, -2484]}, {p:[-3584, -2484]},
+  {p:[1788, 2300]}, {p:[-1788, 2300]},
+  {p:[1788, -2300]}, {p:[-1788, -2300]},
+  {p:[2560, 0]}, {p:[-2560, 0]},
+];
+const COLOR_BOOST_ON  = new THREE.Color(0xffcc00);
+const COLOR_BOOST_OFF = new THREE.Color(0x2a2a18);
+const EMI_BOOST_ON    = new THREE.Color(0x553300);
+const EMI_BOOST_OFF   = new THREE.Color(0x000000);
+
+const boostMeshes = PAD_DEFS.map(({ p, big }) => {
+  const r = big ? 144 : 72;
+  const m = new THREE.Mesh(
+    new THREE.CylinderGeometry(r, r, big ? 24 : 16, 16),
+    new THREE.MeshLambertMaterial({ color: COLOR_BOOST_ON.clone(), emissive: EMI_BOOST_ON.clone() })
+  );
+  m.position.set(p[0], 8, -p[1]);
+  scene.add(m);
+  return { m, big, on: true };
+});
+const activeBoosts = new Set(boostMeshes.map((_, i) => i));
+
+// ── Ball ──────────────────────────────────────────────────────────────────
+const ball = new THREE.Mesh(
+  new THREE.SphereGeometry(BALL_RADIUS, 32, 24),
+  new THREE.MeshStandardMaterial({ color: 0xf2f2f5, emissive: 0x222233, roughness: 0.35, metalness: 0.3 })
+);
+ball.castShadow = true; ball.userData._castShadow = true;
+scene.add(ball);
+const ballRing = new THREE.Mesh(
+  new THREE.RingGeometry(BALL_RADIUS * 0.85, BALL_RADIUS * 1.15, 32),
+  new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.15, side: THREE.DoubleSide })
+);
+ballRing.rotation.x = -Math.PI / 2;
+scene.add(ballRing);
+
+// Ball blob shadow (fades with height).
+const ballBlob = new THREE.Mesh(
+  new THREE.CircleGeometry(BALL_RADIUS * 0.95, 28),
+  new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.5, depthWrite: false })
+);
+ballBlob.rotation.x = -Math.PI/2;
+scene.add(ballBlob);
+
+// Supersonic ball glow (additive sprite-like sphere).
+const ballGlow = new THREE.Mesh(
+  new THREE.SphereGeometry(BALL_RADIUS * 1.6, 16, 12),
+  new THREE.MeshBasicMaterial({ color: 0xffaa55, transparent: true, opacity: 0, blending: THREE.AdditiveBlending, depthWrite: false })
+);
+scene.add(ballGlow);
+
+// Touch flash pool (expanding rings).
+const flashPool = [];
+for (let i = 0; i < 12; i++) {
+  const m = new THREE.Mesh(
+    new THREE.RingGeometry(40, 60, 32),
+    new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthWrite: false })
+  );
+  m.rotation.x = -Math.PI/2;
+  m.visible = false;
+  flashPool.push({ mesh: m, t0: 0, life: 0.6, color: new THREE.Color() });
+  scene.add(m);
+}
+function spawnFlash(x, y, z, colorHex) {
+  for (const f of flashPool) {
+    if (!f.mesh.visible) {
+      f.mesh.visible = true;
+      f.mesh.position.set(x, y, z);
+      f.t0 = performance.now();
+      f.color.setHex(colorHex);
+      f.mesh.material.color.copy(f.color);
+      return;
+    }
+  }
+}
+
+// Goal explosion: simple particle burst, pooled.
+const goalParticles = [];
+const goalGroup = new THREE.Group();
+scene.add(goalGroup);
+function spawnGoalBurst(teamColorHex, position) {
+  const N = 80;
+  const geo = new THREE.BufferGeometry();
+  const pos = new Float32Array(N * 3);
+  const vel = new Float32Array(N * 3);
+  for (let i = 0; i < N; i++) {
+    pos[i*3] = position.x; pos[i*3+1] = position.y; pos[i*3+2] = position.z;
+    const th = Math.random() * Math.PI * 2;
+    const ph = Math.acos(2 * Math.random() - 1);
+    const sp = 800 + Math.random() * 2400;
+    vel[i*3]   = sp * Math.sin(ph) * Math.cos(th);
+    vel[i*3+1] = sp * Math.cos(ph);
+    vel[i*3+2] = sp * Math.sin(ph) * Math.sin(th);
+  }
+  geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+  const mat = new THREE.PointsMaterial({ color: teamColorHex, size: 30, transparent: true, opacity: 1, blending: THREE.AdditiveBlending, depthWrite: false });
+  const pts = new THREE.Points(geo, mat);
+  goalGroup.add(pts);
+  goalParticles.push({ pts, vel, t0: performance.now(), life: 1.6 });
+}
+
+// Ball trail (recent positions) + predicted path (ballistic from velocity).
+const TRAIL_LEN = 120;         // ~2s @ 60Hz
+const PREDICT_STEPS = 60;      // forward samples
+const PREDICT_DT = 0.033;      // seconds per sample → ~2s lookahead
+const GRAVITY = -650;          // RL units/s² (z-down, becomes -y in three space)
+const trailPositions = new Float32Array(TRAIL_LEN * 3);
+const trailColors = new Float32Array(TRAIL_LEN * 3);
+const trailGeo = new THREE.BufferGeometry();
+trailGeo.setAttribute('position', new THREE.BufferAttribute(trailPositions, 3));
+trailGeo.setAttribute('color', new THREE.BufferAttribute(trailColors, 3));
+const trailLine = new THREE.Line(
+  trailGeo,
+  new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, opacity: 0.9 })
+);
+trailLine.frustumCulled = false;
+scene.add(trailLine);
+let trailCount = 0; // valid samples currently in buffer
+
+const predictPositions = new Float32Array(PREDICT_STEPS * 3);
+const predictGeo = new THREE.BufferGeometry();
+predictGeo.setAttribute('position', new THREE.BufferAttribute(predictPositions, 3));
+const predictLine = new THREE.Line(
+  predictGeo,
+  new THREE.LineDashedMaterial({ color: 0x00e0ff, dashSize: 30, gapSize: 18, transparent: true, opacity: 0.7 })
+);
+predictLine.frustumCulled = false;
+scene.add(predictLine);
+
+let showTrail = (localStorage.getItem('show_trail') ?? '1') === '1';
+let showPredict = (localStorage.getItem('show_predict') ?? '1') === '1';
+trailLine.visible = showTrail;
+predictLine.visible = showPredict;
+
+function resetTrail() {
+  trailCount = 0;
+  trailGeo.setDrawRange(0, 0);
+}
+
+function pushTrail(x, y, z) {
+  // Shift left by one sample, append new at end.
+  if (trailCount < TRAIL_LEN) {
+    const o = trailCount * 3;
+    trailPositions[o] = x; trailPositions[o+1] = y; trailPositions[o+2] = z;
+    trailCount++;
+  } else {
+    trailPositions.copyWithin(0, 3);
+    const o = (TRAIL_LEN - 1) * 3;
+    trailPositions[o] = x; trailPositions[o+1] = y; trailPositions[o+2] = z;
+  }
+  // Recolor: oldest → faint blue, newest → bright white.
+  for (let i = 0; i < trailCount; i++) {
+    const t = i / Math.max(1, trailCount - 1); // 0..1
+    const o = i * 3;
+    trailColors[o]   = 0.3 + 0.7 * t;          // r
+    trailColors[o+1] = 0.6 + 0.4 * t;          // g
+    trailColors[o+2] = 1.0;                    // b
+  }
+  trailGeo.attributes.position.needsUpdate = true;
+  trailGeo.attributes.color.needsUpdate = true;
+  trailGeo.setDrawRange(0, trailCount);
+}
+
+// Compute ballistic prediction: integrate position with gravity until ground or steps exhausted.
+// Inputs are RL-space (x, y, z); output written to predictPositions in three-space.
+function updatePredict(px, py, pz, vx, vy, vz) {
+  let x = px, y = py, z = pz;
+  let ux = vx, uy = vy, uz = vz;
+  for (let i = 0; i < PREDICT_STEPS; i++) {
+    // Step
+    x += ux * PREDICT_DT;
+    y += uy * PREDICT_DT;
+    z += uz * PREDICT_DT;
+    uz += GRAVITY * PREDICT_DT;
+    // Ground clamp (RL z=BALL_RADIUS is the floor for the ball center).
+    if (z < BALL_RADIUS) { z = BALL_RADIUS; uz = -uz * 0.6; }
+    const o = i * 3;
+    // RL → three: (x, z, -y)
+    predictPositions[o]   = x;
+    predictPositions[o+1] = z;
+    predictPositions[o+2] = -y;
+  }
+  predictGeo.attributes.position.needsUpdate = true;
+  predictLine.computeLineDistances(); // required for dashed material
+}
+
+// ── Cars ──────────────────────────────────────────────────────────────────
+const carMeshes = {};
+const carData = {}; // per-id auxiliary: { flame, flameMat, trailGeo, trailPos, trailIdx, trailLine, blob, velArrow, lastBoost, lastTouchedFlag }
+const FLAME_TRAIL_LEN = 48;
+const TEAM_COLOR = { 0: 0x4aa6ff, 1: 0xff7733 };
+const TEAM_EMISSIVE = { 0: 0x113355, 1: 0x331a00 };
+
+// Procedural Octane-ish silhouette. Built from extruded chassis + cockpit wedge + wheels.
+// All units in cm (RL). Approximate dimensions matched to Octane hitbox (118 × 84 × 36).
+function buildCar(teamNum) {
+  const color = TEAM_COLOR[teamNum] ?? 0xcccccc;
+  const emissive = TEAM_EMISSIVE[teamNum] ?? 0x222222;
+  const g = new THREE.Group();
+
+  // Lower chassis: extruded shape giving tapered nose + flared rear.
+  const chassisShape = new THREE.Shape();
+  chassisShape.moveTo( 60,  18);   // nose top
+  chassisShape.lineTo( 70,   0);   // nose tip
+  chassisShape.lineTo( 60, -18);
+  chassisShape.lineTo(-58, -22);
+  chassisShape.lineTo(-72,  -8);
+  chassisShape.lineTo(-72,  18);
+  chassisShape.lineTo(-58,  24);
+  chassisShape.lineTo( 60,  18);
+  const chassisGeo = new THREE.ExtrudeGeometry(chassisShape, {
+    depth: 80, bevelEnabled: true, bevelSize: 6, bevelThickness: 4, bevelSegments: 2, steps: 1,
+  });
+  chassisGeo.translate(0, 0, -40);
+  chassisGeo.rotateX(Math.PI / 2);
+  chassisGeo.translate(0, 16, 0);
+  const chassisMat = new THREE.MeshStandardMaterial({
+    color, metalness: 0.55, roughness: 0.35, emissive, emissiveIntensity: 0.15,
+  });
+  const chassis = new THREE.Mesh(chassisGeo, chassisMat);
+  chassis.castShadow = true; chassis.userData._castShadow = true;
+  g.add(chassis);
+
+  // Cockpit wedge (smaller, set back).
+  const cockpitShape = new THREE.Shape();
+  cockpitShape.moveTo( 18,  0);
+  cockpitShape.lineTo( 32, 14);
+  cockpitShape.lineTo(-28, 22);
+  cockpitShape.lineTo(-40,  0);
+  const cockpitGeo = new THREE.ExtrudeGeometry(cockpitShape, {
+    depth: 56, bevelEnabled: true, bevelSize: 3, bevelThickness: 2, bevelSegments: 1, steps: 1,
+  });
+  cockpitGeo.translate(0, 0, -28);
+  cockpitGeo.rotateX(Math.PI / 2);
+  cockpitGeo.translate(0, 38, 4);
+  const cockpit = new THREE.Mesh(cockpitGeo, new THREE.MeshStandardMaterial({
+    color: 0x111422, metalness: 0.8, roughness: 0.25,
+  }));
+  cockpit.castShadow = true; cockpit.userData._castShadow = true;
+  g.add(cockpit);
+
+  // Windshield glass.
+  const windGeo = new THREE.PlaneGeometry(36, 26);
+  const wind = new THREE.Mesh(windGeo, new THREE.MeshStandardMaterial({
+    color: 0x6688aa, metalness: 0.95, roughness: 0.05, transparent: true, opacity: 0.55,
+  }));
+  wind.position.set(12, 50, 0);
+  wind.rotation.x = -Math.PI / 2;
+  wind.rotation.z = Math.PI / 2;
+  wind.rotation.y = -0.45;
+  g.add(wind);
+
+  // Team accent strip on hood (small, emissive — picks up bloom).
+  const strip = new THREE.Mesh(
+    new THREE.BoxGeometry(48, 1.5, 32),
+    new THREE.MeshStandardMaterial({ color, emissive: color, emissiveIntensity: 1.6, metalness: 0.3, roughness: 0.4 })
+  );
+  strip.position.set(30, 38, 0);
+  g.add(strip);
+
+  // Rear spoiler.
+  const spoilerPosts = new THREE.Mesh(new THREE.BoxGeometry(4, 12, 56), new THREE.MeshStandardMaterial({ color: 0x222222, metalness: 0.8, roughness: 0.3 }));
+  spoilerPosts.position.set(-56, 42, 0);
+  g.add(spoilerPosts);
+  const spoilerWing = new THREE.Mesh(new THREE.BoxGeometry(18, 3, 70), new THREE.MeshStandardMaterial({ color: 0x111111, metalness: 0.7, roughness: 0.3 }));
+  spoilerWing.position.set(-58, 50, 0);
+  g.add(spoilerWing);
+
+  // Wheels (4): low-poly torus rims look prettier than cylinders.
+  const tyreGeo = new THREE.CylinderGeometry(20, 20, 14, 18);
+  const tyreMat = new THREE.MeshStandardMaterial({ color: 0x0a0a0a, roughness: 0.85, metalness: 0.1 });
+  const rimGeo = new THREE.TorusGeometry(11, 4, 6, 12);
+  const rimMat = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, metalness: 0.9, roughness: 0.25 });
+  [[42,42],[42,-42],[-42,42],[-42,-42]].forEach(([x, z]) => {
+    const t = new THREE.Mesh(tyreGeo, tyreMat); t.rotation.x = Math.PI/2; t.position.set(x, 20, z); t.castShadow = true; t.userData._castShadow = true; g.add(t);
+    const r = new THREE.Mesh(rimGeo, rimMat); r.rotation.y = Math.PI/2; r.position.set(x, 20, z); g.add(r);
+  });
+
+  // Headlights.
+  const hlMat = new THREE.MeshStandardMaterial({ color: 0xffffee, emissive: 0xffffcc, emissiveIntensity: 1.2 });
+  [[64, 24, 22], [64, 24, -22]].forEach(([x,y,z]) => {
+    const hl = new THREE.Mesh(new THREE.SphereGeometry(5, 8, 6), hlMat); hl.position.set(x, y, z); g.add(hl);
+  });
+
+  // Blob shadow (always cheap, replaces shadow map on LowQ).
+  const blob = new THREE.Mesh(
+    new THREE.CircleGeometry(78, 24),
+    new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.45, depthWrite: false })
+  );
+  blob.rotation.x = -Math.PI/2;
+
+  // Flame trail (ribbon of segments behind exhaust). Buffered line for cheapness.
+  const flamePos = new Float32Array(FLAME_TRAIL_LEN * 3);
+  const flameCol = new Float32Array(FLAME_TRAIL_LEN * 3);
+  const flameGeo = new THREE.BufferGeometry();
+  flameGeo.setAttribute('position', new THREE.BufferAttribute(flamePos, 3));
+  flameGeo.setAttribute('color', new THREE.BufferAttribute(flameCol, 3));
+  flameGeo.setDrawRange(0, 0);
+  const flameMat = new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, opacity: 0.85, blending: THREE.AdditiveBlending, depthWrite: false });
+  const flameLine = new THREE.Line(flameGeo, flameMat);
+  flameLine.frustumCulled = false;
+  flameLine.visible = false;
+
+  // Velocity arrow (debug overlay).
+  const velArrow = new THREE.ArrowHelper(new THREE.Vector3(1,0,0), new THREE.Vector3(0,0,0), 200, color, 60, 30);
+  velArrow.visible = false;
+
+  carData[g.uuid] = {
+    blob, flameLine, flameGeo, flamePos, flameCol, flameCount: 0,
+    velArrow, teamColor: new THREE.Color(color),
+    touchFlashEnd: 0,
+  };
+  return g;
+}
+
+function getCar(id, teamNum) {
+  if (!carMeshes[id]) {
+    const m = buildCar(teamNum);
+    carMeshes[id] = m;
+    scene.add(m);
+    const d = carData[m.uuid];
+    scene.add(d.blob);
+    scene.add(d.flameLine);
+    scene.add(d.velArrow);
+  }
+  return carMeshes[id];
+}
+
+// ── Coordinate conversion: RL (x, y, z) → Three (x, z, -y) ────────────────
+function rlToThree(out, x, y, z) { out.set(x, z, -y); return out; }
+
+// ── Camera orbit ──────────────────────────────────────────────────────────
+let drag = false, rDrag = false, mx = 0, my = 0;
+let theta = 0.3, phi = 0.6, radius = 11000;
+let cameraDirty = true;
+const camTgt = new THREE.Vector3(0, 400, 0);
+const cvs = document.getElementById('canvas');
+cvs.addEventListener('mousedown', e => { drag = true; rDrag = e.button===2; mx = e.clientX; my = e.clientY; });
+cvs.addEventListener('contextmenu', e => e.preventDefault());
+window.addEventListener('mouseup', () => drag = false);
+window.addEventListener('mousemove', e => {
+  if (!drag) return;
+  const dx = e.clientX - mx, dy = e.clientY - my;
+  if (rDrag) {
+    camTgt.x += -Math.sin(theta) * dx * 2.5;
+    camTgt.z +=  Math.cos(theta) * dx * 2.5;
+    camTgt.y -= dy * 2.5;
+  } else {
+    theta += dx*0.006;
+    phi = Math.max(0.05, Math.min(1.4, phi - dy*0.006));
+  }
+  mx = e.clientX; my = e.clientY;
+  cameraDirty = true;
+});
+cvs.addEventListener('wheel', e => {
+  radius = Math.max(1500, Math.min(20000, radius + e.deltaY*4));
+  if (chaseMode && savedRadius !== null) savedRadius = Math.max(1500, Math.min(20000, savedRadius + e.deltaY*4));
+  cameraDirty = true;
+});
+let savedRadius = null;
+let savedCamTgt = new THREE.Vector3();
+function updateCam() {
+  // Chase mode: follow ball with smoothed look-at; save/restore prior cam state.
+  if (chaseMode) {
+    if (savedRadius === null) { savedRadius = radius; savedCamTgt.copy(camTgt); }
+    const tx = ball.position.x, ty = ball.position.y, tz = ball.position.z;
+    camTgt.lerp(_v1.set(tx, ty + 200, tz), 0.12);
+    radius = Math.max(1500, Math.min(radius, 4500));
+  } else if (savedRadius !== null) {
+    // Restore prior camera state when leaving chase.
+    radius = savedRadius;
+    camTgt.copy(savedCamTgt);
+    savedRadius = null;
+  }
+  camera.position.set(
+    camTgt.x + radius * Math.sin(phi) * Math.cos(theta),
+    camTgt.y + radius * Math.cos(phi),
+    camTgt.z + radius * Math.sin(phi) * Math.sin(theta)
+  );
+  // Camera shake offset.
+  if (shakeAmp > 0.1) {
+    _shakeOff.set((Math.random()-0.5)*shakeAmp, (Math.random()-0.5)*shakeAmp, (Math.random()-0.5)*shakeAmp);
+    camera.position.add(_shakeOff);
+    shakeAmp *= 0.82;
+  } else shakeAmp = 0;
+  camera.lookAt(camTgt);
+}
+
+// ── State & scratch objects (no per-frame allocation) ─────────────────────
+let gs = null;
+let stateDirty = false;
+const LERP_LIVE = 0.22;
+const LERP_PLAYBACK = 0.85;
+let currentLerp = LERP_LIVE;
+
+const hudEl = document.getElementById('hud');
+const statEl = document.getElementById('status');
+const statTxtEl = document.getElementById('status-text');
+
+const _v1 = new THREE.Vector3();
+const _v2 = new THREE.Vector3();
+const _v3 = new THREE.Vector3();
+const _v4 = new THREE.Vector3();
+const _m4 = new THREE.Matrix4();
+const _q = new THREE.Quaternion();
+
+// Frame timing
+let lastFrameTs = 0;
+let fpsEst = 0;
+let pktPerSec = 0;
+let pktCount = 0;
+let pktWindowStart = performance.now();
+
+function recordPacket() {
+  pktCount++;
+  const now = performance.now();
+  if (now - pktWindowStart >= 1000) {
+    pktPerSec = pktCount * 1000 / (now - pktWindowStart);
+    pktCount = 0;
+    pktWindowStart = now;
+  }
+  lastFrameTs = now;
+}
+
+// Last-touch tracking for "TOUCH" highlight
+const lastTouchAt = {};
+
+// Camera shake (decays exponentially each frame).
+let shakeAmp = 0;
+const _shakeOff = new THREE.Vector3();
+
+// Chase cam.
+let chaseMode = (localStorage.getItem('chase_mode') ?? '0') === '1';
+let chaseTargetId = null;
+
+// Velocity arrow & heatmap toggles.
+let showVel  = (localStorage.getItem('show_vel')  ?? '0') === '1';
+let showHeat = (localStorage.getItem('show_heat') ?? '0') === '1';
+let showMap  = (localStorage.getItem('show_map')  ?? '0') === '1';
+
+// Heatmap: low-res 2D bin of ball XY samples.
+const HEAT_W = 80, HEAT_H = 100;
+const heatBins = new Float32Array(HEAT_W * HEAT_H);
+let heatMax = 1;
+const heatCanvas = document.createElement('canvas');
+heatCanvas.width = HEAT_W; heatCanvas.height = HEAT_H;
+const heatCtx = heatCanvas.getContext('2d');
+const heatTex = new THREE.CanvasTexture(heatCanvas);
+heatTex.minFilter = THREE.LinearFilter;
+heatTex.magFilter = THREE.LinearFilter;
+const heatMesh = new THREE.Mesh(
+  new THREE.PlaneGeometry(SIDE_WALL_X*2, BACK_WALL_Y*2),
+  new THREE.MeshBasicMaterial({ map: heatTex, transparent: true, opacity: 0.55, depthWrite: false, blending: THREE.AdditiveBlending })
+);
+heatMesh.rotation.x = -Math.PI/2;
+heatMesh.position.y = 3;
+heatMesh.visible = showHeat;
+scene.add(heatMesh);
+let heatRedrawDue = 0;
+function recordHeat(x, y) {
+  const ix = Math.floor((x + SIDE_WALL_X) / (SIDE_WALL_X*2) * HEAT_W);
+  const iy = Math.floor((y + BACK_WALL_Y) / (BACK_WALL_Y*2) * HEAT_H);
+  if (ix < 0 || iy < 0 || ix >= HEAT_W || iy >= HEAT_H) return;
+  const v = (heatBins[iy * HEAT_W + ix] += 1);
+  if (v > heatMax) heatMax = v;
+}
+function redrawHeat() {
+  const img = heatCtx.createImageData(HEAT_W, HEAT_H);
+  for (let i = 0; i < heatBins.length; i++) {
+    const v = heatBins[i] / heatMax;
+    const o = i * 4;
+    // analytical palette: cyan→white through warm
+    img.data[o]   = Math.min(255, v * 320);
+    img.data[o+1] = Math.min(255, v * 200);
+    img.data[o+2] = Math.min(255, 80 + v * 180);
+    img.data[o+3] = Math.min(220, v * 255);
+  }
+  heatCtx.putImageData(img, 0, 0);
+  heatTex.needsUpdate = true;
+}
+
+// Per-touch detection (rising edge of ball_touched per car).
+const prevTouched = {};
+const BALL_VEL_PREV = new Float32Array(3);
+
+function applyState(s) {
+  if (!s || !s.ball_phys || !s.ball_phys.pos) return;
+
+  const bp = s.ball_phys.pos;
+  const bv = s.ball_phys.vel || [0, 0, 0];
+  const bspd = Math.sqrt(bv[0]*bv[0] + bv[1]*bv[1] + bv[2]*bv[2]);
+  rlToThree(_v1, bp[0], bp[1], bp[2]);
+  ball.position.lerp(_v1, currentLerp);
+  ballRing.position.set(ball.position.x, 1, ball.position.z);
+
+  // Ball spin derived from velocity magnitude (no angular vel in stream, fake it).
+  if (bspd > 5) {
+    const spinRate = bspd / BALL_RADIUS * 0.02; // empirical
+    ball.rotation.x += spinRate * (bv[1] / Math.max(1, Math.abs(bv[1]))) * 0.5;
+    ball.rotation.z -= spinRate * (bv[0] / Math.max(1, Math.abs(bv[0]))) * 0.5;
+  }
+
+  // Ball blob shadow + fade with height.
+  ballBlob.position.set(ball.position.x, 2, ball.position.z);
+  const h = Math.max(BALL_RADIUS, ball.position.y);
+  const hk = Math.max(0.1, Math.min(1, 1 - (h - BALL_RADIUS) / 2500));
+  ballBlob.material.opacity = 0.5 * hk;
+  ballBlob.scale.setScalar(1 + (h - BALL_RADIUS) / 1500);
+
+  // Supersonic ball: glow & ring color shift.
+  const ballSonic = bspd >= 4400; // ball "supersonic" threshold
+  ballGlow.position.copy(ball.position);
+  ballGlow.material.opacity = ballSonic ? 0.45 : Math.max(0, (bspd - 2200) / 4400) * 0.25;
+  ballRing.material.color.setHex(ballSonic ? 0xff8844 : 0xffffff);
+
+  // Trail: append current ball position (in three-space).
+  if (showTrail) pushTrail(ball.position.x, ball.position.y, ball.position.z);
+
+  // Predicted path: forward-integrate from current pos/vel.
+  if (showPredict) {
+    updatePredict(bp[0], bp[1], bp[2], bv[0], bv[1], bv[2]);
+  }
+
+  // Heatmap accumulation (sample every frame, redraw at 5Hz).
+  if (showHeat) {
+    recordHeat(bp[0], bp[1]);
+    const now = performance.now();
+    if (now - heatRedrawDue > 200) { redrawHeat(); heatRedrawDue = now; }
+  }
+
+  if (s.cars) {
+    for (let i = 0; i < s.cars.length; i++) {
+      const c = s.cars[i];
+      if (!c.phys || !c.phys.pos) continue;
+      const mesh = getCar(c.car_id, c.team_num);
+      const d = carData[mesh.uuid];
+      const p = c.phys.pos, f = c.phys.forward, u = c.phys.up, r = c.phys.right;
+      mesh.visible = !c.is_demoed;
+      if (d) { d.blob.visible = mesh.visible; d.flameLine.visible = mesh.visible && !!(c.boost_active || c.is_boosting); d.velArrow.visible = mesh.visible && showVel; }
+      rlToThree(_v1, p[0], p[1], p[2]);
+      mesh.position.lerp(_v1, currentLerp);
+
+      if (f && u && r) {
+        // RL basis → Three basis (in-place)
+        _v2.set(f[0], f[2], -f[1]).normalize();   // forward
+        _v3.set(r[0], r[2], -r[1]).normalize();   // right
+        _v4.set(u[0], u[2], -u[1]).normalize();   // up
+        _v2.negate(); // car "forward" maps to -Z in Three basis we use
+        _m4.makeBasis(_v3, _v4, _v2);
+        _q.setFromRotationMatrix(_m4);
+        mesh.quaternion.slerp(_q, currentLerp);
+      }
+
+      // Blob under car, fade by height.
+      if (d) {
+        d.blob.position.set(mesh.position.x, 2, mesh.position.z);
+        const ch = Math.max(20, mesh.position.y);
+        const chk = Math.max(0.1, Math.min(1, 1 - (ch - 20) / 1800));
+        d.blob.material.opacity = 0.45 * chk;
+        d.blob.scale.setScalar(1 + (ch - 20) / 1200);
+      }
+
+      // Velocity arrow.
+      if (d && showVel && c.phys.vel) {
+        const cv = c.phys.vel;
+        const csp = Math.sqrt(cv[0]*cv[0] + cv[1]*cv[1] + cv[2]*cv[2]);
+        if (csp > 1) {
+          _v2.set(cv[0], cv[2], -cv[1]).normalize();
+          d.velArrow.position.set(mesh.position.x, mesh.position.y + 40, mesh.position.z);
+          d.velArrow.setDirection(_v2);
+          d.velArrow.setLength(Math.min(800, csp * 0.4), 50, 25);
+        }
+      }
+
+      // Flame trail: append exhaust position when boosting.
+      if (d && (c.boost_active || c.is_boosting)) {
+        // Exhaust = behind car (-forward) offset by ~70 from center, slightly above floor.
+        if (f) {
+          const fx = f[0], fy = f[1], fz = f[2];
+          // RL space: exhaust pos = car_pos - forward*70 (RL units)
+          const ex = p[0] - fx * 70, ey = p[1] - fy * 70, ez = p[2] - fz * 70 + 10;
+          rlToThree(_v2, ex, ey, ez);
+          pushFlame(d, _v2.x, _v2.y, _v2.z, c.team_num);
+        }
+      } else if (d && d.flameCount > 0) {
+        // Decay flame.
+        d.flameCount = Math.max(0, d.flameCount - 3);
+        d.flameGeo.setDrawRange(0, d.flameCount);
+      }
+
+      // Rising-edge touch detection → flash + camera shake.
+      const wasT = !!prevTouched[c.car_id];
+      const nowT = !!c.ball_touched;
+      if (nowT && !wasT) {
+        lastTouchAt[c.car_id] = performance.now();
+        const colHex = c.team_num === 0 ? 0x4aa6ff : 0xff7733;
+        spawnFlash(ball.position.x, ball.position.y, ball.position.z, colHex);
+        shakeAmp = Math.min(40, shakeAmp + 18);
+      }
+      prevTouched[c.car_id] = nowT;
+    }
+  }
+
+  // Boost pad diffing
+  if (s.boost_pad_states) {
+    const arr = s.boost_pad_states;
+    for (let i = 0; i < arr.length; i++) {
+      const bm = boostMeshes[i];
+      if (!bm) continue;
+      const on = !!arr[i];
+      if (on !== bm.on) {
+        bm.on = on;
+        bm.m.material.color.copy(on ? COLOR_BOOST_ON : COLOR_BOOST_OFF);
+        bm.m.material.emissive.copy(on ? EMI_BOOST_ON : EMI_BOOST_OFF);
+        if (on) activeBoosts.add(i); else { activeBoosts.delete(i); bm.m.scale.set(1, 1, 1); }
+      }
+    }
+  }
+
+  // Goal detection via ball position crossing back wall.
+  if (Math.abs(bp[1]) > BACK_WALL_Y + 100 && Math.abs(BALL_VEL_PREV[1]) > 100) {
+    const team = bp[1] > 0 ? 1 : 0; // ball in orange goal → blue scored, color orange goal blue (attacker)
+    const colorHex = team === 0 ? 0x4aa6ff : 0xff7733;
+    spawnGoalBurst(colorHex, ball.position);
+    shakeAmp = Math.min(80, shakeAmp + 50);
+    BALL_VEL_PREV[1] = 0; // debounce
+  } else {
+    BALL_VEL_PREV[0] = bv[0]; BALL_VEL_PREV[1] = bv[1]; BALL_VEL_PREV[2] = bv[2];
+  }
+}
+
+// Push a flame sample to a car's ribbon.
+function pushFlame(d, x, y, z, teamNum) {
+  const colors = teamNum === 0 ? [0.4, 0.7, 1.0] : [1.0, 0.55, 0.2];
+  if (d.flameCount < FLAME_TRAIL_LEN) {
+    const o = d.flameCount * 3;
+    d.flamePos[o] = x; d.flamePos[o+1] = y; d.flamePos[o+2] = z;
+    d.flameCount++;
+  } else {
+    d.flamePos.copyWithin(0, 3);
+    const o = (FLAME_TRAIL_LEN - 1) * 3;
+    d.flamePos[o] = x; d.flamePos[o+1] = y; d.flamePos[o+2] = z;
+  }
+  for (let i = 0; i < d.flameCount; i++) {
+    const t = i / Math.max(1, d.flameCount - 1);
+    const o = i * 3;
+    d.flameCol[o]   = colors[0] * t + (1 - t) * 1.0;  // hot at head, cool at tail
+    d.flameCol[o+1] = colors[1] * t + (1 - t) * 0.9;
+    d.flameCol[o+2] = colors[2] * t + (1 - t) * 0.5;
+  }
+  d.flameGeo.attributes.position.needsUpdate = true;
+  d.flameGeo.attributes.color.needsUpdate = true;
+  d.flameGeo.setDrawRange(0, d.flameCount);
+}
+
+// HUD throttled to ~10 Hz
+let lastHud = 0;
+function updateHud(s) {
+  if (!s || !s.ball_phys || !s.ball_phys.pos) return;
+  const now = performance.now();
+  if (now - lastHud < 100) return;
+  lastHud = now;
+
+  const bp = s.ball_phys.pos;
+  const bv = s.ball_phys.vel || [0,0,0];
+  const ballSpeed = Math.sqrt(bv[0]*bv[0] + bv[1]*bv[1] + bv[2]*bv[2]);
+  const distBlue = Math.sqrt(bp[0]*bp[0] + (bp[1]+BACK_WALL_Y)*(bp[1]+BACK_WALL_Y));
+  const distOrange = Math.sqrt(bp[0]*bp[0] + (bp[1]-BACK_WALL_Y)*(bp[1]-BACK_WALL_Y));
+
+  let lines = [];
+  lines.push(`BALL  (${bp[0].toFixed(0)}, ${bp[1].toFixed(0)}, ${bp[2].toFixed(0)})  ${ballSpeed.toFixed(0)} uu/s`);
+  lines.push(`      height: ${bp[2].toFixed(0)}  →blue: ${distBlue.toFixed(0)}  →orange: ${distOrange.toFixed(0)}`);
+  if (s.cars) {
+    for (const c of s.cars) {
+      const t = c.team_num === 0 ? 'BLUE  ' : 'ORANGE';
+      const b = Math.round((c.boost_amount ?? c.boost ?? 0) * 100);
+      const cv = (c.phys && c.phys.vel) || [0,0,0];
+      const sp = Math.sqrt(cv[0]*cv[0] + cv[1]*cv[1] + cv[2]*cv[2]);
+      let dball = 0;
+      if (c.phys && c.phys.pos) {
+        const dx = c.phys.pos[0]-bp[0], dy = c.phys.pos[1]-bp[1], dz = c.phys.pos[2]-bp[2];
+        dball = Math.sqrt(dx*dx + dy*dy + dz*dz);
+      }
+      const flags = [
+        c.is_demoed && 'DEMO',
+        !c.on_ground && 'AIR',
+        sp >= SUPERSONIC && 'SONIC',
+        (lastTouchAt[c.car_id] && now - lastTouchAt[c.car_id] < 500) && 'TOUCH',
+      ].filter(Boolean).join(' ');
+      lines.push(`${t} #${c.car_id}  boost:${String(b).padStart(3)}%  ${sp.toFixed(0).padStart(4)} uu/s  Δball:${dball.toFixed(0).padStart(5)}  ${flags}`);
+    }
+  }
+  // Connection telemetry
+  const age = lastFrameTs ? Math.round(now - lastFrameTs) : -1;
+  lines.push(`net   ${pktPerSec.toFixed(1)} pps  last: ${age}ms`);
+  hudEl.textContent = lines.join('\n');
+}
+
+// ── Live WebSocket ────────────────────────────────────────────────────────
+let liveWs = null;
+let liveConnected = false;
+let serverRecording = null; // {id, name, since: ms}
+
+function setStatus() {
+  if (playback.active) {
+    statTxtEl.textContent = `Playing: ${playback.name || ''}`;
+    statEl.className = 'connected';
+    return;
+  }
+  statEl.innerHTML = '';
+  if (serverRecording) {
+    const d = document.createElement('span'); d.className = 'rec-dot'; statEl.appendChild(d);
+  }
+  const span = document.createElement('span');
+  span.id = 'status-text';
+  span.textContent = liveConnected ? (serverRecording ? `REC ${serverRecording.name}` : 'Connected (Live)') : 'Disconnected — retrying…';
+  statEl.appendChild(span);
+  statEl.className = liveConnected ? 'connected' : 'disconnected';
+}
+
+function connectLive() {
+  liveWs = new WebSocket(WS_LIVE);
+  liveWs.binaryType = 'arraybuffer';
+  liveWs.onopen = () => { liveConnected = true; setStatus(); };
+  liveWs.onmessage = e => {
+    try {
+      const data = typeof e.data === 'string' ? e.data : new TextDecoder().decode(e.data);
+      const parsed = JSON.parse(data);
+      if (parsed && parsed.type === 'event') { handleServerEvent(parsed); return; }
+      if (playback.active) return; // ignore live data during playback
+      gs = parsed; stateDirty = true;
+      recordPacket();
+    } catch(err) { console.error('Live WS parse error:', err); }
+  };
+  liveWs.onclose = () => { liveConnected = false; setStatus(); setTimeout(connectLive, 2000); };
+  liveWs.onerror = () => { try { liveWs.close(); } catch(_){} };
+}
+connectLive();
+
+function handleServerEvent(ev) {
+  if (ev.kind === 'recording_started') {
+    serverRecording = { id: ev.recording.id, name: ev.recording.name, since: Date.now() };
+    setStatus();
+    scheduleListRefresh();
+  } else if (ev.kind === 'recording_stopped') {
+    serverRecording = null;
+    setStatus();
+    scheduleListRefresh();
+  } else if (ev.kind === 'recording_deleted') {
+    cachedRecs = cachedRecs.filter(r => r.id !== ev.recording.id);
+    renderList();
+  }
+}
+
+// ── Recordings list & stats ───────────────────────────────────────────────
+let cachedRecs = [];
+let panelCollapsed = false;
+let listRefreshTimer = null;
+
+function togglePanel() {
+  panelCollapsed = !panelCollapsed;
+  document.getElementById('recordings-panel').classList.toggle('collapsed', panelCollapsed);
+  document.getElementById('collapse-btn').textContent = panelCollapsed ? '▶' : '▼';
+}
+
+function formatDuration(ms) {
+  if (!ms || ms < 1000) return (ms||0) + 'ms';
+  const s = Math.floor(ms/1000);
+  if (s < 60) return s + 's';
+  return Math.floor(s/60) + 'm' + String(s%60).padStart(2,'0') + 's';
+}
+
+function formatTime(ms) {
+  const total = Math.max(0, Math.floor(ms));
+  const min = Math.floor(total / 60000);
+  const sec = Math.floor((total % 60000) / 1000);
+  const mss = total % 1000;
+  return `${min}:${String(sec).padStart(2,'0')}.${String(mss).padStart(3,'0')}`;
+}
+
+function scheduleListRefresh() {
+  if (listRefreshTimer) return;
+  listRefreshTimer = setTimeout(() => { listRefreshTimer = null; loadRecordings(); }, 200);
+}
+
+async function loadRecordings() {
+  const el = document.getElementById('rec-list');
+  const filterMins = parseInt(document.getElementById('time-filter').value) || 0;
+  let url = '/api/recordings';
+  if (filterMins > 0) {
+    const since = new Date(Date.now() - filterMins * 60000).toISOString();
+    url += '?since=' + encodeURIComponent(since);
+  }
+  try {
+    const res = await fetch(url);
+    if (!res.ok) throw new Error('HTTP ' + res.status);
+    cachedRecs = await res.json() || [];
+    renderList();
+    return cachedRecs;
+  } catch(e) {
+    el.innerHTML = '<div style="color:#f55">Error loading</div>';
+    console.error(e);
+    return [];
+  }
+}
+
+function renderList() {
+  const el = document.getElementById('rec-list');
+  if (cachedRecs.length === 0) { el.innerHTML = '<div style="color:#666">No recordings</div>'; return; }
+  el.innerHTML = cachedRecs.map(r => `
+    <div class="rec-item">
+      <span class="rec-name" title="${r.name}">${r.name}</span>
+      <span class="rec-size">${formatDuration(r.duration_ms)} · ${r.frames}f</span>
+      <button onclick="playRec(${r.id})">▶</button>
+      <button class="danger" onclick="deleteRec(${r.id})">✕</button>
+    </div>
+  `).join('');
+}
+
+async function deleteRec(id) {
+  try { await fetch('/api/recordings/' + id, { method: 'DELETE' }); }
+  catch(e) { console.error(e); }
+  cachedRecs = cachedRecs.filter(r => r.id !== id);
+  renderList();
+}
+
+async function refreshStats() {
+  if (panelCollapsed) return;
+  try {
+    const r = await fetch('/api/stats');
+    if (!r.ok) return;
+    const s = await r.json();
+    const ratio = s.compression_ratio ? s.compression_ratio.toFixed(2) + '×' : '—';
+    const lastAge = s.udp_last_packet_age_ms < 0 ? '—' : s.udp_last_packet_age_ms + 'ms';
+    const dbMB = (s.db_size_bytes / (1024*1024)).toFixed(2);
+    document.getElementById('stats-box').innerHTML = `
+      <div><span class="k">uptime:</span> <span class="v">${s.uptime_s}s</span></div>
+      <div><span class="k">udp pkts:</span> <span class="v">${s.udp_packets_total.toLocaleString()}</span> <span class="k">(last ${lastAge})</span></div>
+      <div><span class="k">ws clients:</span> <span class="v">${s.ws_clients}</span></div>
+      <div><span class="k">frames written:</span> <span class="v">${s.frames_written_total.toLocaleString()}</span> <span class="k">dropped:</span> <span class="v">${s.frames_dropped_total}</span></div>
+      <div><span class="k">compression:</span> <span class="v">${s.compression_enabled ? 'on' : 'off'}</span> <span class="k">ratio:</span> <span class="v">${ratio}</span></div>
+      <div><span class="k">db size:</span> <span class="v">${dbMB} MB</span></div>
+      <div><span class="k">retention:</span> <span class="v">${s.retention_hours}h</span></div>
+    `;
+  } catch(e) {}
+}
+
+loadRecordings();
+setInterval(loadRecordings, 60000); // safety-net polling; primary refresh is event-driven
+setInterval(refreshStats, 2000);
+
+// ── Playback controller ──────────────────────────────────────────────────
+const playback = {
+  ws: null,
+  active: false,
+  id: null,
+  name: '',
+  frames: 0,
+  durationMs: 0,
+  positionMs: 0,
+  playing: false,
+  speed: 1,
+  scrubbing: false,
+  endNotified: false,
+};
+
+const pbBar = document.getElementById('playback-bar');
+const pbName = document.getElementById('pb-name');
+const pbScrub = document.getElementById('pb-scrub');
+const pbTime = document.getElementById('pb-time');
+const pbSpeed = document.getElementById('pb-speed');
+const pbPlay = document.getElementById('pb-play');
+const pbAuto = document.getElementById('pb-autoplay');
+
+let autoplay = (localStorage.getItem('autoplay') ?? '1') === '1';
+function syncAutoplayUI() {
+  pbAuto.textContent = autoplay ? '⏭ Auto: ON' : '⏭ Auto: OFF';
+  pbAuto.className = autoplay ? 'active' : '';
+}
+syncAutoplayUI();
+pbAuto.onclick = () => { autoplay = !autoplay; localStorage.setItem('autoplay', autoplay ? '1' : '0'); syncAutoplayUI(); };
+
+const savedSpeed = parseFloat(localStorage.getItem('playback_speed') || '1');
+if (savedSpeed > 0) { pbSpeed.value = String(savedSpeed); playback.speed = savedSpeed; }
+
+pbSpeed.onchange = () => {
+  playback.speed = parseFloat(pbSpeed.value);
+  localStorage.setItem('playback_speed', pbSpeed.value);
+  sendCmd({ cmd: 'speed', value: playback.speed });
+};
+pbPlay.onclick = () => {
+  if (!playback.active) return;
+  if (playback.playing) sendCmd({ cmd: 'pause' });
+  else sendCmd({ cmd: 'play' });
+};
+
+let scrubThrottle = 0;
+pbScrub.addEventListener('input', () => {
+  if (!playback.active) return;
+  playback.scrubbing = true;
+  const ms = Math.round((parseInt(pbScrub.value) / 1000) * playback.durationMs);
+  playback.positionMs = ms;
+  updateTimeDisplay();
+  const now = performance.now();
+  if (now - scrubThrottle > 50) {
+    scrubThrottle = now;
+    resetTrail();
+    sendCmd({ cmd: 'seek', ms });
+  }
+});
+pbScrub.addEventListener('change', () => {
+  if (!playback.active) return;
+  const ms = Math.round((parseInt(pbScrub.value) / 1000) * playback.durationMs);
+  resetTrail();
+  sendCmd({ cmd: 'seek', ms });
+  playback.scrubbing = false;
+});
+
+document.getElementById('pb-prev').onclick = () => {
+  sendCmd({ cmd: 'pause' });
+  resetTrail();
+  sendCmd({ cmd: 'seek', ms: Math.max(0, playback.positionMs - 50) });
+};
+document.getElementById('pb-next').onclick = () => {
+  sendCmd({ cmd: 'pause' });
+  resetTrail();
+  sendCmd({ cmd: 'seek', ms: Math.min(playback.durationMs, playback.positionMs + 50) });
+};
+
+function updateTimeDisplay() {
+  pbTime.textContent = `${formatTime(playback.positionMs)} / ${formatTime(playback.durationMs)}`;
+  if (!playback.scrubbing && playback.durationMs > 0) {
+    pbScrub.value = String(Math.round((playback.positionMs / playback.durationMs) * 1000));
+  }
+}
+
+function sendCmd(cmd) {
+  if (!playback.ws || playback.ws.readyState !== 1) return;
+  try { playback.ws.send(JSON.stringify(cmd)); } catch(_){}
+}
+
+function playRec(id) {
+  // Close any existing playback connection.
+  if (playback.ws) {
+    try { playback.ws.onclose = null; playback.ws.close(); } catch(_){}
+    playback.ws = null;
+  }
+  playback.active = true;
+  playback.id = id;
+  playback.endNotified = false;
+  playback.playing = true;
+  currentLerp = LERP_PLAYBACK;
+
+  document.getElementById('mode-btn').className = '';
+  document.getElementById('mode-btn').textContent = '▶ PLAYBACK';
+  pbBar.style.display = 'flex';
+  pbName.textContent = 'loading…';
+  setStatus();
+
+  playback.ws = new WebSocket(WS_PLAY + '?id=' + id);
+  playback.ws.binaryType = 'arraybuffer';
+
+  playback.ws.onopen = () => {
+    sendCmd({ cmd: 'speed', value: playback.speed });
+  };
+
+  playback.ws.onmessage = e => {
+    const text = typeof e.data === 'string' ? e.data : new TextDecoder().decode(e.data);
+    let msg;
+    try { msg = JSON.parse(text); } catch(err) { return; }
+    if (msg.type === 'playback_start') {
+      resetTrail();
+      playback.name = msg.name || '';
+      playback.frames = msg.frames || 0;
+      playback.durationMs = msg.duration_ms || 0;
+      pbName.textContent = playback.name;
+      updateTimeDisplay();
+      setStatus();
+    } else if (msg.type === 'playback_frame') {
+      gs = msg.data;
+      stateDirty = true;
+      playback.positionMs = msg.offset_ms;
+      if (!playback.scrubbing) updateTimeDisplay();
+    } else if (msg.type === 'playback_state') {
+      playback.playing = !!msg.playing;
+      playback.speed = msg.speed;
+      if (!playback.scrubbing) {
+        playback.positionMs = msg.position_ms;
+        updateTimeDisplay();
+      }
+      pbPlay.textContent = playback.playing ? '⏸' : '▶';
+      if (pbSpeed.value !== String(playback.speed)) pbSpeed.value = String(playback.speed);
+    } else if (msg.type === 'playback_end') {
+      playback.endNotified = true;
+      handleAutoplayNext();
+    } else if (msg.error) {
+      console.error('Playback error:', msg.error);
+    }
+  };
+
+  playback.ws.onclose = () => {
+    if (playback.active && !playback.endNotified) handleAutoplayNext();
+  };
+}
+
+async function handleAutoplayNext() {
+  if (!autoplay) { stopPlayback(); return; }
+  const curId = playback.id;
+  // Refresh in case new recordings appeared.
+  await loadRecordings();
+  const idx = cachedRecs.findIndex(r => Number(r.id) === Number(curId));
+  if (idx > 0) {
+    const next = cachedRecs[idx - 1];
+    setTimeout(() => playRec(next.id), 400);
+  } else {
+    stopPlayback();
+  }
+}
+
+function stopPlayback() {
+  if (playback.ws) {
+    try { playback.ws.onclose = null; sendCmd({ cmd: 'stop' }); playback.ws.close(); } catch(_){}
+    playback.ws = null;
+  }
+  playback.active = false;
+  playback.id = null;
+  playback.playing = false;
+  currentLerp = LERP_LIVE;
+  pbBar.style.display = 'none';
+  document.getElementById('mode-btn').className = 'active';
+  document.getElementById('mode-btn').textContent = '● LIVE';
+  resetTrail();
+  setStatus();
+}
+
+// ── Keyboard shortcuts ───────────────────────────────────────────────────
+window.addEventListener('keydown', e => {
+  if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
+  if (e.code === 'Space') {
+    if (playback.active) { e.preventDefault(); pbPlay.click(); }
+  } else if (e.code === 'ArrowLeft') {
+    if (playback.active) {
+      const delta = e.shiftKey ? 50 : 5000;
+      resetTrail();
+      sendCmd({ cmd: 'seek', ms: Math.max(0, playback.positionMs - delta) });
+    }
+  } else if (e.code === 'ArrowRight') {
+    if (playback.active) {
+      const delta = e.shiftKey ? 50 : 5000;
+      resetTrail();
+      sendCmd({ cmd: 'seek', ms: Math.min(playback.durationMs, playback.positionMs + delta) });
+    }
+  } else if (e.code === 'BracketLeft') {
+    const opts = [...pbSpeed.options].map(o => parseFloat(o.value));
+    const i = opts.indexOf(playback.speed);
+    if (i > 0) { pbSpeed.value = String(opts[i-1]); pbSpeed.onchange(); }
+  } else if (e.code === 'BracketRight') {
+    const opts = [...pbSpeed.options].map(o => parseFloat(o.value));
+    const i = opts.indexOf(playback.speed);
+    if (i >= 0 && i < opts.length - 1) { pbSpeed.value = String(opts[i+1]); pbSpeed.onchange(); }
+  } else if (e.code === 'KeyC') {
+    document.getElementById('chase-toggle').click();
+  } else if (e.code === 'KeyV') {
+    document.getElementById('vel-toggle').click();
+  } else if (e.code === 'KeyH') {
+    document.getElementById('heat-toggle').click();
+  } else if (e.code === 'KeyM') {
+    document.getElementById('map-toggle').click();
+  }
+});
+
+// ── Quality toggle ───────────────────────────────────────────────────────
+document.getElementById('quality-toggle').checked = lowQuality;
+document.getElementById('quality-toggle').onchange = e => {
+  lowQuality = e.target.checked;
+  applyQuality();
+};
+applyQuality();
+
+// Trail / predict toggles.
+const trailToggle = document.getElementById('trail-toggle');
+const predictToggle = document.getElementById('predict-toggle');
+trailToggle.checked = showTrail;
+predictToggle.checked = showPredict;
+trailToggle.onchange = e => {
+  showTrail = e.target.checked;
+  localStorage.setItem('show_trail', showTrail ? '1' : '0');
+  trailLine.visible = showTrail;
+  if (!showTrail) resetTrail();
+  stateDirty = true;
+};
+predictToggle.onchange = e => {
+  showPredict = e.target.checked;
+  localStorage.setItem('show_predict', showPredict ? '1' : '0');
+  predictLine.visible = showPredict;
+  stateDirty = true;
+};
+
+// Bloom, vel arrows, heat, minimap, chase toggles.
+const bloomToggle = document.getElementById('bloom-toggle');
+const velToggle   = document.getElementById('vel-toggle');
+const heatToggle  = document.getElementById('heat-toggle');
+const mapToggle   = document.getElementById('map-toggle');
+const chaseToggle = document.getElementById('chase-toggle');
+const minimapEl = document.getElementById('minimap');
+const minimapCanvas = document.getElementById('minimap-canvas');
+const minimapCtx = minimapCanvas.getContext('2d');
+bloomToggle.checked = useBloom;
+velToggle.checked   = showVel;
+heatToggle.checked  = showHeat;
+mapToggle.checked   = showMap;
+chaseToggle.checked = chaseMode;
+heatMesh.visible    = showHeat;
+minimapEl.classList.toggle('visible', showMap);
+
+bloomToggle.onchange = e => {
+  useBloom = e.target.checked;
+  localStorage.setItem('use_bloom', useBloom ? '1' : '0');
+  setupComposer();
+  stateDirty = true;
+};
+velToggle.onchange = e => {
+  showVel = e.target.checked;
+  localStorage.setItem('show_vel', showVel ? '1' : '0');
+  for (const id in carMeshes) {
+    const d = carData[carMeshes[id].uuid];
+    if (d) d.velArrow.visible = showVel && carMeshes[id].visible;
+  }
+  stateDirty = true;
+};
+heatToggle.onchange = e => {
+  showHeat = e.target.checked;
+  localStorage.setItem('show_heat', showHeat ? '1' : '0');
+  heatMesh.visible = showHeat;
+  stateDirty = true;
+};
+mapToggle.onchange = e => {
+  showMap = e.target.checked;
+  localStorage.setItem('show_map', showMap ? '1' : '0');
+  minimapEl.classList.toggle('visible', showMap);
+};
+chaseToggle.onchange = e => {
+  chaseMode = e.target.checked;
+  localStorage.setItem('chase_mode', chaseMode ? '1' : '0');
+  cameraDirty = true;
+};
+
+// ── Render loop ──────────────────────────────────────────────────────────
+let t = 0;
+let lastRenderTs = 0;
+
+let lastMinimapDraw = 0;
+function drawMinimap() {
+  const W = minimapCanvas.width, H = minimapCanvas.height;
+  const ctx = minimapCtx;
+  ctx.fillStyle = '#0c0c18';
+  ctx.fillRect(0, 0, W, H);
+  // Field outline.
+  ctx.strokeStyle = '#2a4a2a'; ctx.lineWidth = 1;
+  ctx.strokeRect(6, 6, W - 12, H - 12);
+  // Centerline.
+  ctx.beginPath(); ctx.moveTo(6, H/2); ctx.lineTo(W-6, H/2); ctx.stroke();
+  // Goals.
+  ctx.strokeStyle = '#4aa6ff'; ctx.beginPath(); ctx.moveTo(W*0.35, 6); ctx.lineTo(W*0.65, 6); ctx.stroke();
+  ctx.strokeStyle = '#ff7733'; ctx.beginPath(); ctx.moveTo(W*0.35, H-6); ctx.lineTo(W*0.65, H-6); ctx.stroke();
+  // Ball + cars (use last gs).
+  if (gs && gs.ball_phys && gs.ball_phys.pos) {
+    const bp = gs.ball_phys.pos;
+    const bx = 6 + (bp[0] + SIDE_WALL_X) / (SIDE_WALL_X*2) * (W - 12);
+    const by = 6 + (1 - (bp[1] + BACK_WALL_Y) / (BACK_WALL_Y*2)) * (H - 12);
+    ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(bx, by, 3, 0, Math.PI*2); ctx.fill();
+    if (gs.cars) {
+      for (const c of gs.cars) {
+        if (!c.phys || !c.phys.pos || c.is_demoed) continue;
+        const cx = 6 + (c.phys.pos[0] + SIDE_WALL_X) / (SIDE_WALL_X*2) * (W - 12);
+        const cy = 6 + (1 - (c.phys.pos[1] + BACK_WALL_Y) / (BACK_WALL_Y*2)) * (H - 12);
+        ctx.fillStyle = c.team_num === 0 ? '#4aa6ff' : '#ff7733';
+        ctx.beginPath(); ctx.arc(cx, cy, 2.5, 0, Math.PI*2); ctx.fill();
+      }
+    }
+  }
+}
+
+(function animate(now) {
+  requestAnimationFrame(animate);
+
+  // Skip work entirely when tab hidden (browser already throttles, but be explicit).
+  if (document.hidden) return;
+
+  const dt = lastRenderTs ? (now - lastRenderTs) / 1000 : 0.016;
+  lastRenderTs = now;
+  t += dt;
+
+  if (gs) {
+    applyState(gs);
+    updateHud(gs);
+  }
+
+  // Animate only active boost pads.
+  if (activeBoosts.size > 0) {
+    const s = 1 + Math.sin(t*3) * 0.05;
+    activeBoosts.forEach(i => { const m = boostMeshes[i].m; m.scale.x = s; m.scale.z = s; });
+  }
+
+  // Touch flashes: expand and fade.
+  for (const f of flashPool) {
+    if (!f.mesh.visible) continue;
+    const age = (now - f.t0) / 1000;
+    if (age >= f.life) { f.mesh.visible = false; continue; }
+    const k = age / f.life;
+    f.mesh.scale.setScalar(1 + k * 4);
+    f.mesh.material.opacity = (1 - k) * 0.9;
+  }
+
+  // Goal particles: integrate + fade + free.
+  for (let i = goalParticles.length - 1; i >= 0; i--) {
+    const g = goalParticles[i];
+    const age = (now - g.t0) / 1000;
+    if (age >= g.life) {
+      goalGroup.remove(g.pts); g.pts.geometry.dispose(); g.pts.material.dispose();
+      goalParticles.splice(i, 1); continue;
+    }
+    const pos = g.pts.geometry.attributes.position.array;
+    const N = pos.length / 3;
+    for (let j = 0; j < N; j++) {
+      pos[j*3]   += g.vel[j*3]   * dt;
+      pos[j*3+1] += g.vel[j*3+1] * dt;
+      pos[j*3+2] += g.vel[j*3+2] * dt;
+      g.vel[j*3+1] -= 1800 * dt; // gravity
+    }
+    g.pts.geometry.attributes.position.needsUpdate = true;
+    g.pts.material.opacity = 1 - age / g.life;
+  }
+
+  // Force a render when shake/flash/particles are active.
+  const dynamic = shakeAmp > 0.1 || goalParticles.length > 0 || flashPool.some(f => f.mesh.visible);
+
+  if (cameraDirty || stateDirty || activeBoosts.size > 0 || chaseMode || dynamic) {
+    updateCam();
+    if (composer) composer.render(); else renderer.render(scene, camera);
+    cameraDirty = false;
+    stateDirty = false;
+  }
+
+  // Minimap draw at ~15Hz.
+  if (showMap && now - lastMinimapDraw > 66) {
+    drawMinimap();
+    lastMinimapDraw = now;
+  }
+})(performance.now());
+</script>
+</body>
+</html>
diff --git a/go.mod b/go.mod
new file mode 100644
index 0000000..fb1ff1a
--- /dev/null
+++ b/go.mod
@@ -0,0 +1,32 @@
+module git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer
+
+go 1.26.1
+
+require (
+	github.com/gofiber/fiber/v2 v2.52.13
+	github.com/gofiber/websocket/v2 v2.2.1
+	github.com/klauspost/compress v1.18.6
+	github.com/ncruces/go-sqlite3 v0.34.3
+	golang.org/x/crypto v0.52.0
+)
+
+require (
+	github.com/andybalholm/brotli v1.2.1 // indirect
+	github.com/clipperhouse/uax29/v2 v2.7.0 // indirect
+	github.com/fasthttp/websocket v1.5.12 // indirect
+	github.com/google/uuid v1.6.0 // indirect
+	github.com/mattn/go-colorable v0.1.15 // indirect
+	github.com/mattn/go-isatty v0.0.22 // indirect
+	github.com/mattn/go-runewidth v0.0.24 // indirect
+	github.com/ncruces/go-sqlite3-wasm v1.6.35300 // indirect
+	github.com/ncruces/go-sqlite3-wasm/v2 v2.6.35301 // indirect
+	github.com/ncruces/julianday v1.0.0 // indirect
+	github.com/rivo/uniseg v0.4.7 // indirect
+	github.com/savsgio/gotils v0.0.0-20250924091648-bce9a52d7761 // indirect
+	github.com/valyala/bytebufferpool v1.0.0 // indirect
+	github.com/valyala/fasthttp v1.71.0 // indirect
+	github.com/valyala/tcplisten v1.0.0 // indirect
+	golang.org/x/net v0.55.0 // indirect
+	golang.org/x/sys v0.45.0 // indirect
+	golang.org/x/text v0.37.0 // indirect
+)
diff --git a/go.sum b/go.sum
new file mode 100644
index 0000000..60e0a90
--- /dev/null
+++ b/go.sum
@@ -0,0 +1,81 @@
+github.com/andybalholm/brotli v1.1.0 h1:eLKJA0d02Lf0mVpIDgYnqXcUn0GqVmEFny3VuID1U3M=
+github.com/andybalholm/brotli v1.1.0/go.mod h1:sms7XGricyQI9K10gOSf56VKKWS4oLer58Q+mhRPtnY=
+github.com/andybalholm/brotli v1.2.1 h1:R+f5xP285VArJDRgowrfb9DqL18yVK0gKAW/F+eTWro=
+github.com/andybalholm/brotli v1.2.1/go.mod h1:rzTDkvFWvIrjDXZHkuS16NPggd91W3kUSvPlQ1pLaKY=
+github.com/clipperhouse/uax29/v2 v2.7.0 h1:+gs4oBZ2gPfVrKPthwbMzWZDaAFPGYK72F0NJv2v7Vk=
+github.com/clipperhouse/uax29/v2 v2.7.0/go.mod h1:EFJ2TJMRUaplDxHKj1qAEhCtQPW2tJSwu5BF98AuoVM=
+github.com/fasthttp/websocket v1.5.3 h1:TPpQuLwJYfd4LJPXvHDYPMFWbLjsT91n3GpWtCQtdek=
+github.com/fasthttp/websocket v1.5.3/go.mod h1:46gg/UBmTU1kUaTcwQXpUxtRwG2PvIZYeA8oL6vF3Fs=
+github.com/fasthttp/websocket v1.5.12 h1:e4RGPpWW2HTbL3zV0Y/t7g0ub294LkiuXXUuTOUInlE=
+github.com/fasthttp/websocket v1.5.12/go.mod h1:I+liyL7/4moHojiOgUOIKEWm9EIxHqxZChS+aMFltyg=
+github.com/gofiber/fiber/v2 v2.52.12 h1:0LdToKclcPOj8PktUdIKo9BUohjjwfnQl42Dhw8/WUw=
+github.com/gofiber/fiber/v2 v2.52.12/go.mod h1:YEcBbO/FB+5M1IZNBP9FO3J9281zgPAreiI1oqg8nDw=
+github.com/gofiber/fiber/v2 v2.52.13 h1:TOKP64iqC9b5P49VrBW5tHhUOvDyrtJ0xePEfzJbCbk=
+github.com/gofiber/fiber/v2 v2.52.13/go.mod h1:YEcBbO/FB+5M1IZNBP9FO3J9281zgPAreiI1oqg8nDw=
+github.com/gofiber/websocket/v2 v2.2.1 h1:C9cjxvloojayOp9AovmpQrk8VqvVnT8Oao3+IUygH7w=
+github.com/gofiber/websocket/v2 v2.2.1/go.mod h1:Ao/+nyNnX5u/hIFPuHl28a+NIkrqK7PRimyKaj4JxVU=
+github.com/google/uuid v1.6.0 h1:NIvaJDMOsjHA8n1jAhLSgzrAzy1Hgr+hNrb57e+94F0=
+github.com/google/uuid v1.6.0/go.mod h1:TIyPZe4MgqvfeYDBFedMoGGpEw/LqOeaOT+nhxU+yHo=
+github.com/klauspost/compress v1.17.9 h1:6KIumPrER1LHsvBVuDa0r5xaG0Es51mhhB9BQB2qeMA=
+github.com/klauspost/compress v1.17.9/go.mod h1:Di0epgTjJY877eYKx5yC51cX2A2Vl2ibi7bDH9ttBbw=
+github.com/klauspost/compress v1.18.6 h1:2jupLlAwFm95+YDR+NwD2MEfFO9d4z4Prjl1XXDjuao=
+github.com/klauspost/compress v1.18.6/go.mod h1:cwPg85FWrGar70rWktvGQj8/hthj3wpl0PGDogxkrSQ=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
+github.com/mattn/go-colorable v0.1.15 h1:+u9SLTRGnXv73cEsnsmoZBom+dMU88B2M0aDcWy0/jY=
+github.com/mattn/go-colorable v0.1.15/go.mod h1:6LmQG8QLFO4G5z1gPvYEzlUgJ2wF+stgPZH1UqBm1s8=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
+github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
+github.com/mattn/go-isatty v0.0.22 h1:j8l17JJ9i6VGPUFUYoTUKPSgKe/83EYU2zBC7YNKMw4=
+github.com/mattn/go-isatty v0.0.22/go.mod h1:ZXfXG4SQHsB/w3ZeOYbR0PrPwLy+n6xiMrJlRFqopa4=
+github.com/mattn/go-runewidth v0.0.16 h1:E5ScNMtiwvlvB5paMFdw9p4kSQzbXFikJ5SQO6TULQc=
+github.com/mattn/go-runewidth v0.0.16/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
+github.com/mattn/go-runewidth v0.0.24 h1:cpokDiIn0MGnhdHwuWnJBITySJ20QyNGnY2kR/ay2DU=
+github.com/mattn/go-runewidth v0.0.24/go.mod h1:XBkDxAl56ILZc9knddidhrOlY5R/pDhgLpndooCuJAs=
+github.com/ncruces/go-sqlite3 v0.33.3 h1:6jCR3KuGvJSEwhaQrkHDGeIe2qCQ6nOUDNsPz7ZIotw=
+github.com/ncruces/go-sqlite3 v0.33.3/go.mod h1:t2Osfw0wcKzJTgv2EvrkTtVLqlbKTA5Yvwb2ypAlBcY=
+github.com/ncruces/go-sqlite3 v0.34.3 h1:DYN5fylZd9C28Rgmo6ie8vbv1SB9/Ddy0kVBTEzM9nk=
+github.com/ncruces/go-sqlite3 v0.34.3/go.mod h1:+NodfP7QTkYGFUAlAcPVcStvlfVTiqMC3OLKTaYiQCM=
+github.com/ncruces/go-sqlite3-wasm v1.1.1-0.20260409221933-87e4b35a38d0 h1:ymE9H30x1AyW5VfMNkJC9teuI2W1jjMsQS7kc6zl6Tg=
+github.com/ncruces/go-sqlite3-wasm v1.1.1-0.20260409221933-87e4b35a38d0/go.mod h1:/H3+JykPsfSlvKbOxNSx9kKwm3ecqQGzyCs1e9KkNsU=
+github.com/ncruces/go-sqlite3-wasm v1.6.35300 h1:oP/nsJa8m3F3XmOmnAkbX6Ak736ZMraX/cbX9WS4vtc=
+github.com/ncruces/go-sqlite3-wasm v1.6.35300/go.mod h1:Mj3jy2UWyqA3oWNNS3WTDkWdKxSvBabg0s1l12IsKgk=
+github.com/ncruces/go-sqlite3-wasm/v2 v2.6.35301 h1:AaRg2q4Cl7iQ4HjDpN24pfZT4Nvaq739eUBjpHmcNVU=
+github.com/ncruces/go-sqlite3-wasm/v2 v2.6.35301/go.mod h1:KONJCOH3+oHW5QSxKC0THTFHBj4wPFeqyHvTqFW5R8E=
+github.com/ncruces/julianday v1.0.0 h1:fH0OKwa7NWvniGQtxdJRxAgkBMolni2BjDHaWTxqt7M=
+github.com/ncruces/julianday v1.0.0/go.mod h1:Dusn2KvZrrovOMJuOt0TNXL6tB7U2E8kvza5fFc9G7g=
+github.com/rivo/uniseg v0.2.0 h1:S1pD9weZBuJdFmowNwbpi7BJ8TNftyUImj/0WQi72jY=
+github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc=
+github.com/rivo/uniseg v0.4.7 h1:WUdvkW8uEhrYfLC4ZzdpI2ztxP1I582+49Oc5Mq64VQ=
+github.com/rivo/uniseg v0.4.7/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88=
+github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee h1:8Iv5m6xEo1NR1AvpV+7XmhI4r39LGNzwUL4YpMuL5vk=
+github.com/savsgio/gotils v0.0.0-20230208104028-c358bd845dee/go.mod h1:qwtSXrKuJh/zsFQ12yEE89xfCrGKK63Rr7ctU/uCo4g=
+github.com/savsgio/gotils v0.0.0-20250924091648-bce9a52d7761 h1:McifyVxygw1d67y6vxUqls2D46J8W9nrki9c8c0eVvE=
+github.com/savsgio/gotils v0.0.0-20250924091648-bce9a52d7761/go.mod h1:Vi9gvHvTw4yCUHIznFl5TPULS7aXwgaTByGeBY75Wko=
+github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw=
+github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc=
+github.com/valyala/fasthttp v1.51.0 h1:8b30A5JlZ6C7AS81RsWjYMQmrZG6feChmgAolCl1SqA=
+github.com/valyala/fasthttp v1.51.0/go.mod h1:oI2XroL+lI7vdXyYoQk03bXBThfFl2cVdIA3Xl7cH8g=
+github.com/valyala/fasthttp v1.71.0 h1:tepR7H+Guh9VUqxxcPggYi8R3lGUu2Rsdh+z7/FCY3k=
+github.com/valyala/fasthttp v1.71.0/go.mod h1:z1sDUvOShhXq/C9mwH/fSm1Vb71tUJwmQdgkBrBNwnA=
+github.com/valyala/tcplisten v1.0.0 h1:rBHj/Xf+E1tRGZyWIWwJDiRY0zc1Js+CV5DqwacVSA8=
+github.com/valyala/tcplisten v1.0.0/go.mod h1:T0xQ8SeCZGxckz9qRXTfG43PvQ/mcWh7FwZEA7Ioqkc=
+golang.org/x/crypto v0.50.0 h1:zO47/JPrL6vsNkINmLoo/PH1gcxpls50DNogFvB5ZGI=
+golang.org/x/crypto v0.50.0/go.mod h1:3muZ7vA7PBCE6xgPX7nkzzjiUq87kRItoJQM1Yo8S+Q=
+golang.org/x/crypto v0.52.0 h1:RMs7fP2rXdep0CftQlK8Uf+kibLm7qkCcradZWYz988=
+golang.org/x/crypto v0.52.0/go.mod h1:1QgfPxDqh0T2M/elOJtp9RvuR95kVjir0e6/BvEmGbc=
+golang.org/x/net v0.52.0 h1:He/TN1l0e4mmR3QqHMT2Xab3Aj3L9qjbhRm78/6jrW0=
+golang.org/x/net v0.52.0/go.mod h1:R1MAz7uMZxVMualyPXb+VaqGSa3LIaUqk0eEt3w36Sw=
+golang.org/x/net v0.55.0 h1:bcvxaJn3e1U6InsFWt1JUq1aSjnRxLzT2rtD2KfkDF8=
+golang.org/x/net v0.55.0/go.mod h1:L5U2KuzuOe1lY7Z+aWVIKK6qEeJXnXV9yzGA+WCHJww=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.43.0 h1:Rlag2XtaFTxp19wS8MXlJwTvoh8ArU6ezoyFsMyCTNI=
+golang.org/x/sys v0.43.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
+golang.org/x/sys v0.45.0 h1:dO4czNzziLiiXplLQgBCEpCvXQ3dnkn0SdaZSYdQ+FY=
+golang.org/x/sys v0.45.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
+golang.org/x/text v0.36.0 h1:JfKh3XmcRPqZPKevfXVpI1wXPTqbkE5f7JA92a55Yxg=
+golang.org/x/text v0.36.0/go.mod h1:NIdBknypM8iqVmPiuco0Dh6P5Jcdk8lJL0CUebqK164=
+golang.org/x/text v0.37.0 h1:Cqjiwd9eSg8e0QAkyCaQTNHFIIzWtidPahFWR83rTrc=
+golang.org/x/text v0.37.0/go.mod h1:a5sjxXGs9hsn/AJVwuElvCAo9v8QYLzvavO5z2PiM38=
diff --git a/imgs/Screenshot_2026-05-16_00-32-01.png b/imgs/Screenshot_2026-05-16_00-32-01.png
new file mode 100644
index 0000000..ca7f684
Binary files /dev/null and b/imgs/Screenshot_2026-05-16_00-32-01.png differ
diff --git a/internal/hub/hub.go b/internal/hub/hub.go
new file mode 100644
index 0000000..61a65d7
--- /dev/null
+++ b/internal/hub/hub.go
@@ -0,0 +1,145 @@
+// Package hub fans out live UDP frames to connected WebSocket clients.
+//
+// A slow or stalled client cannot block the broadcast path: each client owns
+// a buffered send channel and is dropped if the channel fills up.
+package hub
+
+import (
+	"encoding/json"
+	"log/slog"
+	"sync"
+	"sync/atomic"
+
+	"github.com/gofiber/websocket/v2"
+)
+
+// Client is a connected live websocket viewer with its own send queue.
+type Client struct {
+	conn   *websocket.Conn
+	send   chan []byte
+	closed atomic.Bool
+}
+
+func (c *Client) close() {
+	if c.closed.CompareAndSwap(false, true) {
+		close(c.send)
+		_ = c.conn.Close()
+	}
+}
+
+// Addr returns the client's remote address as a string.
+func (c *Client) Addr() string { return c.conn.RemoteAddr().String() }
+
+// Hub fans out the latest state to all connected live clients.
+type Hub struct {
+	mu      sync.RWMutex
+	clients map[*Client]struct{}
+	latest  atomic.Pointer[[]byte] // most recent broadcast frame, for bootstrapping new clients
+	events  chan []byte            // out-of-band server→client events
+}
+
+// New constructs a Hub and starts its event pump.
+func New() *Hub {
+	h := &Hub{
+		clients: make(map[*Client]struct{}),
+		events:  make(chan []byte, 32),
+	}
+	go h.eventPump()
+	return h
+}
+
+func (h *Hub) eventPump() {
+	for msg := range h.events {
+		h.Broadcast(msg)
+	}
+}
+
+// PublishEvent JSON-encodes payload and best-effort fans it out to all clients.
+func (h *Hub) PublishEvent(payload any) {
+	b, err := json.Marshal(payload)
+	if err != nil {
+		return
+	}
+	select {
+	case h.events <- b:
+	default:
+	}
+}
+
+// Add registers a new client and immediately sends the latest snapshot.
+func (h *Hub) Add(conn *websocket.Conn) *Client {
+	cl := &Client{conn: conn, send: make(chan []byte, 64)}
+	go cl.writer()
+
+	h.mu.Lock()
+	h.clients[cl] = struct{}{}
+	h.mu.Unlock()
+
+	if latest := h.latest.Load(); latest != nil {
+		select {
+		case cl.send <- *latest:
+		default:
+		}
+	}
+	return cl
+}
+
+// Remove unregisters and closes a client.
+func (h *Hub) Remove(cl *Client) {
+	h.mu.Lock()
+	delete(h.clients, cl)
+	h.mu.Unlock()
+	cl.close()
+}
+
+// Broadcast publishes data with non-blocking sends; clients whose queues are
+// full are dropped.
+func (h *Hub) Broadcast(data []byte) {
+	cp := make([]byte, len(data))
+	copy(cp, data)
+	h.latest.Store(&cp)
+
+	var drop []*Client
+	h.mu.RLock()
+	for cl := range h.clients {
+		select {
+		case cl.send <- data:
+		default:
+			drop = append(drop, cl)
+		}
+	}
+	h.mu.RUnlock()
+
+	if len(drop) == 0 {
+		return
+	}
+	h.mu.Lock()
+	for _, cl := range drop {
+		delete(h.clients, cl)
+	}
+	h.mu.Unlock()
+	for _, cl := range drop {
+		slog.Warn("dropping slow client", "addr", cl.Addr())
+		cl.close()
+	}
+}
+
+// Count returns the number of connected live clients.
+func (h *Hub) Count() int {
+	h.mu.RLock()
+	defer h.mu.RUnlock()
+	return len(h.clients)
+}
+
+// writer drains the client's send queue, writing frames to its websocket.
+func (c *Client) writer() {
+	for msg := range c.send {
+		if err := c.conn.WriteMessage(websocket.TextMessage, msg); err != nil {
+			c.closed.Store(true)
+			_ = c.conn.Close()
+			for range c.send {
+			}
+			return
+		}
+	}
+}
diff --git a/internal/recording/db.go b/internal/recording/db.go
new file mode 100644
index 0000000..0635d71
--- /dev/null
+++ b/internal/recording/db.go
@@ -0,0 +1,169 @@
+// Package recording handles persistence (SQLite), capture (Recorder), and
+// playback (Player) of UDP telemetry frames.
+package recording
+
+import (
+	"database/sql"
+	"fmt"
+	"log/slog"
+	"os"
+	"time"
+
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/hub"
+)
+
+// Info is the JSON shape returned by /api/recordings.
+type Info struct {
+	ID         int64  `json:"id"`
+	Name       string `json:"name"`
+	CreatedAt  string `json:"created_at"`
+	Frames     int    `json:"frames"`
+	DurationMs int64  `json:"duration_ms"`
+}
+
+// OpenDB opens (or creates) the SQLite database and ensures the schema is
+// up-to-date, performing any necessary additive migrations.
+func OpenDB(path string) (*sql.DB, error) {
+	db, err := sql.Open("sqlite3", path+"?_pragma=journal_mode(WAL)&_pragma=synchronous(NORMAL)&_pragma=foreign_keys(ON)")
+	if err != nil {
+		return nil, fmt.Errorf("open: %w", err)
+	}
+	db.SetMaxOpenConns(4)
+
+	if _, err := db.Exec(`
+		CREATE TABLE IF NOT EXISTS recordings (
+			id INTEGER PRIMARY KEY AUTOINCREMENT,
+			name TEXT NOT NULL,
+			created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+			frames INTEGER DEFAULT 0,
+			duration_ms INTEGER DEFAULT 0
+		);
+		CREATE TABLE IF NOT EXISTS frames (
+			id INTEGER PRIMARY KEY AUTOINCREMENT,
+			recording_id INTEGER NOT NULL,
+			offset_ms INTEGER NOT NULL,
+			data BLOB NOT NULL,
+			FOREIGN KEY (recording_id) REFERENCES recordings(id) ON DELETE CASCADE
+		);
+		CREATE INDEX IF NOT EXISTS idx_frames_recording ON frames(recording_id, offset_ms);
+		CREATE INDEX IF NOT EXISTS idx_recordings_created_at ON recordings(created_at);
+	`); err != nil {
+		return nil, fmt.Errorf("create tables: %w", err)
+	}
+
+	if !columnExists(db, "frames", "codec") {
+		if _, err := db.Exec(`ALTER TABLE frames ADD COLUMN codec INTEGER NOT NULL DEFAULT 0`); err != nil {
+			return nil, fmt.Errorf("add codec column: %w", err)
+		}
+		slog.Info("migration: added frames.codec column")
+	}
+
+	return db, nil
+}
+
+func columnExists(db *sql.DB, table, col string) bool {
+	rows, err := db.Query(fmt.Sprintf("PRAGMA table_info(%s)", table))
+	if err != nil {
+		return false
+	}
+	defer rows.Close()
+	for rows.Next() {
+		var cid int
+		var name, ctype string
+		var notnull, pk int
+		var dflt sql.NullString
+		if err := rows.Scan(&cid, &name, &ctype, &notnull, &dflt, &pk); err != nil {
+			continue
+		}
+		if name == col {
+			return true
+		}
+	}
+	return false
+}
+
+// List returns recordings ordered newest-first.
+// since: optional RFC3339 timestamp lower bound (empty disables).
+// limit: max rows (0 = no limit).
+func List(db *sql.DB, since string, limit int) ([]Info, error) {
+	q := `SELECT id, name, created_at, frames, duration_ms FROM recordings`
+	args := []any{}
+	if since != "" {
+		if t, err := time.Parse(time.RFC3339, since); err == nil {
+			q += ` WHERE created_at >= ?`
+			args = append(args, t.UTC().Format("2006-01-02 15:04:05"))
+		}
+	}
+	q += ` ORDER BY created_at DESC`
+	if limit > 0 {
+		q += ` LIMIT ?`
+		args = append(args, limit)
+	}
+	rows, err := db.Query(q, args...)
+	if err != nil {
+		return nil, err
+	}
+	defer rows.Close()
+	out := []Info{}
+	for rows.Next() {
+		var r Info
+		if err := rows.Scan(&r.ID, &r.Name, &r.CreatedAt, &r.Frames, &r.DurationMs); err != nil {
+			continue
+		}
+		out = append(out, r)
+	}
+	return out, nil
+}
+
+// Delete removes a recording by ID. CASCADE drops associated frames.
+// Returns the rows affected.
+func Delete(db *sql.DB, id int64) (int64, error) {
+	res, err := db.Exec(`DELETE FROM recordings WHERE id = ?`, id)
+	if err != nil {
+		return 0, err
+	}
+	n, _ := res.RowsAffected()
+	return n, nil
+}
+
+// CleanOld removes recordings older than retention and emits deletion events
+// to the hub.
+func CleanOld(db *sql.DB, h *hub.Hub, retention time.Duration) {
+	cutoff := time.Now().Add(-retention).UTC().Format("2006-01-02 15:04:05")
+	rows, err := db.Query(`SELECT id FROM recordings WHERE created_at < ?`, cutoff)
+	if err != nil {
+		slog.Error("cleanup query error", "err", err)
+		return
+	}
+	var ids []int64
+	for rows.Next() {
+		var id int64
+		if err := rows.Scan(&id); err == nil {
+			ids = append(ids, id)
+		}
+	}
+	rows.Close()
+	if len(ids) == 0 {
+		return
+	}
+	if _, err := db.Exec(`DELETE FROM recordings WHERE created_at < ?`, cutoff); err != nil {
+		slog.Error("cleanup error", "err", err)
+		return
+	}
+	slog.Info("cleaned old recordings", "n", len(ids))
+	for _, id := range ids {
+		h.PublishEvent(map[string]any{
+			"type": "event", "kind": "recording_deleted",
+			"recording": map[string]any{"id": id},
+		})
+	}
+}
+
+// DBSize returns the size of the database file in bytes, or 0 if it cannot
+// be stat'd.
+func DBSize(path string) int64 {
+	if fi, err := os.Stat(path); err == nil {
+		return fi.Size()
+	}
+	return 0
+}
diff --git a/internal/recording/player.go b/internal/recording/player.go
new file mode 100644
index 0000000..86a0b94
--- /dev/null
+++ b/internal/recording/player.go
@@ -0,0 +1,342 @@
+package recording
+
+import (
+	"database/sql"
+	"encoding/json"
+	"log/slog"
+	"strconv"
+	"sync"
+	"time"
+
+	"github.com/gofiber/websocket/v2"
+	"github.com/klauspost/compress/zstd"
+)
+
+// PlayerCmd is a client→server playback control message.
+type PlayerCmd struct {
+	Cmd   string  `json:"cmd"`
+	Ms    int64   `json:"ms,omitempty"`
+	Value float64 `json:"value,omitempty"`
+}
+
+// Player streams a single recording over a websocket with seek/pause/speed
+// controls. Frames are streamed from SQLite in a sliding window so memory use
+// is bounded.
+type Player struct {
+	db          *sql.DB
+	conn        *websocket.Conn
+	recordingID int64
+	totalFrames int
+	durationMs  int64
+	dec         *zstd.Decoder
+
+	mu         sync.Mutex
+	speed      float64
+	playing    bool
+	positionMs int64
+
+	cmdCh  chan PlayerCmd
+	stopCh chan struct{}
+}
+
+// NewPlayer constructs a Player bound to a websocket connection.
+func NewPlayer(db *sql.DB, conn *websocket.Conn, id int64) (*Player, error) {
+	dec, err := zstd.NewReader(nil)
+	if err != nil {
+		return nil, err
+	}
+	return &Player{
+		db:          db,
+		conn:        conn,
+		recordingID: id,
+		dec:         dec,
+		speed:       1.0,
+		playing:     true,
+		cmdCh:       make(chan PlayerCmd, 16),
+		stopCh:      make(chan struct{}),
+	}, nil
+}
+
+func (p *Player) sendJSON(v any) error {
+	b, err := json.Marshal(v)
+	if err != nil {
+		return err
+	}
+	return p.conn.WriteMessage(websocket.TextMessage, b)
+}
+
+func (p *Player) sendErr(msg string) { _ = p.sendJSON(map[string]any{"error": msg}) }
+
+func (p *Player) sendState() {
+	p.mu.Lock()
+	playing, speed, pos := p.playing, p.speed, p.positionMs
+	p.mu.Unlock()
+	_ = p.sendJSON(map[string]any{
+		"type": "playback_state", "playing": playing, "speed": speed, "position_ms": pos,
+	})
+}
+
+// Run executes the playback loop. It returns when playback ends, the client
+// stops it, or the connection drops.
+func (p *Player) Run() {
+	defer p.dec.Close()
+
+	var name string
+	if err := p.db.QueryRow(`SELECT name FROM recordings WHERE id = ?`, p.recordingID).Scan(&name); err != nil {
+		p.sendErr("recording not found")
+		return
+	}
+	if err := p.db.QueryRow(`SELECT COUNT(*), COALESCE(MAX(offset_ms),0) FROM frames WHERE recording_id = ?`, p.recordingID).
+		Scan(&p.totalFrames, &p.durationMs); err != nil {
+		p.sendErr("failed to read recording")
+		return
+	}
+	if p.totalFrames == 0 {
+		p.sendErr("no frames in recording")
+		return
+	}
+
+	_ = p.sendJSON(map[string]any{
+		"type": "playback_start", "name": name,
+		"frames": p.totalFrames, "duration_ms": p.durationMs,
+	})
+
+	go p.readCommands()
+
+	const prefetch = 256
+	type frame struct {
+		ms    int64
+		data  []byte
+		codec int
+	}
+	var buf []frame
+	cursor := int64(-1)
+	frameIdx := 0
+
+	refill := func(fromMs int64) error {
+		buf = buf[:0]
+		rows, err := p.db.Query(
+			`SELECT offset_ms, data, codec FROM frames WHERE recording_id = ? AND offset_ms >= ? ORDER BY offset_ms LIMIT ?`,
+			p.recordingID, fromMs, prefetch)
+		if err != nil {
+			return err
+		}
+		defer rows.Close()
+		for rows.Next() {
+			var f frame
+			if err := rows.Scan(&f.ms, &f.data, &f.codec); err != nil {
+				continue
+			}
+			buf = append(buf, f)
+		}
+		return nil
+	}
+
+	doSeek := func(targetMs int64) {
+		if targetMs < 0 {
+			targetMs = 0
+		}
+		if targetMs > p.durationMs {
+			targetMs = p.durationMs
+		}
+		p.mu.Lock()
+		p.positionMs = targetMs
+		p.mu.Unlock()
+		cursor = targetMs - 1
+		buf = buf[:0]
+		var idx int
+		if err := p.db.QueryRow(
+			`SELECT COUNT(*) FROM frames WHERE recording_id = ? AND offset_ms < ?`,
+			p.recordingID, targetMs).Scan(&idx); err == nil {
+			frameIdx = idx
+		}
+		p.sendState()
+	}
+
+	if err := refill(0); err != nil {
+		p.sendErr("read error")
+		return
+	}
+	p.sendState()
+
+	anchorWall := time.Now()
+	anchorPos := int64(0)
+
+	timer := time.NewTimer(time.Hour)
+	defer timer.Stop()
+
+	armTimer := func() {
+		p.mu.Lock()
+		playing, speed, pos := p.playing, p.speed, p.positionMs
+		p.mu.Unlock()
+
+		if !playing || len(buf) == 0 {
+			if !timer.Stop() {
+				select {
+				case <-timer.C:
+				default:
+				}
+			}
+			timer.Reset(time.Hour)
+			return
+		}
+		next := buf[0]
+		delta := time.Duration(float64(next.ms-pos)/speed) * time.Millisecond
+		if delta < 0 {
+			delta = 0
+		}
+		if !timer.Stop() {
+			select {
+			case <-timer.C:
+			default:
+			}
+		}
+		timer.Reset(delta)
+	}
+
+	armTimer()
+
+	stateBroadcast := time.NewTicker(250 * time.Millisecond)
+	defer stateBroadcast.Stop()
+
+	for {
+		select {
+		case <-p.stopCh:
+			return
+
+		case cmd := <-p.cmdCh:
+			switch cmd.Cmd {
+			case "play":
+				p.mu.Lock()
+				if !p.playing {
+					p.playing = true
+					anchorWall = time.Now()
+					anchorPos = p.positionMs
+				}
+				p.mu.Unlock()
+				p.sendState()
+				armTimer()
+			case "pause":
+				p.mu.Lock()
+				if p.playing {
+					elapsed := time.Since(anchorWall)
+					p.positionMs = anchorPos + int64(float64(elapsed.Milliseconds())*p.speed)
+					if p.positionMs > p.durationMs {
+						p.positionMs = p.durationMs
+					}
+					p.playing = false
+				}
+				p.mu.Unlock()
+				p.sendState()
+				armTimer()
+			case "speed":
+				p.mu.Lock()
+				if cmd.Value > 0 && cmd.Value <= 16 {
+					if p.playing {
+						elapsed := time.Since(anchorWall)
+						p.positionMs = anchorPos + int64(float64(elapsed.Milliseconds())*p.speed)
+					}
+					p.speed = cmd.Value
+					anchorWall = time.Now()
+					anchorPos = p.positionMs
+				}
+				p.mu.Unlock()
+				p.sendState()
+				armTimer()
+			case "seek":
+				doSeek(cmd.Ms)
+				if err := refill(cmd.Ms); err != nil {
+					p.sendErr("read error")
+					return
+				}
+				p.mu.Lock()
+				anchorWall = time.Now()
+				anchorPos = p.positionMs
+				p.mu.Unlock()
+				armTimer()
+			case "stop":
+				return
+			}
+
+		case <-stateBroadcast.C:
+			p.mu.Lock()
+			if p.playing {
+				elapsed := time.Since(anchorWall)
+				p.positionMs = anchorPos + int64(float64(elapsed.Milliseconds())*p.speed)
+				if p.positionMs > p.durationMs {
+					p.positionMs = p.durationMs
+				}
+			}
+			p.mu.Unlock()
+			p.sendState()
+
+		case <-timer.C:
+			p.mu.Lock()
+			if !p.playing {
+				p.mu.Unlock()
+				armTimer()
+				continue
+			}
+			elapsed := time.Since(anchorWall)
+			pos := anchorPos + int64(float64(elapsed.Milliseconds())*p.speed)
+			p.positionMs = pos
+			p.mu.Unlock()
+
+			for len(buf) > 0 && buf[0].ms <= p.positionMs {
+				f := buf[0]
+				buf = buf[1:]
+				data := f.data
+				if f.codec == 1 {
+					out, err := p.dec.DecodeAll(f.data, nil)
+					if err != nil {
+						slog.Warn("frame decode failed", "err", err)
+						continue
+					}
+					data = out
+				}
+				frameIdx++
+				msg := append([]byte(nil), `{"type":"playback_frame","offset_ms":`...)
+				msg = strconv.AppendInt(msg, f.ms, 10)
+				msg = append(msg, `,"frame":`...)
+				msg = strconv.AppendInt(msg, int64(frameIdx), 10)
+				msg = append(msg, `,"data":`...)
+				msg = append(msg, data...)
+				msg = append(msg, '}')
+				if err := p.conn.WriteMessage(websocket.TextMessage, msg); err != nil {
+					return
+				}
+				cursor = f.ms
+			}
+
+			if len(buf) == 0 {
+				if err := refill(cursor + 1); err != nil {
+					p.sendErr("read error")
+					return
+				}
+				if len(buf) == 0 {
+					_ = p.sendJSON(map[string]any{"type": "playback_end"})
+					return
+				}
+			}
+			armTimer()
+		}
+	}
+}
+
+func (p *Player) readCommands() {
+	for {
+		_, msg, err := p.conn.ReadMessage()
+		if err != nil {
+			close(p.stopCh)
+			return
+		}
+		var cmd PlayerCmd
+		if err := json.Unmarshal(msg, &cmd); err != nil {
+			continue
+		}
+		select {
+		case p.cmdCh <- cmd:
+		default:
+		}
+	}
+}
diff --git a/internal/recording/recorder.go b/internal/recording/recorder.go
new file mode 100644
index 0000000..9fe9168
--- /dev/null
+++ b/internal/recording/recorder.go
@@ -0,0 +1,238 @@
+package recording
+
+import (
+	"database/sql"
+	"log/slog"
+	"time"
+
+	"github.com/klauspost/compress/zstd"
+
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/hub"
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/stats"
+)
+
+const (
+	flushBatchSize = 64
+	flushInterval  = 100 * time.Millisecond
+	framesChanCap  = 1024
+	idleTimeout    = 5 * time.Second
+)
+
+type rawFrame struct {
+	t    time.Time
+	data []byte
+}
+
+// Recorder receives raw UDP frames and persists them in batched, optionally
+// zstd-compressed inserts to SQLite. A single writer goroutine owns the DB
+// handles so there is no contention on the UDP hot path.
+type Recorder struct {
+	db       *sql.DB
+	hub      *hub.Hub
+	frames   chan rawFrame
+	compress bool
+	enc      *zstd.Encoder
+
+	// session bookkeeping (writer-goroutine-owned)
+	sessionID   int64
+	sessionName string
+	startTime   time.Time
+	frameCount  int
+	lastFrameAt time.Time
+
+	insertFrame   *sql.Stmt
+	insertSession *sql.Stmt
+	updateSession *sql.Stmt
+
+	doneCh    chan struct{}
+	stoppedCh chan struct{}
+}
+
+// NewRecorder constructs a Recorder. Call Start to launch the writer goroutine.
+func NewRecorder(db *sql.DB, h *hub.Hub, compress bool) (*Recorder, error) {
+	r := &Recorder{
+		db:        db,
+		hub:       h,
+		frames:    make(chan rawFrame, framesChanCap),
+		compress:  compress,
+		doneCh:    make(chan struct{}),
+		stoppedCh: make(chan struct{}),
+	}
+	var err error
+	if r.insertFrame, err = db.Prepare(`INSERT INTO frames(recording_id, offset_ms, data, codec) VALUES(?,?,?,?)`); err != nil {
+		return nil, err
+	}
+	if r.insertSession, err = db.Prepare(`INSERT INTO recordings(name) VALUES(?)`); err != nil {
+		return nil, err
+	}
+	if r.updateSession, err = db.Prepare(`UPDATE recordings SET frames=?, duration_ms=? WHERE id=?`); err != nil {
+		return nil, err
+	}
+	if compress {
+		enc, err := zstd.NewWriter(nil, zstd.WithEncoderLevel(zstd.SpeedDefault))
+		if err != nil {
+			return nil, err
+		}
+		r.enc = enc
+	}
+	return r, nil
+}
+
+// Submit hands a UDP packet to the recorder. Non-blocking: if the queue is
+// full the frame is dropped and counted in stats.FramesDropped.
+func (r *Recorder) Submit(data []byte) {
+	cp := make([]byte, len(data))
+	copy(cp, data)
+	select {
+	case r.frames <- rawFrame{t: time.Now(), data: cp}:
+	default:
+		stats.Global.FramesDropped.Add(1)
+	}
+}
+
+// Start launches the writer goroutine. Stop must be called to flush.
+func (r *Recorder) Start() { go r.run() }
+
+// Stop signals the writer to drain the queue and exit, then waits for it.
+func (r *Recorder) Stop() {
+	close(r.doneCh)
+	<-r.stoppedCh
+}
+
+func (r *Recorder) run() {
+	defer close(r.stoppedCh)
+
+	ticker := time.NewTicker(flushInterval)
+	defer ticker.Stop()
+	idleCheck := time.NewTicker(idleTimeout / 2)
+	defer idleCheck.Stop()
+
+	batch := make([]rawFrame, 0, flushBatchSize)
+	flush := func() {
+		if len(batch) == 0 {
+			return
+		}
+		if err := r.writeBatch(batch); err != nil {
+			slog.Error("flush batch failed", "err", err, "n", len(batch))
+		}
+		batch = batch[:0]
+	}
+
+	for {
+		select {
+		case <-r.doneCh:
+		drain:
+			for {
+				select {
+				case f := <-r.frames:
+					batch = append(batch, f)
+					if len(batch) >= flushBatchSize {
+						flush()
+					}
+				default:
+					break drain
+				}
+			}
+			flush()
+			r.finalizeSession()
+			return
+
+		case f := <-r.frames:
+			batch = append(batch, f)
+			if len(batch) >= flushBatchSize {
+				flush()
+			}
+
+		case <-ticker.C:
+			flush()
+
+		case <-idleCheck.C:
+			if r.sessionID != 0 && time.Since(r.lastFrameAt) > idleTimeout {
+				flush()
+				r.finalizeSession()
+			}
+		}
+	}
+}
+
+// writeBatch persists frames within a single transaction. If no session is
+// active, one is started using the first frame's timestamp.
+func (r *Recorder) writeBatch(batch []rawFrame) error {
+	tx, err := r.db.Begin()
+	if err != nil {
+		return err
+	}
+
+	if r.sessionID == 0 {
+		first := batch[0].t
+		r.sessionName = first.Format("2006-01-02_15-04-05")
+		res, err := tx.Stmt(r.insertSession).Exec(r.sessionName)
+		if err != nil {
+			_ = tx.Rollback()
+			return err
+		}
+		r.sessionID, _ = res.LastInsertId()
+		r.startTime = first
+		r.frameCount = 0
+		slog.Info("recording started", "name", r.sessionName, "id", r.sessionID)
+		r.hub.PublishEvent(map[string]any{
+			"type": "event", "kind": "recording_started",
+			"recording": map[string]any{"id": r.sessionID, "name": r.sessionName},
+		})
+	}
+
+	stmt := tx.Stmt(r.insertFrame)
+	for _, f := range batch {
+		payload := f.data
+		codec := 0
+		stats.Global.BytesBeforeCompr.Add(int64(len(payload)))
+		if r.compress && r.enc != nil {
+			payload = r.enc.EncodeAll(f.data, make([]byte, 0, len(f.data)/2+64))
+			codec = 1
+		}
+		stats.Global.BytesAfterCompr.Add(int64(len(payload)))
+		offset := f.t.Sub(r.startTime).Milliseconds()
+		if _, err := stmt.Exec(r.sessionID, offset, payload, codec); err != nil {
+			_ = tx.Rollback()
+			return err
+		}
+		r.frameCount++
+		r.lastFrameAt = f.t
+		stats.Global.FramesWritten.Add(1)
+	}
+	return tx.Commit()
+}
+
+func (r *Recorder) finalizeSession() {
+	if r.sessionID == 0 {
+		return
+	}
+	duration := r.lastFrameAt.Sub(r.startTime).Milliseconds()
+	if _, err := r.updateSession.Exec(r.frameCount, duration, r.sessionID); err != nil {
+		slog.Error("finalize session failed", "err", err)
+	}
+	slog.Info("recording stopped", "name", r.sessionName, "frames", r.frameCount, "duration_ms", duration)
+	r.hub.PublishEvent(map[string]any{
+		"type": "event", "kind": "recording_stopped",
+		"recording": map[string]any{
+			"id": r.sessionID, "name": r.sessionName,
+			"frames": r.frameCount, "duration_ms": duration,
+		},
+	})
+	r.sessionID = 0
+	r.sessionName = ""
+	r.frameCount = 0
+}
+
+// CurrentSession returns a snapshot of the active recording, or zero values
+// if none. Reads are not strictly synchronized; slight staleness is acceptable
+// for the /api/stats endpoint.
+func (r *Recorder) CurrentSession() (id int64, name string, frames int, elapsedMs int64) {
+	id = r.sessionID
+	name = r.sessionName
+	frames = r.frameCount
+	if id != 0 {
+		elapsedMs = time.Since(r.startTime).Milliseconds()
+	}
+	return
+}
diff --git a/internal/server/auth.go b/internal/server/auth.go
new file mode 100644
index 0000000..2c3d4f6
--- /dev/null
+++ b/internal/server/auth.go
@@ -0,0 +1,107 @@
+// Package server wires HTTP/WS routes and the UDP listener to the rest of
+// the application. It owns the Fiber app and the autocert setup.
+package server
+
+import (
+	"context"
+	"crypto/subtle"
+	"encoding/base64"
+	"log/slog"
+	"net"
+	"os"
+	"strings"
+	"time"
+
+	"github.com/gofiber/fiber/v2"
+	"github.com/gofiber/websocket/v2"
+
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/hub"
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/recording"
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/stats"
+)
+
+// AuthMiddleware returns a Fiber handler enforcing HTTP Basic Auth with the
+// given password. WebSocket upgrades skip auth because browsers cannot
+// reliably supply Authorization headers on WS; the page itself is gated.
+func AuthMiddleware(password string) fiber.Handler {
+	expected := "Basic " + base64.StdEncoding.EncodeToString([]byte(":"+password))
+	expectedBytes := []byte(expected)
+
+	return func(c *fiber.Ctx) error {
+		if websocket.IsWebSocketUpgrade(c) {
+			return c.Next()
+		}
+
+		deny := func() error {
+			c.Set("WWW-Authenticate", `Basic realm="Restricted"`)
+			return c.Status(fiber.StatusUnauthorized).SendString("Unauthorized")
+		}
+
+		auth := c.Get("Authorization")
+		if auth == "" {
+			return deny()
+		}
+		if subtle.ConstantTimeCompare([]byte(auth), expectedBytes) == 1 {
+			return c.Next()
+		}
+		const scheme = "Basic "
+		if len(auth) < len(scheme) || auth[:len(scheme)] != scheme {
+			return deny()
+		}
+		decoded, err := base64.StdEncoding.DecodeString(auth[len(scheme):])
+		if err != nil {
+			decoded, err = base64.RawStdEncoding.DecodeString(auth[len(scheme):])
+			if err != nil {
+				return deny()
+			}
+		}
+		creds := strings.SplitN(string(decoded), ":", 2)
+		if len(creds) != 2 {
+			return deny()
+		}
+		if subtle.ConstantTimeCompare([]byte(creds[1]), []byte(password)) != 1 {
+			return deny()
+		}
+		return c.Next()
+	}
+}
+
+// ListenUDP reads UDP packets and submits them to the recorder and hub.
+// It exits on ctx cancellation.
+func ListenUDP(ctx context.Context, addr string, h *hub.Hub, rec *recording.Recorder) {
+	conn, err := net.ListenPacket("udp", addr)
+	if err != nil {
+		slog.Error("udp listen failed", "err", err)
+		os.Exit(1)
+	}
+	slog.Info("udp listening", "addr", addr)
+
+	go func() {
+		<-ctx.Done()
+		_ = conn.Close()
+	}()
+
+	buf := make([]byte, 65536)
+	for {
+		n, _, err := conn.ReadFrom(buf)
+		if err != nil {
+			if ctx.Err() != nil {
+				return
+			}
+			slog.Warn("udp read error", "err", err)
+			continue
+		}
+		stats.Global.UDPPackets.Add(1)
+		stats.Global.UDPBytes.Add(int64(n))
+		stats.Global.LastUDPPacketUnix.Store(time.Now().UnixNano())
+
+		data := buf[:n]
+		rec.Submit(data)
+
+		if h.Count() > 0 {
+			cp := make([]byte, n)
+			copy(cp, data)
+			h.Broadcast(cp)
+		}
+	}
+}
diff --git a/internal/server/listen.go b/internal/server/listen.go
new file mode 100644
index 0000000..d7e5d02
--- /dev/null
+++ b/internal/server/listen.go
@@ -0,0 +1,60 @@
+package server
+
+import (
+	"crypto/tls"
+	"errors"
+	"fmt"
+	"log/slog"
+	nethttp "net/http"
+
+	"github.com/gofiber/fiber/v2"
+	"golang.org/x/crypto/acme/autocert"
+)
+
+// Listen starts serving the app on either HTTPS w/ autocert (if domain is set)
+// or plain HTTP. It returns a channel that receives any startup error.
+//
+// httpAddr is used both as the plain HTTP listener and as the ACME challenge
+// listener when domain is set. tlsAddr is only used when domain is set.
+func Listen(app *fiber.App, httpAddr, tlsAddr, domain, certDir string) <-chan error {
+	errCh := make(chan error, 2)
+
+	if domain == "" {
+		slog.Info("no domain set; HTTP only", "addr", httpAddr)
+		go func() {
+			if err := app.Listen(httpAddr); err != nil {
+				errCh <- fmt.Errorf("http: %w", err)
+			}
+		}()
+		return errCh
+	}
+
+	cm := &autocert.Manager{
+		Prompt:     autocert.AcceptTOS,
+		HostPolicy: autocert.HostWhitelist(domain),
+		Cache:      autocert.DirCache(certDir),
+	}
+
+	if httpAddr != "" {
+		go func() {
+			slog.Info("starting HTTP server (ACME + redirect)", "addr", httpAddr)
+			srv := &nethttp.Server{Addr: httpAddr, Handler: cm.HTTPHandler(nil)}
+			if err := srv.ListenAndServe(); err != nil && !errors.Is(err, nethttp.ErrServerClosed) {
+				errCh <- fmt.Errorf("http: %w", err)
+			}
+		}()
+	}
+
+	slog.Info("starting HTTPS server with autocert", "addr", tlsAddr, "domain", domain)
+	ln, err := tls.Listen("tcp", tlsAddr, &tls.Config{GetCertificate: cm.GetCertificate})
+	if err != nil {
+		errCh <- fmt.Errorf("tls listen: %w", err)
+		return errCh
+	}
+	go func() {
+		if err := app.Listener(ln); err != nil {
+			errCh <- fmt.Errorf("https: %w", err)
+		}
+	}()
+	return errCh
+}
diff --git a/internal/server/server.go b/internal/server/server.go
new file mode 100644
index 0000000..04759f8
--- /dev/null
+++ b/internal/server/server.go
@@ -0,0 +1,176 @@
+package server
+
+import (
+	"database/sql"
+	"strconv"
+	"time"
+
+	"github.com/gofiber/fiber/v2"
+	"github.com/gofiber/fiber/v2/middleware/logger"
+	"github.com/gofiber/websocket/v2"
+	"log/slog"
+
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/assets"
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/hub"
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/recording"
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/stats"
+)
+
+// Options configures the Fiber app constructed by New.
+type Options struct {
+	Password           string
+	DBPath             string
+	Verbose            bool
+	Compress           bool
+	Retention          time.Duration
+	DB                 *sql.DB
+	Hub                *hub.Hub
+	Recorder           *recording.Recorder
+}
+
+// New constructs the Fiber application with all middleware and routes wired.
+func New(opt Options) *fiber.App {
+	app := fiber.New(fiber.Config{DisableStartupMessage: true})
+
+	app.Use(logger.New(logger.Config{
+		Format: "${time} ${method} ${path} ${status}\n",
+		Next: func(c *fiber.Ctx) bool {
+			if opt.Verbose {
+				return false
+			}
+			// Suppress noisy WS access logs by default.
+			path := c.Path()
+			return len(path) >= 3 && path[:3] == "/ws"
+		},
+	}))
+
+	app.Use(AuthMiddleware(opt.Password))
+
+	app.Get("/", func(c *fiber.Ctx) error {
+		data, err := assets.FS.ReadFile("viewer.html")
+		if err != nil {
+			return fiber.ErrInternalServerError
+		}
+		c.Set("Content-Type", "text/html; charset=utf-8")
+		return c.Send(data)
+	})
+
+	// Live WebSocket.
+	app.Use("/ws", upgradeOnly())
+	app.Get("/ws", websocket.New(func(c *websocket.Conn) {
+		cl := opt.Hub.Add(c)
+		slog.Info("client connected", "addr", c.RemoteAddr().String(), "total", opt.Hub.Count())
+		defer func() {
+			opt.Hub.Remove(cl)
+			slog.Info("client disconnected", "addr", c.RemoteAddr().String(), "total", opt.Hub.Count())
+		}()
+		for {
+			if _, _, err := c.ReadMessage(); err != nil {
+				return
+			}
+		}
+	}))
+
+	// Recording API.
+	app.Get("/api/recordings", func(c *fiber.Ctx) error {
+		since := c.Query("since", "")
+		limit, _ := strconv.Atoi(c.Query("limit", "0"))
+		recs, err := recording.List(opt.DB, since, limit)
+		if err != nil {
+			return c.Status(500).JSON(fiber.Map{"error": err.Error()})
+		}
+		return c.JSON(recs)
+	})
+
+	app.Delete("/api/recordings/:id", func(c *fiber.Ctx) error {
+		id, err := strconv.ParseInt(c.Params("id"), 10, 64)
+		if err != nil {
+			return c.Status(400).JSON(fiber.Map{"error": "invalid id"})
+		}
+		n, err := recording.Delete(opt.DB, id)
+		if err != nil {
+			return c.Status(500).JSON(fiber.Map{"error": err.Error()})
+		}
+		if n == 0 {
+			return c.Status(404).JSON(fiber.Map{"error": "not found"})
+		}
+		opt.Hub.PublishEvent(map[string]any{
+			"type": "event", "kind": "recording_deleted",
+			"recording": map[string]any{"id": id},
+		})
+		return c.JSON(fiber.Map{"ok": true})
+	})
+
+	app.Get("/api/stats", statsHandler(opt))
+
+	// Playback websocket.
+	app.Use("/ws/playback", upgradeOnly())
+	app.Get("/ws/playback", websocket.New(func(c *websocket.Conn) {
+		idStr := c.Query("id")
+		id, err := strconv.ParseInt(idStr, 10, 64)
+		if err != nil {
+			_ = c.WriteMessage(websocket.TextMessage, []byte(`{"error":"invalid id"}`))
+			return
+		}
+		slog.Info("playback start", "id", id, "addr", c.RemoteAddr().String())
+		p, err := recording.NewPlayer(opt.DB, c, id)
+		if err != nil {
+			_ = c.WriteMessage(websocket.TextMessage, []byte(`{"error":"player init failed"}`))
+			return
+		}
+		p.Run()
+		slog.Info("playback end", "id", id, "addr", c.RemoteAddr().String())
+	}))
+
+	return app
+}
+
+func upgradeOnly() fiber.Handler {
+	return func(c *fiber.Ctx) error {
+		if websocket.IsWebSocketUpgrade(c) {
+			return c.Next()
+		}
+		return fiber.ErrUpgradeRequired
+	}
+}
+
+func statsHandler(opt Options) fiber.Handler {
+	return func(c *fiber.Ctx) error {
+		dbSize := recording.DBSize(opt.DBPath)
+		lastUDP := stats.Global.LastUDPPacketUnix.Load()
+		var lastAgeMs int64 = -1
+		if lastUDP > 0 {
+			lastAgeMs = (time.Now().UnixNano() - lastUDP) / int64(time.Millisecond)
+		}
+		before := stats.Global.BytesBeforeCompr.Load()
+		after := stats.Global.BytesAfterCompr.Load()
+		var compressionRatio float64
+		if after > 0 {
+			compressionRatio = float64(before) / float64(after)
+		}
+		curID, curName, curFrames, curElapsed := opt.Recorder.CurrentSession()
+		var current any
+		if curID != 0 {
+			current = map[string]any{
+				"id": curID, "name": curName,
+				"frames": curFrames, "elapsed_ms": curElapsed,
+			}
+		}
+		return c.JSON(fiber.Map{
+			"uptime_s":               int64(time.Since(stats.Global.StartTime).Seconds()),
+			"udp_packets_total":      stats.Global.UDPPackets.Load(),
+			"udp_bytes_total":        stats.Global.UDPBytes.Load(),
+			"udp_last_packet_age_ms": lastAgeMs,
+			"ws_clients":             opt.Hub.Count(),
+			"frames_written_total":   stats.Global.FramesWritten.Load(),
+			"frames_dropped_total":   stats.Global.FramesDropped.Load(),
+			"bytes_before_compr":     before,
+			"bytes_after_compr":      after,
+			"compression_ratio":      compressionRatio,
+			"db_size_bytes":          dbSize,
+			"current_recording":      current,
+			"retention_hours":        opt.Retention.Hours(),
+			"compression_enabled":    opt.Compress,
+		})
+	}
+}
diff --git a/internal/stats/stats.go b/internal/stats/stats.go
new file mode 100644
index 0000000..4d2df77
--- /dev/null
+++ b/internal/stats/stats.go
@@ -0,0 +1,23 @@
+// Package stats holds process-wide observability counters shared across packages.
+package stats
+
+import (
+	"sync/atomic"
+	"time"
+)
+
+// Stats are process-wide atomic counters. A single global instance is used so
+// any package can record events without dependency injection plumbing.
+type Stats struct {
+	StartTime         time.Time
+	UDPPackets        atomic.Int64
+	UDPBytes          atomic.Int64
+	FramesWritten     atomic.Int64
+	FramesDropped     atomic.Int64
+	BytesBeforeCompr  atomic.Int64
+	BytesAfterCompr   atomic.Int64
+	LastUDPPacketUnix atomic.Int64 // unix nanos; 0 = never
+}
+
+// Global is the singleton used by all packages.
+var Global = &Stats{StartTime: time.Now()}
diff --git a/main.go b/main.go
new file mode 100644
index 0000000..b60d8fe
--- /dev/null
+++ b/main.go
@@ -0,0 +1,133 @@
+// RocketLeagueBot-Renderer
+//
+// Live UDP ingest + WebSocket fan-out + SQLite recording/playback for
+// RocketSimVis-compatible state telemetry.
+//
+// Architecture:
+//
+//	bot ──UDP──▶ server.ListenUDP ──▶ hub.Broadcast ──WS──▶ live viewers
+//	                            │
+//	                            └──▶ recording.Recorder (batched, zstd) ──▶ SQLite
+//	                                                                         │
+//	                                                                         └──▶ recording.Player ──WS──▶ playback viewers
+package main
+
+import (
+	"context"
+	"flag"
+	"log/slog"
+	"os"
+	"os/signal"
+	"strings"
+	"syscall"
+	"time"
+
+	_ "github.com/ncruces/go-sqlite3/driver"
+
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/hub"
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/recording"
+	"git.destefano.cloud/fdestefano/RocketLeagueBot-Renderer/internal/server"
+)
+
+var (
+	httpAddr  = flag.String("http", ":80", "HTTP listen address (must be :80 for autocert)")
+	udpAddr   = flag.String("udp", ":9273", "UDP listen address (RocketSimVis port)")
+	tlsAddr   = flag.String("tls", ":443", "HTTPS listen address with autocert")
+	domain    = flag.String("domain", "", "Domain for autocert (e.g., example.com)")
+	password  = flag.String("password", "", "Password to protect the viewer (required)")
+	certDir   = flag.String("certdir", "./certs", "Directory for storing certificates")
+	dbPath    = flag.String("db", "./recordings.db", "Path to SQLite database for recordings")
+	retention = flag.Duration("retention", 7*24*time.Hour, "How long to keep recordings (e.g., 72h)")
+	compress  = flag.Bool("compress", true, "Compress recorded frames with zstd")
+	verbose   = flag.Bool("verbose", false, "Verbose HTTP request logging (including WS upgrades)")
+	logLevel  = flag.String("log-level", "info", "Log level: debug|info|warn|error")
+)
+
+func setupLogger() {
+	var level slog.Level
+	switch strings.ToLower(*logLevel) {
+	case "debug":
+		level = slog.LevelDebug
+	case "warn":
+		level = slog.LevelWarn
+	case "error":
+		level = slog.LevelError
+	default:
+		level = slog.LevelInfo
+	}
+	slog.SetDefault(slog.New(slog.NewTextHandler(os.Stderr, &slog.HandlerOptions{Level: level})))
+}
+
+func main() {
+	flag.Parse()
+	setupLogger()
+
+	if *password == "" {
+		slog.Error("password flag is required (use -password=yourpassword)")
+		os.Exit(1)
+	}
+
+	ctx, cancel := signal.NotifyContext(context.Background(), os.Interrupt, syscall.SIGTERM)
+	defer cancel()
+
+	h := hub.New()
+
+	db, err := recording.OpenDB(*dbPath)
+	if err != nil {
+		slog.Error("db open failed", "err", err)
+		os.Exit(1)
+	}
+	defer db.Close()
+
+	rec, err := recording.NewRecorder(db, h, *compress)
+	if err != nil {
+		slog.Error("recorder init failed", "err", err)
+		os.Exit(1)
+	}
+	rec.Start()
+	defer rec.Stop()
+
+	// Retention cleanup: once at boot, then hourly.
+	recording.CleanOld(db, h, *retention)
+	go func() {
+		t := time.NewTicker(time.Hour)
+		defer t.Stop()
+		for {
+			select {
+			case <-ctx.Done():
+				return
+			case <-t.C:
+				recording.CleanOld(db, h, *retention)
+			}
+		}
+	}()
+
+	go server.ListenUDP(ctx, *udpAddr, h, rec)
+
+	app := server.New(server.Options{
+		Password:  *password,
+		DBPath:    *dbPath,
+		Verbose:   *verbose,
+		Compress:  *compress,
+		Retention: *retention,
+		DB:        db,
+		Hub:       h,
+		Recorder:  rec,
+	})
+
+	serverErrCh := server.Listen(app, *httpAddr, *tlsAddr, *domain, *certDir)
+
+	select {
+	case <-ctx.Done():
+		slog.Info("shutdown signal received")
+	case err := <-serverErrCh:
+		slog.Error("server error", "err", err)
+	}
+
+	shutdownCtx, shutdownCancel := context.WithTimeout(context.Background(), 5*time.Second)
+	defer shutdownCancel()
+	if err := app.ShutdownWithContext(shutdownCtx); err != nil {
+		slog.Warn("app shutdown error", "err", err)
+	}
+	slog.Info("bye")
+}