feat: New game screen

- Basic layout
- Menu structure
- First screen
- Add RandomPixelCanvas class

source/style/modules/_game.scss

@@ -29,7 +29,7 @@ $steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
 	animation: fadeColor 16s infinite linear;
 }
 
-.body_game {
+.body_menu {
 	@extend .h_full_view;
 	background-color: hotpink;
 
@@ -71,4 +71,155 @@ $steps: (0, 14.28, 28.57, 42.85, 57.14, 71.43, 100);
 		left: 0;
 		border-radius: hippie.$radius_basic;
 	}
+}
+
+.body_tfw {
+	@extend .h_full_view;
+
+	display: flex;
+	flex-flow: column nowrap;
+
+	th,
+	.important {
+		color: white;
+		background-color: hippie.basic_color(echo);
+	}
+
+	.important {
+		padding: hippie.$space_half;
+		border-block: hippie.$width_border_basic solid hippie.$color_back_basic;
+		font-weight: bold;
+	}
+
+	.subtle {
+		@extend .txt_smaller;
+
+		color: hippie.$color_darkest;
+		text-transform: uppercase;
+	}
+
+	.success {
+		color: hippie.basic_color(alpha);
+	}
+
+	& > header {
+		& > button.active {
+			border-color: hippie.$color_highlight_basic;
+			color: hippie.$color_highlight_basic;
+			background-color: hippie.$color_action_basic;
+		}
+
+		& > button:not(:first-child, :last-child, :nth-child(2)) {
+			flex: 1;
+		}
+	}
+
+	& > 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;
+			}
+
+			& > div:nth-child(2) {
+				flex: 4;
+				display: flex;
+				flex-flow: column nowrap;
+				gap: hippie.$space_basic;
+				min-height: 0;
+
+				div:first-child {
+					flex: auto;
+					overflow: auto;
+					min-height: 0;
+				}
+
+				div:last-child {
+					flex: 0 0 auto;
+				}
+			}
+
+			nav {
+				& > *:not(:last-child) {
+					margin-bottom: hippie.$space_basic;
+				}
+
+				input:not([type="checkbox"], [type="range"]) {
+					@extend .input_io;
+				}
+			}
+
+			table {
+				table-layout: fixed;
+				width: 100%;
+				margin: 0;
+
+				th {
+					text-align: center;
+				}
+
+				td {
+					position: relative;
+					height: 4em;
+					vertical-align: top;
+
+					span {
+						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%;
+					}
+
+					&:last-child {
+						text-align: center;
+						vertical-align: middle;
+					}
+				}
+
+				.l {
+					width: 30%;
+				}
+
+				.q {
+					width: 50%;
+				}
+
+				.t, .s {
+					width: 20%;
+				}
+			}
+		}
+
+		& > footer {
+			justify-content: space-between;
+			padding: hippie.$space_basic;
+
+			& > button:last-child {
+				//margin-left: auto;
+				padding-inline: 2em;
+			}
+		}
+	}
 }