Keep compass rose fixed while needle turns

wwwroot/css/app.css

@@ -1703,8 +1703,6 @@ label {
 .map-compass-rose {
     position: absolute;
     inset: 0;
-    transform: rotate(var(--compass-rotation));
-    transition: transform 120ms linear;
 }
 
 .map-compass-direction {
@@ -1743,10 +1741,11 @@ label {
     left: 50%;
     width: 4px;
     height: 23px;
-    transform: translateX(-50%);
+    transform: translateX(-50%) rotate(var(--compass-rotation));
     transform-origin: 50% 100%;
     border-radius: 4px 4px 1px 1px;
     background: #ef4444;
+    transition: transform 120ms linear;
 }
 
 .map-compass-needle::after {