Get the fate compass looking good

templates/Apps/DelveDiceHUD/fateCompass.hbs

@@ -1,3 +1,16 @@
 <div id="fate-compass">
-	North
+	<div class="compass-container">
+		<div class="compass">
+			<span style="grid-area: N;">N</span>
+			<span style="grid-area: W;">W</span>
+			<rc-icon
+				class="compass-pointer"
+				name="icons/arrow-compass"
+				var:fill="var(--accent-3)"
+				var:size="1rem"
+			></rc-icon>
+			<span style="grid-area: E;">E</span>
+			<span style="grid-area: S;">S</span>
+		</div>
+	</div>
 </div>

templates/Apps/DelveDiceHUD/style.css

@@ -15,4 +15,40 @@
 			cursor: pointer;
 		}
 	}
+
+	#fate-compass {
+		width: 100%;
+		height: 100%;
+		overflow: visible;
+		position: relative;
+
+		.compass-container {
+			position: absolute;
+			background: var(--DelveDice-background);
+			border-radius: 0 0 999px 999px;
+			padding: 4px;
+			width: 100%;
+		}
+
+		.compass {
+			display: grid;
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+			grid-template-rows: repeat(3, minmax(0, 1fr));
+			grid-template-areas:
+				". N ."
+				"W A E"
+				". S .";
+			align-items: center;
+			justify-items: center;
+			background: var(--accent-2);
+			border-radius: 999px;
+			aspect-ratio: 1;
+		}
+
+		.compass-pointer {
+			grid-area: A;
+			transition: 500ms transform;
+			transform: rotate(-90deg); /* North by default */
+		}
+	}
 }