Move app to apps/web-react in pnpm workspace layout

apps/web-react/app/components/MapPoolSelector.module.css

@@ -0,0 +1,74 @@
+.stageRow {
+	display: flex;
+	width: 100%;
+	align-items: stretch;
+	gap: var(--s-2);
+}
+
+.stageNameRow {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	align-items: center;
+	justify-content: space-between;
+	border-radius: var(--radius-box);
+	background-color: var(--color-bg-high);
+	font-size: var(--font-xs);
+	font-weight: var(--weight-semi);
+	gap: var(--s-2);
+	padding-block: var(--s-1-5);
+	padding-inline: var(--s-3);
+}
+
+@container (width >= 560px) {
+	.stageNameRow {
+		flex-direction: row;
+	}
+}
+
+.stageImage {
+	border-radius: var(--radius-box);
+	height: 100%;
+	object-fit: cover;
+}
+
+.modeButtonsContainer {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	gap: var(--s-1);
+}
+
+.modeButton {
+	padding: 0;
+	height: var(--field-size-sm);
+	aspect-ratio: 1 / 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: var(--border-style);
+	border-radius: var(--radius-full);
+	background-color: var(--color-bg);
+	color: var(--color-accent);
+	opacity: 1 !important;
+	outline: initial;
+
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: 1px;
+	}
+
+	&.selected {
+		border: 2px solid transparent;
+		background-color: var(--color-bg-higher);
+	}
+
+	&.preselected {
+		border: var(--border-style-accent);
+		background-color: var(--color-bg-higher);
+	}
+}
+
+.mode:not(.selected, .preselected) {
+	filter: grayscale(100%) brightness(50%);
+}