Compass.tsx

/**
 * Cardinal compass rose, fixed to the bottom-right of a canvas.
 *
 * `rotationDeg` rotates the whole rose clockwise (screen space). In the 2D plan
 * north is always up (rotationDeg = 0); in 3D the dial tracks the camera so the
 * needle keeps pointing at world-north as you orbit.
 */
export function Compass({ rotationDeg = 0 }: { rotationDeg?: number }) {
  return (
    <div className="absolute bottom-2 right-2 z-10 pointer-events-none">
      <svg
        width={68}
        height={68}
        viewBox="-34 -34 68 68"
        className="drop-shadow"
        aria-label="Compass"
      >
        <circle r={31} fill="white" fillOpacity={0.9} stroke="#d6d3d1" strokeWidth={1} />
        <g transform={`rotate(${rotationDeg})`}>
          {/* Needle: north half red, south half slate */}