Add draggable compass and restore project fiducials

wwwroot/css/app.css

@@ -1676,43 +1676,77 @@ label {
 
 .map-compass {
     --compass-rotation: 0deg;
+    --compass-radius: -31px;
     position: absolute;
     top: 50%;
     left: 12px;
     z-index: 810;
-    width: 54px;
-    height: 54px;
+    width: 82px;
+    height: 82px;
     transform: translateY(-50%);
     border: 2px solid rgba(255, 255, 255, 0.92);
     border-radius: 50%;
     background: rgba(22, 31, 38, 0.86);
     box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3);
     color: #fff;
-    pointer-events: none;
+    cursor: grab;
+    pointer-events: auto;
+    touch-action: none;
+    user-select: none;
 }
 
-.map-compass-north {
+.map-compass.is-dragging {
+    cursor: grabbing;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
+}
+
+.map-compass-rose {
     position: absolute;
-    top: 2px;
+    inset: 0;
+    transform: rotate(var(--compass-rotation));
+    transition: transform 120ms linear;
+}
+
+.map-compass-direction {
+    position: absolute;
+    top: 50%;
     left: 50%;
-    transform: translateX(-50%);
+    width: 20px;
+    height: 12px;
+    transform: translate(-50%, -50%) rotate(var(--direction-angle)) translateY(var(--compass-radius));
+    color: #f8fafc;
+    font-size: 9px;
+    font-weight: 800;
+    line-height: 1;
+    text-align: center;
+}
+
+.map-compass-direction > span {
+    display: block;
+    transform: rotate(var(--label-counter));
+}
+
+.map-compass-direction.is-intermediate {
+    color: #cbd5e1;
+    font-size: 7px;
+}
+
+.map-compass-direction.is-north {
     color: #fca5a5;
     font-size: 11px;
     font-weight: 900;
-    line-height: 1;
 }
 
 .map-compass-needle {
     position: absolute;
-    bottom: 25px;
+    bottom: 50%;
     left: 50%;
     width: 4px;
-    height: 18px;
-    transform: translateX(-50%) rotate(var(--compass-rotation));
+    height: 23px;
+    transform: translateX(-50%);
     transform-origin: 50% 100%;
     border-radius: 4px 4px 1px 1px;
     background: #ef4444;
-    transition: transform 120ms linear;
 }
 
 .map-compass-needle::after {
@@ -2015,9 +2049,10 @@ footer {
     }
 
     .map-compass {
+        --compass-radius: -27px;
         left: 8px;
-        width: 48px;
-        height: 48px;
+        width: 72px;
+        height: 72px;
     }
 
     .map-info-text {