Phase 1: PWA auto-update, player-view map fit fix, encounter picker

- PWA registerType autoUpdate + skipWaiting/clientsClaim/cleanupOutdatedCaches so
  a fresh deploy reaches browsers without a manual hard-reload (the old 'prompt'
  served the stale cached bundle, hiding shipped fixes like the polygon outline).
- MapCanvas: always mount the outer container so the ResizeObserver binds even when
  the map image arrives late over WebSocket — fixes the networked player view
  showing the map at 100% instead of fit ("3x magnified").
- TokenPalette: encounter picker for planned AND active encounters (was active-only),
  with per-encounter "+ All" and counts.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/features/world/map/MapCanvas.tsx

@@ -173,24 +173,32 @@ export function MapCanvas({ view, viewportHeight = '70vh', readOnly, playerFog,
   const zoomCentered = (factor: number) => setVp((v) => zoomToPoint(v, factor, size.w / 2, size.h / 2));
   const fit = () => { if (natural) setVp(fitViewport(size.w, size.h, natural.w, natural.h)); };
 
-  if (!view.image) return <p className="text-sm text-muted">No image.</p>;
-
+  // NOTE: always render the outer container (even with no image yet) so the
+  // ResizeObserver attaches. In the networked player view the map image arrives
+  // late over WebSocket; if we early-returned, the observer never bound, `size`
+  // stayed 0, fit() never ran, and the map showed at 100% instead of fit.
   return (
     <div ref={outerRef} data-testid="map-viewport" data-zoom={vp.zoom} className="relative overflow-hidden rounded-lg border border-line bg-surface" style={{ height: viewportHeight, touchAction: 'none' }}>
-      {!natural && <p className="p-3 text-sm text-muted">Loading map…</p>}
+      {!view.image
+        ? <p className="p-3 text-sm text-muted">No image.</p>
+        : !natural
+          ? <p className="p-3 text-sm text-muted">Loading map…</p>
+          : null}
 
       <canvas ref={canvasRef} className="pointer-events-none absolute inset-0 h-full w-full" />
 
       {/* pointer surface (below tokens so token drags win; tokens are small) */}
-      <div
-        className="absolute inset-0"
-        style={{ cursor: interactive ? 'crosshair' : 'grab', touchAction: 'none' }}
-        onPointerDown={ixDown}
-        onPointerMove={ixMove}
-        onPointerUp={ixUp}
-        onPointerLeave={() => { if (interactive) onLeave?.(); }}
-        onContextMenu={(e) => e.preventDefault()}
-      />
+      {view.image && (
+        <div
+          className="absolute inset-0"
+          style={{ cursor: interactive ? 'crosshair' : 'grab', touchAction: 'none' }}
+          onPointerDown={ixDown}
+          onPointerMove={ixMove}
+          onPointerUp={ixUp}
+          onPointerLeave={() => { if (interactive) onLeave?.(); }}
+          onContextMenu={(e) => e.preventDefault()}
+        />
+      )}
 
       {/* tokens: DOM positioned in screen space (no CSS scale → labels stay crisp) */}
       {natural && (