Enhance Coastal Surveillance Simulator by adding new features and improving UI

- Introduced a new `rgba` function for color management in app.js.
- Added new variables for trail management and anchor elements.
- Updated index.html to reflect a new camera preset selection feature.
- Adjusted styles in style.css for improved layout and responsiveness, including increased button sizes and font adjustments for better readability.
- Enhanced theme toggle functionality with updated button designs and hover effects.

app.js

@@ -11,6 +11,10 @@
     return el
   }
 
+  function rgba(triplet, alpha) {
+    return 'rgba(' + triplet + ',' + alpha + ')'
+  }
+
   var svg = null
   var wrap = null
   var W = 0
@@ -19,31 +23,44 @@
   var camCY = 0
   var SCALE = 0
   var zoomLevel = 1.0
+  /** Keeps map labels readable vs panel type (~15% bump; pair with .coastal-surveillance-sim font-size). */
+  var MAP_LABEL_SCALE = 1.15
 
-  // SVG layer groups (created in init)
-  var worldG = null    // world coords: camera at (0,0), Y-up, scaled by SCALE
+  var worldG = null
   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 ringsG = null
+  var compassG = null
+  var zonesG = null
 
-  var dynamicCamG = null // one rotate(camHeading) for FOV wedge + boresight line
+  var dynamicCamG = null
   var coneEl = null
   var camPointer = null
   var camDot = null
   var camCorners = []
   var boatG = null
-  var boatDot = null
   var boatHalo = null
-  var boatLabel = null
+  var boatIconG = null
+  var boatIconScaleG = null
+  var boatHull = null
   var trajLine = null
+  var boatTrail = null
   var bearingLine = null
+  var anchorSOuter = null
   var anchorS = null
+  var anchorEOuter = null
   var anchorE = null
   var anchorSLabel = null
   var anchorELabel = null
+
+  var trailFlat = []
+  var TRAIL_CAP = 100
+  var TRAIL_MIN_DIST = 0.0028
+  /** Min blind+detected metres before showing blind share (avoids noisy % on tiny streaks). */
+  var MIN_BLIND_SHARE_M = 10
+  var lastTrailIconAngle = NaN
+
   var FONT_SANS = 'Saira Condensed, Arial Narrow, Arial, sans-serif'
   var statCache = {}
 
@@ -71,9 +88,8 @@
   var prevBlindStreak = 0
 
   var lastPinchDist = null
-  var rafId = 0
   var running = false
-  var camDir = 1
+  var camDir = -1
 
   var inpFov = null
   var inpFrontSpeed = null
@@ -88,20 +104,16 @@
   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 = {
     p: '', d: '', s: '', w: '', s1: '', s2: '',
     pr: '', dr: '', sr: '', wr: '',
@@ -110,94 +122,84 @@
 
   var systemQuery = window.matchMedia('(prefers-color-scheme: light)')
 
-  function applyTheme(pref) {
-    var sim = document.querySelector('.coastal-surveillance-sim')
-    var resolved = pref === 'system' ? (systemQuery.matches ? 'light' : 'dark') : pref
-    sim.dataset.theme = resolved
-    loadColors()
-    var btns = document.querySelectorAll('.theme-btn')
-    for (var i = 0; i < btns.length; i++) {
-      btns[i].classList.toggle('active', btns[i].dataset.themeVal === pref)
-    }
-  }
-
-  function initTheme() {
-    var saved = localStorage.getItem('theme') || 'system'
-    applyTheme(saved)
-    systemQuery.addEventListener('change', function () {
-      if (localStorage.getItem('theme') === 'system') applyTheme('system')
-    })
-    var btns = document.querySelectorAll('.theme-btn')
-    for (var i = 0; i < btns.length; i++) {
-      btns[i].addEventListener('click', function () {
-        var val = this.dataset.themeVal
-        localStorage.setItem('theme', val)
-        applyTheme(val)
-      })
-    }
-  }
-
   function loadColors() {
-    var el = document.querySelector('.coastal-surveillance-sim')
-    var cs = getComputedStyle(el)
+    var cs = getComputedStyle(document.querySelector('.coastal-surveillance-sim'))
     function v(n) { return cs.getPropertyValue(n).trim() }
-    C.p  = v('--primary')
-    C.d  = v('--danger')
-    C.s  = v('--success')
-    C.w  = v('--warning')
-    C.s1 = v('--surface-1')
-    C.s2 = v('--surface-2')
-    C.pr = v('--primary-rgb')
-    C.dr = v('--danger-rgb')
-    C.sr = v('--success-rgb')
-    C.wr = v('--warning-rgb')
-    C.pc = v('--primary-content')
-    C.dc = v('--danger-content')
-    C.sc = v('--success-content')
-    C.wc = v('--warning-content')
-    C.hi = v('--content-hi')
-    C.lo = v('--content-lo')
-    // Update SVG elements that depend on theme colors
+    C.p = v('--primary'); C.d = v('--danger'); C.s = v('--success'); C.w = v('--warning')
+    C.s1 = v('--surface-1'); C.s2 = v('--surface-2')
+    C.pr = v('--primary-rgb'); C.dr = v('--danger-rgb'); C.sr = v('--success-rgb'); C.wr = v('--warning-rgb')
+    C.pc = v('--primary-content'); C.dc = v('--danger-content'); C.sc = v('--success-content'); C.wc = v('--warning-content')
+    C.hi = v('--content-hi'); C.lo = v('--content-lo')
     if (horizLine) horizLine.setAttribute('stroke', rgba(C.pr, 0.4))
-    if (zoomVisualRaf) {
-      cancelAnimationFrame(zoomVisualRaf)
-      zoomVisualRaf = 0
-    }
+    if (zoomVisualRaf) { cancelAnimationFrame(zoomVisualRaf); zoomVisualRaf = 0 }
     buildWorldElements()
     buildZones()
     prevInFov = null
     syncThemedSceneStrokes()
-    if (panelStatsRaf) {
-      cancelAnimationFrame(panelStatsRaf)
-      panelStatsRaf = 0
-    }
+    if (panelStatsRaf) { cancelAnimationFrame(panelStatsRaf); panelStatsRaf = 0 }
     panelStatsPayload = null
   }
 
-  function rgba(triplet, alpha) {
-    return 'rgba(' + triplet + ',' + alpha + ')'
+  function initTheme() {
+    var btns = document.querySelectorAll('.theme-btn')
+    function applyTheme(pref) {
+      var sim = document.querySelector('.coastal-surveillance-sim')
+      sim.dataset.theme = pref === 'system' ? (systemQuery.matches ? 'light' : 'dark') : pref
+      loadColors()
+      for (var i = 0; i < btns.length; i++)
+        btns[i].classList.toggle('active', btns[i].dataset.themeVal === pref)
+    }
+    applyTheme(localStorage.getItem('theme') || 'system')
+    systemQuery.addEventListener('change', function () {
+      if (localStorage.getItem('theme') === 'system') applyTheme('system')
+    })
+    for (var j = 0; j < btns.length; j++)
+      btns[j].addEventListener('click', function () {
+        localStorage.setItem('theme', this.dataset.themeVal)
+        applyTheme(this.dataset.themeVal)
+      })
   }
 
   function resetStreaks() {
-    detectedStreak = 0
-    blindStreak = 0
-    lastDetectedStreak = 0
-    lastBlindStreak = 0
-    prevDetectedStreak = 0
-    prevBlindStreak = 0
-    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.
+    detectedStreak = blindStreak = lastDetectedStreak = lastBlindStreak = 0
+    prevDetectedStreak = prevBlindStreak = prevVisible = null
+  }
+
+  function clearTrail(resetIconAngle) {
+    trailFlat.length = 0
+    if (resetIconAngle !== false) lastTrailIconAngle = NaN
+    if (boatTrail) boatTrail.setAttribute('points', '')
+  }
+
+  function flushTrailPoly() {
+    if (!boatTrail || !trailFlat.length) return
+    var s = trailFlat[0] + ',' + trailFlat[1]
+    for (var i = 2; i < trailFlat.length; i += 2)
+      s += ' ' + trailFlat[i] + ',' + trailFlat[i + 1]
+    boatTrail.setAttribute('points', s)
+  }
+
+  function appendTrail(bx, by) {
+    var m = trailFlat.length
+    if (m >= 2) {
+      var lx = trailFlat[m - 2]
+      var ly = trailFlat[m - 1]
+      if (Math.hypot(bx - lx, by - ly) < TRAIL_MIN_DIST) return
+    }
+    trailFlat.push(bx, by)
+    while (trailFlat.length > TRAIL_CAP * 2) {
+      trailFlat.shift()
+      trailFlat.shift()
+    }
+    flushTrailPoly()
+  }
+
   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)
+    steps = maxSteps != null && maxSteps > 0
+      ? Math.max(4, Math.min(maxSteps, Math.max(steps, 4)))
+      : Math.max(64, steps)
     var d = 'M 0 0'
     for (var i = 0; i <= steps; i++) {
       var deg = fromDeg + (span / steps) * i
@@ -207,39 +209,25 @@
     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)
+      return Math.hypot((px - camCX) / SCALE, (camCY - py) / SCALE)
     }
-    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)
+    return Math.max(Math.max(distWorld(0, 0), distWorld(W, 0), distWorld(W, H), distWorld(0, H)) * 1.08, 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)
+    return Math.max(zoneFillRadiusWorld(), Math.hypot(W, H) / SCALE * 1.12)
   }
 
-  /** 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 fov = p ? p.fov : +inpFov.value
     var R = coneRadiusWorld()
     var ptrLen = 32 / SCALE
-    if (fov === cachedConeFov && Math.abs(R - cachedConeR) < 1e-6 && Math.abs(ptrLen - cachedPtrLen) < 1e-12)
-      return
+    if (fov === cachedConeFov && Math.abs(R - cachedConeR) < 1e-6 && Math.abs(ptrLen - cachedPtrLen) < 1e-12) return
     cachedConeFov = fov
     cachedConeR = R
     cachedPtrLen = ptrLen
@@ -258,34 +246,42 @@
     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)
+    for (var i = 0; i < 4; i++) camCorners[i].setAttribute('stroke', rgba(C.pr, 0.5))
+    anchorSOuter.setAttribute('stroke', rgba(C.dr, 0.72))
+    anchorS.setAttribute('fill', rgba(C.dr, 0.52))
+    anchorS.setAttribute('stroke', rgba(C.dr, 0.45))
+    anchorEOuter.setAttribute('stroke', rgba(C.wr, 0.72))
+    anchorE.setAttribute('fill', rgba(C.wr, 0.48))
+    anchorE.setAttribute('stroke', rgba(C.wr, 0.42))
+    anchorSLabel.setAttribute('fill', rgba(C.dr, 0.88))
+    anchorELabel.setAttribute('fill', rgba(C.wr, 0.88))
+    if (boatTrail) boatTrail.setAttribute('stroke', rgba(C.dr, 0.55))
   }
 
   function updateTrackSvgGeomIfNeeded() {
     if (boatStart.x === lastTrackSx && boatStart.y === lastTrackSy &&
-        boatEnd.x === lastTrackEx && boatEnd.y === lastTrackEy)
-      return
+        boatEnd.x === lastTrackEx && boatEnd.y === lastTrackEy) return
+    if (!isNaN(lastTrackSx) &&
+        (boatStart.x !== lastTrackSx || boatStart.y !== lastTrackSy ||
+          boatEnd.x !== lastTrackEx || boatEnd.y !== lastTrackEy))
+      clearTrail()
     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)
-
+    anchorSOuter.setAttribute('cx', boatStart.x)
+    anchorSOuter.setAttribute('cy', boatStart.y)
     anchorS.setAttribute('cx', boatStart.x)
     anchorS.setAttribute('cy', boatStart.y)
+    anchorEOuter.setAttribute('cx', boatEnd.x)
+    anchorEOuter.setAttribute('cy', boatEnd.y)
     anchorE.setAttribute('cx', boatEnd.x)
     anchorE.setAttribute('cy', boatEnd.y)
-
-    var syOff = 14 / SCALE
+    var syOff = 14 * MAP_LABEL_SCALE / SCALE
     anchorSLabel.setAttribute('x', boatStart.x)
     anchorSLabel.setAttribute('y', -(boatStart.y - syOff))
     anchorELabel.setAttribute('x', boatEnd.x)
@@ -294,179 +290,127 @@
 
   function updateScaleOnlySvgGeom() {
     var cr = 8 / SCALE
-    camDot.setAttribute('r', cr)
-
     var cornerPx = 14 / SCALE
-    var corners = [
-      [-cornerPx, cornerPx],
-      [cornerPx, cornerPx],
-      [cornerPx, -cornerPx],
-      [-cornerPx, -cornerPx],
-    ]
+    camDot.setAttribute('r', cr)
     for (var ci = 0; ci < 4; ci++) {
-      var wx = corners[ci][0]
-      var wy = corners[ci][1]
+      var wx = (ci === 0 || ci === 3 ? -1 : 1) * cornerPx
+      var wy = (ci < 2 ? 1 : -1) * cornerPx
       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
+    var rHit = 6 / SCALE
+    var rRing = 10 / SCALE
+    anchorS.setAttribute('r', rHit)
+    anchorSOuter.setAttribute('r', rRing)
+    anchorE.setAttribute('r', rHit)
+    anchorEOuter.setAttribute('r', rRing)
+    boatHalo.setAttribute('r', 22 / SCALE)
+    var fsA = 11 * MAP_LABEL_SCALE / 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))
+    var iconPx = 15 / SCALE
+    boatIconScaleG.setAttribute('transform', 'scale(' + iconPx + ')')
     syncConeAndPointerShape(null)
-
-    invalidateTrackGeomLayout()
+    lastTrackSx = NaN
   }
 
-  function invalidateTrackGeomLayout() {
-    lastTrackSx = NaN
+  function buildLineZone(x1, y1, x2, y2) {
+    return svgEl('line', {
+      x1: x1, y1: y1, x2: x2, y2: y2,
+      stroke: rgba(C.pr, 0.5), 'stroke-width': 1, 'stroke-dasharray': '5 5',
+      'vector-effect': 'non-scaling-stroke',
+    })
   }
 
   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 frontArc = +inpFrontArc.value
+    var fh = 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))
+    zonesG.appendChild(svgEl('path', { d: sectorPath(-fh, fh, R), fill: rgba(C.pr, 0.07), stroke: 'none' }))
+    zonesG.appendChild(svgEl('path', { d: sectorPath(fh, 360 - fh, R), fill: rgba(C.dr, 0.06), stroke: 'none' }))
+    var e1r = (-fh) * Math.PI / 180
+    var e2r = fh * Math.PI / 180
+    zonesG.appendChild(buildLineZone(0, 0, Math.sin(e1r) * R, Math.cos(e1r) * R))
+    zonesG.appendChild(buildLineZone(0, 0, Math.sin(e2r) * R, Math.cos(e2r) * R))
     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)
+    var fs = 11 * MAP_LABEL_SCALE / SCALE
+    var tf = svgEl('text', { x: 0, y: -labelR, transform: 'scale(1,-1)',
+      fill: C.pc, 'font-size': fs, 'font-family': FONT_SANS, 'text-anchor': 'middle' })
+    tf.textContent = 'FRONT ' + frontArc + '\u00b0'
+    zonesG.appendChild(tf)
+    var tb = svgEl('text', { x: 0, y: 18 * MAP_LABEL_SCALE / SCALE, transform: 'scale(1,-1)',
+      fill: C.dc, 'font-size': fs, 'font-family': FONT_SANS, 'text-anchor': 'middle' })
+    tb.textContent = 'BACK ' + (360 - frontArc) + '\u00b0'
+    zonesG.appendChild(tb)
+    var edgeTxt = '\u00b1' + fh.toFixed(0) + '\u00b0'
+    for (var ei = 0; ei < 2; ei++) {
+      var rad = ei ? e2r : e1r
+      var tx = svgEl('text', {
+        x: Math.sin(rad) * labelR, y: -(Math.cos(rad) * labelR),
+        transform: 'scale(1,-1)', fill: C.lo,
+        'font-size': fs, 'font-family': FONT_SANS, 'text-anchor': 'middle',
+      })
+      tx.textContent = edgeTxt
+      zonesG.appendChild(tx)
+    }
   }
 
   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 nice = [0.01, 0.025, 0.05, 0.1, 0.25, 0.5, 1.0, 2.0, 5.0]
+    var ringInterval = nice[0]
+    for (var i = 0; i < nice.length; i++) {
+      var px = nice[i] * SCALE
+      if (px >= 100 && px <= 240) { ringInterval = nice[i]; break }
+      if (px < 100) ringInterval = nice[i]
     }
     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 maxRing = Math.ceil(maxDist / ringInterval) + 1
+    var fs = 12 * MAP_LABEL_SCALE / SCALE
+    var tw = 5 / SCALE
+    for (var ri = 1; ri <= maxRing; 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)
+      var lbl = svgEl('text', { x: 8 * MAP_LABEL_SCALE / SCALE, y: -r, transform: 'scale(1,-1)',
+        fill: C.pc, 'font-size': fs, 'font-family': FONT_SANS })
+      lbl.textContent = fmtDist(r)
       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)
+    var fsC = 11 * MAP_LABEL_SCALE / SCALE
     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 maj = 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)
+      var tlen = (maj ? 8 : 4) / SCALE
       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'
+        x1: wx0, y1: wy0, x2: Math.sin(rad) * (compassR + tlen), y2: Math.cos(rad) * (compassR + tlen),
+        stroke: rgba(C.pr, maj ? 0.65 : 0.35),
+        'stroke-width': maj ? 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' })
+      if (maj) {
+        var lr = compassR + (8 + 10) * MAP_LABEL_SCALE / SCALE
+        var t = svgEl('text', { x: Math.sin(rad) * lr, y: -Math.cos(rad) * lr, transform: 'scale(1,-1)',
+          fill: C.lo, 'font-size': fsC, 'font-family': FONT_SANS, 'text-anchor': 'middle', 'dominant-baseline': 'middle' })
         t.textContent = deg + '\u00b0'
         compassG.appendChild(t)
       }
@@ -474,21 +418,28 @@
   }
 
   function updateWorldTransform() {
-    if (!worldG) return
-    worldG.setAttribute('transform',
+    if (worldG) 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
+    if (r.width < 1 || r.height < 1) return
     hitL = r.left
     hitT = r.top
-    hitSx = W / rw
-    hitSy = H / rh
+    hitSx = W / r.width
+    hitSy = H / r.height
+  }
+
+  function rebuildWorldSvg() {
+    buildWorldElements()
+    buildZones()
+    if (coneEl && SCALE > 0) {
+      updateScaleOnlySvgGeom()
+      lastDrawScale = SCALE
+    }
+    refreshSvgHitBox()
   }
 
   function resize() {
@@ -498,19 +449,13 @@
     svg.setAttribute('width', W)
     svg.setAttribute('height', H)
     camCX = W / 2
-    camCY = H * 0.88
+    camCY = H * 0.9
     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()
+    rebuildWorldSvg()
   }
 
   function updateZoomLabel() {
@@ -521,18 +466,11 @@
   function flushZoomVisuals() {
     zoomVisualRaf = 0
     if (!svg || SCALE <= 0) return
-    buildWorldElements()
-    buildZones()
-    if (coneEl) {
-      updateScaleOnlySvgGeom()
-      lastDrawScale = SCALE
-    }
-    refreshSvgHitBox()
+    rebuildWorldSvg()
   }
 
   function scheduleZoomVisuals() {
-    if (zoomVisualRaf) return
-    zoomVisualRaf = requestAnimationFrame(flushZoomVisuals)
+    if (!zoomVisualRaf) zoomVisualRaf = requestAnimationFrame(flushZoomVisuals)
   }
 
   function applyZoom(delta) {
@@ -568,10 +506,6 @@
     return Math.abs(h) <= arc / 2
   }
 
-  function scanTime(p) {
-    return p.frontArc / p.frontSpeed + (360 - p.frontArc) / p.backSpeed
-  }
-
   function setDir(d) {
     camDir = d
     var cw = $('dir-cw')
@@ -580,12 +514,10 @@
     if (ccw) ccw.classList.toggle('active', d === -1)
   }
 
-  function boatAngle(bx, by) {
-    return (Math.atan2(bx, by) * 180) / Math.PI
-  }
-
   function isBoatVisible(bx, by, heading, fovVal) {
-    var rel = (((boatAngle(bx, by) - heading + 540) % 360) - 180)
+    var boatB = (Math.atan2(bx, by) * 180) / Math.PI
+    /* Cone uses rotate(heading) inside worldG scale(S,-S); boresight world bearing = -heading in this atan2 convention. */
+    var rel = (((boatB + heading + 540) % 360) - 180)
     return Math.abs(rel) <= fovVal / 2 && by > -0.05
   }
 
@@ -597,9 +529,21 @@
     }
     updateTrackSvgGeomIfNeeded()
     syncConeAndPointerShape(p)
-
     dynamicCamG.setAttribute('transform', 'rotate(' + camHeading + ')')
 
+    var segX = boatEnd.x - boatStart.x
+    var segY = boatEnd.y - boatStart.y
+    var udx = segX * boatDir
+    var udy = segY * boatDir
+    var pl = Math.hypot(segX, segY)
+    /* Bow is drawn along +icon Y (world north). worldG uses scale(S,-S), so screen dir ∝ (udx,-udy). */
+    var iconAngle = 0
+    if (pl > 1e-5) {
+      iconAngle = (Math.atan2(udy, udx) * 180) / Math.PI - 90
+      lastTrailIconAngle = iconAngle
+    } else if (!isNaN(lastTrailIconAngle)) iconAngle = lastTrailIconAngle
+    boatIconG.setAttribute('transform', 'rotate(' + iconAngle + ')')
+
     if (bx !== lastDrawBx || by !== lastDrawBy) {
       lastDrawBx = bx
       lastDrawBy = by
@@ -607,128 +551,104 @@
       bearingLine.setAttribute('y2', by)
       boatG.setAttribute('transform', 'translate(' + bx + ',' + by + ')')
     }
-
     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)
+      boatHull.setAttribute('fill', inFov ? C.s : C.d)
+      boatHull.setAttribute('stroke', inFov ? rgba(C.sr, 0.9) : rgba(C.dr, 0.85))
     }
-
     if (inFov) {
       boatHalo.setAttribute('display', '')
-      boatHalo.setAttribute('fill', rgba(C.sr, 0.12))
-    } else {
-      boatHalo.setAttribute('display', 'none')
-    }
+      boatHalo.setAttribute('fill', rgba(C.sr, 0.14))
+    } else boatHalo.setAttribute('display', 'none')
   }
 
   function schedulePanelStats(p, bx, by, inFov) {
     panelStatsPayload = { p: p, bx: bx, by: by, inFov: inFov }
-    if (panelStatsRaf) return
-    panelStatsRaf = requestAnimationFrame(flushPanelStats)
-  }
-
-  function flushPanelStats() {
-    panelStatsRaf = 0
-    if (!panelStatsPayload) return
-    var q = panelStatsPayload
-    panelStatsPayload = null
-    updateStats(q.p, q.bx, q.by, q.inFov)
+    if (!panelStatsRaf) panelStatsRaf = requestAnimationFrame(function () {
+      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)
     var c = statCache
+    var dist = Math.hypot(bx, by)
+    var st = p.frontArc / p.frontSpeed + (360 - p.frontArc) / p.backSpeed
+
+    function u(el, k, s) {
+      if (el && c[k] !== s) { el.textContent = s; c[k] = s }
+    }
 
-    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 }
+    u(c.elScan, 'lastScan', st.toFixed(1) + 's')
+    u(c.elDist, 'lastDist', (dist * 1000).toFixed(0) + 'm')
 
     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 }
+      u(c.elTravel, 'lastTravel', travelM)
       var to = inFov ? '1' : '0.5'
       if (c.lastTravelOp !== to) { c.elTravel.style.opacity = to; c.lastTravelOp = to }
     }
     if (c.elBlind) {
-      if (c.lastBlind !== blindM) { c.elBlind.textContent = blindM; c.lastBlind = blindM }
+      u(c.elBlind, 'lastBlind', blindM)
       var bo = !inFov ? '1' : '0.5'
       if (c.lastBlindOp !== bo) { c.elBlind.style.opacity = bo; c.lastBlindOp = bo }
     }
 
-    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 }
+    u(c.elTravelPrev, 'lastTravelPrev', prevDetectedStreak > 0 ? 'prev: ' + prevDetectedStreak.toFixed(1) + 'm' : 'prev: —')
+    u(c.elBlindPrev, 'lastBlindPrev', prevBlindStreak > 0 ? 'prev: ' + prevBlindStreak.toFixed(1) + 'm' : 'prev: —')
 
-    var total = prevDetectedStreak + prevBlindStreak
+    var prevTotalM = prevDetectedStreak + prevBlindStreak
     if (c.elRisk && c.elRiskBar) {
-      if (total > 0) {
-        var risk = (prevBlindStreak / total) * 100
-        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 (prevTotalM >= MIN_BLIND_SHARE_M) {
+        var share = (prevBlindStreak / prevTotalM) * 100
+        var shareT = share.toFixed(0) + '%'
+        var col = share > 66 ? 'var(--danger)' : share > 33 ? 'var(--warning)' : 'var(--success)'
+        var w = share + '%'
+        u(c.elRisk, 'lastRiskT', shareT)
         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 {
-        if (c.lastRiskT !== '—') { c.elRisk.textContent = '—'; c.lastRiskT = '—' }
+        u(c.elRisk, 'lastRiskT', '—')
         if (c.lastRiskW !== '0%') { c.elRiskBar.style.width = '0%'; c.lastRiskW = '0%' }
       }
     }
     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 }
+      u(c.elVis, 'lastVis', vis)
       if (c.lastVisCls !== visCls) { c.elVis.className = visCls; c.lastVisCls = visCls }
     }
   }
 
   function animate(ts) {
     if (!running || !svg) return
-
     if (lastTime === null) lastTime = ts
     var dt = Math.min((ts - lastTime) / 1000, 0.1)
     lastTime = ts
-
     var p = getParams()
-
     var boatKmS = p.boatSpeed * 0.000514
     var pathLen = Math.hypot(boatEnd.x - boatStart.x, boatEnd.y - boatStart.y)
     if (pathLen > 0.001) {
-      var dtT = (boatKmS * dt) / pathLen
-      boatT += boatDir * dtT
-      if (boatT >= 1) {
-        boatT = 1
-        boatDir = -1
-      }
-      if (boatT <= 0) {
-        boatT = 0
-        boatDir = 1
-      }
+      boatT += boatDir * (boatKmS * dt) / pathLen
+      if (boatT >= 1) { boatT = 1; boatDir = -1 }
+      if (boatT <= 0) { boatT = 0; boatDir = 1 }
     }
-
-    var front = isFront(camHeading, p.frontArc)
-    var speed = front ? p.frontSpeed : p.backSpeed
+    var speed = isFront(camHeading, p.frontArc) ? p.frontSpeed : p.backSpeed
     camHeading -= camDir * speed * dt
     if (camHeading >= 180) camHeading -= 360
     if (camHeading < -180) camHeading += 360
-
     var bx = boatStart.x + (boatEnd.x - boatStart.x) * boatT
     var by = boatStart.y + (boatEnd.y - boatStart.y) * boatT
     var visible = isBoatVisible(bx, by, camHeading, p.fov)
-
     var distThisFrame = p.boatSpeed * 0.514 * dt
     if (prevVisible !== null && visible !== prevVisible) {
       if (visible) {
+        clearTrail(false)
         prevBlindStreak = blindStreak
         lastBlindStreak = blindStreak
         blindStreak = 0
@@ -742,68 +662,91 @@
     else blindStreak += distThisFrame
     prevVisible = visible
 
-    if (!coneEl || SCALE === 0) {
-      updateStats(p, bx, by, visible)
-    } else {
+    if (coneEl && SCALE > 0 && pathLen > 0.001 && !visible) appendTrail(bx, by)
+
+    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)
+    if (running) requestAnimationFrame(animate)
   }
 
   function getCanvasXY(e) {
-    if (!svg) return { x: 0, y: 0 }
     var src = 'touches' in e && e.touches.length ? e.touches[0] : e
     return { x: (src.clientX - hitL) * hitSx, y: (src.clientY - hitT) * hitSy }
   }
 
   function onResize() {
-    if (resizeRaf) return
-    resizeRaf = requestAnimationFrame(function () {
-      resizeRaf = 0
-      resize()
-    })
+    if (!resizeRaf) resizeRaf = requestAnimationFrame(function () { resizeRaf = 0; resize() })
   }
 
-  function onMouseDown(e) {
-    if (!svg) return
+  function tryDragStart(e, thresh) {
     var pt = getCanvasXY(e)
-    var bsC = worldToCanvas(boatStart.x, boatStart.y)
-    var beC = worldToCanvas(boatEnd.x, boatEnd.y)
-    if (Math.hypot(pt.x - bsC.x, pt.y - bsC.y) < 14) dragging = 'start'
-    else if (Math.hypot(pt.x - beC.x, pt.y - beC.y) < 14) dragging = 'end'
+    var s = worldToCanvas(boatStart.x, boatStart.y)
+    var end = worldToCanvas(boatEnd.x, boatEnd.y)
+    if (Math.hypot(pt.x - s.x, pt.y - s.y) < thresh) dragging = 'start'
+    else if (Math.hypot(pt.x - end.x, pt.y - end.y) < thresh) dragging = 'end'
   }
 
-  function onMouseMove(e) {
-    if (!dragging) return
+  function dragToWorld(e) {
     var pt = getCanvasXY(e)
     var w = canvasToWorld(pt.x, pt.y)
     w.y = Math.max(0.05, Math.min(1.3, w.y))
     w.x = Math.max(-1.4, Math.min(1.4, w.x))
     if (dragging === 'start') boatStart = w
-    else boatEnd = w
+    else if (dragging === 'end') boatEnd = w
+  }
+
+  function onMouseDown(e) {
+    lastPointerEv = e
+    tryDragStart(e, 26)
+    updateSvgCursor(e)
+  }
+
+  var CURSOR_NEAR = 30
+  var lastPointerEv = null
+
+  function updateSvgCursor(e) {
+    if (!svg || !SCALE) return
+    if (dragging) {
+      svg.style.cursor = 'grabbing'
+      return
+    }
+    var pt = getCanvasXY(e)
+    var s = worldToCanvas(boatStart.x, boatStart.y)
+    var end = worldToCanvas(boatEnd.x, boatEnd.y)
+    if (Math.hypot(pt.x - s.x, pt.y - s.y) < CURSOR_NEAR ||
+        Math.hypot(pt.x - end.x, pt.y - end.y) < CURSOR_NEAR)
+      svg.style.cursor = 'grab'
+    else svg.style.cursor = ''
+  }
+
+  function onMouseMove(e) {
+    lastPointerEv = e
+    if (dragging) dragToWorld(e)
+    updateSvgCursor(e)
   }
 
   function onMouseUp() {
     dragging = null
+    if (svg) {
+      if (lastPointerEv) updateSvgCursor(lastPointerEv)
+      else svg.style.cursor = ''
+    }
   }
 
   function onTouchStart(e) {
     if (e.touches.length === 2) {
       lastPinchDist = Math.hypot(
         e.touches[0].clientX - e.touches[1].clientX,
-        e.touches[0].clientY - e.touches[1].clientY,
-      )
+        e.touches[0].clientY - e.touches[1].clientY)
       dragging = null
       return
     }
     if (e.touches.length !== 1) return
     e.preventDefault()
-    var pt = getCanvasXY(e)
-    var bsC = worldToCanvas(boatStart.x, boatStart.y)
-    var beC = worldToCanvas(boatEnd.x, boatEnd.y)
-    if (Math.hypot(pt.x - bsC.x, pt.y - bsC.y) < 18) dragging = 'start'
-    else if (Math.hypot(pt.x - beC.x, pt.y - beC.y) < 18) dragging = 'end'
+    tryDragStart(e, 34)
   }
 
   function onTouchMove(e) {
@@ -811,21 +754,14 @@
       e.preventDefault()
       var dist = Math.hypot(
         e.touches[0].clientX - e.touches[1].clientX,
-        e.touches[0].clientY - e.touches[1].clientY,
-      )
-      var delta = dist - lastPinchDist
-      applyZoom(delta)
+        e.touches[0].clientY - e.touches[1].clientY)
+      applyZoom(dist - lastPinchDist)
       lastPinchDist = dist
       return
     }
     if (!dragging) return
     e.preventDefault()
-    var pt = getCanvasXY(e)
-    var w = canvasToWorld(pt.x, pt.y)
-    w.y = Math.max(0.05, Math.min(1.3, w.y))
-    w.x = Math.max(-1.4, Math.min(1.4, w.x))
-    if (dragging === 'start') boatStart = w
-    else boatEnd = w
+    dragToWorld(e)
   }
 
   function onTouchEnd(e) {
@@ -841,9 +777,7 @@
   function bindRange(id, valSpanId, onInput) {
     var input = $(id)
     var span = valSpanId ? $(valSpanId) : null
-    function sync() {
-      if (span) span.textContent = input.value
-    }
+    function sync() { if (span) span.textContent = input.value }
     input.addEventListener('input', function () {
       sync()
       resetStreaks()
@@ -852,12 +786,41 @@
     sync()
   }
 
+  /** VOS #1 = shipped defaults; proposal #2 uses 50° FOV (slider is degrees, not a zoom %). */
+  var CAMERA_PRESETS = {
+    vos1:  { fov: 18, frontSpeed: 6, backSpeed: 60, frontArc: 180 },
+    prop1: { fov: 18, frontSpeed: 7, backSpeed: 120, frontArc: 125 },
+    prop2: { fov: 50, frontSpeed: 8, backSpeed: 120, frontArc: 125 },
+  }
+
+  function clearPresetDropdown() {
+    var sel = $('camera-preset')
+    if (sel) sel.value = ''
+  }
+
+  function applyCameraPreset(key) {
+    var p = CAMERA_PRESETS[key]
+    if (!p || !inpFov) return
+    inpFov.value = String(p.fov)
+    inpFrontSpeed.value = String(p.frontSpeed)
+    inpBackSpeed.value = String(p.backSpeed)
+    inpFrontArc.value = String(p.frontArc)
+    $('val-fov').textContent = inpFov.value
+    $('val-front-speed').textContent = inpFrontSpeed.value
+    $('val-back-speed').textContent = inpBackSpeed.value
+    $('val-front-arc').textContent = inpFrontArc.value
+    cachedConeFov = cachedPtrLen = NaN
+    resetStreaks()
+    buildZones()
+    var sel = $('camera-preset')
+    if (sel) sel.value = key
+  }
+
   function init() {
     svg = $('c')
     wrap = $('canvas-wrap')
     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' })
@@ -870,57 +833,59 @@
     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',
-    })
+    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',
+    trajLine = svgEl('line', { 'stroke-width': 1, 'stroke-dasharray': '4 3', 'vector-effect': 'non-scaling-stroke' })
+    boatTrail = svgEl('polyline', {
+      fill: 'none', 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+      '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,
+    boatIconG = svgEl('g')
+    boatIconScaleG = svgEl('g')
+    boatHull = svgEl('path', {
+      d: 'M 0 1.05 L 0.38 0.22 L 0.26 -0.72 L -0.26 -0.72 L -0.38 0.22 Z',
+      'stroke-width': 1.2, 'stroke-linejoin': 'round', 'vector-effect': 'non-scaling-stroke',
     })
-    boatLabel.textContent = 'TGT'
+    boatIconScaleG.appendChild(boatHull)
+    boatIconG.appendChild(boatIconScaleG)
     boatG.appendChild(boatHalo)
-    boatG.appendChild(boatDot)
-    boatG.appendChild(boatLabel)
-    anchorS = svgEl('circle', { stroke: 'none' })
-    anchorE = svgEl('circle', { stroke: 'none' })
+    boatG.appendChild(boatIconG)
+    anchorSOuter = svgEl('circle', {
+      class: 'drag-anchor-ring drag-anchor-ring--start',
+      fill: 'none', 'stroke-width': 2.5, 'vector-effect': 'non-scaling-stroke',
+    })
+    anchorS = svgEl('circle', { class: 'drag-anchor-core drag-anchor-core--start', 'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke' })
+    anchorEOuter = svgEl('circle', {
+      class: 'drag-anchor-ring drag-anchor-ring--end',
+      fill: 'none', 'stroke-width': 2.5, 'vector-effect': 'non-scaling-stroke',
+    })
+    anchorE = svgEl('circle', { class: 'drag-anchor-core drag-anchor-core--end', 'stroke-width': 1.5, 'vector-effect': 'non-scaling-stroke' })
     anchorSLabel = svgEl('text', {
-      'text-anchor': 'middle', 'dominant-baseline': 'middle',
-      transform: 'scale(1,-1)', 'font-family': FONT_SANS,
+      class: 'drag-anchor-label',
+      '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,
+      class: 'drag-anchor-label drag-anchor-label--end',
+      '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' }))
+    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(boatTrail)
     worldG.appendChild(bearingLine)
     worldG.appendChild(boatG)
+    worldG.appendChild(anchorSOuter)
     worldG.appendChild(anchorS)
+    worldG.appendChild(anchorEOuter)
     worldG.appendChild(anchorE)
     worldG.appendChild(anchorSLabel)
     worldG.appendChild(anchorELabel)
@@ -937,10 +902,8 @@
     inpBackSpeed = $('input-back-speed')
     inpFrontArc = $('input-front-arc')
     inpBoatSpeed = $('input-boat-speed')
-    cachedConeFov = NaN
-    cachedConeR = NaN
-    lastDrawBx = NaN
-    lastDrawBy = NaN
+    cachedConeFov = cachedConeR = cachedPtrLen = NaN
+    lastDrawBx = lastDrawBy = NaN
 
     initTheme()
     running = true
@@ -952,35 +915,40 @@
     svg.addEventListener('mousedown', onMouseDown)
     svg.addEventListener('mousemove', onMouseMove)
     svg.addEventListener('mouseup', onMouseUp)
+    svg.addEventListener('mouseleave', function () {
+      if (!dragging) svg.style.cursor = ''
+    })
     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)
-    })
-    $('zoom-in').addEventListener('click', function () {
-      applyZoom(1)
-    })
-    $('dir-cw').addEventListener('click', function () {
-      setDir(1)
-    })
-    $('dir-ccw').addEventListener('click', function () {
-      setDir(-1)
-    })
+    $('zoom-out').addEventListener('click', function () { applyZoom(-1) })
+    $('zoom-in').addEventListener('click', function () { applyZoom(1) })
+    $('dir-cw').addEventListener('click', function () { setDir(1) })
+    $('dir-ccw').addEventListener('click', function () { setDir(-1) })
     bindRange('input-fov', 'val-fov', function () {
-      cachedConeFov = NaN
-      cachedPtrLen = NaN
+      cachedConeFov = cachedPtrLen = NaN
+      clearPresetDropdown()
+    })
+    bindRange('input-front-speed', 'val-front-speed', clearPresetDropdown)
+    bindRange('input-back-speed', 'val-back-speed', clearPresetDropdown)
+    bindRange('input-front-arc', 'val-front-arc', function () {
+      clearPresetDropdown()
+      buildZones()
     })
-    bindRange('input-front-speed', 'val-front-speed')
-    bindRange('input-back-speed', 'val-back-speed')
-    bindRange('input-front-arc', 'val-front-arc', buildZones)
     bindRange('input-boat-speed', 'val-boat-speed')
 
+    var presetSelect = $('camera-preset')
+    if (presetSelect) {
+      presetSelect.addEventListener('change', function () {
+        var k = presetSelect.value
+        if (k) applyCameraPreset(k)
+      })
+    }
+
     statCache.elScan = $('st-scan')
-    statCache.elAngle = $('st-angle')
     statCache.elDist = $('st-dist')
     statCache.elTravel = $('st-travel')
     statCache.elBlind = $('st-blind')
@@ -990,7 +958,7 @@
     statCache.elRiskBar = $('st-risk-bar')
     statCache.elVis = $('st-vis')
 
-    rafId = requestAnimationFrame(animate)
+    requestAnimationFrame(animate)
   }
 
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init)

index.html

@@ -17,11 +17,11 @@
       <div id="header">
         <span class="blink" aria-hidden="true"></span>
         <h1>Coastal Surveillance Sim</h1>
-        <span class="sub">// PTZ camera model</span>
+        <span class="sub">// COASTKEEPER - ONEBERRY</span>
         <div class="spacer"></div>
         <div class="theme-toggle" id="theme-toggle">
           <button type="button" class="theme-btn" data-theme-val="light" title="Light theme" aria-label="Light theme">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <svg width="18" height="18" viewBox="0 0 16 16" fill="none" aria-hidden="true">
               <circle cx="8" cy="8" r="3" stroke="currentColor" stroke-width="1.5"/>
               <line x1="8" y1="1" x2="8" y2="3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
               <line x1="8" y1="13" x2="8" y2="15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
@@ -34,12 +34,12 @@
             </svg>
           </button>
           <button type="button" class="theme-btn" data-theme-val="dark" title="Dark theme" aria-label="Dark theme">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <svg width="18" height="18" viewBox="0 0 16 16" fill="none" aria-hidden="true">
               <path d="M13.5 10.5A6 6 0 0 1 5.5 2.5a6 6 0 1 0 8 8z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
           </button>
           <button type="button" class="theme-btn" data-theme-val="system" title="System theme" aria-label="System theme">
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <svg width="18" height="18" viewBox="0 0 16 16" fill="none" aria-hidden="true">
               <rect x="1" y="2" width="14" height="10" rx="1.5" stroke="currentColor" stroke-width="1.5"/>
               <line x1="5" y1="14" x2="11" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
               <line x1="8" y1="12" x2="8" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
@@ -65,10 +65,6 @@
               <div class="lbl">Scan time</div>
               <div id="st-scan" class="val">—</div>
             </div>
-            <div class="stat">
-              <div class="lbl">Cam heading</div>
-              <div id="st-angle" class="val">—</div>
-            </div>
             <div class="stat">
               <div class="lbl">Boat dist.</div>
               <div id="st-dist" class="val">—</div>
@@ -77,6 +73,15 @@
               <div class="lbl">Detected</div>
               <div id="st-vis" class="val">—</div>
             </div>
+            <div class="stat stat-risk" title="Blind metres ÷ (blind + detected metres) from your last completed in-FOV and out-of-FOV spells. The bar fills only after their combined length reaches a minimum (avoids noisy early readings).">
+              <div class="lbl">Blind share</div>
+              <div class="risk-row">
+                <div id="st-risk" class="val st-risk-val">—</div>
+                <div class="risk-track">
+                  <div id="st-risk-bar" class="risk-fill"></div>
+                </div>
+              </div>
+            </div>
           </div>
           <div class="stats-extra">
             <div class="stat">
@@ -89,21 +94,21 @@
               <div id="st-blind" class="val st-sm">—</div>
               <div id="st-blind-prev" class="stat-sub">prev: —</div>
             </div>
-            <div class="stat stat-risk">
-              <div class="lbl">Blind risk</div>
-              <div class="risk-row">
-                <div id="st-risk" class="val st-risk-val">—</div>
-                <div class="risk-track">
-                  <div id="st-risk-bar" class="risk-fill"></div>
-                </div>
-              </div>
-            </div>
           </div>
         </div>
 
         <div class="section">
           <div class="section-title">Camera</div>
           <div class="section-body">
+            <div class="ctrl">
+              <label for="camera-preset">Presets</label>
+              <select id="camera-preset" class="preset-select" aria-label="Apply a camera preset">
+                <option value="" selected>—</option>
+                <option value="vos1">VOS #1 (default)</option>
+                <option value="prop1">Proposal #1</option>
+                <option value="prop2">Proposal #2</option>
+              </select>
+            </div>
             <div class="ctrl">
               <label for="input-fov">FOV <span id="val-fov">18</span>°</label>
               <input id="input-fov" type="range" min="5" max="90" step="1" value="18" />

style.css

@@ -3,6 +3,8 @@ body,
 #app {
   height: 100%;
   margin: 0;
+  /* Let nested grid/flex shrink below content so inner panes can scroll (incl. browser zoom). */
+  min-height: 0;
 }
 
 body {
@@ -55,14 +57,15 @@ body {
   box-sizing: border-box;
   width: 100%;
   height: 100%;
+  min-height: 0;
   background: var(--surface-1);
   color: var(--content-hi);
   font-family: var(--font);
-  font-size: 14px;
+  font-size: 16px;
   overflow: hidden;
   display: grid;
-  grid-template-columns: 1fr 264px;
-  grid-template-rows: 40px 1fr;
+  grid-template-columns: 1fr 304px;
+  grid-template-rows: 46px minmax(0, 1fr);
 }
 
 /* SEA.AI Design Tokens — LIGHT theme */
@@ -109,7 +112,7 @@ body {
 }
 
 #header h1 {
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 500;
   letter-spacing: 0.02em;
   color: var(--content-hi);
@@ -118,7 +121,7 @@ body {
 }
 
 #header .sub {
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   color: var(--content-lo);
   letter-spacing: 0.02em;
@@ -155,8 +158,8 @@ body {
 }
 
 .theme-btn {
-  width: 28px;
-  height: 28px;
+  width: 32px;
+  height: 32px;
   padding: 0;
   background: transparent;
   border: none;
@@ -180,11 +183,15 @@ body {
 
 #canvas-wrap {
   position: relative;
+  min-height: 0;
   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;
+  /* Drags were selecting compass/ring labels as text; map chrome isn’t meant to be selectable. */
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 #canvas-wrap svg {
@@ -193,6 +200,50 @@ body {
   height: 100%;
   overflow: visible;
   shape-rendering: optimizeSpeed;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+/* Draggable anchor affordance — discrete pulse; opacity stacks with fill/stroke alphas from JS. */
+@keyframes drag-anchor-ring-pulse {
+  0%, 100% { opacity: 0.8; }
+  50% { opacity: 1; }
+}
+
+@keyframes drag-anchor-core-pulse {
+  0%, 100% { opacity: 0.9; }
+  50% { opacity: 1; }
+}
+
+@keyframes drag-anchor-label-pulse {
+  0%, 100% { opacity: 0.84; }
+  50% { opacity: 1; }
+}
+
+#canvas-wrap svg .drag-anchor-ring {
+  animation: drag-anchor-ring-pulse 2.75s ease-in-out infinite;
+}
+
+#canvas-wrap svg .drag-anchor-ring--end,
+#canvas-wrap svg .drag-anchor-core--end,
+#canvas-wrap svg .drag-anchor-label--end {
+  animation-delay: 1.38s;
+}
+
+#canvas-wrap svg .drag-anchor-core {
+  animation: drag-anchor-core-pulse 2.75s ease-in-out infinite;
+}
+
+#canvas-wrap svg .drag-anchor-label {
+  animation: drag-anchor-label-pulse 2.75s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #canvas-wrap svg .drag-anchor-ring,
+  #canvas-wrap svg .drag-anchor-core,
+  #canvas-wrap svg .drag-anchor-label {
+    animation: none;
+  }
 }
 
 /* ── Zoom bar ────────────────────────────────────────── */
@@ -203,28 +254,28 @@ body {
   right: var(--sp-m);
   display: flex;
   align-items: center;
-  gap: var(--sp-xs);
+  gap: var(--sp-s);
   z-index: 10;
 }
 
 .zoom-label {
   font-family: var(--font);
-  font-size: 12px;
+  font-size: 15px;
   font-weight: 500;
   color: var(--content-mid);
-  min-width: 36px;
+  min-width: 50px;
   text-align: center;
 }
 
 .zoom-btn {
-  width: 32px;
-  height: 32px;
+  width: 52px;
+  height: 52px;
   background: var(--surface-3);
   border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: var(--radious-s);
+  border-radius: var(--radious-m);
   color: var(--content-mid);
   font-family: var(--font);
-  font-size: 18px;
+  font-size: 28px;
   font-weight: 400;
   cursor: pointer;
   display: flex;
@@ -245,20 +296,27 @@ body {
   background: var(--surface-2);
   border-left: var(--stroke);
   padding: var(--sp-s);
+  overflow-x: hidden;
   overflow-y: auto;
+  overscroll-behavior: contain;
   height: 100%;
   min-height: 0;
+  max-height: 100%;
   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;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* ── Sections ────────────────────────────────────────── */
 
+/* Keep natural height so the panel scrolls instead of squishing controls. */
+#panel > .section {
+  flex-shrink: 0;
+}
+
 .section {
   background: var(--surface-3);
   border-radius: var(--radious-m);
@@ -266,7 +324,7 @@ body {
 }
 
 .section-title {
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   letter-spacing: 0;
   text-transform: uppercase;
@@ -293,7 +351,7 @@ body {
 }
 
 .stat .lbl {
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   letter-spacing: 0;
   text-transform: uppercase;
@@ -302,7 +360,7 @@ body {
 }
 
 .stat .val {
-  font-size: 20px;
+  font-size: 23px;
   font-weight: 400;
   color: var(--content-hi);
   line-height: 1.2;
@@ -319,14 +377,10 @@ body {
   background: var(--surface-2);
 }
 
-.stats-extra .stat-risk {
-  grid-column: 1 / -1;
-}
-
-.st-sm { font-size: 16px; }
+.st-sm { font-size: 18px; }
 
 .stat-sub {
-  font-size: 11px;
+  font-size: 16px;
   font-weight: 400;
   color: var(--content-lo);
   margin-top: 2px;
@@ -340,8 +394,8 @@ body {
 }
 
 .st-risk-val {
-  font-size: 16px;
-  min-width: 44px;
+  font-size: 18px;
+  min-width: 50px;
 }
 
 .risk-track {
@@ -373,7 +427,7 @@ body {
 .ctrl label {
   display: flex;
   justify-content: space-between;
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--content-lo);
   margin-bottom: var(--sp-xs);
@@ -382,7 +436,7 @@ body {
 
 .ctrl label span {
   color: var(--content-hi);
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 400;
 }
 
@@ -417,6 +471,38 @@ input[type='range']::-moz-range-thumb {
   border: none;
 }
 
+/* Camera presets */
+.preset-select {
+  width: 100%;
+  height: 42px;
+  padding: 0 var(--sp-m);
+  background-color: var(--surface-4);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: var(--radious-s);
+  color: var(--content-hi);
+  font-family: var(--font);
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+}
+
+.preset-select:hover {
+  border-color: rgba(255, 255, 255, 0.16);
+}
+
+.preset-select:focus {
+  border-color: var(--primary);
+}
+
+.coastal-surveillance-sim[data-theme="light"] .preset-select {
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.coastal-surveillance-sim[data-theme="light"] .preset-select:hover {
+  border-color: rgba(0, 0, 0, 0.18);
+}
+
 /* Direction toggle (panel only; no on-map indicator) */
 .dir-toggle {
   display: flex;
@@ -426,13 +512,13 @@ input[type='range']::-moz-range-thumb {
 
 .dir-btn {
   flex: 1;
-  height: 40px;
+  height: 46px;
   background: var(--surface-4);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: var(--radious-s);
   color: var(--content-lo);
   font-family: var(--font);
-  font-size: 14px;
+  font-size: 16px;
   font-weight: 500;
   letter-spacing: 0.015em;
   cursor: pointer;
@@ -454,7 +540,7 @@ input[type='range']::-moz-range-thumb {
 
 /* Hint */
 .hint {
-  font-size: 12px;
+  font-size: 14px;
   font-weight: 400;
   color: var(--content-lo);
   line-height: 1.5;
@@ -469,7 +555,7 @@ input[type='range']::-moz-range-thumb {
 @media (max-width: 700px) {
   .coastal-surveillance-sim {
     grid-template-columns: 1fr;
-    grid-template-rows: 40px 55vw 1fr;
+    grid-template-rows: 46px minmax(0, 55vw) minmax(0, 1fr);
   }
   #panel {
     border-left: none;