Finalize the general layout of the HUD

templates/Apps/DelveDiceHUD/difficulty.hbs

@@ -1,3 +1,14 @@
-<div>
-	Difficulty: {{dc}}
+<div id="delve-difficulty">
+	<div
+		class="icon-container"
+		data-tooltip="Difficulty: 8"
+	>
+		<span class="large">8</span>
+		<rc-icon
+			class="hourglass"
+			name="icons/d8-outline"
+			var:size="34px"
+			var:fill="var(--accent-2)"
+		></rc-icon>
+	</div>
 </div>

templates/Apps/DelveDiceHUD/style.css

@@ -1,6 +1,6 @@
 #ripcrypt-delve-dice {
 	display: grid;
-	grid-template-columns: max-content 1fr 0.6fr 1fr max-content;
+	grid-template-columns: max-content 2rem 90px 2rem max-content;
 	gap: 8px;
 	padding: 4px 1.5rem;
 	background: var(--DelveDice-background);
@@ -52,28 +52,37 @@
 		}
 	}
 
-	#the-hourglass {
+	#the-hourglass,
+	#delve-difficulty {
+		width: 100%;
+		height: 100%;
 		display: flex;
 		flex-direction: row;
 		position: relative;
 
-		.hourglass-container {
+		.icon-container {
 			position: absolute;
 			width: 34px;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
+			display: grid;
 			padding: 4px 0;
 			background: var(--accent-1);
 			border-radius: 8px;
 
+			> * {
+				grid-row: 1 / -1;
+				grid-column: 1 / -1;
+			}
+
+			span {
+				font-size: 1.25rem;
+				z-index: 2;
+				align-self: center;
+				justify-self: center;
+			}
+
 			rc-svg {
 				inset: 4px;
 			}
 		}
-
-		.hud-text {
-			margin-left: 38px;
-		}
 	}
 }

templates/Apps/DelveDiceHUD/tour/current.hbs

@@ -1,12 +1,15 @@
 <div id="the-hourglass">
-	<div class="hourglass-container">
+	<div
+		class="icon-container"
+		data-tooltip="Current Delve Tour: 8"
+	>
+		<span>
+			8
+		</span>
 		<rc-svg
 			class="hourglass"
 			name="icons/hourglass"
 			var:fill="var(--accent-2)"
 		></rc-svg>
 	</div>
-	<div class="hud-text">
-		The Hourglass
-	</div>
 </div>