Refactor app.js to replace canvas with SVG for rendering, enhancing visual fidelity and performance. Introduced new SVG element creation functions and updated related rendering logic. Removed the legend section from index.html and adjusted styles in style.css to accommodate the SVG implementation.

app.js

@@ -5,9 +5,14 @@
     return document.getElementById(id)
   }
 
-  var canvas = null
+  function svgEl(tag, attrs) {
+    var el = document.createElementNS('http://www.w3.org/2000/svg', tag)
+    if (attrs) for (var k in attrs) el.setAttribute(k, attrs[k])
+    return el
+  }
+
+  var svg = null
   var wrap = null
-  var ctx = null
   var W = 0
   var H = 0
   var camCX = 0
@@ -15,6 +20,40 @@
   var SCALE = 0
   var zoomLevel = 1.0
 
+  // SVG layer groups (created in init)
+  var worldG = null    // world coords: camera at (0,0), Y-up, scaled by SCALE
+  var bgSky = null
+  var bgSea = null
+  var horizLine = null
+  var ringsG = null    // sub-group: range rings + labels (rebuilt on zoom/resize)
+  var compassG = null  // sub-group: compass ticks (rebuilt on zoom/resize)
+  var zonesG = null    // sub-group: front/back arc sectors (rebuilt on frontArc change)
+
+  var dynamicCamG = null // one rotate(camHeading) for FOV wedge + boresight line
+  var coneEl = null
+  var camPointer = null
+  var camDot = null
+  var camCorners = []
+  var boatG = null
+  var boatDot = null
+  var boatHalo = null
+  var boatLabel = null
+  var trajLine = null
+  var bearingLine = null
+  var anchorS = null
+  var anchorE = null
+  var anchorSLabel = null
+  var anchorELabel = null
+  var FONT_SANS = 'Saira Condensed, Arial Narrow, Arial, sans-serif'
+  var statCache = {}
+
+  var lastTrackSx = NaN
+  var lastTrackSy = NaN
+  var lastTrackEx = NaN
+  var lastTrackEy = NaN
+  var lastDrawScale = NaN
+  var prevInFov = null
+
   var boatStart = { x: 0.0, y: 1.0 }
   var boatEnd = { x: 0.0, y: 0.15 }
   var dragging = null
@@ -34,7 +73,33 @@
   var lastPinchDist = null
   var rafId = 0
   var running = false
-  var camDir = -1
+  var camDir = 1
+
+  var inpFov = null
+  var inpFrontSpeed = null
+  var inpBackSpeed = null
+  var inpFrontArc = null
+  var inpBoatSpeed = null
+
+  var cachedConeFov = NaN
+  var cachedConeR = NaN
+  var cachedPtrLen = NaN
+
+  var lastDrawBx = NaN
+  var lastDrawBy = NaN
+
+  /** Cached svg.getBoundingClientRect() — avoids forced layout on every pointer move (web.dev / performance guides). */
+  var hitL = 0
+  var hitT = 0
+  var hitSx = 1
+  var hitSy = 1
+
+  var resizeRaf = 0
+  /** Side panel DOM refresh rate — decoupled from rAF so SVG and HTML work split. */
+  var panelStatsRaf = 0
+  var panelStatsPayload = null
+
+  var zoomVisualRaf = 0
 
   // Color palette — loaded from CSS custom properties at init
   var C = {
@@ -92,6 +157,21 @@
     C.wc = v('--warning-content')
     C.hi = v('--content-hi')
     C.lo = v('--content-lo')
+    // Update SVG elements that depend on theme colors
+    if (horizLine) horizLine.setAttribute('stroke', rgba(C.pr, 0.4))
+    if (zoomVisualRaf) {
+      cancelAnimationFrame(zoomVisualRaf)
+      zoomVisualRaf = 0
+    }
+    buildWorldElements()
+    buildZones()
+    prevInFov = null
+    syncThemedSceneStrokes()
+    if (panelStatsRaf) {
+      cancelAnimationFrame(panelStatsRaf)
+      panelStatsRaf = 0
+    }
+    panelStatsPayload = null
   }
 
   function rgba(triplet, alpha) {
@@ -108,15 +188,329 @@
     prevVisible = null
   }
 
+  // Clockwise sector path in world coords (Y-up). fromDeg/toDeg are degrees clockwise from north.
+  // Uses polyline approximation to avoid SVG arc sweep-flag issues in Y-flipped transforms.
+  // maxSteps caps segments for animated paths (FOV cone); omit for high-quality static zones.
+  function sectorPath(fromDeg, toDeg, R, maxSteps) {
+    var span = ((toDeg - fromDeg) + 360) % 360
+    var steps = Math.ceil(span / 2)
+    if (maxSteps != null && maxSteps > 0)
+      steps = Math.max(4, Math.min(maxSteps, Math.max(steps, 4)))
+    else
+      steps = Math.max(64, steps)
+    var d = 'M 0 0'
+    for (var i = 0; i <= steps; i++) {
+      var deg = fromDeg + (span / steps) * i
+      var rad = deg * Math.PI / 180
+      d += ' L ' + (Math.sin(rad) * R) + ' ' + (Math.cos(rad) * R)
+    }
+    return d + ' Z'
+  }
+
+  /** Furthest viewport corner from camera in world units (tight fill for zones / cone extent). */
+  function zoneFillRadiusWorld() {
+    if (SCALE === 0) return 0.1
+    function distWorld(px, py) {
+      var wx = (px - camCX) / SCALE
+      var wy = (camCY - py) / SCALE
+      return Math.hypot(wx, wy)
+    }
+    var r = Math.max(
+      distWorld(0, 0),
+      distWorld(W, 0),
+      distWorld(W, H),
+      distWorld(0, H),
+    )
+    var margin = r * 1.08
+    return Math.max(margin, 0.04)
+  }
+
+  /** FOV wedge must reach at least past the visible map (avoid huge fixed mins at high zoom). */
+  function coneRadiusWorld() {
+    if (SCALE === 0) return 0.1
+    var byDiag = Math.hypot(W, H) / SCALE * 1.12
+    return Math.max(zoneFillRadiusWorld(), byDiag)
+  }
+
+  /** Wedge + pointer geometry (north-centered). Call when FOV, zoom, or resize changes R. */
+  function syncConeAndPointerShape(p) {
+    if (!coneEl || SCALE === 0) return
+    var fov = p ? p.fov : (inpFov ? +inpFov.value : 18)
+    var R = coneRadiusWorld()
+    var ptrLen = 32 / SCALE
+    if (fov === cachedConeFov && Math.abs(R - cachedConeR) < 1e-6 && Math.abs(ptrLen - cachedPtrLen) < 1e-12)
+      return
+    cachedConeFov = fov
+    cachedConeR = R
+    cachedPtrLen = ptrLen
+    var half = fov / 2
+    coneEl.setAttribute('d', sectorPath(-half, half, R, 22))
+    camPointer.setAttribute('x2', 0)
+    camPointer.setAttribute('y2', ptrLen)
+  }
+
+  function syncThemedSceneStrokes() {
+    if (!coneEl) return
+    coneEl.setAttribute('fill', rgba(C.pr, 0.12))
+    coneEl.setAttribute('stroke', rgba(C.pr, 0.6))
+    camPointer.setAttribute('stroke', rgba(C.pr, 0.9))
+    camDot.setAttribute('fill', C.p)
+    camDot.setAttribute('stroke', rgba(C.pr, 0.5))
+    trajLine.setAttribute('stroke', rgba(C.dr, 0.25))
+    bearingLine.setAttribute('stroke', rgba(C.dr, 0.12))
+    var cornStroke = rgba(C.pr, 0.5)
+    for (var i = 0; i < 4; i++) camCorners[i].setAttribute('stroke', cornStroke)
+    anchorS.setAttribute('fill', C.d)
+    anchorE.setAttribute('fill', C.w)
+    anchorSLabel.setAttribute('fill', C.dc)
+    anchorELabel.setAttribute('fill', C.wc)
+  }
+
+  function updateTrackSvgGeomIfNeeded() {
+    if (boatStart.x === lastTrackSx && boatStart.y === lastTrackSy &&
+        boatEnd.x === lastTrackEx && boatEnd.y === lastTrackEy)
+      return
+    lastTrackSx = boatStart.x
+    lastTrackSy = boatStart.y
+    lastTrackEx = boatEnd.x
+    lastTrackEy = boatEnd.y
+
+    trajLine.setAttribute('x1', boatStart.x)
+    trajLine.setAttribute('y1', boatStart.y)
+    trajLine.setAttribute('x2', boatEnd.x)
+    trajLine.setAttribute('y2', boatEnd.y)
+
+    anchorS.setAttribute('cx', boatStart.x)
+    anchorS.setAttribute('cy', boatStart.y)
+    anchorE.setAttribute('cx', boatEnd.x)
+    anchorE.setAttribute('cy', boatEnd.y)
+
+    var syOff = 14 / SCALE
+    anchorSLabel.setAttribute('x', boatStart.x)
+    anchorSLabel.setAttribute('y', -(boatStart.y - syOff))
+    anchorELabel.setAttribute('x', boatEnd.x)
+    anchorELabel.setAttribute('y', -(boatEnd.y - syOff))
+  }
+
+  function updateScaleOnlySvgGeom() {
+    var cr = 8 / SCALE
+    camDot.setAttribute('r', cr)
+
+    var cornerPx = 14 / SCALE
+    var corners = [
+      [-cornerPx, cornerPx],
+      [cornerPx, cornerPx],
+      [cornerPx, -cornerPx],
+      [-cornerPx, -cornerPx],
+    ]
+    for (var ci = 0; ci < 4; ci++) {
+      var wx = corners[ci][0]
+      var wy = corners[ci][1]
+      camCorners[ci].setAttribute('x1', wx * 0.4)
+      camCorners[ci].setAttribute('y1', wy * 0.4)
+      camCorners[ci].setAttribute('x2', wx)
+      camCorners[ci].setAttribute('y2', wy)
+    }
+
+    var rAnch = 4 / SCALE
+    anchorS.setAttribute('r', rAnch)
+    anchorE.setAttribute('r', rAnch)
+    boatDot.setAttribute('r', 5 / SCALE)
+    boatHalo.setAttribute('r', 14 / SCALE)
+
+    var fsA = 11 / SCALE
+    anchorSLabel.setAttribute('font-size', fsA)
+    anchorELabel.setAttribute('font-size', fsA)
+    boatLabel.setAttribute('font-size', fsA)
+    boatLabel.setAttribute('x', 8 / SCALE)
+    boatLabel.setAttribute('y', -(4 / SCALE))
+    syncConeAndPointerShape(null)
+
+    invalidateTrackGeomLayout()
+  }
+
+  function invalidateTrackGeomLayout() {
+    lastTrackSx = NaN
+  }
+
+  function buildZones() {
+    if (!zonesG || SCALE === 0) return
+    while (zonesG.firstChild) zonesG.removeChild(zonesG.firstChild)
+    var frontArc = inpFrontArc ? +inpFrontArc.value : +$('input-front-arc').value
+    var frontHalf = frontArc / 2
+    var R = zoneFillRadiusWorld()
+
+    // Front sector: -frontHalf° to +frontHalf° (through north)
+    var front = svgEl('path', { d: sectorPath(-frontHalf, frontHalf, R),
+      fill: rgba(C.pr, 0.07), stroke: 'none' })
+    zonesG.appendChild(front)
+
+    // Back sector: +frontHalf° to 360-frontHalf° (through south)
+    var back = svgEl('path', { d: sectorPath(frontHalf, 360 - frontHalf, R),
+      fill: rgba(C.dr, 0.06), stroke: 'none' })
+    zonesG.appendChild(back)
+
+    // Boundary lines (dashed) at each edge
+    var e1r = (-frontHalf) * Math.PI / 180
+    var e2r = frontHalf * Math.PI / 180
+    zonesG.appendChild(svgEl('line', {
+      x1: 0, y1: 0, x2: Math.sin(e1r) * R, y2: Math.cos(e1r) * R,
+      stroke: rgba(C.pr, 0.5), 'stroke-width': 1, 'stroke-dasharray': '5 5',
+      'vector-effect': 'non-scaling-stroke'
+    }))
+    zonesG.appendChild(svgEl('line', {
+      x1: 0, y1: 0, x2: Math.sin(e2r) * R, y2: Math.cos(e2r) * R,
+      stroke: rgba(C.pr, 0.5), 'stroke-width': 1, 'stroke-dasharray': '5 5',
+      'vector-effect': 'non-scaling-stroke'
+    }))
+
+    // Zone labels in world coords (upright text pattern: y=-wy, transform scale(1,-1))
+    var labelR = 80 / SCALE
+    var fs = 11 / SCALE
+    var font = 'Saira Condensed, Arial Narrow, Arial, sans-serif'
+
+    var tFront = svgEl('text', { x: 0, y: -labelR, transform: 'scale(1,-1)',
+      fill: C.pc, 'font-size': fs, 'font-family': font, 'text-anchor': 'middle' })
+    tFront.textContent = 'FRONT ' + frontArc + '\u00b0'
+    zonesG.appendChild(tFront)
+
+    var tBack = svgEl('text', { x: 0, y: 18 / SCALE, transform: 'scale(1,-1)',
+      fill: C.dc, 'font-size': fs, 'font-family': font, 'text-anchor': 'middle' })
+    tBack.textContent = 'BACK ' + (360 - frontArc) + '\u00b0'
+    zonesG.appendChild(tBack)
+
+    var tE1 = svgEl('text', {
+      x: Math.sin(e1r) * labelR, y: -(Math.cos(e1r) * labelR),
+      transform: 'scale(1,-1)', fill: C.lo,
+      'font-size': fs, 'font-family': font, 'text-anchor': 'middle'
+    })
+    tE1.textContent = '\u00b1' + frontHalf.toFixed(0) + '\u00b0'
+    zonesG.appendChild(tE1)
+
+    var tE2 = svgEl('text', {
+      x: Math.sin(e2r) * labelR, y: -(Math.cos(e2r) * labelR),
+      transform: 'scale(1,-1)', fill: C.lo,
+      'font-size': fs, 'font-family': font, 'text-anchor': 'middle'
+    })
+    tE2.textContent = '\u00b1' + frontHalf.toFixed(0) + '\u00b0'
+    zonesG.appendChild(tE2)
+  }
+
+  function fmtDist(d) {
+    return d < 1 ? Math.round(d * 1000) + 'm' : d.toFixed(d < 10 ? 2 : 1).replace(/\.0+$/, '') + 'km'
+  }
+
+  // Rebuild range rings and compass ticks whenever SCALE changes (zoom or resize).
+  // All lengths expressed as px/SCALE so they render at a fixed pixel size.
+  function buildWorldElements() {
+    if (!ringsG || !compassG || SCALE === 0) return
+
+    // -- Range rings --
+    while (ringsG.firstChild) ringsG.removeChild(ringsG.firstChild)
+
+    var niceIntervals = [0.01, 0.025, 0.05, 0.1, 0.25, 0.5, 1.0, 2.0, 5.0]
+    var ringInterval = niceIntervals[0]
+    for (var i = 0; i < niceIntervals.length; i++) {
+      var iv = niceIntervals[i]
+      var px = iv * SCALE
+      if (px >= 100 && px <= 240) { ringInterval = iv; break }
+      if (px < 100) ringInterval = iv
+    }
+    var maxDist = Math.sqrt(Math.pow(Math.max(camCX, W - camCX), 2) + Math.pow(camCY, 2)) / SCALE
+    var maxRingCount = Math.ceil(maxDist / ringInterval) + 1
+    var fs = 12 / SCALE  // font-size in world units → 12px on screen
+
+    for (var ri = 1; ri <= maxRingCount; ri++) {
+      var r = ri * ringInterval
+      ringsG.appendChild(svgEl('circle', { cx: 0, cy: 0, r: r, fill: 'none',
+        stroke: rgba(C.pr, 0.25), 'stroke-width': 0.5, 'vector-effect': 'non-scaling-stroke' }))
+      // Tick at top of ring (world y = r)
+      var tw = 5 / SCALE
+      ringsG.appendChild(svgEl('line', { x1: -tw, y1: r, x2: tw, y2: r,
+        stroke: rgba(C.pr, 0.7), 'stroke-width': 1, 'vector-effect': 'non-scaling-stroke' }))
+      // Label: x offset = 8/SCALE, y = r (world). Text uses y=-r + scale(1,-1) to render upright.
+      var lbl = svgEl('text', { x: 8 / SCALE, y: -r, transform: 'scale(1,-1)',
+        fill: C.pc, 'font-size': fs, 'font-family': 'Saira Condensed, Arial Narrow, Arial, sans-serif' })
+      lbl.textContent = fmtDist(ri * ringInterval)
+      ringsG.appendChild(lbl)
+    }
+
+    // -- Compass ticks --
+    while (compassG.firstChild) compassG.removeChild(compassG.firstChild)
+
+    var compassR = Math.min(camCX * 0.88, camCY * 0.92) / SCALE
+    var fsC = 11 / SCALE
+
+    // North reference line (dashed, from camera to top)
+    compassG.appendChild(svgEl('line', { x1: 0, y1: 0, x2: 0, y2: compassR + 20 / SCALE,
+      stroke: rgba(C.pr, 0.2), 'stroke-width': 0.5, 'stroke-dasharray': (4 / SCALE) + ' ' + (4 / SCALE),
+      'vector-effect': 'non-scaling-stroke' }))
+
+    for (var deg = 0; deg < 360; deg += 10) {
+      var isMajor = deg % 30 === 0
+      var rad = deg * Math.PI / 180
+      var wx0 = Math.sin(rad) * compassR
+      var wy0 = Math.cos(rad) * compassR
+      var tickLen = (isMajor ? 8 : 4) / SCALE
+      var wx1 = Math.sin(rad) * (compassR + tickLen)
+      var wy1 = Math.cos(rad) * (compassR + tickLen)
+      compassG.appendChild(svgEl('line', {
+        x1: wx0, y1: wy0, x2: wx1, y2: wy1,
+        stroke: rgba(C.pr, isMajor ? 0.65 : 0.35),
+        'stroke-width': isMajor ? 1 : 0.5,
+        'vector-effect': 'non-scaling-stroke'
+      }))
+      if (isMajor) {
+        var labelR = compassR + (8 + 10) / SCALE
+        var lx = Math.sin(rad) * labelR
+        var ly = Math.cos(rad) * labelR
+        var t = svgEl('text', { x: lx, y: -ly, transform: 'scale(1,-1)',
+          fill: C.lo, 'font-size': fsC, 'font-family': 'Saira Condensed, Arial Narrow, Arial, sans-serif',
+          'text-anchor': 'middle', 'dominant-baseline': 'middle' })
+        t.textContent = deg + '\u00b0'
+        compassG.appendChild(t)
+      }
+    }
+  }
+
+  function updateWorldTransform() {
+    if (!worldG) return
+    worldG.setAttribute('transform',
+      'translate(' + camCX + ',' + camCY + ') scale(' + SCALE + ',' + (-SCALE) + ')')
+  }
+
+  function refreshSvgHitBox() {
+    if (!svg || W <= 0 || H <= 0) return
+    var r = svg.getBoundingClientRect()
+    var rw = r.width
+    var rh = r.height
+    if (rw < 1 || rh < 1) return
+    hitL = r.left
+    hitT = r.top
+    hitSx = W / rw
+    hitSy = H / rh
+  }
+
   function resize() {
-    if (!wrap || !canvas) return
+    if (!svg || !wrap) return
     W = wrap.clientWidth
     H = wrap.clientHeight
-    canvas.width = W
-    canvas.height = H
+    svg.setAttribute('width', W)
+    svg.setAttribute('height', H)
     camCX = W / 2
     camCY = H * 0.88
     SCALE = Math.min(W, H) * 0.42 * zoomLevel
+    updateWorldTransform()
+    if (bgSky) { bgSky.setAttribute('width', W); bgSky.setAttribute('height', camCY) }
+    if (bgSea) { bgSea.setAttribute('y', camCY); bgSea.setAttribute('width', W); bgSea.setAttribute('height', H - camCY) }
+    if (horizLine) { horizLine.setAttribute('x2', W); horizLine.setAttribute('y1', camCY); horizLine.setAttribute('y2', camCY) }
+    buildWorldElements()
+    buildZones()
+    if (coneEl && SCALE > 0) {
+      updateScaleOnlySvgGeom()
+      lastDrawScale = SCALE
+    }
+    refreshSvgHitBox()
   }
 
   function updateZoomLabel() {
@@ -124,20 +518,39 @@
     if (el) el.textContent = Math.round(zoomLevel * 100) + '%'
   }
 
+  function flushZoomVisuals() {
+    zoomVisualRaf = 0
+    if (!svg || SCALE <= 0) return
+    buildWorldElements()
+    buildZones()
+    if (coneEl) {
+      updateScaleOnlySvgGeom()
+      lastDrawScale = SCALE
+    }
+    refreshSvgHitBox()
+  }
+
+  function scheduleZoomVisuals() {
+    if (zoomVisualRaf) return
+    zoomVisualRaf = requestAnimationFrame(flushZoomVisuals)
+  }
+
   function applyZoom(delta) {
     var factor = delta > 0 ? 1.12 : 1 / 1.12
     zoomLevel = Math.max(0.3, Math.min(8, zoomLevel * factor))
     SCALE = Math.min(W, H) * 0.42 * zoomLevel
+    updateWorldTransform()
+    scheduleZoomVisuals()
     updateZoomLabel()
   }
 
   function getParams() {
     return {
-      fov: +$('input-fov').value,
-      frontSpeed: +$('input-front-speed').value,
-      backSpeed: +$('input-back-speed').value,
-      frontArc: +$('input-front-arc').value,
-      boatSpeed: +$('input-boat-speed').value,
+      fov: +inpFov.value,
+      frontSpeed: +inpFrontSpeed.value,
+      backSpeed: +inpBackSpeed.value,
+      frontArc: +inpFrontArc.value,
+      boatSpeed: +inpBoatSpeed.value,
     }
   }
 
@@ -176,329 +589,112 @@
     return Math.abs(rel) <= fovVal / 2 && by > -0.05
   }
 
-  function drawDirIndicator(d) {
-    if (!ctx) return
-    var cx = 30,
-      cy = 30,
-      r = 14
-    ctx.beginPath()
-    ctx.arc(cx, cy, r, 0, Math.PI * 2)
-    ctx.strokeStyle = rgba(C.pr, 0.2)
-    ctx.lineWidth = 1
-    ctx.stroke()
-    var start = -Math.PI / 2
-    var end = start + (d > 0 ? 1.2 : -1.2)
-    ctx.beginPath()
-    ctx.arc(cx, cy, r - 3, start, end, d < 0)
-    ctx.strokeStyle = rgba(C.pr, 0.7)
-    ctx.lineWidth = 2
-    ctx.stroke()
-    var tx = cx + Math.cos(end) * (r - 3)
-    var ty = cy + Math.sin(end) * (r - 3)
-    ctx.beginPath()
-    ctx.arc(tx, ty, 2, 0, Math.PI * 2)
-    ctx.fillStyle = rgba(C.pr, 0.7)
-    ctx.fill()
-    ctx.fillStyle = C.pc
-    ctx.font = "12px Saira Condensed, Arial Narrow, Arial, sans-serif"
-    ctx.textAlign = 'center'
-    ctx.fillText(d > 0 ? 'CW' : 'CCW', cx, cy + 3)
-  }
-
   function draw(p, bx, by, inFov) {
-    if (!ctx) return
-    ctx.clearRect(0, 0, W, H)
-
-    ctx.fillStyle = C.s1
-    ctx.fillRect(0, 0, W, H)
-    ctx.fillStyle = C.s2
-    ctx.fillRect(0, camCY, W, H - camCY)
-
-    ctx.beginPath()
-    ctx.moveTo(0, camCY)
-    ctx.lineTo(W, camCY)
-    ctx.strokeStyle = rgba(C.pr, 0.4)
-    ctx.lineWidth = 1
-    ctx.setLineDash([6, 4])
-    ctx.stroke()
-    ctx.setLineDash([])
-
-    var niceIntervals = [0.01, 0.025, 0.05, 0.1, 0.25, 0.5, 1.0, 2.0, 5.0]
-    var targetMinPx = 100
-    var targetMaxPx = 240
-    var ringInterval = niceIntervals[0]
-    for (var i = 0; i < niceIntervals.length; i++) {
-      var iv = niceIntervals[i]
-      var px = iv * SCALE
-      if (px >= targetMinPx && px <= targetMaxPx) {
-        ringInterval = iv
-        break
-      }
-      if (px < targetMinPx) ringInterval = iv
-    }
-    var maxDist = Math.sqrt(Math.pow(Math.max(camCX, W - camCX), 2) + Math.pow(camCY, 2))
-    var maxRingCount = Math.ceil(maxDist / (ringInterval * SCALE)) + 1
-    function fmtDist(d) {
-      return d < 1 ? Math.round(d * 1000) + 'm' : d.toFixed(d < 10 ? 2 : 1).replace(/\.0+$/, '') + 'km'
+    if (!coneEl || SCALE === 0) return
+    if (SCALE !== lastDrawScale) {
+      lastDrawScale = SCALE
+      updateScaleOnlySvgGeom()
     }
+    updateTrackSvgGeomIfNeeded()
+    syncConeAndPointerShape(p)
 
-    for (var ri = 1; ri <= maxRingCount; ri++) {
-      var r = ri * ringInterval * SCALE
-      ctx.beginPath()
-      ctx.arc(camCX, camCY, r, 0, Math.PI * 2)
-      ctx.strokeStyle = rgba(C.pr, 0.25)
-      ctx.lineWidth = 0.5
-      ctx.stroke()
-      ctx.beginPath()
-      ctx.moveTo(camCX - 5, camCY - r)
-      ctx.lineTo(camCX + 5, camCY - r)
-      ctx.strokeStyle = rgba(C.pr, 0.7)
-      ctx.lineWidth = 1
-      ctx.stroke()
-      ctx.fillStyle = C.pc
-      ctx.font = "12px Saira Condensed, Arial Narrow, Arial, sans-serif"
-      ctx.textAlign = 'left'
-      ctx.fillText(fmtDist(ri * ringInterval), camCX + 8, camCY - r + 4)
-    }
+    dynamicCamG.setAttribute('transform', 'rotate(' + camHeading + ')')
 
-    var compassR = Math.min(camCX * 0.88, camCY * 0.92)
-    var canvasBase = -Math.PI / 2
-    for (var deg = 0; deg < 360; deg += 10) {
-      var a = canvasBase + (deg * Math.PI) / 180
-      var isMajor = deg % 30 === 0
-      var r0 = compassR
-      var r1 = compassR + (isMajor ? 8 : 4)
-      ctx.beginPath()
-      ctx.moveTo(camCX + Math.cos(a) * r0, camCY + Math.sin(a) * r0)
-      ctx.lineTo(camCX + Math.cos(a) * r1, camCY + Math.sin(a) * r1)
-      ctx.strokeStyle = isMajor ? rgba(C.pr, 0.65) : rgba(C.pr, 0.35)
-      ctx.lineWidth = isMajor ? 1 : 0.5
-      ctx.stroke()
-      if (isMajor) {
-        var lx = camCX + Math.cos(a) * (r1 + 10)
-        var ly = camCY + Math.sin(a) * (r1 + 10)
-        ctx.fillStyle = C.lo
-        ctx.font = "11px Saira Condensed, Arial Narrow, Arial, sans-serif"
-        ctx.textAlign = 'center'
-        ctx.textBaseline = 'middle'
-        ctx.fillText(deg + '°', lx, ly)
-        ctx.textBaseline = 'alphabetic'
-      }
+    if (bx !== lastDrawBx || by !== lastDrawBy) {
+      lastDrawBx = bx
+      lastDrawBy = by
+      bearingLine.setAttribute('x2', bx)
+      bearingLine.setAttribute('y2', by)
+      boatG.setAttribute('transform', 'translate(' + bx + ',' + by + ')')
     }
 
-    ctx.beginPath()
-    ctx.moveTo(camCX, camCY)
-    ctx.lineTo(camCX, 0)
-    ctx.strokeStyle = rgba(C.pr, 0.2)
-    ctx.lineWidth = 0.5
-    ctx.setLineDash([4, 4])
-    ctx.stroke()
-    ctx.setLineDash([])
-
-    var frontHalf = p.frontArc / 2
-    var frontA1 = canvasBase - (frontHalf * Math.PI) / 180
-    var frontA2 = canvasBase + (frontHalf * Math.PI) / 180
-    var INF = Math.max(W, H) * 3
-    ctx.save()
-    ctx.beginPath()
-    ctx.moveTo(camCX, camCY)
-    ctx.lineTo(camCX + Math.cos(frontA1) * INF, camCY + Math.sin(frontA1) * INF)
-    ctx.arc(camCX, camCY, INF, frontA1, frontA2)
-    ctx.closePath()
-    ctx.fillStyle = rgba(C.pr, 0.07)
-    ctx.fill()
-    ctx.beginPath()
-    ctx.moveTo(camCX, camCY)
-    ctx.lineTo(camCX + Math.cos(frontA2) * INF, camCY + Math.sin(frontA2) * INF)
-    ctx.arc(camCX, camCY, INF, frontA2, frontA1 + Math.PI * 2)
-    ctx.closePath()
-    ctx.fillStyle = rgba(C.dr, 0.06)
-    ctx.fill()
-    ctx.restore()
-
-    for (var ai = 0; ai < 2; ai++) {
-      var aedge = ai === 0 ? frontA1 : frontA2
-      ctx.beginPath()
-      ctx.moveTo(camCX, camCY)
-      ctx.lineTo(camCX + Math.cos(aedge) * INF, camCY + Math.sin(aedge) * INF)
-      ctx.strokeStyle = rgba(C.pr, 0.5)
-      ctx.lineWidth = 1
-      ctx.setLineDash([5, 5])
-      ctx.stroke()
-      ctx.setLineDash([])
+    if (prevInFov !== inFov) {
+      prevInFov = inFov
+      boatDot.setAttribute('fill', inFov ? C.s : C.d)
+      boatDot.setAttribute('stroke', inFov ? rgba(C.sr, 0.5) : rgba(C.dr, 0.4))
+      boatLabel.setAttribute('fill', inFov ? C.sc : C.dc)
     }
 
-    var labelR = 80
-    ctx.font = "11px Saira Condensed, Arial Narrow, Arial, sans-serif"
-    ctx.textAlign = 'center'
-    ctx.fillStyle = C.pc
-    ctx.fillText('FRONT ' + p.frontArc + '°', camCX, camCY - labelR)
-    ctx.fillStyle = C.dc
-    if (camCY + 18 < H - 2) ctx.fillText('BACK ' + (360 - p.frontArc) + '°', camCX, camCY + 18)
-    ctx.fillStyle = C.lo
-    ctx.fillText('±' + frontHalf.toFixed(0) + '°', camCX + Math.cos(frontA1) * labelR, camCY + Math.sin(frontA1) * labelR)
-    ctx.fillText('±' + frontHalf.toFixed(0) + '°', camCX + Math.cos(frontA2) * labelR, camCY + Math.sin(frontA2) * labelR)
-
-    var camRad = (camHeading * Math.PI) / 180
-    var fovRad = (p.fov * Math.PI) / 180
-    var coneLen = Math.max(W, H) * 2
-    ctx.beginPath()
-    ctx.moveTo(camCX, camCY)
-    ctx.arc(camCX, camCY, coneLen, canvasBase + camRad - fovRad / 2, canvasBase + camRad + fovRad / 2)
-    ctx.closePath()
-    ctx.fillStyle = rgba(C.pr, 0.12)
-    ctx.fill()
-    ctx.beginPath()
-    ctx.moveTo(camCX, camCY)
-    ctx.arc(camCX, camCY, coneLen, canvasBase + camRad - fovRad / 2, canvasBase + camRad + fovRad / 2)
-    ctx.closePath()
-    ctx.strokeStyle = rgba(C.pr, 0.6)
-    ctx.lineWidth = 1
-    ctx.stroke()
-
-    ctx.beginPath()
-    ctx.moveTo(camCX, camCY)
-    ctx.lineTo(camCX + Math.cos(canvasBase + camRad) * 32, camCY + Math.sin(canvasBase + camRad) * 32)
-    ctx.strokeStyle = rgba(C.pr, 0.9)
-    ctx.lineWidth = 1.5
-    ctx.stroke()
-
-    var bC = worldToCanvas(bx, by)
-    var bsC = worldToCanvas(boatStart.x, boatStart.y)
-    var beC = worldToCanvas(boatEnd.x, boatEnd.y)
-    ctx.beginPath()
-    ctx.moveTo(bsC.x, bsC.y)
-    ctx.lineTo(beC.x, beC.y)
-    ctx.strokeStyle = rgba(C.dr, 0.25)
-    ctx.lineWidth = 1
-    ctx.setLineDash([4, 3])
-    ctx.stroke()
-    ctx.setLineDash([])
-
-    ctx.beginPath()
-    ctx.moveTo(camCX, camCY)
-    ctx.lineTo(bC.x, bC.y)
-    ctx.strokeStyle = rgba(C.dr, 0.12)
-    ctx.lineWidth = 0.5
-    ctx.stroke()
-
     if (inFov) {
-      ctx.beginPath()
-      ctx.arc(bC.x, bC.y, 14, 0, Math.PI * 2)
-      ctx.fillStyle = rgba(C.sr, 0.12)
-      ctx.fill()
+      boatHalo.setAttribute('display', '')
+      boatHalo.setAttribute('fill', rgba(C.sr, 0.12))
+    } else {
+      boatHalo.setAttribute('display', 'none')
     }
+  }
 
-    ctx.beginPath()
-    ctx.arc(bC.x, bC.y, 5, 0, Math.PI * 2)
-    ctx.fillStyle = inFov ? C.s : C.d
-    ctx.fill()
-    ctx.strokeStyle = inFov ? rgba(C.sr, 0.5) : rgba(C.dr, 0.4)
-    ctx.lineWidth = 1.5
-    ctx.stroke()
-
-    ctx.font = "11px Saira Condensed, Arial Narrow, Arial, sans-serif"
-    ctx.textAlign = 'left'
-    ctx.fillStyle = inFov ? C.sc : C.dc
-    ctx.fillText('TGT', bC.x + 8, bC.y - 4)
-
-    ctx.beginPath()
-    ctx.arc(bsC.x, bsC.y, 4, 0, Math.PI * 2)
-    ctx.fillStyle = C.d
-    ctx.fill()
-    ctx.beginPath()
-    ctx.arc(beC.x, beC.y, 4, 0, Math.PI * 2)
-    ctx.fillStyle = C.w
-    ctx.fill()
-    ctx.font = "11px Saira Condensed, Arial Narrow, Arial, sans-serif"
-    ctx.fillStyle = C.dc
-    ctx.textAlign = 'center'
-    ctx.fillText('S', bsC.x, bsC.y + 14)
-    ctx.fillStyle = C.wc
-    ctx.fillText('E', beC.x, beC.y + 14)
-
-    var cr = 8
-    ctx.beginPath()
-    ctx.arc(camCX, camCY, cr, 0, Math.PI * 2)
-    ctx.fillStyle = C.p
-    ctx.fill()
-    ctx.strokeStyle = rgba(C.pr, 0.5)
-    ctx.lineWidth = 1.5
-    ctx.stroke()
-    var corners = [
-      [-14, -14],
-      [14, -14],
-      [14, 14],
-      [-14, 14],
-    ]
-    for (var ci = 0; ci < corners.length; ci++) {
-      var dx = corners[ci][0],
-        dy = corners[ci][1]
-      ctx.beginPath()
-      ctx.moveTo(camCX + dx * 0.4, camCY + dy * 0.4)
-      ctx.lineTo(camCX + dx, camCY + dy)
-      ctx.strokeStyle = rgba(C.pr, 0.5)
-      ctx.lineWidth = 1
-      ctx.stroke()
-    }
+  function schedulePanelStats(p, bx, by, inFov) {
+    panelStatsPayload = { p: p, bx: bx, by: by, inFov: inFov }
+    if (panelStatsRaf) return
+    panelStatsRaf = requestAnimationFrame(flushPanelStats)
+  }
 
-    drawDirIndicator(camDir)
+  function flushPanelStats() {
+    panelStatsRaf = 0
+    if (!panelStatsPayload) return
+    var q = panelStatsPayload
+    panelStatsPayload = null
+    updateStats(q.p, q.bx, q.by, q.inFov)
+  }
 
+  function updateStats(p, bx, by, inFov) {
     var dist = Math.sqrt(bx * bx + by * by)
     var h360 = ((camHeading % 360) + 360) % 360
     var st = scanTime(p)
-
-    function setText(id, text) {
-      var el = $(id)
-      if (el) el.textContent = text
-    }
-
-    setText('st-scan', st.toFixed(1) + 's')
-    setText('st-angle', h360.toFixed(1) + '°')
-    setText('st-dist', (dist * 1000).toFixed(0) + 'm')
-
-    var travelEl = $('st-travel')
-    var blindEl = $('st-blind')
-    var travelPrevEl = $('st-travel-prev')
-    var blindPrevEl = $('st-blind-prev')
-    var riskEl = $('st-risk')
-    var riskBarEl = $('st-risk-bar')
-    if (travelEl) {
-      travelEl.textContent = (inFov ? detectedStreak : lastDetectedStreak).toFixed(1) + 'm'
-      travelEl.style.opacity = inFov ? '1' : '0.5'
+    var c = statCache
+
+    var tScan = st.toFixed(1) + 's'
+    if (c.elScan && c.lastScan !== tScan) { c.elScan.textContent = tScan; c.lastScan = tScan }
+    var tAng = h360.toFixed(1) + '°'
+    if (c.elAngle && c.lastAngle !== tAng) { c.elAngle.textContent = tAng; c.lastAngle = tAng }
+    var tDist = (dist * 1000).toFixed(0) + 'm'
+    if (c.elDist && c.lastDist !== tDist) { c.elDist.textContent = tDist; c.lastDist = tDist }
+
+    var travelM = (inFov ? detectedStreak : lastDetectedStreak).toFixed(1) + 'm'
+    var blindM = (!inFov ? blindStreak : lastBlindStreak).toFixed(1) + 'm'
+    if (c.elTravel) {
+      if (c.lastTravel !== travelM) { c.elTravel.textContent = travelM; c.lastTravel = travelM }
+      var to = inFov ? '1' : '0.5'
+      if (c.lastTravelOp !== to) { c.elTravel.style.opacity = to; c.lastTravelOp = to }
     }
-    if (blindEl) {
-      blindEl.textContent = (!inFov ? blindStreak : lastBlindStreak).toFixed(1) + 'm'
-      blindEl.style.opacity = !inFov ? '1' : '0.5'
+    if (c.elBlind) {
+      if (c.lastBlind !== blindM) { c.elBlind.textContent = blindM; c.lastBlind = blindM }
+      var bo = !inFov ? '1' : '0.5'
+      if (c.lastBlindOp !== bo) { c.elBlind.style.opacity = bo; c.lastBlindOp = bo }
     }
-    if (travelPrevEl)
-      travelPrevEl.textContent =
-        prevDetectedStreak > 0 ? 'prev: ' + prevDetectedStreak.toFixed(1) + 'm' : 'prev: —'
-    if (blindPrevEl)
-      blindPrevEl.textContent =
-        prevBlindStreak > 0 ? 'prev: ' + prevBlindStreak.toFixed(1) + 'm' : 'prev: —'
+
+    var tTrPrev = prevDetectedStreak > 0 ? 'prev: ' + prevDetectedStreak.toFixed(1) + 'm' : 'prev: —'
+    if (c.elTravelPrev && c.lastTravelPrev !== tTrPrev) { c.elTravelPrev.textContent = tTrPrev; c.lastTravelPrev = tTrPrev }
+    var tBlPrev = prevBlindStreak > 0 ? 'prev: ' + prevBlindStreak.toFixed(1) + 'm' : 'prev: —'
+    if (c.elBlindPrev && c.lastBlindPrev !== tBlPrev) { c.elBlindPrev.textContent = tBlPrev; c.lastBlindPrev = tBlPrev }
+
     var total = prevDetectedStreak + prevBlindStreak
-    if (riskEl && riskBarEl) {
+    if (c.elRisk && c.elRiskBar) {
       if (total > 0) {
         var risk = (prevBlindStreak / total) * 100
-        riskEl.textContent = risk.toFixed(0) + '%'
-        riskEl.style.color = risk > 66 ? 'var(--danger)' : risk > 33 ? 'var(--warning)' : 'var(--success)'
-        riskBarEl.style.width = risk + '%'
-        riskBarEl.style.background = risk > 66 ? 'var(--danger)' : risk > 33 ? 'var(--warning)' : 'var(--success)'
+        var riskT = risk.toFixed(0) + '%'
+        var col = risk > 66 ? 'var(--danger)' : risk > 33 ? 'var(--warning)' : 'var(--success)'
+        var w = risk + '%'
+        if (c.lastRiskT !== riskT) { c.elRisk.textContent = riskT; c.lastRiskT = riskT }
+        if (c.lastRiskCol !== col) { c.elRisk.style.color = col; c.lastRiskCol = col }
+        if (c.lastRiskW !== w) { c.elRiskBar.style.width = w; c.lastRiskW = w }
+        if (c.lastRiskBg !== col) { c.elRiskBar.style.background = col; c.lastRiskBg = col }
       } else {
-        riskEl.textContent = '—'
-        riskBarEl.style.width = '0%'
+        if (c.lastRiskT !== '—') { c.elRisk.textContent = '—'; c.lastRiskT = '—' }
+        if (c.lastRiskW !== '0%') { c.elRiskBar.style.width = '0%'; c.lastRiskW = '0%' }
       }
     }
-    var visEl = $('st-vis')
-    if (visEl) {
-      visEl.textContent = inFov ? 'YES' : 'NO'
-      visEl.className = 'val ' + (inFov ? 'active' : 'inactive')
+    var vis = inFov ? 'YES' : 'NO'
+    var visCls = 'val ' + (inFov ? 'active' : 'inactive')
+    if (c.elVis) {
+      if (c.lastVis !== vis) { c.elVis.textContent = vis; c.lastVis = vis }
+      if (c.lastVisCls !== visCls) { c.elVis.className = visCls; c.lastVisCls = visCls }
     }
   }
 
   function animate(ts) {
-    if (!running || !ctx) return
+    if (!running || !svg) return
+
     if (lastTime === null) lastTime = ts
     var dt = Math.min((ts - lastTime) / 1000, 0.1)
     lastTime = ts
@@ -522,7 +718,7 @@
 
     var front = isFront(camHeading, p.frontArc)
     var speed = front ? p.frontSpeed : p.backSpeed
-    camHeading += camDir * speed * dt
+    camHeading -= camDir * speed * dt
     if (camHeading >= 180) camHeading -= 360
     if (camHeading < -180) camHeading += 360
 
@@ -546,25 +742,31 @@
     else blindStreak += distThisFrame
     prevVisible = visible
 
-    draw(p, bx, by, visible)
+    if (!coneEl || SCALE === 0) {
+      updateStats(p, bx, by, visible)
+    } else {
+      draw(p, bx, by, visible)
+      schedulePanelStats(p, bx, by, visible)
+    }
     if (running) rafId = requestAnimationFrame(animate)
   }
 
   function getCanvasXY(e) {
-    if (!canvas) return { x: 0, y: 0 }
-    var rect = canvas.getBoundingClientRect()
-    var sx = W / rect.width
-    var sy = H / rect.height
+    if (!svg) return { x: 0, y: 0 }
     var src = 'touches' in e && e.touches.length ? e.touches[0] : e
-    return { x: (src.clientX - rect.left) * sx, y: (src.clientY - rect.top) * sy }
+    return { x: (src.clientX - hitL) * hitSx, y: (src.clientY - hitT) * hitSy }
   }
 
   function onResize() {
-    resize()
+    if (resizeRaf) return
+    resizeRaf = requestAnimationFrame(function () {
+      resizeRaf = 0
+      resize()
+    })
   }
 
   function onMouseDown(e) {
-    if (!canvas) return
+    if (!svg) return
     var pt = getCanvasXY(e)
     var bsC = worldToCanvas(boatStart.x, boatStart.y)
     var beC = worldToCanvas(boatEnd.x, boatEnd.y)
@@ -636,7 +838,7 @@
     applyZoom(-e.deltaY)
   }
 
-  function bindRange(id, valSpanId) {
+  function bindRange(id, valSpanId, onInput) {
     var input = $(id)
     var span = valSpanId ? $(valSpanId) : null
     function sync() {
@@ -645,16 +847,100 @@
     input.addEventListener('input', function () {
       sync()
       resetStreaks()
+      if (onInput) onInput()
     })
     sync()
   }
 
   function init() {
-    canvas = $('c')
+    svg = $('c')
     wrap = $('canvas-wrap')
-    if (!canvas || !wrap) return
-    ctx = canvas.getContext('2d')
-    if (!ctx) return
+    if (!svg || !wrap) return
+
+    // Build SVG layer structure
+    bgSky = svgEl('rect', { x: 0, y: 0, fill: 'var(--surface-1)' })
+    bgSea = svgEl('rect', { x: 0, y: 0, fill: 'var(--surface-2)' })
+    horizLine = svgEl('line', { x1: 0, 'stroke-dasharray': '6 4' })
+    ringsG = svgEl('g', { id: 'rings' })
+    compassG = svgEl('g', { id: 'compass' })
+    zonesG = svgEl('g', { id: 'zones' })
+    worldG = svgEl('g', { id: 'world' })
+    worldG.appendChild(compassG)
+    worldG.appendChild(zonesG)
+    worldG.appendChild(ringsG)
+
+    dynamicCamG = svgEl('g', { id: 'dynamic-cam' })
+    coneEl = svgEl('path', {
+      'stroke-linejoin': 'round', 'stroke-width': 1, 'vector-effect': 'non-scaling-stroke',
+    })
+    camPointer = svgEl('line', {
+      x1: 0, y1: 0, x2: 0, y2: 0.1,
+      'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke',
+    })
+    dynamicCamG.appendChild(coneEl)
+    dynamicCamG.appendChild(camPointer)
+    trajLine = svgEl('line', {
+      'stroke-width': 1, 'stroke-dasharray': '4 3', 'vector-effect': 'non-scaling-stroke',
+    })
+    bearingLine = svgEl('line', {
+      x1: 0, y1: 0, 'stroke-width': 0.5, 'vector-effect': 'non-scaling-stroke',
+    })
+    boatG = svgEl('g', { id: 'boat-layer' })
+    boatHalo = svgEl('circle', { cx: 0, cy: 0, stroke: 'none' })
+    boatDot = svgEl('circle', {
+      cx: 0, cy: 0, 'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke',
+    })
+    boatLabel = svgEl('text', {
+      'text-anchor': 'left', 'dominant-baseline': 'middle',
+      transform: 'scale(1,-1)', 'font-family': FONT_SANS,
+    })
+    boatLabel.textContent = 'TGT'
+    boatG.appendChild(boatHalo)
+    boatG.appendChild(boatDot)
+    boatG.appendChild(boatLabel)
+    anchorS = svgEl('circle', { stroke: 'none' })
+    anchorE = svgEl('circle', { stroke: 'none' })
+    anchorSLabel = svgEl('text', {
+      'text-anchor': 'middle', 'dominant-baseline': 'middle',
+      transform: 'scale(1,-1)', 'font-family': FONT_SANS,
+    })
+    anchorSLabel.textContent = 'S'
+    anchorELabel = svgEl('text', {
+      'text-anchor': 'middle', 'dominant-baseline': 'middle',
+      transform: 'scale(1,-1)', 'font-family': FONT_SANS,
+    })
+    anchorELabel.textContent = 'E'
+    camDot = svgEl('circle', {
+      cx: 0, cy: 0, 'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke',
+    })
+    for (var ci = 0; ci < 4; ci++)
+      camCorners.push(svgEl('line', { 'stroke-width': 1, 'vector-effect': 'non-scaling-stroke' }))
+
+    worldG.appendChild(dynamicCamG)
+    worldG.appendChild(trajLine)
+    worldG.appendChild(bearingLine)
+    worldG.appendChild(boatG)
+    worldG.appendChild(anchorS)
+    worldG.appendChild(anchorE)
+    worldG.appendChild(anchorSLabel)
+    worldG.appendChild(anchorELabel)
+    worldG.appendChild(camDot)
+    for (var cj = 0; cj < 4; cj++) worldG.appendChild(camCorners[cj])
+
+    svg.appendChild(bgSky)
+    svg.appendChild(bgSea)
+    svg.appendChild(horizLine)
+    svg.appendChild(worldG)
+
+    inpFov = $('input-fov')
+    inpFrontSpeed = $('input-front-speed')
+    inpBackSpeed = $('input-back-speed')
+    inpFrontArc = $('input-front-arc')
+    inpBoatSpeed = $('input-boat-speed')
+    cachedConeFov = NaN
+    cachedConeR = NaN
+    lastDrawBx = NaN
+    lastDrawBy = NaN
 
     initTheme()
     running = true
@@ -663,14 +949,14 @@
     setDir(-1)
     window.addEventListener('resize', onResize)
 
-    canvas.addEventListener('mousedown', onMouseDown)
-    canvas.addEventListener('mousemove', onMouseMove)
-    canvas.addEventListener('mouseup', onMouseUp)
-    canvas.addEventListener('touchstart', onTouchStart, { passive: false })
-    canvas.addEventListener('touchmove', onTouchMove, { passive: false })
-    canvas.addEventListener('touchend', onTouchEnd)
-    canvas.addEventListener('touchcancel', onTouchEnd)
-    canvas.addEventListener('wheel', onWheel, { passive: false })
+    svg.addEventListener('mousedown', onMouseDown)
+    svg.addEventListener('mousemove', onMouseMove)
+    svg.addEventListener('mouseup', onMouseUp)
+    svg.addEventListener('touchstart', onTouchStart, { passive: false })
+    svg.addEventListener('touchmove', onTouchMove, { passive: false })
+    svg.addEventListener('touchend', onTouchEnd)
+    svg.addEventListener('touchcancel', onTouchEnd)
+    svg.addEventListener('wheel', onWheel, { passive: false })
 
     $('zoom-out').addEventListener('click', function () {
       applyZoom(-1)
@@ -684,13 +970,26 @@
     $('dir-ccw').addEventListener('click', function () {
       setDir(-1)
     })
-
-    bindRange('input-fov', 'val-fov')
+    bindRange('input-fov', 'val-fov', function () {
+      cachedConeFov = NaN
+      cachedPtrLen = NaN
+    })
     bindRange('input-front-speed', 'val-front-speed')
     bindRange('input-back-speed', 'val-back-speed')
-    bindRange('input-front-arc', 'val-front-arc')
+    bindRange('input-front-arc', 'val-front-arc', buildZones)
     bindRange('input-boat-speed', 'val-boat-speed')
 
+    statCache.elScan = $('st-scan')
+    statCache.elAngle = $('st-angle')
+    statCache.elDist = $('st-dist')
+    statCache.elTravel = $('st-travel')
+    statCache.elBlind = $('st-blind')
+    statCache.elTravelPrev = $('st-travel-prev')
+    statCache.elBlindPrev = $('st-blind-prev')
+    statCache.elRisk = $('st-risk')
+    statCache.elRiskBar = $('st-risk-bar')
+    statCache.elVis = $('st-vis')
+
     rafId = requestAnimationFrame(animate)
   }
 

index.html

@@ -49,7 +49,7 @@
       </div>
 
       <div id="canvas-wrap">
-        <canvas id="c" width="800" height="600"></canvas>
+        <svg id="c"></svg>
         <div class="zoom-bar">
           <button type="button" class="zoom-btn" id="zoom-out" aria-label="Zoom out">−</button>
           <span id="zoom-label" class="zoom-label">100%</span>
@@ -144,26 +144,6 @@
           </div>
         </div>
 
-        <div class="section">
-          <div class="section-title">Legend</div>
-          <div class="section-body">
-            <div class="legend">
-              <div class="leg-item">
-                <span class="leg-dot leg-dot--cam"></span> Camera &amp; FOV
-              </div>
-              <div class="leg-item">
-                <span class="leg-dot leg-dot--boat"></span> Boat (undetected)
-              </div>
-              <div class="leg-item">
-                <span class="leg-dot leg-dot--det"></span> Boat (detected)
-              </div>
-              <div class="leg-item"><span class="leg-line leg-line--rings"></span> Range rings</div>
-              <div class="leg-item">
-                <span class="leg-line leg-line--arc"></span> Front arc boundary
-              </div>
-            </div>
-          </div>
-        </div>
       </div>
     </div>
   </div>

style.css

@@ -182,12 +182,17 @@ body {
   position: relative;
   background: var(--surface-1);
   overflow: hidden;
+  /* Own stacking context so heavy SVG repaints don’t fight the grid panel (paint isolation). */
+  isolation: isolate;
+  z-index: 0;
 }
 
-#canvas-wrap canvas {
+#canvas-wrap svg {
   display: block;
   width: 100%;
   height: 100%;
+  overflow: visible;
+  shape-rendering: optimizeSpeed;
 }
 
 /* ── Zoom bar ────────────────────────────────────────── */
@@ -241,9 +246,15 @@ body {
   border-left: var(--stroke);
   padding: var(--sp-s);
   overflow-y: auto;
+  height: 100%;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   gap: var(--sp-s);
+  position: relative;
+  z-index: 1;
+  /* layout containment only — style containment + busy SVG sibling caused visible flicker >~400% zoom. */
+  contain: layout;
 }
 
 /* ── Sections ────────────────────────────────────────── */
@@ -406,7 +417,7 @@ input[type='range']::-moz-range-thumb {
   border: none;
 }
 
-/* Direction toggle */
+/* Direction toggle (panel only; no on-map indicator) */
 .dir-toggle {
   display: flex;
   gap: var(--sp-xs);
@@ -452,47 +463,6 @@ input[type='range']::-moz-range-thumb {
 .hint-s { color: var(--danger-content); }
 .hint-e { color: var(--warning-content); }
 
-/* ── Legend ──────────────────────────────────────────── */
-
-.legend {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sp-s);
-}
-
-.leg-item {
-  display: flex;
-  align-items: center;
-  gap: var(--sp-s);
-  font-size: 12px;
-  font-weight: 400;
-  color: var(--content-mid);
-  text-transform: uppercase;
-}
-
-.leg-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.leg-dot--cam  { background: #0A67C2; }
-.leg-dot--boat { background: #C20A20; }
-.leg-dot--det  { background: #14A87A; }
-
-.leg-line {
-  width: 16px;
-  height: 1px;
-  flex-shrink: 0;
-}
-
-.leg-line--rings { background: rgba(10, 103, 194, 0.5); }
-
-.leg-line--arc {
-  border-top: 1px dashed rgba(10, 103, 194, 0.5);
-  height: 0;
-}
 
 /* ── Responsive ──────────────────────────────────────── */