Get the fate compass looking good

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 */
+		}
+	}
 }