diff --git a/cmd/acb-wasm/main.go b/cmd/acb-wasm/main.go
index 10bb182..a56ea12 100644
--- a/cmd/acb-wasm/main.go
+++ b/cmd/acb-wasm/main.go
@@ -1,18 +1,15 @@
 //go:build js && wasm
 
 // Package main is compiled with GOOS=js GOARCH=wasm to produce engine.wasm.
-// It exposes three functions on the global acbEngine object:
+// It exposes functions on the global acbEngine object:
 //
-//	acbEngine.loadState(stateJSON)    – load a serialised GameState
-//	acbEngine.step(movesJSON)         – advance one turn; returns {state,result}
-//	acbEngine.runMatch(configJSON)    – run a full match; returns {replay,result}
-//
-// Example (JavaScript):
-//
-//	const go = new Go();
-//	WebAssembly.instantiateStreaming(fetch('/wasm/engine.wasm'), go.importObject)
-//	  .then(({instance}) => { go.run(instance); });
-//	// acbEngine is now available
+//	acbEngine.loadState(stateJSON)      – load a serialised GameState
+//	acbEngine.step(movesJSON)           – advance one turn; returns {state,result}
+//	acbEngine.runMatch(configJSON)      – run a full 2-player match with built-in bots
+//	acbEngine.addPlayer(name, fn)       – register a player with a JS callback strategy
+//	acbEngine.clearPlayers()            – clear all registered players
+//	acbEngine.runMatchMulti(configJSON) – run a match with all registered players
+//	acbEngine.version                   – version string
 package main
 
 import (
@@ -26,25 +23,55 @@ import (
 
 // matchSession holds a running match for turn-by-turn access.
 type matchSession struct {
-	gs      *engine.GameState
-	bots    []engine.BotInterface
+	gs       *engine.GameState
+	bots     []engine.BotInterface
 	recorder *engine.ReplayWriter
 }
 
 var session *matchSession
 
+// jsPlayers holds JS callback strategies registered via addPlayer.
+var jsPlayers []jsPlayerEntry
+
+type jsPlayerEntry struct {
+	name string
+	fn   js.Value // JS function: (stateJSON: string) => string (moves JSON)
+}
+
+// jsBot wraps a JS callback as an engine.BotInterface.
+type jsBot struct {
+	fn js.Value
+}
+
+func (b *jsBot) GetMoves(state *engine.VisibleState) ([]engine.Move, error) {
+	stateJSON, err := json.Marshal(state)
+	if err != nil {
+		return nil, err
+	}
+
+	result := b.fn.Invoke(string(stateJSON))
+	if result.IsUndefined() || result.IsNull() {
+		return []engine.Move{}, nil
+	}
+
+	var moves []engine.Move
+	if err := json.Unmarshal([]byte(result.String()), &moves); err != nil {
+		return []engine.Move{}, nil
+	}
+	return moves, nil
+}
+
 // jsLoadState parses a serialised GameState JSON and stores it as the active session.
 // Signature: acbEngine.loadState(stateJSON: string) => {ok:bool, error?:string}
 func jsLoadState(_ js.Value, args []js.Value) interface{} {
 	if len(args) < 1 {
 		return jsErr("stateJSON argument required")
 	}
-	// For now, we expect an initialisation config rather than a full state dump.
 	type initRequest struct {
-		Config     engine.Config `json:"config"`
-		Seed       int64         `json:"seed"`
-		Bot1       string        `json:"bot1"` // strategy name
-		Bot2       string        `json:"bot2"` // strategy name
+		Config engine.Config `json:"config"`
+		Seed   int64         `json:"seed"`
+		Bot1   string        `json:"bot1"`
+		Bot2   string        `json:"bot2"`
 	}
 	var req initRequest
 	if err := json.Unmarshal([]byte(args[0].String()), &req); err != nil {
@@ -54,7 +81,6 @@ func jsLoadState(_ js.Value, args []js.Value) interface{} {
 	cfg := req.Config
 	if cfg.Rows == 0 {
 		cfg = engine.DefaultConfig()
-		// Smaller default for in-browser matches
 		cfg.Rows = 30
 		cfg.Cols = 30
 		cfg.MaxTurns = 200
@@ -75,7 +101,7 @@ func jsLoadState(_ js.Value, args []js.Value) interface{} {
 	mr.AddBot(bot1, req.Bot1)
 	mr.AddBot(bot2, req.Bot2)
 
-	_ = gs // session setup done via match runner below
+	_ = gs
 
 	session = &matchSession{
 		gs:   gs,
@@ -93,14 +119,12 @@ func jsStep(_ js.Value, args []js.Value) interface{} {
 	}
 	gs := session.gs
 
-	// Parse moves from caller (if provided)
 	if len(args) > 0 && args[0].String() != "" {
 		var moves []engine.Move
 		if err := json.Unmarshal([]byte(args[0].String()), &moves); err != nil {
 			return jsErr("parse moves: " + err.Error())
 		}
 		for _, m := range moves {
-			// Find bot at position and submit move
 			for _, b := range gs.Bots {
 				if b.Alive && b.Position == m.Position {
 					gs.Moves[b.ID] = m
@@ -126,7 +150,7 @@ func jsStep(_ js.Value, args []js.Value) interface{} {
 	return out
 }
 
-// jsRunMatch executes a complete match and returns the replay.
+// jsRunMatch executes a complete 2-player match with built-in bots.
 // Signature: acbEngine.runMatch(configJSON: string) => {replay, result}
 func jsRunMatch(_ js.Value, args []js.Value) interface{} {
 	type runRequest struct {
@@ -186,6 +210,89 @@ func jsRunMatch(_ js.Value, args []js.Value) interface{} {
 	}
 }
 
+// jsAddPlayer registers a player with a JS callback strategy.
+// Signature: acbEngine.addPlayer(name: string, fn: (stateJSON: string) => string) => {ok:bool}
+func jsAddPlayer(_ js.Value, args []js.Value) interface{} {
+	if len(args) < 2 {
+		return jsErr("addPlayer requires (name, fn) arguments")
+	}
+	name := args[0].String()
+	fn := args[1]
+
+	jsPlayers = append(jsPlayers, jsPlayerEntry{
+		name: name,
+		fn:   fn,
+	})
+
+	return map[string]interface{}{
+		"ok":   true,
+		"index": len(jsPlayers) - 1,
+	}
+}
+
+// jsClearPlayers clears all registered players.
+// Signature: acbEngine.clearPlayers() => {ok:bool}
+func jsClearPlayers(_ js.Value, _ []js.Value) interface{} {
+	jsPlayers = jsPlayers[:0]
+	return map[string]interface{}{"ok": true}
+}
+
+// jsRunMatchMulti runs a match with all registered JS callback players.
+// Signature: acbEngine.runMatchMulti(configJSON: string) => {replay, result}
+func jsRunMatchMulti(_ js.Value, args []js.Value) interface{} {
+	if len(jsPlayers) < 2 {
+		return jsErr("need at least 2 registered players; use addPlayer() first")
+	}
+
+	type configRequest struct {
+		Config engine.Config `json:"config"`
+		Seed   int64         `json:"seed"`
+	}
+
+	var req configRequest
+	if len(args) > 0 && args[0].String() != "" {
+		if err := json.Unmarshal([]byte(args[0].String()), &req); err != nil {
+			return jsErr("parse config: " + err.Error())
+		}
+	}
+
+	cfg := req.Config
+	if cfg.Rows == 0 {
+		cfg = engine.DefaultConfig()
+		cfg.Rows = 30
+		cfg.Cols = 30
+		cfg.MaxTurns = 200
+	}
+
+	seed := req.Seed
+	if seed == 0 {
+		seed = time.Now().UnixNano()
+	}
+	rng := rand.New(rand.NewSource(seed))
+
+	mr := engine.NewMatchRunner(cfg,
+		engine.WithRNG(rng),
+		engine.WithTimeout(2*time.Second),
+	)
+
+	for i, p := range jsPlayers {
+		mr.AddBot(&jsBot{fn: p.fn}, p.name)
+		_ = i
+	}
+
+	result, replay, err := mr.Run()
+	if err != nil {
+		return jsErr("run match: " + err.Error())
+	}
+
+	replayJSON, _ := json.Marshal(replay)
+	resultJSON, _ := json.Marshal(result)
+	return map[string]interface{}{
+		"replay": string(replayJSON),
+		"result": string(resultJSON),
+	}
+}
+
 func jsErr(msg string) map[string]interface{} {
 	return map[string]interface{}{"ok": false, "error": msg}
 }
@@ -203,7 +310,16 @@ func main() {
 		"runMatch": js.FuncOf(func(this js.Value, args []js.Value) interface{} {
 			return jsRunMatch(this, args)
 		}),
-		"version": "1.0.0",
+		"addPlayer": js.FuncOf(func(this js.Value, args []js.Value) interface{} {
+			return jsAddPlayer(this, args)
+		}),
+		"clearPlayers": js.FuncOf(func(this js.Value, args []js.Value) interface{} {
+			return jsClearPlayers(this, args)
+		}),
+		"runMatchMulti": js.FuncOf(func(this js.Value, args []js.Value) interface{} {
+			return jsRunMatchMulti(this, args)
+		}),
+		"version": "2.0.0",
 	}))
 
 	<-done
diff --git a/web/public/wasm/engine.wasm b/web/public/wasm/engine.wasm
index ed0dca1..274ec37 100755
Binary files a/web/public/wasm/engine.wasm and b/web/public/wasm/engine.wasm differ
diff --git a/web/src/pages/sandbox.ts b/web/src/pages/sandbox.ts
index bc5fb47..f314a4d 100644
--- a/web/src/pages/sandbox.ts
+++ b/web/src/pages/sandbox.ts
@@ -1,7 +1,15 @@
-// In-browser bot sandbox: Monaco editor + TS game engine + WASM upload + replay viewer
-import { runMatch, defaultConfig, type Config, type BotStrategy, type VisibleState, type Move } from '../engine';
+// In-browser WASM game sandbox per §13.1
+// Two match engines:
+//   - Go WASM engine (production-accurate, loaded from /wasm/engine.wasm)
+//   - TypeScript engine (instant, always available as fallback)
+// Two user modes:
+//   - Quick-start: Monaco editor with JS/TS starter → eval → run match
+//   - Full: Upload compiled .wasm file → validate interface → run match
+// Multi-opponent: Select 1–3 AI opponents for 2–4 player matches
+// Replay viewer: Canvas-based with fog-of-war toggle, view modes
+import { runMultiMatch, defaultConfig, BUILTIN_STRATEGIES, type Config, type BotStrategy, type VisibleState, type Move, type Replay } from '../engine';
 import { ReplayViewer } from '../replay-viewer';
-import type { Replay } from '../types';
+import type { ViewMode } from '../types';
 
 const WASM_BOT_SPEC = `// ACB WASM Bot Interface Spec (v1.0)
 // ─────────────────────────────────────────────────────────────────────────────
@@ -73,21 +81,125 @@ function dist2(a, b, cfg) {
 }
 `;
 
+// ─── Console logger ────────────────────────────────────────────────────────
+
+interface ConsoleEntry {
+  turn: number;
+  level: 'log' | 'warn' | 'error';
+  message: string;
+}
+
+// ─── Mobile detection ──────────────────────────────────────────────────────
+
+function isMobile(): boolean {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+    || (window.innerWidth < 900 && 'ontouchstart' in window);
+}
+
+// ─── Go WASM Engine Loader ─────────────────────────────────────────────────
+
+type GoEngine = {
+  loadState(s: string): { ok: boolean; error?: string };
+  step(m: string): { state: string; events: string; turn: number; result?: string };
+  runMatch(c: string): { replay: string; result: string; error?: string };
+  addPlayer(name: string, fn: (stateJSON: string) => string): { ok: boolean; index: number; error?: string };
+  clearPlayers(): { ok: boolean };
+  runMatchMulti(c: string): { replay: string; result: string; error?: string };
+  version: string;
+};
+
+let goEngine: GoEngine | null = null;
+let goEngineLoading = false;
+let goEngineLoadPromise: Promise<GoEngine | null> | null = null;
+
+async function loadGoEngine(): Promise<GoEngine | null> {
+  if (goEngine) return goEngine;
+  if (goEngineLoading && goEngineLoadPromise) return goEngineLoadPromise;
+
+  goEngineLoading = true;
+  goEngineLoadPromise = (async () => {
+    try {
+      // Load wasm_exec.js if not already loaded
+      if (!(globalThis as any).Go) {
+        await new Promise<void>((resolve, reject) => {
+          const script = document.createElement('script');
+          script.src = '/wasm/wasm_exec.js';
+          script.onload = () => resolve();
+          script.onerror = () => reject(new Error('Failed to load wasm_exec.js'));
+          document.head.appendChild(script);
+        });
+      }
+
+      const go = new (globalThis as any).Go();
+      const response = await fetch('/wasm/engine.wasm');
+      const buffer = await response.arrayBuffer();
+      const { instance } = await WebAssembly.instantiate(buffer, go.importObject);
+      go.run(instance);
+
+      goEngine = (globalThis as any).acbEngine as GoEngine;
+      return goEngine;
+    } catch (err) {
+      console.warn('Go WASM engine load failed, using TS engine fallback:', err);
+      return null;
+    } finally {
+      goEngineLoading = false;
+    }
+  })();
+
+  return goEngineLoadPromise;
+}
+
 export function renderSandboxPage(_params: Record<string, string>): void {
   const app = document.getElementById('app');
   if (!app) return;
 
-  app.innerHTML = buildHTML();
+  if (isMobile()) {
+    app.innerHTML = buildMobileHTML();
+    return;
+  }
 
-  // Defer heavy init to avoid blocking render
+  app.innerHTML = buildHTML();
   requestAnimationFrame(() => initSandbox());
 }
 
+function buildMobileHTML(): string {
+  return `
+    <div class="sandbox-page">
+      <h1 class="page-title">Bot Sandbox</h1>
+      <div class="mobile-notice">
+        <div class="mobile-icon">🖥️</div>
+        <h2>Desktop Required</h2>
+        <p>The Bot Sandbox requires a desktop browser for the code editor and replay viewer.</p>
+        <p style="margin-top:16px;color:var(--text-muted);font-size:0.875rem;">
+          Scan this page's QR code on your phone to open it on your desktop, or visit
+          <strong>aicodebattle.com/#/compete/sandbox</strong> on a computer.
+        </p>
+        <div style="margin-top:24px;">
+          <a href="#/compete" class="btn primary">Back to Compete</a>
+        </div>
+      </div>
+    </div>
+    <style>
+    .mobile-notice {
+      text-align: center;
+      padding: 60px 20px;
+      background: var(--bg-secondary);
+      border-radius: 12px;
+      max-width: 400px;
+      margin: 40px auto;
+    }
+    .mobile-icon { font-size: 3rem; margin-bottom: 16px; }
+    .mobile-notice h2 { color: var(--text-primary); margin-bottom: 8px; }
+    .mobile-notice p { color: var(--text-muted); }
+    </style>
+  `;
+}
+
 function buildHTML(): string {
   return `
     <div class="sandbox-page">
       <h1 class="page-title">Bot Sandbox</h1>
-      <p class="sandbox-intro">Write JavaScript bot logic, pick an opponent, and run an in-browser match instantly — no server required.</p>
+      <p class="sandbox-intro">Write bot logic, pick opponents, and run in-browser matches instantly — no server required.</p>
 
       <div class="sandbox-layout">
         <!-- Left: editor -->
@@ -101,11 +213,18 @@ function buildHTML(): string {
                 <button id="reset-code-btn" class="btn small secondary">Reset</button>
               </div>
             </div>
-            <div id="monaco-container" style="height:420px;border-radius:6px;overflow:hidden;"></div>
+            <div id="monaco-container" style="height:400px;border-radius:6px;overflow:hidden;"></div>
             <div id="wasm-status" class="wasm-status hidden"></div>
           </div>
 
           <div class="sandbox-panel">
+            <div class="panel-header"><span>Console</span>
+              <button id="clear-console-btn" class="btn small secondary">Clear</button>
+            </div>
+            <div id="console-output" class="console-output"></div>
+          </div>
+
+          <div class="sandbox-panel collapsible">
             <div class="panel-header"><span>WASM Bot Interface Spec</span>
               <button id="toggle-spec-btn" class="btn small secondary">Show</button>
             </div>
@@ -118,21 +237,20 @@ function buildHTML(): string {
           <div class="sandbox-panel">
             <div class="panel-header"><span>Match Settings</span></div>
             <div class="settings-grid">
-              <label>Opponent Strategy</label>
-              <select id="opponent-select">
-                <option value="random">Random</option>
-                <option value="gatherer" selected>Gatherer</option>
-                <option value="rusher">Rusher</option>
-                <option value="guardian">Guardian</option>
-                <option value="swarm">Swarm</option>
-                <option value="hunter">Hunter</option>
+              <label>Engine</label>
+              <select id="engine-select">
+                <option value="auto" selected>Auto (Go WASM → TS fallback)</option>
+                <option value="wasm">Go WASM Engine</option>
+                <option value="ts">TypeScript Engine (instant)</option>
               </select>
+              <div id="engine-status" class="engine-status">Engine: loading…</div>
+              <div></div>
 
               <label>Grid Size</label>
               <select id="grid-size-select">
-                <option value="20">Small (20×20)</option>
-                <option value="30" selected>Medium (30×30)</option>
-                <option value="40">Large (40×40)</option>
+                <option value="20">Small (20x20)</option>
+                <option value="30" selected>Medium (30x30)</option>
+                <option value="40">Large (40x40)</option>
               </select>
 
               <label>Max Turns</label>
@@ -140,12 +258,26 @@ function buildHTML(): string {
                 <option value="100">100</option>
                 <option value="200" selected>200</option>
                 <option value="300">300</option>
+                <option value="500">500</option>
               </select>
 
+              <label>Map Seed</label>
+              <input type="number" id="seed-input" placeholder="Random" class="seed-input">
+
               <label>Playback Speed</label>
-              <input type="range" id="speed-slider" min="20" max="500" value="100" class="speed-slider">
-              <span id="speed-label" class="speed-label">100ms</span>
+              <div class="speed-row">
+                <input type="range" id="speed-slider" min="20" max="500" value="100" class="speed-slider">
+                <span id="speed-label" class="speed-label">100ms</span>
+              </div>
             </div>
+
+            <div class="opponents-section">
+              <div class="panel-header" style="margin-bottom:8px"><span>Opponents</span>
+                <button id="add-opponent-btn" class="btn small secondary">+ Add</button>
+              </div>
+              <div id="opponents-list"></div>
+            </div>
+
             <button id="run-btn" class="btn primary run-btn">Run Match</button>
           </div>
 
@@ -155,15 +287,29 @@ function buildHTML(): string {
           </div>
 
           <div class="sandbox-panel" id="performance-panel" style="display:none">
-            <div class="panel-header"><span>Performance Stats</span></div>
+            <div class="panel-header"><span>Performance</span></div>
             <div id="perf-stats" class="perf-stats"></div>
           </div>
         </div>
       </div>
 
-      <!-- Replay viewer below -->
+      <!-- Replay viewer -->
       <div id="replay-section" class="replay-section" style="display:none">
-        <h2 class="section-title">Replay</h2>
+        <div class="replay-header">
+          <h2 class="section-title">Replay</h2>
+          <div class="replay-controls-top">
+            <label class="fog-toggle">
+              <input type="checkbox" id="fog-toggle"> Fog of War (Player <select id="fog-player-select"><option value="0">0</option></select>)
+            </label>
+            <select id="view-mode-select" class="btn small secondary">
+              <option value="standard">Standard</option>
+              <option value="dots">Dots</option>
+              <option value="influence">Influence</option>
+              <option value="voronoi">Voronoi</option>
+            </select>
+            <button id="download-replay-btn" class="btn small secondary">Download Replay</button>
+          </div>
+        </div>
         <div class="replay-layout-sandbox">
           <div class="canvas-wrapper">
             <canvas id="sandbox-canvas"></canvas>
@@ -174,7 +320,6 @@ function buildHTML(): string {
               <button id="sb-prev-btn" class="btn">Prev</button>
               <button id="sb-next-btn" class="btn">Next</button>
               <button id="sb-reset-btn" class="btn">Reset</button>
-              <button id="download-replay-btn" class="btn secondary">Download Replay</button>
             </div>
             <div class="slider-group">
               <label>Turn: <span id="sb-turn-display">0</span> / <span id="sb-total-turns">0</span></label>
@@ -189,12 +334,68 @@ function buildHTML(): string {
   `;
 }
 
+// ─── Opponent slots ────────────────────────────────────────────────────────
+
+const MAX_OPPONENTS = 3;
+const STRATEGY_OPTIONS = [
+  { value: 'random', label: 'Random' },
+  { value: 'gatherer', label: 'Gatherer' },
+  { value: 'rusher', label: 'Rusher' },
+  { value: 'guardian', label: 'Guardian' },
+  { value: 'swarm', label: 'Swarm' },
+  { value: 'hunter', label: 'Hunter' },
+];
+
+function buildOpponentRow(index: number, defaultStrategy: string): string {
+  const opts = STRATEGY_OPTIONS.map(s =>
+    `<option value="${s.value}"${s.value === defaultStrategy ? ' selected' : ''}>${s.label}</option>`
+  ).join('');
+  return `
+    <div class="opponent-row" data-idx="${index}">
+      <span class="opponent-label">Opponent ${index + 1}</span>
+      <select class="opponent-select">${opts}</select>
+      <button class="btn small secondary remove-opponent-btn" title="Remove">✕</button>
+    </div>`;
+}
+
+// ─── Init ──────────────────────────────────────────────────────────────────
+
 function initSandbox(): void {
   let monacoEditor: any = null;
   let currentCode = STARTER_CODE;
   let wasmStrategy: BotStrategy | null = null;
   let lastReplay: any = null;
   let viewer: ReplayViewer | null = null;
+  const consoleEntries: ConsoleEntry[] = [];
+
+  const consoleDiv = document.getElementById('console-output')!;
+  const opponentsList = document.getElementById('opponents-list')!;
+  const engineStatusDiv = document.getElementById('engine-status')!;
+
+  // Start with one opponent (gatherer)
+  opponentsList.innerHTML = buildOpponentRow(0, 'gatherer');
+
+  // Start loading Go WASM engine in background
+  loadGoEngine().then(engine => {
+    if (engine) {
+      engineStatusDiv.textContent = `Engine: Go WASM v${engine.version}`;
+      engineStatusDiv.style.color = 'var(--success)';
+    } else {
+      engineStatusDiv.textContent = 'Engine: TypeScript (WASM unavailable)';
+      engineStatusDiv.style.color = 'var(--text-muted)';
+    }
+  });
+
+  function logToConsole(level: ConsoleEntry['level'], message: string, turn = -1): void {
+    consoleEntries.push({ turn, level, message });
+    if (consoleEntries.length > 500) consoleEntries.shift();
+    const colors: Record<string, string> = { log: 'var(--text-muted)', warn: 'var(--warning)', error: 'var(--error)' };
+    const prefix = turn >= 0 ? `[T${turn}] ` : '';
+    consoleDiv.innerHTML += `<div class="console-line" style="color:${colors[level]}">${prefix}${escapeHtml(message)}</div>`;
+    consoleDiv.scrollTop = consoleDiv.scrollHeight;
+  }
+
+  logToConsole('log', 'Sandbox ready. Write code or upload a WASM bot, then click Run Match.');
 
   // ── Monaco editor ───────────────────────────────────────────────────────
   loadMonaco().then(monaco => {
@@ -216,7 +417,6 @@ function initSandbox(): void {
       currentCode = monacoEditor.getValue();
     });
   }).catch(() => {
-    // Monaco unavailable – use plain textarea fallback
     const container = document.getElementById('monaco-container')!;
     container.innerHTML = `<textarea id="code-textarea" style="width:100%;height:100%;background:#1e1e1e;color:#d4d4d4;font-family:monospace;font-size:13px;border:none;padding:10px;resize:none;">${escapeHtml(STARTER_CODE)}</textarea>`;
     const ta = document.getElementById('code-textarea') as HTMLTextAreaElement;
@@ -234,15 +434,19 @@ function initSandbox(): void {
     const status = document.getElementById('wasm-status')!;
     status.textContent = `Loading ${file.name}…`;
     status.className = 'wasm-status';
+    logToConsole('log', `Loading WASM file: ${file.name} (${(file.size / 1024).toFixed(1)} KB)`);
 
     try {
       wasmStrategy = await loadWasmBot(file);
       status.textContent = `WASM bot loaded: ${file.name}`;
       status.className = 'wasm-status ok';
+      logToConsole('log', `WASM bot interface validated: init() + compute_moves() found.`);
       (document.getElementById('run-btn') as HTMLButtonElement).textContent = 'Run Match (WASM)';
     } catch (err) {
-      status.textContent = `Failed to load WASM: ${err}`;
+      const msg = err instanceof Error ? err.message : String(err);
+      status.textContent = `Failed: ${msg}`;
       status.className = 'wasm-status error';
+      logToConsole('error', `WASM load failed: ${msg}`);
     }
   });
 
@@ -262,8 +466,48 @@ function initSandbox(): void {
     const status = document.getElementById('wasm-status')!;
     status.className = 'wasm-status hidden';
     (document.getElementById('run-btn') as HTMLButtonElement).textContent = 'Run Match';
+    logToConsole('log', 'Code reset to starter template.');
   });
 
+  // ── Console clear ───────────────────────────────────────────────────────
+  document.getElementById('clear-console-btn')!.addEventListener('click', () => {
+    consoleEntries.length = 0;
+    consoleDiv.innerHTML = '';
+  });
+
+  // ── Opponent management ─────────────────────────────────────────────────
+  function getOpponentCount(): number {
+    return opponentsList.querySelectorAll('.opponent-row').length;
+  }
+
+  document.getElementById('add-opponent-btn')!.addEventListener('click', () => {
+    const count = getOpponentCount();
+    if (count >= MAX_OPPONENTS) return;
+    const defaults = ['gatherer', 'rusher', 'swarm'];
+    opponentsList.insertAdjacentHTML('beforeend', buildOpponentRow(count, defaults[count] || 'random'));
+    updateAddButton();
+  });
+
+  opponentsList.addEventListener('click', (e) => {
+    const btn = (e.target as HTMLElement).closest('.remove-opponent-btn');
+    if (!btn) return;
+    if (getOpponentCount() <= 1) return;
+    const row = btn.closest('.opponent-row')!;
+    row.remove();
+    opponentsList.querySelectorAll('.opponent-row').forEach((row, i) => {
+      row.querySelector('.opponent-label')!.textContent = `Opponent ${i + 1}`;
+      (row as HTMLElement).dataset.idx = String(i);
+    });
+    updateAddButton();
+  });
+
+  function updateAddButton(): void {
+    const btn = document.getElementById('add-opponent-btn') as HTMLButtonElement;
+    btn.disabled = getOpponentCount() >= MAX_OPPONENTS;
+    btn.style.opacity = getOpponentCount() >= MAX_OPPONENTS ? '0.5' : '1';
+  }
+  updateAddButton();
+
   // ── Speed slider ────────────────────────────────────────────────────────
   document.getElementById('speed-slider')!.addEventListener('input', (e) => {
     const val = (e.target as HTMLInputElement).value;
@@ -276,11 +520,14 @@ function initSandbox(): void {
     const btn = document.getElementById('run-btn') as HTMLButtonElement;
     btn.disabled = true;
     btn.textContent = 'Running…';
+    logToConsole('log', 'Starting match…');
 
     try {
-      const opponent = (document.getElementById('opponent-select') as HTMLSelectElement).value;
       const gridSize = Number((document.getElementById('grid-size-select') as HTMLSelectElement).value);
       const maxTurns = Number((document.getElementById('max-turns-select') as HTMLSelectElement).value);
+      const seedStr = (document.getElementById('seed-input') as HTMLInputElement).value;
+      const seed = seedStr ? Number(seedStr) : undefined;
+      const enginePref = (document.getElementById('engine-select') as HTMLSelectElement).value;
 
       const cfg: Config = {
         ...defaultConfig(),
@@ -289,36 +536,110 @@ function initSandbox(): void {
         max_turns: maxTurns,
       };
 
-      // Build user strategy from code or WASM
-      const userStrategy: BotStrategy = wasmStrategy ?? buildUserStrategy(currentCode);
+      // Collect strategies: user + opponents
+      const userStrategy: BotStrategy = wasmStrategy ?? buildUserStrategy(currentCode, (msg, turn) => logToConsole('error', msg, turn));
+      const opponentSelects = opponentsList.querySelectorAll<HTMLSelectElement>('.opponent-select');
+      const strategies: (BotStrategy | string)[] = [userStrategy];
+      for (const sel of opponentSelects) {
+        strategies.push(sel.value);
+      }
+
+      const numPlayers = strategies.length;
+      logToConsole('log', `Match config: ${gridSize}x${gridSize}, ${maxTurns} turns, ${numPlayers} players${seed !== undefined ? `, seed=${seed}` : ''}`);
+
+      // Determine which engine to use
+      const useGoWasm = enginePref === 'wasm' || (enginePref === 'auto' && goEngine !== null);
+      let replay: any;
+      let result: any;
+      let engineUsed: string;
 
       const t0 = performance.now();
-      const { replay, result } = runMatch(cfg, userStrategy, opponent);
-      const elapsed = performance.now() - t0;
 
+      if (useGoWasm && goEngine) {
+        // Use Go WASM engine with JS callback strategies
+        logToConsole('log', `Using Go WASM engine v${goEngine.version}`);
+        engineUsed = 'Go WASM';
+
+        goEngine.clearPlayers();
+        for (let i = 0; i < strategies.length; i++) {
+          const strategy = strategies[i];
+          const name = i === 0
+            ? (wasmStrategy ? 'Uploaded Bot' : 'Your Bot')
+            : typeof strategy === 'string' ? strategy : `Bot ${i}`;
+          const fn = typeof strategy === 'string'
+            ? (stateJSON: string): string => {
+                try {
+                  const state = JSON.parse(stateJSON) as VisibleState;
+                  const builtinFn = BUILTIN_STRATEGIES[strategy];
+                  if (!builtinFn) return '[]';
+                  const moves = builtinFn(state);
+                  return JSON.stringify(moves);
+                } catch { return '[]'; }
+              }
+            : (stateJSON: string): string => {
+                try {
+                  const state = JSON.parse(stateJSON) as VisibleState;
+                  const moves = strategy(state);
+                  return JSON.stringify(moves);
+                } catch { return '[]'; }
+              };
+          goEngine.addPlayer(name, fn);
+        }
+
+        const configJSON = JSON.stringify({
+          config: { ...cfg, cores_per_player: 1 },
+          seed: seed ?? 0,
+        });
+
+        const matchResult = goEngine.runMatchMulti(configJSON);
+        if (matchResult.error) {
+          throw new Error(`Go WASM engine error: ${matchResult.error}`);
+        }
+
+        replay = JSON.parse(matchResult.replay);
+        result = JSON.parse(matchResult.result);
+      } else {
+        // Use TypeScript engine
+        if (enginePref === 'wasm') {
+          logToConsole('warn', 'Go WASM engine not available, falling back to TypeScript engine');
+        }
+        engineUsed = 'TypeScript';
+        const matchOutput = runMultiMatch(cfg, strategies, seed);
+        replay = matchOutput.replay;
+        result = matchOutput.result;
+      }
+
+      const elapsed = performance.now() - t0;
       lastReplay = replay;
 
+      logToConsole('log', `Match complete in ${elapsed.toFixed(1)}ms (${engineUsed}) — ${result.turns} turns, winner: ${result.winner >= 0 ? replay.players[result.winner].name : 'Draw'} (${result.reason})`);
+
       // Show result
       const resultPanel = document.getElementById('result-panel')!;
       resultPanel.style.display = '';
-      document.getElementById('match-result')!.innerHTML = formatResult(result, replay);
+      document.getElementById('match-result')!.innerHTML = formatResult(result, replay, numPlayers);
 
       // Performance panel
       const perfPanel = document.getElementById('performance-panel')!;
       perfPanel.style.display = '';
-      document.getElementById('perf-stats')!.innerHTML = `
-        <div class="perf-row"><span>Match duration (JS)</span><span>${elapsed.toFixed(1)} ms</span></div>
-        <div class="perf-row"><span>Turns played</span><span>${result.turns}</span></div>
-        <div class="perf-row"><span>Your bots alive</span><span>${result.bots_alive[0]}</span></div>
-        <div class="perf-row"><span>Opponent bots alive</span><span>${result.bots_alive[1]}</span></div>
-      `;
+      const perfRows = [
+        `<div class="perf-row"><span>Engine</span><span>${engineUsed}</span></div>`,
+        `<div class="perf-row"><span>Match duration</span><span>${elapsed.toFixed(1)} ms</span></div>`,
+        `<div class="perf-row"><span>Turns played</span><span>${result.turns}</span></div>`,
+      ];
+      for (let i = 0; i < numPlayers; i++) {
+        perfRows.push(`<div class="perf-row"><span>${replay.players[i].name}</span><span>${result.scores[i]} pts, ${result.bots_alive[i]} bots</span></div>`);
+      }
+      document.getElementById('perf-stats')!.innerHTML = perfRows.join('');
 
       // Show replay
       document.getElementById('replay-section')!.style.display = '';
-      initReplayViewer(replay as any);
+      initReplayViewer(replay);
 
     } catch (err) {
-      alert('Error running match: ' + err);
+      const msg = err instanceof Error ? err.message : String(err);
+      logToConsole('error', `Match error: ${msg}`);
+      console.error('Sandbox match error:', err);
     } finally {
       btn.disabled = false;
       btn.textContent = wasmStrategy ? 'Run Match (WASM)' : 'Run Match';
@@ -337,13 +658,21 @@ function initSandbox(): void {
     URL.revokeObjectURL(url);
   });
 
+  // ── Replay viewer setup ─────────────────────────────────────────────────
   function initReplayViewer(replay: Replay): void {
     const canvas = document.getElementById('sandbox-canvas') as HTMLCanvasElement;
     const speed = Number((document.getElementById('speed-slider') as HTMLInputElement).value);
+
+    if (viewer) viewer.destroy();
     viewer = new ReplayViewer(canvas, { cellSize: 12 });
-    viewer.loadReplay(replay);
+    viewer.loadReplay(replay as any);
     viewer.setSpeed(speed);
 
+    const fogPlayerSelect = document.getElementById('fog-player-select') as HTMLSelectElement;
+    fogPlayerSelect.innerHTML = replay.players.map((p, i) =>
+      `<option value="${i}">${i} (${p.name})</option>`
+    ).join('');
+
     const turnDisplay = document.getElementById('sb-turn-display')!;
     const totalTurns = document.getElementById('sb-total-turns')!;
     const slider = document.getElementById('sb-turn-slider') as HTMLInputElement;
@@ -358,79 +687,108 @@ function initSandbox(): void {
       const events = viewer!.getTurnEvents();
       eventsDiv.innerHTML = events.length === 0
         ? '<div class="no-events">No events</div>'
-        : events.map(ev => `<div class="event"><span style="color:#fbbf24">${ev.type.replace(/_/g,' ')}</span></div>`).join('');
+        : events.map(ev => `<div class="event"><span style="color:#fbbf24">${ev.type.replace(/_/g, ' ')}</span></div>`).join('');
     };
 
-    document.getElementById('sb-play-btn')!.addEventListener('click', () => viewer!.togglePlay());
-    document.getElementById('sb-prev-btn')!.addEventListener('click', () => { viewer!.setTurn(viewer!.getTurn() - 1); });
-    document.getElementById('sb-next-btn')!.addEventListener('click', () => { viewer!.setTurn(viewer!.getTurn() + 1); });
-    document.getElementById('sb-reset-btn')!.addEventListener('click', () => { viewer!.pause(); viewer!.setTurn(0); });
+    document.getElementById('sb-play-btn')!.onclick = () => viewer!.togglePlay();
+    document.getElementById('sb-prev-btn')!.onclick = () => { viewer!.setTurn(viewer!.getTurn() - 1); };
+    document.getElementById('sb-next-btn')!.onclick = () => { viewer!.setTurn(viewer!.getTurn() + 1); };
+    document.getElementById('sb-reset-btn')!.onclick = () => { viewer!.pause(); viewer!.setTurn(0); };
+    slider.oninput = () => viewer!.setTurn(parseInt(slider.value, 10));
 
-    slider.addEventListener('input', () => viewer!.setTurn(parseInt(slider.value, 10)));
+    (document.getElementById('fog-toggle') as HTMLInputElement).onchange = (e) => {
+      const checked = (e.target as HTMLInputElement).checked;
+      if (checked) {
+        const pid = parseInt(fogPlayerSelect.value);
+        viewer!.setFogOfWar(pid);
+      } else {
+        viewer!.setFogOfWar(null);
+      }
+    };
+    fogPlayerSelect.onchange = () => {
+      if ((document.getElementById('fog-toggle') as HTMLInputElement).checked) {
+        viewer!.setFogOfWar(parseInt(fogPlayerSelect.value));
+      }
+    };
+
+    (document.getElementById('view-mode-select') as HTMLSelectElement).onchange = (e) => {
+      viewer!.setViewMode((e.target as HTMLSelectElement).value as ViewMode);
+    };
   }
 }
 
 // ────────────────────────────────────────────────────────────────────────────
-// User strategy builder (sandboxed eval)
+// User strategy builder (sandboxed eval with error reporting)
 // ────────────────────────────────────────────────────────────────────────────
 
-function buildUserStrategy(code: string): BotStrategy {
-  // Wrap the user's computeMoves function; catch errors gracefully
+function buildUserStrategy(code: string, onError: (msg: string, turn: number) => void): BotStrategy {
+  let turnCounter = 0;
   return (state: VisibleState): Move[] => {
+    turnCounter++;
     try {
-      // Create a sandboxed function using the user code
       const fn = new Function('state', `
         ${code}
         if (typeof computeMoves !== 'function') {
-          throw new Error('computeMoves function not found');
+          throw new Error('computeMoves function not found — define a computeMoves(state) function');
         }
         return computeMoves(state);
       `);
       const result = fn(state);
-      if (!Array.isArray(result)) return [];
+      if (!Array.isArray(result)) {
+        onError(`computeMoves returned ${typeof result} instead of array`, turnCounter);
+        return [];
+      }
       return result as Move[];
     } catch (err) {
-      console.warn('User strategy error:', err);
+      const msg = err instanceof Error ? err.message : String(err);
+      onError(`Turn ${turnCounter}: ${msg}`, turnCounter);
       return [];
     }
   };
 }
 
 // ────────────────────────────────────────────────────────────────────────────
-// WASM bot loader
+// WASM bot loader (supports both standard WASM and Go WASM)
 // ────────────────────────────────────────────────────────────────────────────
 
 async function loadWasmBot(file: File): Promise<BotStrategy> {
   const buffer = await file.arrayBuffer();
-
-  // Try to instantiate the WASM module
   let acbBotExport: { init: (c: string) => void; compute_moves: (s: string) => string } | null = null;
 
   try {
-    // Standard WASM (non-Go)
+    // Standard WASM (Rust, C, AssemblyScript) — exports compute_moves directly
     const { instance } = await WebAssembly.instantiate(buffer, {
       env: { memory: new WebAssembly.Memory({ initial: 256 }) },
     });
-    acbBotExport = {
-      init: (instance.exports.init as (c: string) => void) ?? (() => {}),
-      compute_moves: instance.exports.compute_moves as (s: string) => string,
-    };
-  } catch {
-    // Likely a Go WASM – requires wasm_exec.js runtime
-    // Check if Go runtime is available
+    const computeFn = instance.exports.compute_moves as ((ptr: number, len: number) => number) | undefined;
+
+    if (computeFn) {
+      const memory = instance.exports.memory as WebAssembly.Memory | undefined;
+      if (memory) {
+        acbBotExport = createPointerBasedBridge(instance, memory);
+      }
+    }
+
+    if (!acbBotExport) {
+      throw new Error('WASM module does not export acbBot.compute_moves or compatible functions');
+    }
+  } catch (primaryErr) {
+    // Likely a Go WASM — requires wasm_exec.js runtime
     if (typeof (globalThis as any).Go !== 'undefined') {
       const go = new (globalThis as any).Go();
       const { instance } = await WebAssembly.instantiate(buffer, go.importObject);
       go.run(instance);
-      // After go.run, acbBot global should be set
       acbBotExport = (globalThis as any).acbBot;
+      if (!acbBotExport) {
+        throw new Error('Go WASM ran but did not set global acbBot — check your bot builds with cmd/acb-wasm/botmain template');
+      }
     } else {
-      throw new Error('Go WASM runtime not loaded. Add <script src="/wasm/wasm_exec.js"> to the page.');
+      throw new Error('Not a standard WASM bot and Go WASM runtime (wasm_exec.js) not loaded.');
     }
   }
 
   if (!acbBotExport?.compute_moves) {
-    throw new Error('WASM module does not export acbBot.compute_moves');
+    throw new Error('WASM module does not export a valid acbBot.compute_moves function');
   }
 
   return (state: VisibleState): Move[] => {
@@ -443,15 +801,53 @@ async function loadWasmBot(file: File): Promise<BotStrategy> {
   };
 }
 
+function createPointerBasedBridge(
+  instance: WebAssembly.Instance,
+  memory: WebAssembly.Memory,
+): { init: (c: string) => void; compute_moves: (s: string) => string } {
+  const encoder = new TextEncoder();
+  const decoder = new TextDecoder();
+
+  function writeString(str: string): [number, number] {
+    const bytes = encoder.encode(str);
+    const ptr = (instance.exports.allocate as (len: number) => number)?.(bytes.length)
+      ?? (instance.exports.malloc as (len: number) => number)?.(bytes.length);
+    if (!ptr) throw new Error('WASM does not export allocate or malloc');
+    const buf = new Uint8Array(memory.buffer);
+    buf.set(bytes, ptr);
+    return [ptr, bytes.length];
+  }
+
+  function readString(ptr: number): string {
+    const buf = new Uint8Array(memory.buffer);
+    let end = ptr;
+    while (end < buf.length && buf[end] !== 0) end++;
+    return decoder.decode(buf.slice(ptr, end));
+  }
+
+  return {
+    init: (configJSON: string) => {
+      const [ptr, len] = writeString(configJSON);
+      (instance.exports.init as (p: number, l: number) => void)(ptr, len);
+    },
+    compute_moves: (stateJSON: string): string => {
+      const [ptr, len] = writeString(stateJSON);
+      const resultPtr = (instance.exports.compute_moves as (p: number, l: number) => number)(ptr, len);
+      const result = readString(resultPtr);
+      (instance.exports.free_result as (p: number) => void)?.(resultPtr);
+      return result;
+    },
+  };
+}
+
 // ────────────────────────────────────────────────────────────────────────────
-// Monaco loader (CDN)
+// Monaco loader (CDN, ~4MB lazy-loaded)
 // ────────────────────────────────────────────────────────────────────────────
 
 function loadMonaco(): Promise<any> {
   return new Promise((resolve, reject) => {
     if ((globalThis as any).monaco) { resolve((globalThis as any).monaco); return; }
 
-    // Load AMD loader then monaco
     const loaderScript = document.createElement('script');
     loaderScript.src = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.45.0/min/vs/loader.js';
     loaderScript.onload = () => {
@@ -471,27 +867,27 @@ function loadMonaco(): Promise<any> {
 // Helpers
 // ────────────────────────────────────────────────────────────────────────────
 
-function formatResult(result: any, replay: any): string {
-  const p0Name = replay.players[0]?.name ?? 'Your Bot';
-  const p1Name = replay.players[1]?.name ?? 'Opponent';
-  const winnerName = result.winner === 0 ? p0Name : result.winner === 1 ? p1Name : 'Draw';
-  const winnerClass = result.winner === 0 ? 'win' : result.winner === 1 ? 'loss' : 'draw';
+function formatResult(result: any, replay: any, _numPlayers: number): string {
+  const winnerName = result.winner >= 0 ? replay.players[result.winner].name : 'Draw';
+  const winnerClass = result.winner === 0 ? 'win' : result.winner >= 0 ? 'loss' : 'draw';
+  const scoreRows = replay.players.map((p: any, i: number) =>
+    `<div class="result-player"><span class="player-dot" style="background:${PLAYER_COLORS[i % PLAYER_COLORS.length]}"></span>${p.name}: ${result.scores[i]} pts, ${result.bots_alive[i]} bots alive</div>`
+  ).join('');
   return `
     <div class="result-banner ${winnerClass}">
       <strong>${result.winner >= 0 ? winnerName + ' wins!' : 'Draw'}</strong>
       <span>${result.reason}</span>
     </div>
-    <div class="result-stats">
-      <div>${p0Name}: ${result.scores[0]} pts, ${result.bots_alive[0]} bots alive</div>
-      <div>${p1Name}: ${result.scores[1]} pts, ${result.bots_alive[1]} bots alive</div>
-    </div>
+    <div class="result-stats">${scoreRows}</div>
   `;
 }
 
 function escapeHtml(s: string): string {
-  return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 }
 
+const PLAYER_COLORS = ['#3b82f6', '#ef4444', '#22c55e', '#f59e0b'];
+
 // ────────────────────────────────────────────────────────────────────────────
 // Styles
 // ────────────────────────────────────────────────────────────────────────────
@@ -501,30 +897,45 @@ const SANDBOX_STYLES = `
 .sandbox-intro { color: var(--text-muted); margin-bottom: 24px; }
 .sandbox-layout { display: flex; gap: 20px; }
 .sandbox-editor-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
-.sandbox-controls-col { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
+.sandbox-controls-col { width: 320px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }
 .sandbox-panel { background: var(--bg-secondary); border-radius: 8px; padding: 16px; }
 .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: 600; color: var(--text-primary); }
 .panel-actions { display: flex; gap: 8px; }
 .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-items: center; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 16px; }
 .settings-grid select, .settings-grid input { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); padding: 6px; border-radius: 4px; font-size: 0.875rem; }
-.speed-slider { width: 100%; }
-.speed-label { color: var(--text-muted); font-size: 0.75rem; }
+.engine-status { font-size: 0.75rem; color: var(--text-muted); padding: 2px 0; }
+.seed-input { width: 100%; }
+.speed-row { display: flex; align-items: center; gap: 8px; }
+.speed-slider { flex: 1; }
+.speed-label { color: var(--text-muted); font-size: 0.75rem; min-width: 40px; }
+.opponents-section { margin-bottom: 16px; }
+.opponent-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.opponent-label { font-size: 0.8rem; color: var(--text-muted); min-width: 80px; }
+.opponent-select { flex: 1; background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; }
 .run-btn { width: 100%; padding: 12px; font-size: 1rem; }
 .wasm-status { font-size: 0.8rem; padding: 8px; border-radius: 4px; margin-top: 8px; }
 .wasm-status.hidden { display: none; }
 .wasm-status.ok { background: rgba(34,197,94,0.15); color: var(--success); }
 .wasm-status.error { background: rgba(239,68,68,0.15); color: var(--error); }
-.code-block { background: var(--bg-primary); padding: 12px; border-radius: 6px; font-size: 0.75rem; font-family: monospace; white-space: pre; overflow-x: auto; color: var(--text-muted); }
+.code-block { background: var(--bg-primary); padding: 12px; border-radius: 6px; font-size: 0.75rem; font-family: monospace; white-space: pre; overflow-x: auto; color: var(--text-muted); max-height: 300px; overflow-y: auto; }
 .code-block.hidden { display: none; }
+.console-output { background: #0d1117; border-radius: 6px; padding: 8px 12px; font-family: 'Menlo', 'Monaco', 'Courier New', monospace; font-size: 0.75rem; line-height: 1.6; max-height: 160px; overflow-y: auto; min-height: 60px; }
+.console-line { padding: 1px 0; word-break: break-all; }
 .match-result .result-banner { padding: 12px 16px; border-radius: 6px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
 .result-banner.win { background: rgba(34,197,94,0.15); color: var(--success); }
 .result-banner.loss { background: rgba(239,68,68,0.15); color: var(--error); }
 .result-banner.draw { background: rgba(245,158,11,0.15); color: var(--warning); }
 .result-stats { font-size: 0.875rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
+.result-player { display: flex; align-items: center; gap: 8px; }
+.player-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
 .perf-stats .perf-row { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--text-muted); padding: 4px 0; border-bottom: 1px solid var(--bg-tertiary); }
+.replay-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
 .section-title { font-size: 1.25rem; color: var(--text-primary); margin: 24px 0 16px; }
 .replay-section { margin-top: 8px; }
-.replay-layout-sandbox { display: flex; gap: 20px; }
+.replay-controls-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
+.fog-toggle { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); cursor: pointer; }
+.fog-toggle select { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); padding: 2px 4px; border-radius: 3px; font-size: 0.75rem; }
+.replay-layout-sandbox { display: flex; gap: 20px; margin-top: 16px; }
 .canvas-wrapper { background: var(--bg-secondary); border-radius: 8px; padding: 10px; overflow: auto; flex: 1; }
 .sandbox-replay-controls { width: 260px; flex-shrink: 0; background: var(--bg-secondary); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
 .playback-controls { display: flex; flex-wrap: wrap; gap: 6px; }
@@ -538,6 +949,7 @@ const SANDBOX_STYLES = `
   .sandbox-controls-col { width: 100%; }
   .replay-layout-sandbox { flex-direction: column; }
   .sandbox-replay-controls { width: 100%; }
+  .replay-header { flex-direction: column; align-items: flex-start; }
 }
 </style>
 `;