Add functionality to the CryptApp to make it update/display the current difficulty, and rerender when it changes.

templates/Apps/CryptApp/delveConditions.hbs

@@ -0,0 +1,17 @@
+<div>
+	<rc-border
+		var:border-color="var(--accent-1)"
+	>
+		<div slot="title">
+			Difficulty
+		</div>
+		<div slot="content">
+			<span>{{ difficulty }}</span>
+			{{#if meta.editable}}
+				<select id="{{meta.idp}}-difficulty">
+					{{ rc-options difficulty options localize=true }}
+				</select>
+			{{/if}}
+		</div>
+	</rc-border>
+</div>

templates/Apps/CryptApp/fate.hbs

@@ -0,0 +1,12 @@
+<div>
+	<rc-border
+		var:border-color="var(--accent-1)"
+	>
+		<div slot="title">
+			Fate
+		</div>
+		<div slot="content">
+			N
+		</div>
+	</rc-border>
+</div>

templates/Apps/CryptApp/main.hbs

@@ -1,3 +0,0 @@
-<div>
-	Hello
-</div>

templates/Apps/CryptApp/style.css

@@ -0,0 +1,13 @@
+.ripcrypt.ripcrypt--CryptApp {
+	max-width: initial;
+	min-width: initial;
+
+	> .window-header .window-title {
+		text-align: center;
+	}
+
+	> .window-content {
+		background: var(--base-background);
+		padding: 4px;
+	};
+}

templates/Apps/CryptApp/turnCount.hbs

@@ -0,0 +1,12 @@
+<div>
+	<rc-border
+		var:border-color="var(--accent-1)"
+	>
+		<div slot="title">
+			Turn
+		</div>
+		<div slot="content">
+			1
+		</div>
+	</rc-border>
+</div>

templates/Apps/apps.css

@@ -1,5 +1,6 @@
 @import url("./AllItemSheetV1/style.css");
 @import url("./CombinedHeroSheet/style.css");
+@import url("./CryptApp/style.css");
 @import url("./DicePool/style.css");
 @import url("./HeroSummaryCardV1/style.css");
 @import url("./HeroSkillsCardV1/style.css");

templates/css/components/rc-border.css

@@ -1,7 +1,7 @@
 :host {
 	display: flex;
 	flex-direction: column;
-	--vertical-displacement: 10px;
+	--vertical-displacement: 12.5px;
 }
 
 .rc-border {
@@ -18,7 +18,7 @@
 	border-radius: 8px;
 	position: relative;
 	margin-top: var(--margin-top, var(--vertical-displacement));
-	padding-top: var(--padding-top, var(--vertical-displacement));
+	padding-top: var(--padding-top, calc(var(--vertical-displacement) + 4px));
 
 	&::before {
 		display: block;
@@ -60,5 +60,6 @@
 		max-width: 75%;
 		min-width: 50px;
 		border-radius: 4px;
+		text-align: center;
 	}
 }

templates/css/themes/dark.css

@@ -17,7 +17,7 @@
 	--alt-row-background: var(--accent-2);
 
 	--input-underline: 2px dashed var(--accent-3);
-	--input-background: inherit;
+	--input-background: var(--accent-2);
 	--input-text: white;
 	--input-placeholder-text: rgba(255,255,255, 0.5);