feat: Change styles for game

source/style/modules/game/_tfw.scss

@@ -9,6 +9,21 @@
 	display: flex;
 	flex-flow: column nowrap;
 
+	.flex_auto {
+		display: flex;
+		flex: auto;
+		min-height: 0;
+	}
+
+	th,
+	.important,
+	.subtle,
+	button,
+	input[type="text"],
+	select {
+		text-transform: uppercase;
+	}
+
 	th,
 	.important {
 		color: white;
@@ -25,13 +40,32 @@
 		@extend .txt_smaller;
 
 		color: hippie.$color_darkest;
-		text-transform: uppercase;
 	}
 
 	.success {
 		color: hippie.basic_color(alpha);
 	}
 
+	.background {
+		position: relative;
+		overflow: hidden;
+
+		*:not(canvas) {
+			z-index: map.get(hippie.$z-indexes, "content-bottom");
+			position: relative;
+			color: white;
+		}
+
+		canvas {
+			z-index: map.get(hippie.$z-indexes, "default");
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
 	& > header {
 		& > button.active {
 			border-color: hippie.$color_highlight_basic;
@@ -45,21 +79,11 @@
 	}
 
 	& > div {
-		display: flex;
 		flex-flow: column nowrap;
-		flex: auto;
-		min-height: 0;
 
 		& > main {
-			display: flex;
 			flex-flow: row nowrap;
-			flex: auto;
 			gap: hippie.$space_double;
-			min-height: 0;
-
-			& > div:first-child {
-				flex: 1;
-			}
 
 			& > div:last-child {
 				flex: 2;
@@ -84,13 +108,19 @@
 			}
 
 			nav {
-				& > *:not(:last-child) {
-					margin-bottom: hippie.$space_basic;
-				}
+				flex: 1;
+				display: flex;
+				flex-flow: column nowrap;
+				gap: hippie.$space_basic;
+				min-height: 0;
 
 				input:not([type="checkbox"], [type="range"]) {
 					@extend .input_io;
 				}
+
+				select {
+					@extend .io_select;
+				}
 			}
 
 			table {