1 files changed, 100 insertions, 57 deletions

diff --git a/web/static/style.css b/web/static/style.css
index f0f4b2f..64ae4df 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -47,6 +47,8 @@
 }
 
 html {
+	font-size: clamp(1.5vh, 2.5vw, 2vh);
+
 	height: 100vh;
 }
 
@@ -66,7 +68,6 @@ body {
 
 #main {
 	background-color: #111;
-	font-size: clamp(1.5vh, 2.5vw, 2vh);
 
 	height: 100%;
 	margin: 0 auto;
@@ -115,12 +116,65 @@ body {
 	gap: 0.4rem;
 }
 
-#titlebar div.input.first {
+#titlebar .name {
+	font-family: 'Source Serif 4', serif;
+	line-height: 1em;
+
+	margin-top: 0.05em;
+}
+
+#titlebar .button {
+	color: #eee;
+	background-color: #583a90;
+	border-radius: 0.4rem;
+	text-align: center;
+
+	height: 100%;
+	padding: 0 0.4rem;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+#titlebar #key-exit {
+	display: none;
+}
+
+#titlebar #key-exit.visible {
+	display: flex;
+}
+
+#titlebar #key-exit.active {
+	background-color: #680018;
+}
+
+@media (hover: hover) and (pointer: fine) {
+	#titlebar .button:hover {
+		color: #fff;
+		background-color: #6e49b4;
+	}
+
+	#titlebar #key-exit.active:hover {
+		background-color: #82001e;
+	}
+}
+
+#titlebar .button:active {
+	color: #fff;
+	background-color: #7b51ca;
+}
+
+#titlebar #key-exit.active:active {
+	background-color: #920022;
+}
+
+#titlebar .opt-input.first {
 	margin-left: auto;
 }
 
-#titlebar div.input {
-	background-color: #222;
+#titlebar .opt-input {
+	height: 100%;
 
 	display: flex;
 	flex-wrap: wrap;
@@ -128,13 +182,22 @@ body {
 	justify-content: center;
 }
 
-#titlebar label {
+#titlebar .opt-input label {
+	color: #ccc;
+	background-color: #282828;
+	border-radius: 0.4rem 0 0 0.4rem;
+
+	height: 100%;
 	padding: 0 0.4rem;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
-#titlebar input {
+#titlebar .opt-input input {
 	color: #eee;
-	background-color: #3d2466;
+	background-color: #583a90;
 	font-family: inherit;
 	font-size: 1em;
 	text-align: right;
@@ -142,57 +205,34 @@ body {
 	width: 4ch;
 	padding: 0 0.4rem;
 	border: 0;
+	border-radius: 0 0.4rem 0.4rem 0;
 }
 
-#titlebar input#difficulty {
+#titlebar .opt-input input#difficulty {
 	width: 2ch;
 }
 
-#titlebar div.button {
-	background-color: #3d2466;
-	font-weight: 700;
-
-	height: 100%;
-	padding: 0em 0.2em;
-
-	display: flex;
-	align-items: center;
-}
-
 @media (hover: hover) and (pointer: fine) {
-	#titlebar input:hover {
-		background-color: #5c3699;
+	#titlebar .opt-input:hover label {
+		color: #ddd;
+		background-color: #323232;
 	}
 
-	#titlebar div.button:hover {
-		background-color: #5c3699;
+	#titlebar .opt-input input:hover {
+		color: #fff;
+		background-color: #6e49b4;
 	}
 }
 
-#titlebar input:focus {
-	color: #fff;
-	background-color: #6e41b8;
-	outline: #7eab1e solid 2px;
+#titlebar .opt-input:focus-within label {
+	color: #eee;
+	background-color: #383838;
 }
 
-#titlebar div.button:active {
+#titlebar .opt-input:focus-within input {
 	color: #fff;
-	background-color: #6e41b8;
-}
-
-@media (max-aspect-ratio: 9/20) {
-	#titlebar div.input {
-		display: flex;
-		flex-direction: column;
-	}
-
-	#titlebar label {
-		padding: 0 0.4rem;
-	}
-
-	#titlebar .button {
-		font-size: 2em;
-	}
+	background-color: #7b51ca;
+	outline: 0;
 }
 
 @media (max-aspect-ratio: 8/5) {
@@ -224,7 +264,7 @@ body {
 }
 
 #controls #prompt.active {
-	background-color: #311d52;
+	background-color: #352356;
 }
 
 #controls #prompt-msg-l, #controls #prompt-input, #controls #prompt-msg-r {
@@ -235,7 +275,7 @@ body {
 	align-items: center;
 }
 
-#controls #prompt-msg-l, #prompt-msg-r {
+#controls #prompt-msg-l, #controls #prompt-msg-r {
 	flex: 1;
 	color: #ccc;
 	padding: 0 0.4rem;
@@ -328,29 +368,31 @@ body {
 
 @media (hover: hover) and (pointer: fine) {
 	#controls .key:hover {
-		background-color: #304010;
+		color: #fff;
+		background-color: #35481d;
 	}
 }
 
 #controls .key:active {
 	color: #fff;
-	background-color: #384810;
+	background-color: #3b5120;
 }
 
 #controls .key.active {
-	color: #eee;
+	color: #fff;
 	background-color: #3d2466;
 }
 
 @media (hover: hover) and (pointer: fine) {
 	#controls .key.active:hover {
-		background-color: #5c3699;
+		color: #fff;
+		background-color: #4c2d80;
 	}
 }
 
 #controls .key.active:active {
 	color: #fff;
-	background-color: #6e41b8;
+	background-color: #55328f;
 }
 
 #controls .key span.keyboard-val {
@@ -380,7 +422,8 @@ body {
 #info #oi {
 	visibility: hidden;
 
-	background-color: #640016;
+	color: #fff;
+	background-color: #680018;
 	font-size: 3em;
 	height: 1.2em;
 	width: 3ch;
@@ -415,7 +458,7 @@ body {
 }
 
 #info #p1-info.active, #info #p2-info.active {
-	background-color: #304010;
+	background-color: #35481d;
 }
 
 #info #p1-info-inner, #info #p2-info-inner {
@@ -551,7 +594,7 @@ body {
 
 .modal-content {
 	background-color: #222;
-	font-size: 1.4em;
+	font-size: 1.2em;
 	font-family: 'Source Serif 4', serif;
 	user-select: text;
 
@@ -559,7 +602,7 @@ body {
 	max-height: calc(100% - 8em);
 	margin: 2em auto;
 	padding: 2em;
-	outline: #7eab1e solid 2px;
+	outline: #94ca51 solid 2px;
 	overflow: auto;
 }
 
@@ -578,11 +621,11 @@ body {
 }
 
 .modal-content a, .modal-content .modal-close {
-	color: #7eab1e;
+	color: #94ca51;
 }
 
 .modal-content a:hover, .modal-content .modal-close:hover {
-	color: #a8e428;
+	color: #b9fd65;
 }
 
 .modal-content .modal-close {