From dfa95bd92dc4fe3a17619d830be4439d4d8ab966 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 28 Mar 2026 16:30:28 +0200
Subject: [PATCH] Migrate to nested CSS

---
 AGENTS.md                                     |   1 +
 app/components/AbilitiesSelector.module.css   |   6 +-
 app/components/Avatar.module.css              |   6 +-
 app/components/CustomThemeSelector.module.css |  56 ++---
 app/components/MapPoolSelector.module.css     |  16 +-
 app/components/MobileNav.module.css           |  83 +++----
 app/components/Pagination.module.css          |  32 +--
 app/components/SideNav.module.css             |  70 +++---
 app/components/StreamListItems.module.css     |  22 +-
 app/components/SubNav.module.css              |  42 ++--
 app/components/elements/Button.module.css     |  44 ++--
 app/components/elements/Calendar.module.css   |  30 +--
 app/components/elements/ChipRadio.module.css  |  46 ++--
 app/components/elements/DatePicker.module.css |  26 ++-
 app/components/elements/Dialog.module.css     |  16 +-
 app/components/elements/Menu.module.css       |   6 +-
 app/components/elements/Select.module.css     |  38 ++--
 app/components/elements/Switch.module.css     |  68 +++---
 app/components/elements/Tabs.module.css       | 106 ++++-----
 app/components/elements/Toast.module.css      |   6 +-
 .../elements/TournamentSearch.module.css      |  14 +-
 app/components/layout/ChatSidebar.module.css  |  20 +-
 app/components/layout/Footer.module.css       |  36 ++--
 app/components/layout/GlobalSearch.module.css |  50 ++---
 .../layout/NotificationPopover.module.css     |  16 +-
 app/components/layout/TopNavMenus.module.css  |   8 +-
 app/components/layout/UserItem.module.css     |   6 +-
 app/components/layout/index.module.css        |  18 +-
 app/features/badges/badges.module.css         |  36 ++--
 .../build-analyzer/routes/analyzer.module.css |   6 +-
 .../calendar/calendar-event.module.css        |   6 +-
 .../components/TournamentCard.module.css      |  52 ++---
 .../calendar/routes/calendar.module.css       |  40 ++--
 app/features/chat/components/Chat.module.css  |  22 +-
 .../components/DamageComboBar.module.css      |  64 +++---
 .../components/RangeVisualization.module.css  |   6 +-
 .../components/SelectedWeapons.module.css     |   6 +-
 .../components/WeaponCategories.module.css    |   6 +-
 .../components/WeaponGrid.module.css          |  20 +-
 .../components-showcase.module.css            |   6 +-
 .../components/SplatoonRotations.module.css   |   8 +-
 .../lfg/components/LFGPost.module.css         |  18 +-
 .../map-planner/components/Planner.module.css |   6 +-
 .../components/NotificationList.module.css    |  50 ++---
 .../routes/notifications.module.css           |   6 +-
 .../object-damage-calculator.module.css       |   8 +-
 app/features/plus-suggestions/plus.module.css |   8 +-
 .../plus-voting-results.module.css            |  26 +--
 .../scrims/components/ScrimCard.module.css    |  12 +-
 .../scrims/routes/scrims.$id.module.css       |  32 +--
 app/features/scrims/routes/scrims.module.css  |   6 +-
 .../routes/q.match.$id.module.css             |  26 +--
 .../components/ModeMapPoolPicker.module.css   |  18 +-
 .../PreferenceRadioGroup.module.css           |   6 +-
 .../routes/q.settings.module.css              |  20 +-
 .../routes/q.streams.module.css               |   6 +-
 .../sendouq/components/GroupCard.module.css   |   8 +-
 app/features/sendouq/routes/q.info.module.css |  60 +++---
 .../sendouq/routes/q.looking.module.css       |  18 +-
 app/features/sendouq/routes/q.module.css      |   6 +-
 app/features/team/team.module.css             |  46 ++--
 .../components/TierListItemImage.module.css   |  12 +-
 .../components/TierRow.module.css             |  32 +--
 .../routes/tier-list-maker.module.css         |  14 +-
 app/features/top-search/top-search.module.css |  24 +--
 .../components/Bracket/bracket.module.css     |  62 +++---
 .../BracketMapListDialog.module.css           |  30 +--
 .../MatchActionsBanPicker.module.css          |  16 +-
 .../components/MatchTimer.module.css          |   6 +-
 .../routes/to.$id.divisions.module.css        |  22 +-
 .../tournament-bracket.module.css             | 118 +++++-----
 .../routes/to.$id.looking.module.css          |  24 +--
 .../components/BannedPlayersList.module.css   |   6 +-
 .../tournament-organization.module.css        |  56 ++---
 .../tournament/routes/to.$id.seeds.module.css |  28 +--
 app/features/tournament/tournament.module.css |  68 +++---
 .../GameBadgeSelectField.module.css           |  14 +-
 .../components/MutualFriends.module.css       |   6 +-
 .../components/SubPageHeader.module.css       |  12 +-
 .../components/UserPageIconNav.module.css     |  22 +-
 .../user-page/components/Widget.module.css    |  60 +++---
 .../u.$identifier.edit-widgets.module.css     |  38 ++--
 .../user-page/routes/u.$identifier.module.css |   8 +-
 app/features/user-page/user-page.module.css   |  88 ++++----
 app/features/vods/routes/vods.$id.module.css  |   6 +-
 app/form/fields/FormFieldWrapper.module.css   |  16 +-
 .../fields/StageSelectFormField.module.css    |   6 +-
 .../fields/UserSearchFormField.module.css     |   6 +-
 .../fields/WeaponPoolFormField.module.css     |  12 +-
 .../fields/WeaponSelectFormField.module.css   |   6 +-
 app/styles/common.css                         | 202 +++++++++---------
 app/styles/front.module.css                   |  78 +++----
 app/styles/utils.css                          |  92 ++++----
 93 files changed, 1405 insertions(+), 1337 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index c6fee7e11..dcf8ef858 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -47,6 +47,7 @@
 - clsx library is used for conditional class names
 - prefer using [CSS variables](./app/styles/vars.css) for theming
 - for simple styling, prefer [utility classes](./app/styles/utils.css) over creating a new class
+- use CSS nesting with the `&` selector to group related selectors (pseudo-classes, pseudo-elements, child selectors, attribute selectors) under their parent instead of repeating the parent selector
 
 ## SQL
 
diff --git a/app/components/AbilitiesSelector.module.css b/app/components/AbilitiesSelector.module.css
index c0150472c..d24945ca1 100644
--- a/app/components/AbilitiesSelector.module.css
+++ b/app/components/AbilitiesSelector.module.css
@@ -27,8 +27,8 @@
 	border: var(--border-style);
 	border-radius: 50%;
 	background-color: var(--color-bg-ability);
-}
 
-.abilityButton.isDragging {
-	box-shadow: 0 0 100px inset rgb(255 255 255 / 25%);
+	&.isDragging {
+		box-shadow: 0 0 100px inset rgb(255 255 255 / 25%);
+	}
 }
diff --git a/app/components/Avatar.module.css b/app/components/Avatar.module.css
index ab67a14eb..85eceb50b 100644
--- a/app/components/Avatar.module.css
+++ b/app/components/Avatar.module.css
@@ -14,8 +14,8 @@
 	background-color: var(--color-bg-higher);
 	border-radius: var(--radius-avatar);
 	overflow: hidden;
-}
 
-.avatarWrapper img {
-	display: block;
+	& img {
+		display: block;
+	}
 }
diff --git a/app/components/CustomThemeSelector.module.css b/app/components/CustomThemeSelector.module.css
index df0701775..786419eef 100644
--- a/app/components/CustomThemeSelector.module.css
+++ b/app/components/CustomThemeSelector.module.css
@@ -55,30 +55,32 @@
 	align-items: center;
 }
 
-.hueSlider::-webkit-slider-runnable-track {
-	background: linear-gradient(
-		to right,
-		oklch(65% 0.15 0),
-		oklch(65% 0.15 60),
-		oklch(65% 0.15 120),
-		oklch(65% 0.15 180),
-		oklch(65% 0.15 240),
-		oklch(65% 0.15 300),
-		oklch(65% 0.15 360)
-	) !important;
-}
+.hueSlider {
+	&::-webkit-slider-runnable-track {
+		background: linear-gradient(
+			to right,
+			oklch(65% 0.15 0),
+			oklch(65% 0.15 60),
+			oklch(65% 0.15 120),
+			oklch(65% 0.15 180),
+			oklch(65% 0.15 240),
+			oklch(65% 0.15 300),
+			oklch(65% 0.15 360)
+		) !important;
+	}
 
-.hueSlider::-moz-range-track {
-	background: linear-gradient(
-		to right,
-		oklch(65% 0.15 0),
-		oklch(65% 0.15 60),
-		oklch(65% 0.15 120),
-		oklch(65% 0.15 180),
-		oklch(65% 0.15 240),
-		oklch(65% 0.15 300),
-		oklch(65% 0.15 360)
-	) !important;
+	&::-moz-range-track {
+		background: linear-gradient(
+			to right,
+			oklch(65% 0.15 0),
+			oklch(65% 0.15 60),
+			oklch(65% 0.15 120),
+			oklch(65% 0.15 180),
+			oklch(65% 0.15 240),
+			oklch(65% 0.15 300),
+			oklch(65% 0.15 360)
+		) !important;
+	}
 }
 
 .chatColorPreview {
@@ -97,7 +99,9 @@
 	align-items: center;
 }
 
-.themeShareInput input {
-	flex: 1;
-	min-width: 0;
+.themeShareInput {
+	& input {
+		flex: 1;
+		min-width: 0;
+	}
 }
diff --git a/app/components/MapPoolSelector.module.css b/app/components/MapPoolSelector.module.css
index 7946399bc..0e7c22890 100644
--- a/app/components/MapPoolSelector.module.css
+++ b/app/components/MapPoolSelector.module.css
@@ -54,16 +54,16 @@
 		outline: var(--focus-ring);
 		outline-offset: 1px;
 	}
-}
 
-.modeButton.selected {
-	border: 2px solid transparent;
-	background-color: var(--color-bg-higher);
-}
+	&.selected {
+		border: 2px solid transparent;
+		background-color: var(--color-bg-higher);
+	}
 
-.modeButton.preselected {
-	border: var(--border-style-accent);
-	background-color: var(--color-bg-higher);
+	&.preselected {
+		border: var(--border-style-accent);
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .mode:not(.selected, .preselected) {
diff --git a/app/components/MobileNav.module.css b/app/components/MobileNav.module.css
index 299c6024e..46cc3bf6d 100644
--- a/app/components/MobileNav.module.css
+++ b/app/components/MobileNav.module.css
@@ -45,22 +45,22 @@
 		outline: var(--focus-ring);
 		outline-offset: -1px;
 	}
-}
 
-.tab:hover,
-.tab[data-active="true"] {
-	color: var(--color-text-accent);
+	&:hover,
+	&[data-active="true"] {
+		color: var(--color-text-accent);
+	}
 }
 
 .tabIcon {
 	position: relative;
 	width: 24px;
 	height: 24px;
-}
 
-.tabIcon svg {
-	width: 24px;
-	height: 24px;
+	& svg {
+		width: 24px;
+		height: 24px;
+	}
 }
 
 .sideNavEmpty {
@@ -77,10 +77,10 @@
 	z-index: 18;
 	background-color: rgba(0, 0, 0, 0.25);
 	backdrop-filter: blur(10px);
-}
 
-.panelOverlay[data-entering] {
-	animation: fade-in 200ms ease-out;
+	&[data-entering] {
+		animation: fade-in 200ms ease-out;
+	}
 }
 
 @keyframes fade-in {
@@ -104,10 +104,10 @@
 	display: flex;
 	flex-direction: column;
 	padding-block-end: env(safe-area-inset-bottom);
-}
 
-.panel[data-entering] {
-	animation: slide-up 200ms ease-out;
+	&[data-entering] {
+		animation: slide-up 200ms ease-out;
+	}
 }
 
 @keyframes slide-up {
@@ -162,10 +162,10 @@
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
-}
 
-.menuOverlay[data-entering] {
-	animation: fade-in 200ms ease-out;
+	&[data-entering] {
+		animation: fade-in 200ms ease-out;
+	}
 }
 
 .menuHeader {
@@ -205,9 +205,10 @@
 	aspect-ratio: 1 / 1;
 	border-radius: var(--radius-field);
 	margin-inline-start: auto;
-}
-.panelCloseButton:hover {
-	background-color: var(--color-bg-higher);
+
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .panelIconContainer {
@@ -248,10 +249,10 @@
 	font-size: var(--font-xs);
 	font-weight: var(--weight-semi);
 	text-align: center;
-}
 
-.navItem:hover {
-	color: var(--color-text-accent);
+	&:hover {
+		color: var(--color-text-accent);
+	}
 }
 
 .navItemImage {
@@ -278,10 +279,10 @@
 	text-decoration: none;
 	color: var(--color-text);
 	border-radius: var(--radius-field);
-}
 
-.youPanelUser:hover {
-	background-color: var(--color-bg-high);
+	&:hover {
+		background-color: var(--color-bg-high);
+	}
 }
 
 .youPanelUsername {
@@ -298,16 +299,16 @@
 	border-radius: var(--radius-field);
 	height: var(--field-size);
 	aspect-ratio: 1 / 1;
-}
 
-.youPanelSettingsButton:hover {
-	background-color: var(--color-bg-high);
-	color: var(--color-text);
-}
+	&:hover {
+		background-color: var(--color-bg-high);
+		color: var(--color-text);
+	}
 
-.youPanelSettingsButton svg {
-	width: 18px;
-	height: 18px;
+	& svg {
+		width: 18px;
+		height: 18px;
+	}
 }
 
 .panelSectionLink {
@@ -329,11 +330,11 @@
 	& svg {
 		stroke-width: 3;
 	}
-}
 
-.panelSectionLink:hover {
-	color: var(--color-text);
-	background-color: var(--color-bg-higher);
+	&:hover {
+		color: var(--color-text);
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .tabBadge {
@@ -354,8 +355,10 @@
 	line-height: 1;
 }
 
-.noAnimation[data-entering] {
-	animation: none;
+.noAnimation {
+	&[data-entering] {
+		animation: none;
+	}
 }
 
 .ghostTabBar {
diff --git a/app/components/Pagination.module.css b/app/components/Pagination.module.css
index 96f8aa809..84eda0246 100644
--- a/app/components/Pagination.module.css
+++ b/app/components/Pagination.module.css
@@ -22,15 +22,15 @@
 	cursor: pointer;
 	border-radius: var(--radius-full);
 	transition: opacity 0.15s ease;
-}
 
-.arrow:hover:not(:disabled) {
-	opacity: 0.7;
-}
+	&:hover:not(:disabled) {
+		opacity: 0.7;
+	}
 
-.arrow:disabled {
-	opacity: 0.3;
-	cursor: not-allowed;
+	&:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+	}
 }
 
 .page {
@@ -48,10 +48,10 @@
 	cursor: pointer;
 	border-radius: var(--radius-full);
 	transition: background-color 0.15s ease;
-}
 
-.page:hover:not(.pageActive) {
-	background-color: var(--color-bg-higher);
+	&:hover:not(.pageActive) {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .pageActive {
@@ -75,10 +75,10 @@
 	cursor: pointer;
 	border-radius: var(--radius-full);
 	transition: background-color 0.15s ease;
-}
 
-.ellipsisButton:hover {
-	background-color: var(--color-bg-higher);
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .jumpToForm {
@@ -98,10 +98,10 @@
 	font-size: var(--font-sm);
 	font-weight: var(--weight-semi);
 	text-align: center;
-}
 
-.jumpToInput:focus {
-	outline: none;
+	&:focus {
+		outline: none;
+	}
 }
 
 @container (width < 580px) {
diff --git a/app/components/SideNav.module.css b/app/components/SideNav.module.css
index 93c31a52a..e86c4bc3a 100644
--- a/app/components/SideNav.module.css
+++ b/app/components/SideNav.module.css
@@ -71,10 +71,10 @@
 	margin-left: calc(-1 * var(--s-1));
 	flex: 1;
 	min-width: 0;
-}
 
-.sideNavFooterUser:hover {
-	background-color: var(--color-bg-high);
+	&:hover {
+		background-color: var(--color-bg-high);
+	}
 }
 
 .sideNavFooterUsername {
@@ -101,21 +101,21 @@
 	border-radius: var(--radius-field);
 	color: var(--color-text-high);
 	cursor: pointer;
-}
 
-.sideNavFooterButton:hover {
-	background-color: var(--color-bg-high);
-	color: var(--color-text);
-}
+	&:hover {
+		background-color: var(--color-bg-high);
+		color: var(--color-text);
+	}
 
-.sideNavFooterButton:focus-visible {
-	outline: var(--focus-ring);
-	outline-offset: -2px;
-}
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: -2px;
+	}
 
-.sideNavFooterButton svg {
-	width: 18px;
-	height: 18px;
+	& svg {
+		width: 18px;
+		height: 18px;
+	}
 }
 
 .sideNavFooterNotification {
@@ -139,32 +139,36 @@
 	border-top: 1.5px solid var(--color-border);
 	border-bottom: 1.5px solid var(--color-border);
 	height: var(--layout-nav-height);
-}
 
-.sideNavHeader:first-child {
-	margin-block-start: calc(-1 * var(--s-1-5));
-	border-top: none;
-}
+	&:first-child {
+		margin-block-start: calc(-1 * var(--s-1-5));
+		border-top: none;
+	}
 
-.sideNavHeader h2 {
-	font-size: var(--font-xs);
-	font-weight: var(--weight-bold);
+	& h2 {
+		font-size: var(--font-xs);
+		font-weight: var(--weight-bold);
+	}
+
+	& svg {
+		width: 18px;
+	}
 }
 
 .sideNavHeaderAction {
 	margin-inline-start: auto;
 	font-size: var(--font-2xs);
 	font-weight: var(--weight-normal);
-}
 
-.sideNavHeaderAction a {
-	color: var(--color-text-high);
-	text-decoration: none;
-}
+	& a {
+		color: var(--color-text-high);
+		text-decoration: none;
 
-.sideNavHeaderAction a:hover {
-	color: var(--color-text);
-	text-decoration: underline;
+		&:hover {
+			color: var(--color-text);
+			text-decoration: underline;
+		}
+	}
 }
 
 .sideNavHeaderClose {
@@ -172,10 +176,6 @@
 	margin-inline-end: var(--s-1);
 }
 
-.sideNavHeader svg {
-	width: 18px;
-}
-
 .iconContainer {
 	background-color: var(--color-bg-high);
 	border-radius: var(--radius-field);
diff --git a/app/components/StreamListItems.module.css b/app/components/StreamListItems.module.css
index 41173499b..83eb80e81 100644
--- a/app/components/StreamListItems.module.css
+++ b/app/components/StreamListItems.module.css
@@ -22,6 +22,13 @@
 	color: var(--color-text-high);
 	text-transform: uppercase;
 	letter-spacing: 0.05em;
+
+	&::before,
+	&::after {
+		content: "";
+		flex: 1;
+		border-top: 1px solid var(--color-border);
+	}
 }
 
 .badgeRow {
@@ -43,16 +50,9 @@
 	height: var(--selector-size-sm);
 	aspect-ratio: 1 / 1;
 	border-radius: var(--radius-selector);
-}
 
-.saveIconButton:hover {
-	color: var(--color-text);
-	background-color: var(--color-bg-higher);
-}
-
-.upcomingDivider::before,
-.upcomingDivider::after {
-	content: "";
-	flex: 1;
-	border-top: 1px solid var(--color-border);
+	&:hover {
+		color: var(--color-text);
+		background-color: var(--color-bg-higher);
+	}
 }
diff --git a/app/components/SubNav.module.css b/app/components/SubNav.module.css
index ce6064ae2..c23a7f292 100644
--- a/app/components/SubNav.module.css
+++ b/app/components/SubNav.module.css
@@ -19,19 +19,10 @@
 	align-items: center;
 	color: var(--color-text);
 	gap: var(--s-1-5);
-}
 
-.linkContainer.active {
-	color: var(--color-text-accent);
-}
-
-.secondary .linkContainer {
-	max-width: none;
-	flex: none;
-}
-
-.secondary .linkContainer.active {
-	color: var(--color-text);
+	&.active {
+		color: var(--color-text-accent);
+	}
 }
 
 .link {
@@ -59,15 +50,6 @@
 	background-color: transparent;
 }
 
-.secondary .linkContainer.active .linkSecondary {
-	background-color: var(--color-bg-higher);
-	color: var(--color-text);
-}
-
-.container.compact .link {
-	padding: var(--s-1) var(--s-2);
-}
-
 .borderGuy {
 	width: 78%;
 	height: 3px;
@@ -81,10 +63,28 @@
 	background-color: var(--color-bg-high);
 }
 
+.container.compact .link {
+	padding: var(--s-1) var(--s-2);
+}
+
 .linkContainer.active > .borderGuy {
 	visibility: initial;
 }
 
+.secondary .linkContainer {
+	max-width: none;
+	flex: none;
+}
+
+.secondary .linkContainer.active {
+	color: var(--color-text);
+}
+
+.secondary .linkContainer.active .linkSecondary {
+	background-color: var(--color-bg-higher);
+	color: var(--color-text);
+}
+
 .secondary .borderGuy {
 	display: none;
 }
diff --git a/app/components/elements/Button.module.css b/app/components/elements/Button.module.css
index a14e257a2..72caaf8d6 100644
--- a/app/components/elements/Button.module.css
+++ b/app/components/elements/Button.module.css
@@ -16,25 +16,25 @@
 	outline-color: var(--color-text-accent);
 	height: var(--field-size);
 	white-space: nowrap;
-}
 
-.button[data-focus-visible],
-.button:focus-visible {
-	outline-style: solid;
-	outline-width: 2px;
-	outline-offset: 1px;
-}
+	&[data-focus-visible],
+	&:focus-visible {
+		outline-style: solid;
+		outline-width: 2px;
+		outline-offset: 1px;
+	}
 
-.button[data-pressed],
-.button:active {
-	transform: translateY(1px);
-}
+	&[data-pressed],
+	&:active {
+		transform: translateY(1px);
+	}
 
-.button[data-disabled],
-.button:disabled {
-	cursor: not-allowed;
-	opacity: 0.5;
-	transform: initial;
+	&[data-disabled],
+	&:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+		transform: initial;
+	}
 }
 
 .outlined {
@@ -88,10 +88,10 @@
 	background-color: transparent;
 	color: var(--color-text-accent);
 	outline: initial;
-}
 
-.minimal[data-focus-visible] {
-	outline: var(--focus-ring);
+	&[data-focus-visible] {
+		outline: var(--focus-ring);
+	}
 }
 
 .minimalSuccess {
@@ -127,10 +127,10 @@
 	min-width: 20px;
 	max-width: 20px;
 	margin-inline-end: var(--s-1-5);
-}
 
-.buttonIcon.lonely {
-	margin-inline-end: 0 !important;
+	&.lonely {
+		margin-inline-end: 0 !important;
+	}
 }
 
 .buttonIconSmall {
diff --git a/app/components/elements/Calendar.module.css b/app/components/elements/Calendar.module.css
index 66387bc77..1281f1833 100644
--- a/app/components/elements/Calendar.module.css
+++ b/app/components/elements/Calendar.module.css
@@ -58,23 +58,23 @@
 		outline: var(--focus-ring);
 		outline-offset: 1px;
 	}
-}
 
-.cell[data-outside-month] {
-	display: none;
-}
+	&[data-outside-month] {
+		display: none;
+	}
 
-.cell[data-disabled] {
-	opacity: 0.5;
-	background-color: transparent !important;
-}
+	&[data-disabled] {
+		opacity: 0.5;
+		background-color: transparent !important;
+	}
 
-.cell[data-selected] {
-	background-color: var(--color-bg-high);
-	color: var(--color-text-accent);
-}
+	&[data-selected] {
+		background-color: var(--color-bg-high);
+		color: var(--color-text-accent);
+	}
 
-.cell:hover {
-	background-color: var(--color-bg-high);
-	outline: initial;
+	&:hover {
+		background-color: var(--color-bg-high);
+		outline: initial;
+	}
 }
diff --git a/app/components/elements/ChipRadio.module.css b/app/components/elements/ChipRadio.module.css
index c146f6f19..7618eb9a0 100644
--- a/app/components/elements/ChipRadio.module.css
+++ b/app/components/elements/ChipRadio.module.css
@@ -2,23 +2,11 @@
 	display: flex;
 	gap: var(--s-1);
 	width: max-content;
-}
 
-.group[data-orientation="vertical"] {
-	flex-direction: column;
-	align-items: stretch;
-}
-
-.radio {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip-path: inset(50%);
-	white-space: nowrap;
-	border: 0;
+	&[data-orientation="vertical"] {
+		flex-direction: column;
+		align-items: stretch;
+	}
 }
 
 .label {
@@ -36,12 +24,24 @@
 	justify-content: center;
 }
 
-.radio:focus-visible + .label {
-	outline: var(--focus-ring);
-	outline-offset: 2px;
-}
+.radio {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
 
-.radio:checked + .label {
-	background-color: var(--color-text-accent);
-	color: var(--color-text-inverse);
+	&:focus-visible + .label {
+		outline: var(--focus-ring);
+		outline-offset: 2px;
+	}
+
+	&:checked + .label {
+		background-color: var(--color-text-accent);
+		color: var(--color-text-inverse);
+	}
 }
diff --git a/app/components/elements/DatePicker.module.css b/app/components/elements/DatePicker.module.css
index 8bcbbe4f0..9284102a6 100644
--- a/app/components/elements/DatePicker.module.css
+++ b/app/components/elements/DatePicker.module.css
@@ -13,24 +13,28 @@
 	cursor: pointer;
 }
 
-.root[data-open] .group {
-	border-color: transparent;
-	outline: var(--focus-ring);
+.root {
+	&[data-open] .group {
+		border-color: transparent;
+		outline: var(--focus-ring);
+	}
 }
 
 .dateInput {
 	display: flex;
 }
 
-.segment:not([data-type="literal"]) {
-	padding: 0 var(--s-0-5);
-	border-radius: 5px;
-}
+.segment {
+	&:not([data-type="literal"]) {
+		padding: 0 var(--s-0-5);
+		border-radius: 5px;
+	}
 
-.segment:focus-visible {
-	background-color: var(--color-bg-high);
-	color: var(--color-text-accent);
-	outline: none;
+	&:focus-visible {
+		background-color: var(--color-bg-high);
+		color: var(--color-text-accent);
+		outline: none;
+	}
 }
 
 .button {
diff --git a/app/components/elements/Dialog.module.css b/app/components/elements/Dialog.module.css
index fb95e8356..e7d6f2b17 100644
--- a/app/components/elements/Dialog.module.css
+++ b/app/components/elements/Dialog.module.css
@@ -11,6 +11,10 @@
 	padding: 1rem;
 	text-align: center;
 	backdrop-filter: blur(10px); /* Adjust blur value as needed */
+
+	&[data-entering] {
+		animation: fade-in 300ms ease-out;
+	}
 }
 
 .fullScreenOverlay {
@@ -18,10 +22,6 @@
 	display: initial;
 }
 
-.overlay[data-entering] {
-	animation: fade-in 300ms ease-out;
-}
-
 @keyframes fade-in {
 	from {
 		opacity: 0;
@@ -46,6 +46,10 @@
 	box-shadow:
 		0 10px 15px -3px rgba(0, 0, 0, 0.1),
 		0 4px 6px -2px rgba(0, 0, 0, 0.05);
+
+	&[data-entering] {
+		animation: zoom-in-95 300ms ease-out;
+	}
 }
 
 :global(html[data-fuse="true"]) .modal {
@@ -60,10 +64,6 @@
 	padding-block-end: var(--s-32);
 }
 
-.modal[data-entering] {
-	animation: zoom-in-95 300ms ease-out;
-}
-
 @keyframes zoom-in-95 {
 	from {
 		opacity: 0;
diff --git a/app/components/elements/Menu.module.css b/app/components/elements/Menu.module.css
index c759658be..8b1810603 100644
--- a/app/components/elements/Menu.module.css
+++ b/app/components/elements/Menu.module.css
@@ -44,10 +44,10 @@
 	justify-content: flex-start;
 	transition: background-color 0.15s;
 	cursor: pointer;
-}
 
-.item[data-focused] {
-	background-color: var(--color-bg-higher);
+	&[data-focused] {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .itemDisabled {
diff --git a/app/components/elements/Select.module.css b/app/components/elements/Select.module.css
index a1f7a90ce..5d7efb11e 100644
--- a/app/components/elements/Select.module.css
+++ b/app/components/elements/Select.module.css
@@ -34,10 +34,10 @@
 	white-space: nowrap;
 	min-width: 0;
 	color: var(--color-text);
-}
 
-.selectValue[data-placeholder] {
-	color: var(--color-text-high);
+	&[data-placeholder] {
+		color: var(--color-text-high);
+	}
 }
 
 .icon {
@@ -71,10 +71,10 @@
 	white-space: nowrap;
 	text-overflow: ellipsis;
 	overflow: hidden;
-}
 
-.item[data-disabled] {
-	color: var(--color-text-high);
+	&[data-disabled] {
+		color: var(--color-text-high);
+	}
 }
 
 .itemFocused {
@@ -108,14 +108,14 @@
 	font-weight: var(--weight-semi);
 	letter-spacing: 0.5px;
 	flex: 1;
-}
 
-.searchInput::-webkit-search-cancel-button {
-	display: none;
-}
+	&::-webkit-search-cancel-button {
+		display: none;
+	}
 
-.searchInput::placeholder {
-	color: var(--color-text-high);
+	&::placeholder {
+		color: var(--color-text-high);
+	}
 }
 
 .searchClearButton {
@@ -171,6 +171,13 @@
 	padding-block-end: var(--s-1);
 	padding-inline: var(--s-1-5);
 	white-space: nowrap;
+
+	& img {
+		border-radius: 100%;
+		background-color: var(--color-bg-higher);
+		padding: var(--s-1);
+		min-width: 28px;
+	}
 }
 
 .categoryDivider {
@@ -179,10 +186,3 @@
 	height: 2px;
 	margin-block: var(--s-2);
 }
-
-.categoryHeading img {
-	border-radius: 100%;
-	background-color: var(--color-bg-higher);
-	padding: var(--s-1);
-	min-width: 28px;
-}
diff --git a/app/components/elements/Switch.module.css b/app/components/elements/Switch.module.css
index 6a97df1d7..85450ce30 100644
--- a/app/components/elements/Switch.module.css
+++ b/app/components/elements/Switch.module.css
@@ -1,18 +1,3 @@
-.root {
-	--height: var(--selector-size-sm);
-
-	cursor: pointer;
-	display: grid;
-	grid-template-columns: auto 1fr;
-	align-items: center;
-	gap: 0.571rem;
-	color: var(--text-color);
-	forced-color-adjust: none;
-	font-size: var(--font-xs);
-	font-weight: var(--weight-bold);
-	margin-block-end: 0;
-}
-
 .indicator {
 	width: calc(var(--height) * 1.75);
 	height: var(--height);
@@ -36,25 +21,40 @@
 	}
 }
 
-.root[data-selected] .indicator {
-	background: var(--color-text-accent);
-	border-color: var(--color-text-accent);
-	grid-template-columns: 1fr 1fr 0fr;
+.root {
+	--height: var(--selector-size-sm);
 
-	&:before {
-		background: var(--color-text-inverse);
+	cursor: pointer;
+	display: grid;
+	grid-template-columns: auto 1fr;
+	align-items: center;
+	gap: 0.571rem;
+	color: var(--text-color);
+	forced-color-adjust: none;
+	font-size: var(--font-xs);
+	font-weight: var(--weight-bold);
+	margin-block-end: 0;
+
+	&[data-selected] .indicator {
+		background: var(--color-text-accent);
+		border-color: var(--color-text-accent);
+		grid-template-columns: 1fr 1fr 0fr;
+
+		&:before {
+			background: var(--color-text-inverse);
+		}
+	}
+
+	&[data-focus-visible] .indicator {
+		outline: var(--focus-ring);
+		outline-offset: 1px;
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+
+		& .indicator {
+			opacity: 0.65;
+		}
 	}
 }
-
-.root[data-focus-visible] .indicator {
-	outline: var(--focus-ring);
-	outline-offset: 1px;
-}
-
-.root[data-disabled] .indicator {
-	opacity: 0.65;
-}
-
-.root[data-disabled] {
-	cursor: not-allowed;
-}
diff --git a/app/components/elements/Tabs.module.css b/app/components/elements/Tabs.module.css
index ccd46faa5..c376693f5 100644
--- a/app/components/elements/Tabs.module.css
+++ b/app/components/elements/Tabs.module.css
@@ -8,55 +8,17 @@
 	flex-direction: row;
 	border-bottom: 2px solid var(--color-border);
 	min-width: fit-content;
-}
 
-.fullWidth {
-	width: 100%;
-	min-width: 100%;
-}
-
-.tabList svg {
-	--icon-size: 16px;
-	min-width: var(--icon-size);
-	min-height: var(--icon-size);
-	max-width: var(--icon-size);
-	max-height: var(--icon-size);
-	margin-inline-end: var(--s-1-5);
-}
-
-.tabButton img {
-	min-width: 16px;
-	min-height: 16px;
-	margin-inline-end: var(--s-1-5);
-}
-
-.padded .tabPanel {
-	padding-block-start: var(--s-4);
-}
-
-.disappearing:has(.tabList > div:only-child).padded .tabPanel {
-	padding-top: 0;
-}
-
-.disappearing .tabList:has(> div:only-child) {
-	display: none;
-}
-
-.tabContainer {
-	min-width: fit-content;
-	margin-bottom: -2px;
-
-	&:focus-visible {
-		outline: var(--focus-ring);
-		outline-offset: -2px;
+	& svg {
+		--icon-size: 16px;
+		min-width: var(--icon-size);
+		min-height: var(--icon-size);
+		max-width: var(--icon-size);
+		max-height: var(--icon-size);
+		margin-inline-end: var(--s-1-5);
 	}
 }
 
-.fullWidth .tabContainer {
-	flex: 1;
-	min-width: 0;
-}
-
 .tabButton {
 	background-color: transparent;
 	border: none;
@@ -67,16 +29,58 @@
 	white-space: nowrap;
 	flex: 1;
 	transform: none !important;
+
+	& img {
+		min-width: 16px;
+		min-height: 16px;
+		margin-inline-end: var(--s-1-5);
+	}
 }
 
-.tabContainer[data-selected] .tabButton {
-	border-color: var(--color-text-accent);
-	color: var(--color-text);
+.tabContainer {
+	min-width: fit-content;
+	margin-bottom: -2px;
+
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: -2px;
+	}
+
+	&[data-selected] .tabButton {
+		border-color: var(--color-text-accent);
+		color: var(--color-text);
+	}
+
+	&[data-focus-visible] .tabButton {
+		color: var(--color-text-accent) !important;
+		outline: none;
+	}
 }
 
-.tabContainer[data-focus-visible] .tabButton {
-	color: var(--color-text-accent) !important;
-	outline: none;
+.fullWidth {
+	width: 100%;
+	min-width: 100%;
+
+	& .tabContainer {
+		flex: 1;
+		min-width: 0;
+	}
+}
+
+.padded {
+	& .tabPanel {
+		padding-block-start: var(--s-4);
+	}
+}
+
+.disappearing {
+	&:has(.tabList > div:only-child).padded .tabPanel {
+		padding-top: 0;
+	}
+
+	& .tabList:has(> div:only-child) {
+		display: none;
+	}
 }
 
 .tabNumber {
diff --git a/app/components/elements/Toast.module.css b/app/components/elements/Toast.module.css
index 03394d817..80884549c 100644
--- a/app/components/elements/Toast.module.css
+++ b/app/components/elements/Toast.module.css
@@ -74,10 +74,10 @@
 .closeButton {
 	margin-inline-start: auto;
 	outline-color: var(--color-text) !important;
-}
 
-.closeButton svg {
-	width: 1rem;
+	& svg {
+		width: 1rem;
+	}
 }
 
 .alertIcon {
diff --git a/app/components/elements/TournamentSearch.module.css b/app/components/elements/TournamentSearch.module.css
index 020e31b35..b6cbe4a25 100644
--- a/app/components/elements/TournamentSearch.module.css
+++ b/app/components/elements/TournamentSearch.module.css
@@ -18,14 +18,14 @@
 
 .itemTextsContainer {
 	line-height: 1.1;
-}
 
-.itemTextsContainer span {
-	max-width: 175px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-	display: block;
+	& span {
+		max-width: 175px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		display: block;
+	}
 }
 
 .selectValue {
diff --git a/app/components/layout/ChatSidebar.module.css b/app/components/layout/ChatSidebar.module.css
index 3d0d92fdc..05fb6d7ee 100644
--- a/app/components/layout/ChatSidebar.module.css
+++ b/app/components/layout/ChatSidebar.module.css
@@ -50,10 +50,10 @@
 	@media screen and (min-width: 600px) {
 		height: var(--field-size-sm);
 	}
-}
 
-.closeButton:hover {
-	background-color: var(--color-bg-higher);
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .roomList {
@@ -116,6 +116,10 @@
 	height: var(--field-size-sm);
 	aspect-ratio: 1 / 1;
 	border-radius: var(--radius-field);
+
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .backButtonBadge {
@@ -135,10 +139,6 @@
 	line-height: 1;
 }
 
-.backButton:hover {
-	background-color: var(--color-bg-higher);
-}
-
 .chatHeaderInfo {
 	display: flex;
 	flex-direction: column;
@@ -157,10 +157,10 @@
 	color: inherit;
 	border-radius: var(--radius-field);
 	transition: background-color 0.15s;
-}
 
-.chatHeaderLink:hover {
-	background-color: var(--color-bg-higher);
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .chatHeaderTitle {
diff --git a/app/components/layout/Footer.module.css b/app/components/layout/Footer.module.css
index 2a4d2fe90..2bb369675 100644
--- a/app/components/layout/Footer.module.css
+++ b/app/components/layout/Footer.module.css
@@ -20,6 +20,11 @@
 	gap: var(--s-2);
 }
 
+.socialIcon {
+	height: 2.25rem;
+	transition: transform 0.25s ease-in-out;
+}
+
 .socialLink {
 	display: flex;
 	max-width: 10rem;
@@ -33,23 +38,18 @@
 	background-color: var(--color-bg-higher);
 	cursor: pointer;
 	font-size: var(--font-lg);
-}
 
-.socialIcon {
-	height: 2.25rem;
-	transition: transform 0.25s ease-in-out;
-}
-
-.socialLink:hover > .socialIcon {
-	transform: translateY(-0.3rem);
+	&:hover > .socialIcon {
+		transform: translateY(-0.3rem);
+	}
 }
 
 .socialHeader {
 	text-align: center;
-}
 
-.socialHeader > p {
-	font-size: var(--font-2xs);
+	& > p {
+		font-size: var(--font-2xs);
+	}
 }
 
 .patronTitle {
@@ -98,6 +98,10 @@
 	.socialLink {
 		max-width: initial;
 		flex-direction: row;
+
+		&:hover > .socialIcon {
+			transform: translateX(-0.3rem);
+		}
 	}
 
 	.socialHeader {
@@ -105,17 +109,13 @@
 		align-items: center;
 		gap: var(--s-2);
 		text-align: initial;
-	}
 
-	.socialHeader > p {
-		margin-block-start: var(--s-1);
+		& > p {
+			margin-block-start: var(--s-1);
+		}
 	}
 
 	.socialIcon {
 		height: 1.75rem;
 	}
-
-	.socialLink:hover > .socialIcon {
-		transform: translateX(-0.3rem);
-	}
 }
diff --git a/app/components/layout/GlobalSearch.module.css b/app/components/layout/GlobalSearch.module.css
index 6cac80f0d..fc9b8675d 100644
--- a/app/components/layout/GlobalSearch.module.css
+++ b/app/components/layout/GlobalSearch.module.css
@@ -11,15 +11,15 @@
 	cursor: pointer;
 	height: var(--field-size-sm);
 	transition: background-color 0.15s;
-}
 
-.searchButton:hover {
-	background-color: var(--color-bg-high);
-}
+	&:hover {
+		background-color: var(--color-bg-high);
+	}
 
-.searchButton:focus-visible {
-	outline: var(--focus-ring);
-	outline-offset: 1px;
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: 1px;
+	}
 }
 
 .searchIcon {
@@ -52,10 +52,10 @@
 	backdrop-filter: blur(10px);
 	padding: var(--layout-main-padding);
 	padding-top: 15vh;
-}
 
-.overlay[data-entering] {
-	animation: fade-in 200ms ease-out;
+	&[data-entering] {
+		animation: fade-in 200ms ease-out;
+	}
 }
 
 @keyframes fade-in {
@@ -77,10 +77,10 @@
 		0 10px 15px -3px rgba(0, 0, 0, 0.1),
 		0 4px 6px -2px rgba(0, 0, 0, 0.05);
 	overflow: hidden;
-}
 
-.modal[data-entering] {
-	animation: zoom-in-95 200ms ease-out;
+	&[data-entering] {
+		animation: zoom-in-95 200ms ease-out;
+	}
 }
 
 @keyframes zoom-in-95 {
@@ -139,18 +139,18 @@
 	outline: none;
 	color: inherit;
 	text-decoration: none;
-}
 
-.listBoxItem[data-hovered] {
-	background-color: var(--color-bg-high);
-}
+	&[data-hovered] {
+		background-color: var(--color-bg-high);
+	}
 
-.listBoxItem[data-focused] {
-	background-color: var(--color-bg-high);
-}
+	&[data-focused] {
+		background-color: var(--color-bg-high);
+	}
 
-.listBoxItem[data-selected] {
-	background-color: var(--color-accent-low);
+	&[data-selected] {
+		background-color: var(--color-accent-low);
+	}
 }
 
 .searchTypeContainer {
@@ -262,10 +262,10 @@
 	color: var(--color-text-high);
 	cursor: pointer;
 	transition: background-color 0.15s;
-}
 
-.backButton:hover {
-	background-color: var(--color-bg-high);
+	&:hover {
+		background-color: var(--color-bg-high);
+	}
 }
 
 .selectedWeaponName {
diff --git a/app/components/layout/NotificationPopover.module.css b/app/components/layout/NotificationPopover.module.css
index c84bc46b6..c39ca16b5 100644
--- a/app/components/layout/NotificationPopover.module.css
+++ b/app/components/layout/NotificationPopover.module.css
@@ -2,10 +2,10 @@
 	min-width: 300px;
 	padding: 0;
 	background-color: var(--color-bg);
-}
 
-.popoverContainer svg {
-	width: 16px;
+	& svg {
+		width: 16px;
+	}
 }
 
 .noNotificationsContainer {
@@ -62,6 +62,11 @@
 	& svg {
 		stroke-width: 3;
 	}
+
+	&:hover {
+		color: var(--color-text);
+		background-color: var(--color-bg-higher);
+	}
 }
 
 @media screen and (max-width: 599px) {
@@ -69,8 +74,3 @@
 		margin-top: var(--s-4);
 	}
 }
-
-.viewAllLink:hover {
-	color: var(--color-text);
-	background-color: var(--color-bg-higher);
-}
diff --git a/app/components/layout/TopNavMenus.module.css b/app/components/layout/TopNavMenus.module.css
index 28bd6eb4d..3b0f954f0 100644
--- a/app/components/layout/TopNavMenus.module.css
+++ b/app/components/layout/TopNavMenus.module.css
@@ -20,11 +20,11 @@
 	font-weight: var(--weight-semi);
 	cursor: pointer;
 	white-space: nowrap;
-}
 
-.menuButton:focus-visible {
-	outline: var(--focus-ring);
-	outline-offset: 1px;
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: 1px;
+	}
 }
 
 .menuPopover {
diff --git a/app/components/layout/UserItem.module.css b/app/components/layout/UserItem.module.css
index 8181ed363..38bd83ccb 100644
--- a/app/components/layout/UserItem.module.css
+++ b/app/components/layout/UserItem.module.css
@@ -1,8 +1,8 @@
 .userItem {
 	outline-offset: 1px;
 	border-radius: var(--radius-avatar);
-}
 
-.userItem:focus-visible {
-	outline: var(--focus-ring);
+	&:focus-visible {
+		outline: var(--focus-ring);
+	}
 }
diff --git a/app/components/layout/index.module.css b/app/components/layout/index.module.css
index 880b29a7f..0f5e31650 100644
--- a/app/components/layout/index.module.css
+++ b/app/components/layout/index.module.css
@@ -52,6 +52,11 @@
 	flex-shrink: 0;
 	transition: background-color 0.2s;
 	line-height: 1;
+
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: 1px;
+	}
 }
 
 .siteLogoS {
@@ -66,11 +71,6 @@
 	bottom: -4px;
 }
 
-.siteLogo:focus-visible {
-	outline: var(--focus-ring);
-	outline-offset: 1px;
-}
-
 .separator {
 	font-size: var(--font-xs);
 	color: var(--color-text-high);
@@ -110,11 +110,11 @@
 	align-items: center;
 	text-decoration: none;
 	border-radius: var(--radius-field);
-}
 
-.breadcrumbLink:focus-visible {
-	outline: var(--focus-ring);
-	outline-offset: 1px;
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: 1px;
+	}
 }
 
 .pageName {
diff --git a/app/features/badges/badges.module.css b/app/features/badges/badges.module.css
index e2d850e82..9f38a6233 100644
--- a/app/features/badges/badges.module.css
+++ b/app/features/badges/badges.module.css
@@ -50,14 +50,14 @@
 	padding: 0;
 	font-size: var(--font-sm);
 	gap: var(--s-1-5);
-}
 
-.owners > li {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	line-height: 1.1;
-	list-style: none;
+	& > li {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		line-height: 1.1;
+		list-style: none;
+	}
 }
 
 .count {
@@ -65,13 +65,6 @@
 	font-size: var(--font-xs);
 }
 
-.editUsersList > li {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	list-style: none;
-}
-
 .editUsersList {
 	display: flex;
 	flex-direction: column;
@@ -80,6 +73,13 @@
 	font-weight: var(--weight-semi);
 	gap: var(--s-2);
 	padding-block-end: var(--s-3);
+
+	& > li {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		list-style: none;
+	}
 }
 
 .editNumberInput {
@@ -94,11 +94,11 @@
 	padding: 0;
 	font-size: var(--font-xs);
 	list-style: none;
-}
 
-.editDifferences > li::before {
-	content: "-";
-	padding-inline-end: 5px;
+	& > li::before {
+		content: "-";
+		padding-inline-end: 5px;
+	}
 }
 
 .searchInput {
diff --git a/app/features/build-analyzer/routes/analyzer.module.css b/app/features/build-analyzer/routes/analyzer.module.css
index d6e278fa1..3f3b2593d 100644
--- a/app/features/build-analyzer/routes/analyzer.module.css
+++ b/app/features/build-analyzer/routes/analyzer.module.css
@@ -43,10 +43,10 @@
 .apCompareBar {
 	height: 100%;
 	background-color: var(--color-info);
-}
 
-.apCompareBar.better {
-	background-color: var(--color-success);
+	&.better {
+		background-color: var(--color-success);
+	}
 }
 
 .effectsSelector {
diff --git a/app/features/calendar/calendar-event.module.css b/app/features/calendar/calendar-event.module.css
index 2ebfbc831..9af5ef011 100644
--- a/app/features/calendar/calendar-event.module.css
+++ b/app/features/calendar/calendar-event.module.css
@@ -7,10 +7,10 @@
 	column-gap: var(--s-1-5);
 	font-weight: var(--weight-semi);
 	grid-template-columns: max-content 1fr;
-}
 
-.times > time {
-	height: 1.25rem;
+	& > time {
+		height: 1.25rem;
+	}
 }
 
 .mapPoolSection {
diff --git a/app/features/calendar/components/TournamentCard.module.css b/app/features/calendar/components/TournamentCard.module.css
index 1f3e7f1fc..daf745133 100644
--- a/app/features/calendar/components/TournamentCard.module.css
+++ b/app/features/calendar/components/TournamentCard.module.css
@@ -12,6 +12,10 @@
 	height: 100%;
 }
 
+.avatarImg {
+	border-radius: var(--radius-avatar);
+}
+
 .card {
 	background-color: var(--color-bg-high);
 	border-radius: var(--radius-box);
@@ -20,6 +24,10 @@
 	height: 100%;
 	min-width: var(--card-width);
 	max-width: var(--card-width);
+
+	&:hover .avatarImg {
+		outline: 6px solid var(--color-bg-higher);
+	}
 }
 
 .imgContainer {
@@ -30,26 +38,18 @@
 	margin-top: -10px;
 }
 
-.avatarImg {
-	border-radius: var(--radius-avatar);
-}
-
-.card:hover .avatarImg {
-	outline: 6px solid var(--color-bg-higher);
-}
-
 .org {
 	display: flex;
 	gap: var(--s-1);
 	font-size: var(--font-2xs);
 	color: var(--color-text-high);
-}
 
-.org span {
-	max-width: 165px;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	overflow: hidden;
+	& span {
+		max-width: 165px;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
 }
 
 .time {
@@ -92,11 +92,11 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
-}
 
-.teamCount svg {
-	width: var(--tournament-card-icon-size);
-	height: var(--tournament-card-icon-size);
+	& svg {
+		width: var(--tournament-card-icon-size);
+		height: var(--tournament-card-icon-size);
+	}
 }
 
 .modesPillContainer {
@@ -120,11 +120,11 @@
 	justify-content: end;
 	padding-inline-end: 12px;
 	width: 100%;
-}
 
-.pillsContainer.lonely {
-	padding-inline-end: 0px;
-	padding-inline-start: 12px;
+	&.lonely {
+		padding-inline-end: 0px;
+		padding-inline-start: 12px;
+	}
 }
 
 .pill {
@@ -140,11 +140,11 @@
 .pillRanked {
 	background-color: var(--color-info-low);
 	color: var(--color-text-accent);
-}
 
-.pillRanked svg {
-	width: var(--tournament-card-icon-size);
-	height: var(--tournament-card-icon-size);
+	& svg {
+		width: var(--tournament-card-icon-size);
+		height: var(--tournament-card-icon-size);
+	}
 }
 
 .firstPlacers {
diff --git a/app/features/calendar/routes/calendar.module.css b/app/features/calendar/routes/calendar.module.css
index 4ea77b6a2..5c531d916 100644
--- a/app/features/calendar/routes/calendar.module.css
+++ b/app/features/calendar/routes/calendar.module.css
@@ -24,10 +24,20 @@
 	padding: var(--s-1) var(--s-2);
 	font-size: var(--font-xs);
 	flex: 1 1 0;
-}
 
-.navigateButton:focus-visible {
-	outline: var(--focus-ring);
+	&:focus-visible {
+		outline: var(--focus-ring);
+	}
+
+	&:not(.navigateArrowButton) {
+		justify-content: center;
+	}
+
+	& svg {
+		max-width: 1.75rem;
+		min-width: 1.75rem;
+		max-height: 1.75rem;
+	}
 }
 
 @container (width >= 640px) {
@@ -40,18 +50,10 @@
 	}
 }
 
-.navigateButton:not(.navigateArrowButton) {
-	justify-content: center;
-}
-
-.navigateButton svg {
-	max-width: 1.75rem;
-	min-width: 1.75rem;
-	max-height: 1.75rem;
-}
-
-.navigateArrowButton svg {
-	margin-inline-start: -5px;
+.navigateArrowButton {
+	& svg {
+		margin-inline-start: -5px;
+	}
 }
 
 .columnsContainer {
@@ -101,9 +103,11 @@
 	border-radius: var(--radius-box);
 }
 
-.hiddenEventsButton svg {
-	width: 1rem;
-	height: 1rem;
+.hiddenEventsButton {
+	& svg {
+		width: 1rem;
+		height: 1rem;
+	}
 }
 
 .calendar {
diff --git a/app/features/chat/components/Chat.module.css b/app/features/chat/components/Chat.module.css
index b182cb7b3..d0c0ab2a6 100644
--- a/app/features/chat/components/Chat.module.css
+++ b/app/features/chat/components/Chat.module.css
@@ -31,9 +31,11 @@
 	flex-shrink: 0;
 }
 
-.avatarWrapperStaff img {
-	border: var(--border-style-accent);
-	border-radius: var(--radius-avatar);
+.avatarWrapperStaff {
+	& img {
+		border: var(--border-style-accent);
+		border-radius: var(--radius-avatar);
+	}
 }
 
 .avatarBadge {
@@ -78,11 +80,11 @@
 .inputContainer {
 	margin-top: auto;
 	position: relative;
-}
 
-.inputContainer > form {
-	padding: var(--s-2);
-	border-top: 1.5px solid var(--color-border);
+	& > form {
+		padding: var(--s-2);
+		border-top: 1.5px solid var(--color-border);
+	}
 }
 
 .sendButton.sendButton {
@@ -90,10 +92,10 @@
 	background-color: var(--color-text-accent);
 	color: var(--color-text-inverse);
 	flex-shrink: 0;
-}
 
-.sendButton.sendButton:disabled {
-	opacity: 0.4;
+	&:disabled {
+		opacity: 0.4;
+	}
 }
 
 .messageContents {
diff --git a/app/features/comp-analyzer/components/DamageComboBar.module.css b/app/features/comp-analyzer/components/DamageComboBar.module.css
index bdcdc6e5f..b09991340 100644
--- a/app/features/comp-analyzer/components/DamageComboBar.module.css
+++ b/app/features/comp-analyzer/components/DamageComboBar.module.css
@@ -20,10 +20,10 @@
 	color: var(--color-text);
 	width: 100%;
 	text-align: left;
-}
 
-.header:hover {
-	background: var(--color-bg-high);
+	&:hover {
+		background: var(--color-bg-high);
+	}
 }
 
 .headerTitle {
@@ -75,6 +75,22 @@
 	padding: 0 var(--s-2);
 	color: var(--color-text-inverse);
 	font-weight: var(--weight-semi);
+
+	&[data-slot-color="yellow"] {
+		background-color: #f5d742;
+	}
+
+	&[data-slot-color="pink"] {
+		background-color: #f5b8d0;
+	}
+
+	&[data-slot-color="green"] {
+		background-color: #90e8a8;
+	}
+
+	&[data-slot-color="blue"] {
+		background-color: #8cd4f5;
+	}
 }
 
 .damageTypeLabel {
@@ -89,10 +105,10 @@
 	border: 1px solid transparent;
 	border-radius: var(--radius-selector);
 	cursor: pointer;
-}
 
-.damageTypeLabel:hover {
-	text-decoration: line-through;
+	&:hover {
+		text-decoration: line-through;
+	}
 }
 
 .damageValue {
@@ -107,22 +123,6 @@
 	margin-left: var(--s-0-5);
 }
 
-.segment[data-slot-color="yellow"] {
-	background-color: #f5d742;
-}
-
-.segment[data-slot-color="pink"] {
-	background-color: #f5b8d0;
-}
-
-.segment[data-slot-color="green"] {
-	background-color: #90e8a8;
-}
-
-.segment[data-slot-color="blue"] {
-	background-color: #8cd4f5;
-}
-
 .weaponIcon {
 	min-width: 24px;
 	min-height: 24px;
@@ -184,15 +184,15 @@
 	color: var(--color-text);
 	cursor: pointer;
 	transition: background-color 0.15s ease;
-}
 
-.filterControlButton:hover:not(:disabled) {
-	background: var(--color-bg-high);
-}
+	&:hover:not(:disabled) {
+		background: var(--color-bg-high);
+	}
 
-.filterControlButton:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 }
 
 .filteredItemsRow {
@@ -216,10 +216,10 @@
 	color: var(--color-text-high);
 	cursor: pointer;
 	transition: background-color 0.15s ease;
-}
 
-.filteredItem:hover {
-	background: var(--color-bg-high);
+	&:hover {
+		background: var(--color-bg-high);
+	}
 }
 
 .slidersContainer {
diff --git a/app/features/comp-analyzer/components/RangeVisualization.module.css b/app/features/comp-analyzer/components/RangeVisualization.module.css
index f3eb7a395..e106a21ce 100644
--- a/app/features/comp-analyzer/components/RangeVisualization.module.css
+++ b/app/features/comp-analyzer/components/RangeVisualization.module.css
@@ -20,10 +20,10 @@
 	color: var(--color-text);
 	width: 100%;
 	text-align: left;
-}
 
-.header:hover {
-	background: var(--color-bg-high);
+	&:hover {
+		background: var(--color-bg-high);
+	}
 }
 
 .headerTitle {
diff --git a/app/features/comp-analyzer/components/SelectedWeapons.module.css b/app/features/comp-analyzer/components/SelectedWeapons.module.css
index e3f242154..035001244 100644
--- a/app/features/comp-analyzer/components/SelectedWeapons.module.css
+++ b/app/features/comp-analyzer/components/SelectedWeapons.module.css
@@ -94,10 +94,10 @@
 	line-height: 1;
 	color: var(--color-text-high);
 	flex-shrink: 0;
-}
 
-.removeButton:hover {
-	color: var(--color-error);
+	&:hover {
+		color: var(--color-error);
+	}
 }
 
 .subSpecialContainer {
diff --git a/app/features/comp-analyzer/components/WeaponCategories.module.css b/app/features/comp-analyzer/components/WeaponCategories.module.css
index a04106208..af30fa56d 100644
--- a/app/features/comp-analyzer/components/WeaponCategories.module.css
+++ b/app/features/comp-analyzer/components/WeaponCategories.module.css
@@ -39,10 +39,10 @@
 	padding: var(--s-1) var(--s-4);
 	border-left: 1.5px solid var(--color-border);
 	flex-shrink: 0;
-}
 
-.categoryItem[data-first="true"] {
-	border-left: none;
+	&[data-first="true"] {
+		border-left: none;
+	}
 }
 
 .categoryName {
diff --git a/app/features/comp-analyzer/components/WeaponGrid.module.css b/app/features/comp-analyzer/components/WeaponGrid.module.css
index 635265ba2..95a9f594b 100644
--- a/app/features/comp-analyzer/components/WeaponGrid.module.css
+++ b/app/features/comp-analyzer/components/WeaponGrid.module.css
@@ -83,19 +83,19 @@
 	border-radius: var(--radius-box);
 	cursor: pointer;
 	transition: border-color 0.1s;
-}
 
-.weaponButton:hover {
-	border-color: var(--color-text-accent);
-}
+	&:hover {
+		border-color: var(--color-text-accent);
+	}
 
-.weaponButton:disabled {
-	opacity: 0.6;
-	cursor: not-allowed;
-}
+	&:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
 
-.weaponButton:disabled:hover {
-	border-color: transparent;
+		&:hover {
+			border-color: transparent;
+		}
+	}
 }
 
 .weaponButtonSelected {
diff --git a/app/features/components-showcase/components-showcase.module.css b/app/features/components-showcase/components-showcase.module.css
index 6640ddba7..271f9e30c 100644
--- a/app/features/components-showcase/components-showcase.module.css
+++ b/app/features/components-showcase/components-showcase.module.css
@@ -9,10 +9,10 @@
 	align-items: center;
 	grid-template-columns: 200px 1fr;
 	gap: var(--s-4);
-}
 
-.componentRow:last-child {
-	border-bottom: none;
+	&:last-child {
+		border-bottom: none;
+	}
 }
 
 .componentLabel {
diff --git a/app/features/front-page/components/SplatoonRotations.module.css b/app/features/front-page/components/SplatoonRotations.module.css
index 9b2c36dbb..f80ae770a 100644
--- a/app/features/front-page/components/SplatoonRotations.module.css
+++ b/app/features/front-page/components/SplatoonRotations.module.css
@@ -12,11 +12,11 @@
 
 .rotationsCredit {
 	font-size: var(--font-2xs);
-}
 
-.rotationsCredit a {
-	color: var(--color-text-high);
-	text-decoration: underline;
+	& a {
+		color: var(--color-text-high);
+		text-decoration: underline;
+	}
 }
 
 .rotationsScroll {
diff --git a/app/features/lfg/components/LFGPost.module.css b/app/features/lfg/components/LFGPost.module.css
index 805dc7dcc..8f3c0f957 100644
--- a/app/features/lfg/components/LFGPost.module.css
+++ b/app/features/lfg/components/LFGPost.module.css
@@ -4,12 +4,12 @@
 	align-items: flex-start;
 	column-gap: var(--s-6);
 	row-gap: var(--s-2);
-}
 
-.wideLayout .leftRow {
-	display: flex;
-	gap: var(--s-2);
-	flex-direction: column;
+	& .leftRow {
+		display: flex;
+		gap: var(--s-2);
+		flex-direction: column;
+	}
 }
 
 @container (width >= 640px) {
@@ -111,11 +111,11 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
-}
 
-.editButton > svg {
-	width: 14px;
-	height: 14px;
+	& > svg {
+		width: 14px;
+		height: 14px;
+	}
 }
 
 .tier {
diff --git a/app/features/map-planner/components/Planner.module.css b/app/features/map-planner/components/Planner.module.css
index 50b05f1a5..3ec35a0c5 100644
--- a/app/features/map-planner/components/Planner.module.css
+++ b/app/features/map-planner/components/Planner.module.css
@@ -167,10 +167,10 @@
 	background: transparent;
 	cursor: grab;
 	touch-action: none;
-}
 
-.draggableButton:hover {
-	background-color: var(--color-bg-high);
+	&:hover {
+		background-color: var(--color-bg-high);
+	}
 }
 
 .weaponDragging {
diff --git a/app/features/notifications/components/NotificationList.module.css b/app/features/notifications/components/NotificationList.module.css
index 0edeb62ff..f0b26b59a 100644
--- a/app/features/notifications/components/NotificationList.module.css
+++ b/app/features/notifications/components/NotificationList.module.css
@@ -4,27 +4,6 @@
 	border-color: var(--color-bg-high);
 }
 
-.item {
-	padding: var(--s-1) var(--s-3);
-	display: grid;
-	grid-template-areas: "image header" "image timestamp";
-	grid-template-columns: 30px 1fr;
-	column-gap: var(--s-2);
-	padding-block: var(--s-3);
-	color: var(--color-text);
-}
-
-.unseenDot {
-	background-color: var(--color-text-accent);
-	border-radius: 100%;
-	width: 8px;
-	height: 8px;
-	position: absolute;
-	top: -1px;
-	left: -1px;
-	outline: 2px solid var(--color-bg);
-}
-
 .imageContainer {
 	place-self: center;
 	grid-area: image;
@@ -37,12 +16,33 @@
 	position: relative;
 }
 
-.item:hover .imageContainer {
-	outline: 3px solid var(--color-bg-higher);
+.item {
+	padding: var(--s-1) var(--s-3);
+	display: grid;
+	grid-template-areas: "image header" "image timestamp";
+	grid-template-columns: 30px 1fr;
+	column-gap: var(--s-2);
+	padding-block: var(--s-3);
+	color: var(--color-text);
+
+	&:hover .imageContainer {
+		outline: 3px solid var(--color-bg-higher);
+	}
+
+	&:focus-within .imageContainer {
+		outline: 3px solid var(--color-accent-low);
+	}
 }
 
-.item:focus-within .imageContainer {
-	outline: 3px solid var(--color-accent-low);
+.unseenDot {
+	background-color: var(--color-text-accent);
+	border-radius: 100%;
+	width: 8px;
+	height: 8px;
+	position: absolute;
+	top: -1px;
+	left: -1px;
+	outline: 2px solid var(--color-bg);
 }
 
 .itemImage {
diff --git a/app/features/notifications/routes/notifications.module.css b/app/features/notifications/routes/notifications.module.css
index d092e7017..1bbfa80bd 100644
--- a/app/features/notifications/routes/notifications.module.css
+++ b/app/features/notifications/routes/notifications.module.css
@@ -2,8 +2,8 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-3);
-}
 
-.header svg {
-	width: 24px;
+	& svg {
+		width: 24px;
+	}
 }
diff --git a/app/features/object-damage-calculator/routes/object-damage-calculator.module.css b/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
index bbdfca139..c35059a70 100644
--- a/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
+++ b/app/features/object-damage-calculator/routes/object-damage-calculator.module.css
@@ -71,11 +71,11 @@
 	border-radius: var(--radius-field);
 	width: var(--field-size);
 	height: var(--field-size);
-}
 
-.receiverButton:focus-visible {
-	outline: var(--focus-ring);
-	outline-offset: 1px;
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: 1px;
+	}
 }
 
 .receiverImage {
diff --git a/app/features/plus-suggestions/plus.module.css b/app/features/plus-suggestions/plus.module.css
index ed3853d6d..9e211ea1e 100644
--- a/app/features/plus-suggestions/plus.module.css
+++ b/app/features/plus-suggestions/plus.module.css
@@ -113,11 +113,11 @@
 	margin-inline: auto;
 	padding-block: var(--s-1);
 	padding-inline: var(--s-3) var(--s-4);
-}
 
-.votingAlert > svg {
-	height: 1.75rem;
-	fill: var(--color-success);
+	& > svg {
+		height: 1.75rem;
+		fill: var(--color-success);
+	}
 }
 
 .votingBioHeader {
diff --git a/app/features/plus-voting/plus-voting-results.module.css b/app/features/plus-voting/plus-voting-results.module.css
index a95724d62..d00d1404a 100644
--- a/app/features/plus-voting/plus-voting-results.module.css
+++ b/app/features/plus-voting/plus-voting-results.module.css
@@ -22,22 +22,22 @@
 	display: flex;
 	flex-direction: row;
 	color: var(--color-text-accent);
-}
 
-.tierHeader::before,
-.tierHeader::after {
-	flex: 1 1;
-	border-bottom: 3px solid var(--color-bg-high);
-	margin: auto;
-	content: "";
-}
+	&::before,
+	&::after {
+		flex: 1 1;
+		border-bottom: 3px solid var(--color-bg-high);
+		margin: auto;
+		content: "";
+	}
 
-.tierHeader::before {
-	margin-right: 10px;
-}
+	&::before {
+		margin-right: 10px;
+	}
 
-.tierHeader::after {
-	margin-left: 10px;
+	&::after {
+		margin-left: 10px;
+	}
 }
 
 .passedInfoContainer {
diff --git a/app/features/scrims/components/ScrimCard.module.css b/app/features/scrims/components/ScrimCard.module.css
index ae06b6ae0..084f3e46a 100644
--- a/app/features/scrims/components/ScrimCard.module.css
+++ b/app/features/scrims/components/ScrimCard.module.css
@@ -97,10 +97,10 @@
 	padding: 0;
 	text-align: left;
 	text-decoration: underline;
-}
 
-.expandButton:hover {
-	opacity: 0.8;
+	&:hover {
+		opacity: 0.8;
+	}
 }
 
 .footer {
@@ -135,8 +135,10 @@
 	gap: var(--s-0-5);
 }
 
-.strikethrough button {
-	text-decoration: line-through;
+.strikethrough {
+	& button {
+		text-decoration: line-through;
+	}
 }
 
 .canceledLabel {
diff --git a/app/features/scrims/routes/scrims.$id.module.css b/app/features/scrims/routes/scrims.$id.module.css
index f670b0d07..36f22cacf 100644
--- a/app/features/scrims/routes/scrims.$id.module.css
+++ b/app/features/scrims/routes/scrims.$id.module.css
@@ -49,16 +49,20 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-1);
+
+	& svg {
+		color: var(--color-success);
+	}
 }
 
 .screenBanImageWrapper {
 	position: relative;
 	display: inline-block;
 	line-height: 0;
-}
 
-.screenBanImageWrapper picture {
-	flex-shrink: 0;
+	& picture {
+		flex-shrink: 0;
+	}
 }
 
 .screenBanIconOverlay {
@@ -72,18 +76,16 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+
+	& svg {
+		width: 14px;
+		height: 14px;
+		color: var(--color-bg);
+	}
 }
 
-.screenBanIconOverlay svg {
-	width: 14px;
-	height: 14px;
-	color: var(--color-bg);
-}
-
-.screenBanIndicator svg {
-	color: var(--color-success);
-}
-
-.screenBanIndicatorWarning svg {
-	color: var(--color-error);
+.screenBanIndicatorWarning {
+	& svg {
+		color: var(--color-error);
+	}
 }
diff --git a/app/features/scrims/routes/scrims.module.css b/app/features/scrims/routes/scrims.module.css
index 11b2bb4ed..0faa0c54e 100644
--- a/app/features/scrims/routes/scrims.module.css
+++ b/app/features/scrims/routes/scrims.module.css
@@ -12,8 +12,8 @@
 	display: flex;
 	gap: var(--s-6);
 	align-items: center;
-}
 
-.filterButtons button:not(.active) {
-	color: var(--color-text-high);
+	& button:not(.active) {
+		color: var(--color-text-high);
+	}
 }
diff --git a/app/features/sendouq-match/routes/q.match.$id.module.css b/app/features/sendouq-match/routes/q.match.$id.module.css
index 36fc705a8..f808aa833 100644
--- a/app/features/sendouq-match/routes/q.match.$id.module.css
+++ b/app/features/sendouq-match/routes/q.match.$id.module.css
@@ -8,21 +8,21 @@
 	text-decoration-style: dotted;
 	font-weight: var(--weight-body);
 	height: 19.8281px;
-}
 
-.stagePopoverButton:focus {
-	outline: none;
-	color: var(--color-text-accent);
+	&:focus {
+		outline: none;
+		color: var(--color-text-accent);
+	}
 }
 
 .modePopoverButton {
 	background-color: transparent;
 	padding: 0;
 	border: none;
-}
 
-.modePopoverButton:focus {
-	outline: none;
+	&:focus {
+		outline: none;
+	}
 }
 
 .container {
@@ -97,16 +97,18 @@
 	letter-spacing: 1px;
 }
 
-.screenLegality svg {
-	width: 24px;
+.screenLegality {
+	& svg {
+		width: 24px;
+	}
 }
 
 .screenLegalityButton {
 	width: 100%;
-}
 
-.screenLegalityButton:focus-visible {
-	outline: none !important;
+	&:focus-visible {
+		outline: none !important;
+	}
 }
 
 .preferenceEmoji {
diff --git a/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css b/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
index 5e30bfc6f..a5555722a 100644
--- a/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
+++ b/app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
@@ -36,6 +36,10 @@
 		filter,
 		opacity 0.2s;
 	border-radius: var(--radius-box);
+
+	&:active {
+		transform: none;
+	}
 }
 
 @keyframes wiggle {
@@ -61,10 +65,6 @@
 	animation-iteration-count: 1;
 }
 
-.mapButton:active {
-	transform: none;
-}
-
 .mapButtonGreyedOut {
 	filter: grayscale(100%) !important;
 	opacity: 0.4 !important;
@@ -98,15 +98,15 @@
 	text-align: center;
 }
 
-.divider::before,
-.divider::after {
-	border-bottom: 2px dotted var(--color-bg-higher);
-}
-
 .divider {
 	font-size: var(--font-xs);
 	font-weight: var(--weight-semi);
 	text-transform: uppercase;
 	display: flex;
 	gap: var(--s-2);
+
+	&::before,
+	&::after {
+		border-bottom: 2px dotted var(--color-bg-higher);
+	}
 }
diff --git a/app/features/sendouq-settings/components/PreferenceRadioGroup.module.css b/app/features/sendouq-settings/components/PreferenceRadioGroup.module.css
index 2eebf6fb9..1307d6588 100644
--- a/app/features/sendouq-settings/components/PreferenceRadioGroup.module.css
+++ b/app/features/sendouq-settings/components/PreferenceRadioGroup.module.css
@@ -20,10 +20,10 @@
 .checked {
 	color: var(--color-text);
 	outline: 2px solid var(--color-bg-higher);
-}
 
-.checked .emoji {
-	filter: grayscale(0%);
+	& .emoji {
+		filter: grayscale(0%);
+	}
 }
 
 .focusVisible {
diff --git a/app/features/sendouq-settings/routes/q.settings.module.css b/app/features/sendouq-settings/routes/q.settings.module.css
index 973e6f241..61c81b1b8 100644
--- a/app/features/sendouq-settings/routes/q.settings.module.css
+++ b/app/features/sendouq-settings/routes/q.settings.module.css
@@ -6,18 +6,18 @@
 	font-weight: var(--weight-bold);
 	margin-block-end: var(--s-4);
 	position: relative;
-}
 
-.summary > div {
-	display: inline-flex;
-}
+	& > div {
+		display: inline-flex;
+	}
 
-.summary svg {
-	width: 24px;
-	color: var(--color-text-accent);
-	position: absolute;
-	right: 20px;
-	top: 14px;
+	& svg {
+		width: 24px;
+		color: var(--color-text-accent);
+		position: absolute;
+		right: 20px;
+		top: 14px;
+	}
 }
 
 .volumeSliderIcon {
diff --git a/app/features/sendouq-streams/routes/q.streams.module.css b/app/features/sendouq-streams/routes/q.streams.module.css
index 8a0da39c7..8a2545239 100644
--- a/app/features/sendouq-streams/routes/q.streams.module.css
+++ b/app/features/sendouq-streams/routes/q.streams.module.css
@@ -14,10 +14,10 @@
 	align-items: center;
 	margin-block-start: -5px;
 	color: var(--color-text-high);
-}
 
-.viewerCount > svg {
-	width: 0.75rem;
+	& > svg {
+		width: 0.75rem;
+	}
 }
 
 .infoCircle {
diff --git a/app/features/sendouq/components/GroupCard.module.css b/app/features/sendouq/components/GroupCard.module.css
index a30c90c6f..b99b81df4 100644
--- a/app/features/sendouq/components/GroupCard.module.css
+++ b/app/features/sendouq/components/GroupCard.module.css
@@ -107,11 +107,11 @@
 	white-space: nowrap;
 	height: 100%;
 	border-radius: var(--radius-selector);
-}
 
-.addNoteButton > svg {
-	width: 18px;
-	height: 18px;
+	& > svg {
+		width: 18px;
+		height: 18px;
+	}
 }
 
 .noteTextarea {
diff --git a/app/features/sendouq/routes/q.info.module.css b/app/features/sendouq/routes/q.info.module.css
index 566a4f094..5aee43d83 100644
--- a/app/features/sendouq/routes/q.info.module.css
+++ b/app/features/sendouq/routes/q.info.module.css
@@ -3,38 +3,40 @@
 	flex-direction: column;
 	gap: var(--s-4);
 	font-size: var(--font-md);
+
+	& h2 {
+		font-size: var(--font-lg);
+		margin-block-end: var(--s-2);
+		color: var(--color-text-accent);
+	}
+
+	& h3 {
+		font-size: var(--font-md);
+		margin-block-end: var(--s-3);
+	}
+
+	& p {
+		margin-block: var(--s-2);
+	}
 }
 
-.container h2 {
-	font-size: var(--font-lg);
-	margin-block-end: var(--s-2);
-	color: var(--color-text-accent);
-}
+.tableOfContents {
+	& ul {
+		padding-left: 0;
+	}
 
-.container h3 {
-	font-size: var(--font-md);
-	margin-block-end: var(--s-3);
-}
+	& li {
+		list-style: none;
+		font-size: var(--font-sm);
+		font-weight: var(--weight-semi);
+	}
 
-.container p {
-	margin-block: var(--s-2);
-}
+	& li:has(button) {
+		margin-block-start: var(--s-2);
+	}
 
-.tableOfContents ul {
-	padding-left: 0;
-}
-
-.tableOfContents li {
-	list-style: none;
-	font-size: var(--font-sm);
-	font-weight: var(--weight-semi);
-}
-
-.tableOfContents li:has(button) {
-	margin-block-start: var(--s-2);
-}
-
-.tableOfContents li:not(:has(button)) {
-	margin-inline-start: var(--s-2);
-	font-size: var(--font-xs);
+	& li:not(:has(button)) {
+		margin-inline-start: var(--s-2);
+		font-size: var(--font-xs);
+	}
 }
diff --git a/app/features/sendouq/routes/q.looking.module.css b/app/features/sendouq/routes/q.looking.module.css
index 7e745ea8f..85ee0afa1 100644
--- a/app/features/sendouq/routes/q.looking.module.css
+++ b/app/features/sendouq/routes/q.looking.module.css
@@ -23,14 +23,14 @@
 	color: var(--color-text-accent);
 	display: flex;
 	align-items: center;
-}
 
-.header::before,
-.header::after {
-	flex: 1;
-	content: "";
-	padding: 2px;
-	background-color: var(--color-bg-high);
-	margin: 5px;
-	border-radius: var(--radius-box);
+	&::before,
+	&::after {
+		flex: 1;
+		content: "";
+		padding: 2px;
+		background-color: var(--color-bg-high);
+		margin: 5px;
+		border-radius: var(--radius-box);
+	}
 }
diff --git a/app/features/sendouq/routes/q.module.css b/app/features/sendouq/routes/q.module.css
index c63a36878..89360c54c 100644
--- a/app/features/sendouq/routes/q.module.css
+++ b/app/features/sendouq/routes/q.module.css
@@ -32,10 +32,10 @@
 	align-items: center;
 	gap: var(--s-3);
 	transition: background-color 0.2s;
-}
 
-.frontPageLink:hover {
-	background-color: var(--color-bg-higher);
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .linkSubText {
diff --git a/app/features/team/team.module.css b/app/features/team/team.module.css
index 91b371092..8093ca20d 100644
--- a/app/features/team/team.module.css
+++ b/app/features/team/team.module.css
@@ -52,29 +52,33 @@
 	width: 24.4px;
 	display: grid;
 	place-items: center;
-}
 
-.bskyLink > svg {
-	width: 0.9rem;
-}
+	& > svg {
+		width: 0.9rem;
+	}
 
-.bskyLink path {
-	fill: #1285fe;
+	& path {
+		fill: #1285fe;
+	}
 }
 
 .bannerAvatar {
 	grid-area: avatar;
 	align-self: flex-end;
 	margin-bottom: -110px;
-}
 
-.bannerAvatar > div {
-	padding: var(--s-2);
-	background-color: var(--color-bg);
-	border-radius: var(--radius-avatar);
-	display: grid;
-	place-items: center;
-	width: 7rem;
+	& > div {
+		padding: var(--s-2);
+		background-color: var(--color-bg);
+		border-radius: var(--radius-avatar);
+		display: grid;
+		place-items: center;
+		width: 7rem;
+	}
+
+	& img {
+		border-radius: var(--radius-avatar);
+	}
 }
 
 .bannerAvatarSpacer {
@@ -116,10 +120,6 @@
 	margin-block: var(--s-1);
 }
 
-.bannerAvatar img {
-	border-radius: var(--radius-avatar);
-}
-
 .actionButtons {
 	display: flex;
 	justify-content: center;
@@ -146,12 +146,12 @@
 	list-style: none;
 	display: flex;
 	gap: var(--s-4);
-}
 
-.resultsPlacements > li {
-	display: flex;
-	align-items: center;
-	gap: var(--s-1);
+	& > li {
+		display: flex;
+		align-items: center;
+		gap: var(--s-1);
+	}
 }
 
 .member {
diff --git a/app/features/tier-list-maker/components/TierListItemImage.module.css b/app/features/tier-list-maker/components/TierListItemImage.module.css
index e985c486d..0fc543e74 100644
--- a/app/features/tier-list-maker/components/TierListItemImage.module.css
+++ b/app/features/tier-list-maker/components/TierListItemImage.module.css
@@ -1,8 +1,10 @@
-.imageWrapper img {
-	pointer-events: none;
-	user-select: none;
-	-webkit-user-select: none;
-	-webkit-touch-callout: none;
+.imageWrapper {
+	& img {
+		pointer-events: none;
+		user-select: none;
+		-webkit-user-select: none;
+		-webkit-touch-callout: none;
+	}
 }
 
 .modeOverlay {
diff --git a/app/features/tier-list-maker/components/TierRow.module.css b/app/features/tier-list-maker/components/TierRow.module.css
index 0e0967037..f74cb8f1d 100644
--- a/app/features/tier-list-maker/components/TierRow.module.css
+++ b/app/features/tier-list-maker/components/TierRow.module.css
@@ -17,10 +17,10 @@
 	cursor: pointer;
 	transition: opacity 0.2s;
 	border: none;
-}
 
-.tierLabel:hover {
-	opacity: 0.9;
+	&:hover {
+		opacity: 0.9;
+	}
 }
 
 .tierName {
@@ -91,6 +91,15 @@
 	border: none;
 	cursor: pointer;
 	transition: opacity 0.2s;
+
+	&:hover:not(:disabled) {
+		opacity: 0.8;
+	}
+
+	&:disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+	}
 }
 
 .arrowButtonUpper {
@@ -101,15 +110,6 @@
 	border-radius: 0 0 var(--radius-field) 0;
 }
 
-.arrowButton:hover:not(:disabled) {
-	opacity: 0.8;
-}
-
-.arrowButton:disabled {
-	opacity: 0.3;
-	cursor: not-allowed;
-}
-
 .arrowIcon {
 	width: 20px;
 	height: 20px;
@@ -137,11 +137,11 @@
 	cursor: pointer;
 	transition: all 0.2s;
 	padding: 0;
-}
 
-.colorButton:hover {
-	transform: scale(1.1);
-	border-color: var(--color-text-high);
+	&:hover {
+		transform: scale(1.1);
+		border-color: var(--color-text-high);
+	}
 }
 
 .colorButtonSelected {
diff --git a/app/features/tier-list-maker/routes/tier-list-maker.module.css b/app/features/tier-list-maker/routes/tier-list-maker.module.css
index 9f0c6ab93..f1ee0eaa6 100644
--- a/app/features/tier-list-maker/routes/tier-list-maker.module.css
+++ b/app/features/tier-list-maker/routes/tier-list-maker.module.css
@@ -41,15 +41,15 @@
 	border: none;
 	color: var(--color-text);
 	outline: none;
-}
 
-.titleInput::placeholder {
-	color: var(--color-text-high);
-	opacity: 0.3;
-}
+	&::placeholder {
+		color: var(--color-text-high);
+		opacity: 0.3;
+	}
 
-.titleInput:focus::placeholder {
-	opacity: 0.5;
+	&:focus::placeholder {
+		opacity: 0.5;
+	}
 }
 
 .authorSection {
diff --git a/app/features/top-search/top-search.module.css b/app/features/top-search/top-search.module.css
index 0fc9ff3c2..107c3a6e8 100644
--- a/app/features/top-search/top-search.module.css
+++ b/app/features/top-search/top-search.module.css
@@ -35,24 +35,24 @@
 	color: var(--color-text);
 	transition: 0.1s ease-in-out background-color;
 	border-radius: 0;
+
+	&:first-of-type {
+		border-radius: var(--radius-box) var(--radius-box) 0 0;
+	}
+
+	&:last-of-type {
+		border-radius: 0 0 var(--radius-box) var(--radius-box);
+	}
+
+	&:only-child {
+		border-radius: var(--radius-box);
+	}
 }
 
 a.tableRow:hover {
 	background-color: var(--color-bg-higher);
 }
 
-.tableRow:first-of-type {
-	border-radius: var(--radius-box) var(--radius-box) 0 0;
-}
-
-.tableRow:last-of-type {
-	border-radius: 0 0 var(--radius-box) var(--radius-box);
-}
-
-.tableRow:only-child {
-	border-radius: var(--radius-box);
-}
-
 .tableRowQualification {
 	font-size: var(--font-xs);
 	font-weight: var(--weight-semi);
diff --git a/app/features/tournament-bracket/components/Bracket/bracket.module.css b/app/features/tournament-bracket/components/Bracket/bracket.module.css
index 6626624c7..d7e6d70d5 100644
--- a/app/features/tournament-bracket/components/Bracket/bracket.module.css
+++ b/app/features/tournament-bracket/components/Bracket/bracket.module.css
@@ -250,30 +250,30 @@ a.match:hover {
 	min-width: max-content;
 	overflow-x: auto;
 	max-width: 600px;
-}
 
-.rrPlacementsTable thead {
-	color: var(--color-text-high);
-}
+	& thead {
+		color: var(--color-text-high);
+	}
 
-.rrPlacementsTable th {
-	text-align: left;
-}
+	& th {
+		text-align: left;
 
-.rrPlacementsTable th abbr {
-	padding-inline: var(--s-2);
-}
+		& abbr {
+			padding-inline: var(--s-2);
+		}
+	}
 
-.rrPlacementsTable td span {
-	padding-inline: var(--s-2);
-}
+	& td span {
+		padding-inline: var(--s-2);
+	}
 
-.rrPlacementsTable tbody tr:nth-child(odd) {
-	background-color: var(--color-bg-high);
-}
+	& tbody tr:nth-child(odd) {
+		background-color: var(--color-bg-high);
+	}
 
-.rrPlacementsTable tbody tr:nth-child(even) {
-	background-color: var(--color-bg-higher);
+	& tbody tr:nth-child(even) {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .standingsDividerRow {
@@ -303,18 +303,22 @@ a.match:hover {
 	white-space: nowrap;
 }
 
-.standingsDividerQualified .standingsDividerLine {
-	background-color: var(--color-success);
+.standingsDividerQualified {
+	& .standingsDividerLine {
+		background-color: var(--color-success);
+	}
+
+	& .standingsDividerText {
+		color: var(--color-success);
+	}
 }
 
-.standingsDividerQualified .standingsDividerText {
-	color: var(--color-success);
-}
+.standingsDividerEliminated {
+	& .standingsDividerLine {
+		background-color: var(--color-error);
+	}
 
-.standingsDividerEliminated .standingsDividerLine {
-	background-color: var(--color-error);
-}
-
-.standingsDividerEliminated .standingsDividerText {
-	color: var(--color-error);
+	& .standingsDividerText {
+		color: var(--color-error);
+	}
 }
diff --git a/app/features/tournament-bracket/components/BracketMapListDialog.module.css b/app/features/tournament-bracket/components/BracketMapListDialog.module.css
index ae7a9a4ce..74bb71aae 100644
--- a/app/features/tournament-bracket/components/BracketMapListDialog.module.css
+++ b/app/features/tournament-bracket/components/BracketMapListDialog.module.css
@@ -36,25 +36,25 @@
 	font-weight: var(--weight-semi);
 	cursor: pointer;
 	transition: background-color 0.2s ease;
-}
 
-.roundButton:hover:not(:disabled):not(.roundButtonActive) {
-	background-color: var(--color-bg-higher);
-}
+	&:hover:not(:disabled):not(.roundButtonActive) {
+		background-color: var(--color-bg-higher);
+	}
 
-.roundButton:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
 
-.roundButton:focus-visible {
-	outline: var(--focus-ring);
-	outline-offset: 1px;
-}
+	&:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: 1px;
+	}
 
-.roundButton svg {
-	width: 1rem;
-	height: 1rem;
+	& svg {
+		width: 1rem;
+		height: 1rem;
+	}
 }
 
 .roundButtonActive {
diff --git a/app/features/tournament-bracket/components/MatchActionsBanPicker.module.css b/app/features/tournament-bracket/components/MatchActionsBanPicker.module.css
index 656f56094..3d7e6e361 100644
--- a/app/features/tournament-bracket/components/MatchActionsBanPicker.module.css
+++ b/app/features/tournament-bracket/components/MatchActionsBanPicker.module.css
@@ -3,17 +3,17 @@
 	--map-height: 50px;
 }
 
-.divider::before,
-.divider::after {
-	border-bottom: 2px dotted var(--color-bg-higher);
-}
-
 .divider {
 	font-size: var(--font-xs);
 	font-weight: var(--weight-semi);
 	text-transform: uppercase;
 	display: flex;
 	gap: var(--s-2);
+
+	&::before,
+	&::after {
+		border-bottom: 2px dotted var(--color-bg-higher);
+	}
 }
 
 .mapButton {
@@ -27,10 +27,10 @@
 		filter,
 		opacity 0.2s;
 	border-radius: var(--radius-box);
-}
 
-.mapButton:active {
-	transform: none;
+	&:active {
+		transform: none;
+	}
 }
 
 .mapButtonGreyedOut {
diff --git a/app/features/tournament-bracket/components/MatchTimer.module.css b/app/features/tournament-bracket/components/MatchTimer.module.css
index a0948c48c..d7adc8d4e 100644
--- a/app/features/tournament-bracket/components/MatchTimer.module.css
+++ b/app/features/tournament-bracket/components/MatchTimer.module.css
@@ -58,6 +58,8 @@
 	text-shadow: 0 0 3px var(--color-text-inverse);
 }
 
-.gameMarkerHidden .gameMarkerText {
-	visibility: hidden;
+.gameMarkerHidden {
+	& .gameMarkerText {
+		visibility: hidden;
+	}
 }
diff --git a/app/features/tournament-bracket/routes/to.$id.divisions.module.css b/app/features/tournament-bracket/routes/to.$id.divisions.module.css
index 3f3263da5..f739e1d3e 100644
--- a/app/features/tournament-bracket/routes/to.$id.divisions.module.css
+++ b/app/features/tournament-bracket/routes/to.$id.divisions.module.css
@@ -13,20 +13,20 @@
 	width: 100%;
 	white-space: nowrap;
 	border: var(--border-style);
-}
 
-.link:focus-visible {
-	outline: 3px solid var(--color-accent);
-	outline-offset: 3px;
+	&:focus-visible {
+		outline: 3px solid var(--color-accent);
+		outline-offset: 3px;
+	}
 }
 
 .participant {
 	outline: 3px solid var(--color-bg-higher);
 	outline-offset: 3px;
-}
 
-.participant svg {
-	fill: var(--color-accent);
+	& svg {
+		fill: var(--color-accent);
+	}
 }
 
 .participantCounts {
@@ -37,9 +37,9 @@
 	font-size: var(--fonts-sm);
 	gap: var(--s-2);
 	margin-block-end: var(--s-1);
-}
 
-.participantCounts > svg {
-	width: 1rem;
-	margin-block-end: 1px;
+	& > svg {
+		width: 1rem;
+		margin-block-end: 1px;
+	}
 }
diff --git a/app/features/tournament-bracket/tournament-bracket.module.css b/app/features/tournament-bracket/tournament-bracket.module.css
index 5883d4c2d..eb53b5adf 100644
--- a/app/features/tournament-bracket/tournament-bracket.module.css
+++ b/app/features/tournament-bracket/tournament-bracket.module.css
@@ -20,8 +20,10 @@
 	letter-spacing: 0.3px;
 }
 
-.infosValue > button {
-	font-size: var(--font-2xs);
+.infosValue {
+	& > button {
+		font-size: var(--font-2xs);
+	}
 }
 
 .lockedBanner {
@@ -86,9 +88,11 @@
 	bottom: 8px;
 }
 
-.stageBanner:has(.stageBannerEndSetButton)
-	.stageBannerUndoButton:not(.stageBannerEndSetButton) {
-	right: 72px;
+.stageBanner {
+	&:has(.stageBannerEndSetButton)
+		.stageBannerUndoButton:not(.stageBannerEndSetButton) {
+		right: 72px;
+	}
 }
 
 .deadlinePopover {
@@ -154,15 +158,17 @@
 .noScreen {
 	display: flex;
 	gap: var(--s-0-5);
+
+	& > svg {
+		width: 24px;
+		color: var(--color-success);
+	}
 }
 
-.noScreen > svg {
-	width: 24px;
-	color: var(--color-success);
-}
-
-.noScreenBanned > svg {
-	color: var(--color-error);
+.noScreenBanned {
+	& > svg {
+		color: var(--color-error);
+	}
 }
 
 .duringMatchActions {
@@ -229,15 +235,13 @@
 	display: flex;
 	align-items: center;
 	flex: 1;
-}
 
-.duringMatchActionsCheckboxName:not(:global(.disabled-opaque)):not(
-		:global(.presentational)
-	):hover {
-	border-radius: var(--radius-box);
-	cursor: pointer;
-	outline: 2px solid var(--color-accent-high);
-	outline-offset: 2px;
+	&:not(:global(.disabled-opaque)):not(:global(.presentational)):hover {
+		border-radius: var(--radius-box);
+		cursor: pointer;
+		outline: 2px solid var(--color-accent-high);
+		outline-offset: 2px;
+	}
 }
 
 .duringMatchActionsCheckbox:not(#_) {
@@ -336,11 +340,11 @@
 	font-size: var(--font-xs);
 	font-weight: var(--weight-semi);
 	flex-direction: column;
-}
 
-.rosters ul {
-	padding: 0;
-	list-style: none;
+	& ul {
+		padding: 0;
+		list-style: none;
+	}
 }
 
 .rostersSpacedHeader {
@@ -382,11 +386,11 @@
 	padding: var(--s-3);
 	outline: 2px solid var(--color-bg-higher);
 	min-width: 40px;
-}
 
-.modeProgressImage > svg {
-	width: 20px;
-	height: 20px;
+	& > svg {
+		width: 20px;
+		height: 20px;
+	}
 }
 
 .modeProgressImageNotable {
@@ -410,10 +414,10 @@
 .modeProgressImageBanned {
 	outline: 2px solid var(--color-error);
 	background-color: var(--color-bg-high);
-}
 
-.modeProgressImageBanned > img {
-	filter: grayscale(100%);
+	& > img {
+		filter: grayscale(100%);
+	}
 }
 
 .modeProgressImageBannedPopoverTrigger:focus-visible {
@@ -509,14 +513,16 @@
 	width: 280px;
 }
 
-.actionSectionWrapper [class*="tabPanel"] {
-	background-color: var(--color-bg-high);
-	border-radius: 0 0 var(--radius-box) var(--radius-box);
-	padding: var(--s-4);
-}
+.actionSectionWrapper {
+	& [class*="tabPanel"] {
+		background-color: var(--color-bg-high);
+		border-radius: 0 0 var(--radius-box) var(--radius-box);
+		padding: var(--s-4);
 
-.actionSectionWrapper [class*="tabPanel"]:has([class*="chatContainer"]) {
-	padding: var(--s-1) var(--s-4);
+		&:has([class*="chatContainer"]) {
+			padding: var(--s-1) var(--s-4);
+		}
+	}
 }
 
 .bracketNavLink {
@@ -525,30 +531,30 @@
 	border-color: var(--color-bg-higher);
 	background-color: var(--color-bg);
 	border-radius: 0;
+
+	&:active {
+		transform: translateY(0px);
+	}
+
+	&:first-of-type {
+		border-start-start-radius: var(--radius-box);
+		border-end-start-radius: var(--radius-box);
+	}
+
+	&:not(&:first-of-type) {
+		margin-left: -2px;
+	}
+
+	&:last-of-type {
+		border-start-end-radius: var(--radius-box);
+		border-end-end-radius: var(--radius-box);
+	}
 }
 
 .bracketNavLinkBig {
 	font-size: var(--font-lg);
 }
 
-.bracketNavLink:active {
-	transform: translateY(0px);
-}
-
-.bracketNavLink:first-of-type {
-	border-start-start-radius: var(--radius-box);
-	border-end-start-radius: var(--radius-box);
-}
-
-.bracketNavLink:not(.bracketNavLink:first-of-type) {
-	margin-left: -2px;
-}
-
-.bracketNavLink:last-of-type {
-	border-start-end-radius: var(--radius-box);
-	border-end-end-radius: var(--radius-box);
-}
-
 .bracketNavLinkSelected {
 	color: var(--color-text);
 	background-color: var(--color-bg-high);
diff --git a/app/features/tournament-lfg/routes/to.$id.looking.module.css b/app/features/tournament-lfg/routes/to.$id.looking.module.css
index 31b5e77e4..2413ff38c 100644
--- a/app/features/tournament-lfg/routes/to.$id.looking.module.css
+++ b/app/features/tournament-lfg/routes/to.$id.looking.module.css
@@ -23,16 +23,16 @@
 	color: var(--color-text-accent);
 	display: flex;
 	align-items: center;
-}
 
-.header::before,
-.header::after {
-	flex: 1;
-	content: "";
-	padding: 2px;
-	background-color: var(--color-bg-high);
-	margin: 5px;
-	border-radius: var(--radius-box);
+	&::before,
+	&::after {
+		flex: 1;
+		content: "";
+		padding: 2px;
+		background-color: var(--color-bg-high);
+		margin: 5px;
+		border-radius: var(--radius-box);
+	}
 }
 
 .subsContainer {
@@ -84,10 +84,10 @@
 	display: flex;
 	align-items: center;
 	gap: var(--s-0-5);
-}
 
-.subsInfoVc > svg {
-	width: 18px;
+	& > svg {
+		width: 18px;
+	}
 }
 
 .subsSectionMessage {
diff --git a/app/features/tournament-organization/components/BannedPlayersList.module.css b/app/features/tournament-organization/components/BannedPlayersList.module.css
index ed21f6d60..38d5f1692 100644
--- a/app/features/tournament-organization/components/BannedPlayersList.module.css
+++ b/app/features/tournament-organization/components/BannedPlayersList.module.css
@@ -26,10 +26,10 @@
 	padding: 0;
 	text-align: left;
 	text-decoration: underline;
-}
 
-.expandButton:hover {
-	opacity: 0.8;
+	&:hover {
+		opacity: 0.8;
+	}
 }
 
 .banPlayerButton {
diff --git a/app/features/tournament-organization/tournament-organization.module.css b/app/features/tournament-organization/tournament-organization.module.css
index 7c086be78..38e195a78 100644
--- a/app/features/tournament-organization/tournament-organization.module.css
+++ b/app/features/tournament-organization/tournament-organization.module.css
@@ -82,15 +82,15 @@
 	justify-content: space-between;
 	gap: var(--s-2);
 	font-weight: var(--weight-bold);
-}
 
-.calendarMonthSelector a {
-	font-size: var(--font-xl);
-}
+	& a {
+		font-size: var(--font-xl);
+	}
 
-.calendarMonthSelector > div {
-	font-size: var(--font-lg);
-	margin-block-start: var(--s-1);
+	& > div {
+		font-size: var(--font-lg);
+		margin-block-start: var(--s-1);
+	}
 }
 
 .sectionDivider {
@@ -130,10 +130,10 @@
 	font-weight: var(--weight-semi);
 	color: var(--color-text);
 	width: max-content;
-}
 
-.eventInfo img {
-	border-radius: var(--radius-avatar);
+	& img {
+		border-radius: var(--radius-avatar);
+	}
 }
 
 .eventInfoTime {
@@ -146,13 +146,13 @@
 	display: flex;
 	gap: var(--s-4);
 	flex-direction: column;
-}
 
-.leaderboardList li::marker {
-	font-size: var(--font-lg);
-	font-weight: var(--weight-bold);
-	color: var(--color-accent);
-	padding-inline-end: var(--s-2);
+	& li::marker {
+		font-size: var(--font-lg);
+		font-weight: var(--weight-bold);
+		color: var(--color-accent);
+		padding-inline-end: var(--s-2);
+	}
 }
 
 .leaderboardListRow {
@@ -169,10 +169,10 @@
 	gap: var(--s-2);
 	align-items: center;
 	max-width: max-content;
-}
 
-.socialLink svg {
-	width: 18px;
+	& svg {
+		width: 18px;
+	}
 }
 
 .socialLinkIconContainer {
@@ -183,14 +183,20 @@
 	padding: var(--s-2);
 }
 
-.socialLinkTwitch svg {
-	fill: #9146ff;
+.socialLinkTwitch {
+	& svg {
+		fill: #9146ff;
+	}
 }
 
-.socialLinkYoutube svg {
-	fill: #f00;
+.socialLinkYoutube {
+	& svg {
+		fill: #f00;
+	}
 }
 
-.socialLinkBsky path {
-	fill: #1285fe;
+.socialLinkBsky {
+	& path {
+		fill: #1285fe;
+	}
 }
diff --git a/app/features/tournament/routes/to.$id.seeds.module.css b/app/features/tournament/routes/to.$id.seeds.module.css
index 6a0261152..18ccea0b0 100644
--- a/app/features/tournament/routes/to.$id.seeds.module.css
+++ b/app/features/tournament/routes/to.$id.seeds.module.css
@@ -89,19 +89,19 @@
 	touch-action: none;
 	user-select: none;
 	-webkit-user-select: none;
-}
 
-.dragHandle:hover {
-	color: var(--color-text);
-}
+	&:hover {
+		color: var(--color-text);
+	}
 
-.dragHandle:active:not(:disabled) {
-	cursor: grabbing;
-}
+	&:active:not(:disabled) {
+		cursor: grabbing;
+	}
 
-.dragHandle:disabled {
-	cursor: not-allowed;
-	opacity: 0.5;
+	&:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
 }
 
 .seedInput {
@@ -112,11 +112,11 @@
 	background-color: var(--color-bg);
 	color: var(--color-text);
 	font-size: var(--font-xs);
-}
 
-.seedInput:focus {
-	outline: var(--focus-ring);
-	outline-offset: 1px;
+	&:focus {
+		outline: var(--focus-ring);
+		outline-offset: 1px;
+	}
 }
 
 .teamNameContainer {
diff --git a/app/features/tournament/tournament.module.css b/app/features/tournament/tournament.module.css
index 53814d786..ced022be9 100644
--- a/app/features/tournament/tournament.module.css
+++ b/app/features/tournament/tournament.module.css
@@ -171,34 +171,34 @@
 
 .infoDescription {
 	white-space: pre-wrap;
-}
 
-.infoDescription > :is(h1, h2, h3, h4, h5, h6) {
-	margin-block-end: var(--s-6);
-}
+	& > :is(h1, h2, h3, h4, h5, h6) {
+		margin-block-end: var(--s-6);
+	}
 
-.infoDescription > :is(h2, h3, h4, h5, h6) {
-	margin-block-start: var(--s-6);
-}
+	& > :is(h2, h3, h4, h5, h6) {
+		margin-block-start: var(--s-6);
+	}
 
-.infoDescription > :first-child {
-	margin-block-start: 0;
-}
+	& > :first-child {
+		margin-block-start: 0;
+	}
 
-.infoDescription > h1 {
-	font-size: var(--font-xl);
-}
+	& > h1 {
+		font-size: var(--font-xl);
+	}
 
-.infoDescription > :is(h2, h3, h4, h5, h6) {
-	font-size: var(--font-lg);
-}
+	& > :is(h2, h3, h4, h5, h6) {
+		font-size: var(--font-lg);
+	}
 
-.infoDescription > :is(h3, h4, h5, h6) {
-	font-size: var(--font-md);
-}
+	& > :is(h3, h4, h5, h6) {
+		font-size: var(--font-md);
+	}
 
-.infoDescription > ul:has(+ p) {
-	margin-block-end: var(--s-6);
+	& > ul:has(+ p) {
+		margin-block-end: var(--s-6);
+	}
 }
 
 .by {
@@ -283,10 +283,10 @@
 	align-items: center;
 	margin-block-start: -5px;
 	color: var(--color-text-high);
-}
 
-.streamViewerCount > svg {
-	width: 0.75rem;
+	& > svg {
+		width: 0.75rem;
+	}
 }
 
 .teamStats {
@@ -315,11 +315,11 @@
 .teamStatMain {
 	font-size: var(--font-xl);
 	font-weight: var(--weight-semi);
-}
 
-.teamStatMain sup {
-	font-size: var(--font-sm);
-	font-weight: var(--weight-semi);
+	& sup {
+		font-size: var(--font-sm);
+		font-weight: var(--weight-semi);
+	}
 }
 
 .teamStatSub {
@@ -449,13 +449,13 @@
 	align-items: center;
 	color: var(--color-accent);
 	font-size: var(--font-lg);
-}
 
-.overlapDivider::before,
-.overlapDivider::after {
-	flex: 1;
-	border-bottom: 2px solid var(--color-bg-higher);
-	content: "";
+	&::before,
+	&::after {
+		flex: 1;
+		border-bottom: 2px solid var(--color-bg-higher);
+		content: "";
+	}
 }
 
 .standingsMatchResultSquare {
diff --git a/app/features/user-page/components/GameBadgeSelectField.module.css b/app/features/user-page/components/GameBadgeSelectField.module.css
index c7bdb2d0d..0a85627f8 100644
--- a/app/features/user-page/components/GameBadgeSelectField.module.css
+++ b/app/features/user-page/components/GameBadgeSelectField.module.css
@@ -23,15 +23,15 @@
 	border-radius: var(--rounded-sm);
 	padding: var(--s-0-5);
 	transition: background-color 0.15s;
-}
 
-.badgeButton:hover {
-	background-color: var(--bg-lightest);
-}
+	&:hover {
+		background-color: var(--bg-lightest);
+	}
 
-.badgeButton:focus-visible {
-	outline: 2px solid var(--theme);
-	outline-offset: 2px;
+	&:focus-visible {
+		outline: 2px solid var(--theme);
+		outline-offset: 2px;
+	}
 }
 
 .badgeImage {
diff --git a/app/features/user-page/components/MutualFriends.module.css b/app/features/user-page/components/MutualFriends.module.css
index de688ba83..6bb2ee086 100644
--- a/app/features/user-page/components/MutualFriends.module.css
+++ b/app/features/user-page/components/MutualFriends.module.css
@@ -15,10 +15,10 @@
 .stackedAvatar {
 	border-radius: 50%;
 	border: 2px solid var(--color-bg);
-}
 
-.stackedAvatar:not(:first-child) {
-	margin-inline-start: -8px;
+	&:not(:first-child) {
+		margin-inline-start: -8px;
+	}
 }
 
 .overflow {
diff --git a/app/features/user-page/components/SubPageHeader.module.css b/app/features/user-page/components/SubPageHeader.module.css
index 07b17585f..6245bbad6 100644
--- a/app/features/user-page/components/SubPageHeader.module.css
+++ b/app/features/user-page/components/SubPageHeader.module.css
@@ -31,14 +31,14 @@
 	border: 2px solid var(--color-bg-higher);
 	color: var(--color-text);
 	transition: all 0.2s;
-}
 
-.backButton svg {
-	min-width: 30px;
-}
+	& svg {
+		min-width: 30px;
+	}
 
-.backButton:hover {
-	background-color: var(--color-bg-higher);
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .backIcon {
diff --git a/app/features/user-page/components/UserPageIconNav.module.css b/app/features/user-page/components/UserPageIconNav.module.css
index 199c7d7f4..5d2321ad8 100644
--- a/app/features/user-page/components/UserPageIconNav.module.css
+++ b/app/features/user-page/components/UserPageIconNav.module.css
@@ -22,20 +22,20 @@
 	color: var(--color-text);
 	transition: all 0.2s;
 	cursor: pointer;
-}
 
-.iconNavItem:hover {
-	background-color: var(--color-bg-higher);
-}
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
 
-.iconNavItem:focus-visible {
-	outline: 2px solid var(--color-text-second);
-	outline-offset: 2px;
-}
+	&:focus-visible {
+		outline: 2px solid var(--color-text-second);
+		outline-offset: 2px;
+	}
 
-.iconNavItem.active {
-	border-color: var(--color-text-second);
-	background-color: var(--color-bg-higher);
+	&.active {
+		border-color: var(--color-text-second);
+		background-color: var(--color-bg-higher);
+	}
 }
 
 @container (width >= 720px) {
diff --git a/app/features/user-page/components/Widget.module.css b/app/features/user-page/components/Widget.module.css
index a5efd4d16..c3dfe0050 100644
--- a/app/features/user-page/components/Widget.module.css
+++ b/app/features/user-page/components/Widget.module.css
@@ -125,14 +125,14 @@
 	gap: var(--s-1);
 	max-width: 100%;
 	overflow: hidden;
-}
 
-.tournamentName a {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	min-width: 0;
-	max-width: 175px;
+	& a {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+		max-width: 175px;
+	}
 }
 
 .resultDate {
@@ -179,10 +179,10 @@
 	padding: var(--s-2);
 	transition: background-color 0.2s;
 	background-color: var(--color-bg-high);
-}
 
-.lfgPost:hover {
-	background-color: var(--color-bg-higher);
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .xRankPeaks {
@@ -267,10 +267,10 @@
 	align-items: center;
 	word-break: break-all;
 	overflow-wrap: break-word;
-}
 
-.socialLink svg {
-	width: 18px;
+	& svg {
+		width: 18px;
+	}
 }
 
 .socialLinkIconContainer {
@@ -280,28 +280,28 @@
 	border-radius: var(--radius-box);
 	padding: var(--s-2);
 	flex-shrink: 0;
-}
 
-.socialLinkIconContainer svg {
-	width: 18px;
-	height: 18px;
-	fill: var(--color-text);
-}
+	& svg {
+		width: 18px;
+		height: 18px;
+		fill: var(--color-text);
+	}
 
-.socialLinkIconContainer.twitch svg {
-	fill: #9146ff;
-}
+	&.twitch svg {
+		fill: #9146ff;
+	}
 
-.socialLinkIconContainer.youtube svg {
-	fill: #f00;
-}
+	&.youtube svg {
+		fill: #f00;
+	}
 
-.socialLinkIconContainer.bsky path {
-	fill: #1285fe;
-}
+	&.bsky path {
+		fill: #1285fe;
+	}
 
-.socialLinkIconContainer.discord svg {
-	fill: #5865f2;
+	&.discord svg {
+		fill: #5865f2;
+	}
 }
 
 .socialLinksIcons {
diff --git a/app/features/user-page/routes/u.$identifier.edit-widgets.module.css b/app/features/user-page/routes/u.$identifier.edit-widgets.module.css
index d87879a03..d701fdc34 100644
--- a/app/features/user-page/routes/u.$identifier.edit-widgets.module.css
+++ b/app/features/user-page/routes/u.$identifier.edit-widgets.module.css
@@ -13,11 +13,11 @@
 	margin-bottom: var(--s-6);
 	flex-wrap: wrap;
 	gap: var(--s-4);
-}
 
-.header h1 {
-	font-size: var(--font-xl);
-	font-weight: var(--weight-bold);
+	& h1 {
+		font-size: var(--font-xl);
+		font-weight: var(--weight-bold);
+	}
 }
 
 .actions {
@@ -166,6 +166,21 @@
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	transition: opacity 0.2s;
+
+	& .widgetName {
+		cursor: grab;
+		user-select: none;
+		-webkit-user-select: none;
+		touch-action: none;
+
+		&:active {
+			cursor: grabbing;
+		}
+	}
+
+	&.isDragging {
+		opacity: 0.5;
+	}
 }
 
 .widgetSettings {
@@ -175,21 +190,6 @@
 	border-radius: var(--radius-box);
 }
 
-.draggableWidget .widgetName {
-	cursor: grab;
-	user-select: none;
-	-webkit-user-select: none;
-	touch-action: none;
-}
-
-.draggableWidget .widgetName:active {
-	cursor: grabbing;
-}
-
-.draggableWidget.isDragging {
-	opacity: 0.5;
-}
-
 .selectedWidgetsList {
 	display: flex;
 	flex-direction: column;
diff --git a/app/features/user-page/routes/u.$identifier.module.css b/app/features/user-page/routes/u.$identifier.module.css
index fd80ce8d0..4148721c2 100644
--- a/app/features/user-page/routes/u.$identifier.module.css
+++ b/app/features/user-page/routes/u.$identifier.module.css
@@ -62,11 +62,11 @@
 	gap: var(--s-4);
 	padding-block: var(--s-2);
 	scroll-snap-type: x mandatory;
-}
 
-.sideCarousel > * {
-	flex: 0 0 280px;
-	scroll-snap-align: start;
+	& > * {
+		flex: 0 0 280px;
+		scroll-snap-align: start;
+	}
 }
 
 .mainStack {
diff --git a/app/features/user-page/user-page.module.css b/app/features/user-page/user-page.module.css
index 8d693c30d..a615f2bbb 100644
--- a/app/features/user-page/user-page.module.css
+++ b/app/features/user-page/user-page.module.css
@@ -48,39 +48,43 @@
 	border-radius: 50%;
 }
 
-.extraInfoHeading > svg {
-	width: 0.8rem;
+.extraInfoHeading {
+	& > svg {
+		width: 0.8rem;
+	}
 }
 
-.socialLink > svg {
-	width: 0.9rem;
+.socialLink {
+	& > svg {
+		width: 0.9rem;
+	}
 }
 
 .socialLinkYoutube {
 	border-color: #f00;
 	background-color: #ff00002f;
-}
 
-.socialLinkYoutube > svg {
-	fill: #f00;
+	& > svg {
+		fill: #f00;
+	}
 }
 
 .socialLinkTwitch {
 	border-color: #9146ff;
 	background-color: #9146ff2f;
-}
 
-.socialLinkTwitch > svg {
-	fill: #9146ff;
+	& > svg {
+		fill: #9146ff;
+	}
 }
 
 .socialLinkBattlefy {
 	border-color: #de4c5e;
 	background-color: #de4c5e2f;
-}
 
-.socialLinkBattlefy > svg {
-	fill: #de4c5e;
+	& > svg {
+		fill: #de4c5e;
+	}
 }
 
 .socialLinkBsky {
@@ -88,10 +92,10 @@
 	background-color: #1285fe2f;
 	display: grid;
 	place-items: center;
-}
 
-.socialLinkBsky path {
-	fill: #1285fe;
+	& path {
+		fill: #1285fe;
+	}
 }
 
 .extraInfos {
@@ -125,11 +129,11 @@
 .resultsTableHighlights {
 	border: var(--s-2) solid var(--color-bg-high);
 	padding-inline: 0 !important;
-}
 
-.resultsTableHighlights > legend {
-	margin-inline-start: var(--s-2);
-	padding-inline: var(--s-1);
+	& > legend {
+		margin-inline-start: var(--s-2);
+		padding-inline: var(--s-1);
+	}
 }
 
 .resultsPlayers {
@@ -162,10 +166,10 @@
 	color: var(--color-text);
 	gap: var(--s-6);
 	transition: 0.1s ease-in-out background-color;
-}
 
-.placements:hover {
-	background-color: var(--color-bg-higher);
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .placementsMode {
@@ -257,6 +261,10 @@
 	display: flex;
 	flex-direction: column;
 	gap: var(--s-4);
+
+	&:hover {
+		background-color: var(--color-bg-higher);
+	}
 }
 
 .seasonMatchWithSubSection {
@@ -275,10 +283,6 @@
 	padding-block: var(--s-0-5);
 }
 
-.seasonMatch:hover {
-	background-color: var(--color-bg-higher);
-}
-
 .seasonMatchUser {
 	display: flex;
 	flex-direction: column;
@@ -307,23 +311,23 @@
 	flex-direction: row;
 	margin: 0 auto;
 	padding: 0;
-}
 
-.seasonMatchSetResults li {
-	width: 28px;
-	height: 28px;
-	display: grid;
-	place-items: center;
-	font-size: var(--font-xs);
-	font-weight: var(--weight-semi);
-	border: 3px solid var(--color-accent);
-	border-radius: var(--radius-field);
-	color: var(--color-text);
-	border-color: var(--color-error);
-}
+	& li {
+		width: 28px;
+		height: 28px;
+		display: grid;
+		place-items: center;
+		font-size: var(--font-xs);
+		font-weight: var(--weight-semi);
+		border: 3px solid var(--color-accent);
+		border-radius: var(--radius-field);
+		color: var(--color-text);
+		border-color: var(--color-error);
 
-.seasonMatchSetResults li[data-is-win="true"] {
-	border-color: var(--color-success);
+		&[data-is-win="true"] {
+			border-color: var(--color-success);
+		}
+	}
 }
 
 .seasonInfoContainer {
diff --git a/app/features/vods/routes/vods.$id.module.css b/app/features/vods/routes/vods.$id.module.css
index c02bf752a..b4e711f76 100644
--- a/app/features/vods/routes/vods.$id.module.css
+++ b/app/features/vods/routes/vods.$id.module.css
@@ -38,8 +38,8 @@
 	position: absolute;
 	top: -15px;
 	right: -15px;
-}
 
-.matchMode.cast {
-	right: -8px;
+	&.cast {
+		right: -8px;
+	}
 }
diff --git a/app/form/fields/FormFieldWrapper.module.css b/app/form/fields/FormFieldWrapper.module.css
index 4377b2720..e29139999 100644
--- a/app/form/fields/FormFieldWrapper.module.css
+++ b/app/form/fields/FormFieldWrapper.module.css
@@ -1,12 +1,12 @@
 .root {
 	width: 100%;
-}
 
-.root input:not([type="radio"], [type="checkbox"]),
-.root textarea,
-.root select,
-.root .react-aria-Group,
-.root .react-aria-Select button,
-.root .react-aria-DatePicker {
-	width: 100%;
+	& input:not([type="radio"], [type="checkbox"]),
+	& textarea,
+	& select,
+	& .react-aria-Group,
+	& .react-aria-Select button,
+	& .react-aria-DatePicker {
+		width: 100%;
+	}
 }
diff --git a/app/form/fields/StageSelectFormField.module.css b/app/form/fields/StageSelectFormField.module.css
index 32c7d8d79..538155c07 100644
--- a/app/form/fields/StageSelectFormField.module.css
+++ b/app/form/fields/StageSelectFormField.module.css
@@ -1,3 +1,5 @@
-.root button[class] {
-	width: 100%;
+.root {
+	& button[class] {
+		width: 100%;
+	}
 }
diff --git a/app/form/fields/UserSearchFormField.module.css b/app/form/fields/UserSearchFormField.module.css
index 32d87ff82..9d3f6984f 100644
--- a/app/form/fields/UserSearchFormField.module.css
+++ b/app/form/fields/UserSearchFormField.module.css
@@ -1,7 +1,7 @@
 .root {
 	width: 100%;
-}
 
-.root button[class] {
-	width: 100%;
+	& button[class] {
+		width: 100%;
+	}
 }
diff --git a/app/form/fields/WeaponPoolFormField.module.css b/app/form/fields/WeaponPoolFormField.module.css
index a4fc130c9..72d13b81f 100644
--- a/app/form/fields/WeaponPoolFormField.module.css
+++ b/app/form/fields/WeaponPoolFormField.module.css
@@ -17,10 +17,10 @@
 	border-radius: var(--radius-box);
 	background-color: var(--color-bg-high);
 	transition: opacity 0.2s;
-}
 
-.item.isDragging {
-	opacity: 0.5;
+	&.isDragging {
+		opacity: 0.5;
+	}
 }
 
 .dragHandle {
@@ -33,10 +33,10 @@
 	border: none;
 	padding: 0;
 	flex-shrink: 0;
-}
 
-.dragHandle:active {
-	cursor: grabbing;
+	&:active {
+		cursor: grabbing;
+	}
 }
 
 .weaponName {
diff --git a/app/form/fields/WeaponSelectFormField.module.css b/app/form/fields/WeaponSelectFormField.module.css
index 32c7d8d79..538155c07 100644
--- a/app/form/fields/WeaponSelectFormField.module.css
+++ b/app/form/fields/WeaponSelectFormField.module.css
@@ -1,3 +1,5 @@
-.root button[class] {
-	width: 100%;
+.root {
+	& button[class] {
+		width: 100%;
+	}
 }
diff --git a/app/styles/common.css b/app/styles/common.css
index eab89c29b..0baeae973 100644
--- a/app/styles/common.css
+++ b/app/styles/common.css
@@ -66,10 +66,12 @@
 		color: inherit;
 	}
 
-	details summary {
-		cursor: pointer;
-		user-select: none;
-		-webkit-user-select: none;
+	details {
+		& summary {
+			cursor: pointer;
+			user-select: none;
+			-webkit-user-select: none;
+		}
 	}
 
 	a {
@@ -109,11 +111,11 @@
 		height: var(--field-size);
 		font-size: var(--font-sm);
 		outline: none;
-	}
 
-	.input-container:focus-within {
-		outline: var(--focus-ring);
-		outline-offset: 1px;
+		&:focus-within {
+			outline: var(--focus-ring);
+			outline-offset: 1px;
+		}
 	}
 
 	.in-container {
@@ -436,16 +438,16 @@
 
 	input[type="color"] {
 		padding: calc(var(--field-size) / 8) var(--field-padding);
-	}
 
-	input[type="color"]::-webkit-color-swatch {
-		border: 0;
-		border-radius: var(--radius-field);
-	}
+		&::-webkit-color-swatch {
+			border: 0;
+			border-radius: var(--radius-field);
+		}
 
-	input[type="color"]::-moz-color-swatch {
-		border: 0;
-		border-radius: var(--radius-field);
+		&::-moz-color-swatch {
+			border: 0;
+			border-radius: var(--radius-field);
+		}
 	}
 
 	input[type="file"] {
@@ -454,14 +456,14 @@
 		font-size: var(--font-sm);
 		color: var(--color-text-high);
 		overflow: hidden;
-	}
 
-	input[type="file"]::file-selector-button {
-		height: 100%;
-		border: none;
-		background-color: var(--color-bg-higher);
-		white-space: nowrap;
-		margin-right: var(--s-2);
+		&::file-selector-button {
+			height: 100%;
+			border: none;
+			background-color: var(--color-bg-higher);
+			white-space: nowrap;
+			margin-right: var(--s-2);
+		}
 	}
 
 	input[type="range"] {
@@ -482,54 +484,54 @@
 			--track-color: var(--color-bg-higher);
 			--thumb-color: var(--color-text-accent);
 		}
-	}
 
-	input[type="range"]::-webkit-slider-runnable-track {
-		width: 100%;
-		height: calc(var(--selector-size) / 4);
-		background-color: var(--track-color);
-		border-radius: var(--radius-full);
-		transition: 100ms background-color;
-	}
+		&::-webkit-slider-runnable-track {
+			width: 100%;
+			height: calc(var(--selector-size) / 4);
+			background-color: var(--track-color);
+			border-radius: var(--radius-full);
+			transition: 100ms background-color;
+		}
 
-	input[type="range"]::-moz-range-track {
-		width: 100%;
-		height: calc(var(--selector-size) / 4);
-		background-color: var(--track-color);
-		border-radius: var(--radius-full);
-		transition: 100ms background-color;
-	}
+		&::-moz-range-track {
+			width: 100%;
+			height: calc(var(--selector-size) / 4);
+			background-color: var(--track-color);
+			border-radius: var(--radius-full);
+			transition: 100ms background-color;
+		}
 
-	input[type="range"]::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: var(--selector-size);
-		height: var(--selector-size);
-		margin-top: calc(
-			(calc(var(--selector-size) / 4) - var(--selector-size)) /
-			2
-		);
-		background-color: var(--thumb-color);
-		border: 2px solid var(--color-bg);
-		border-radius: var(--radius-full);
-		cursor: pointer;
-		transition: 100ms background-color;
-	}
+		&::-webkit-slider-thumb {
+			-webkit-appearance: none;
+			appearance: none;
+			width: var(--selector-size);
+			height: var(--selector-size);
+			margin-top: calc(
+				(calc(var(--selector-size) / 4) - var(--selector-size)) /
+				2
+			);
+			background-color: var(--thumb-color);
+			border: 2px solid var(--color-bg);
+			border-radius: var(--radius-full);
+			cursor: pointer;
+			transition: 100ms background-color;
+		}
 
-	input[type="range"]::-moz-range-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: var(--selector-size);
-		height: var(--selector-size);
-		margin-top: calc(
-			(calc(var(--selector-size) / 4) - var(--selector-size)) /
-			2
-		);
-		background-color: var(--thumb-color);
-		border: 2px solid var(--color-bg);
-		border-radius: var(--radius-full);
-		cursor: pointer;
-		transition: 100ms background-color;
+		&::-moz-range-thumb {
+			-webkit-appearance: none;
+			appearance: none;
+			width: var(--selector-size);
+			height: var(--selector-size);
+			margin-top: calc(
+				(calc(var(--selector-size) / 4) - var(--selector-size)) /
+				2
+			);
+			background-color: var(--thumb-color);
+			border: 2px solid var(--color-bg);
+			border-radius: var(--radius-full);
+			cursor: pointer;
+			transition: 100ms background-color;
+		}
 	}
 
 	progress {
@@ -545,20 +547,20 @@
 		background-color: var(--color-bg-high);
 		color: var(--color-text-accent);
 		vertical-align: baseline;
-	}
 
-	progress::-webkit-progress-bar {
-		border-radius: var(--radius-full);
-		background: 0 0;
-	}
+		&::-webkit-progress-bar {
+			border-radius: var(--radius-full);
+			background: 0 0;
+		}
 
-	progress::-moz-progress-bar {
-		background-color: var(--color-text-accent);
-	}
+		&::-moz-progress-bar {
+			background-color: var(--color-text-accent);
+		}
 
-	progress[value]::-webkit-progress-value {
-		background-color: var(--color-text-accent);
-		transition: inline-size 0.2s ease;
+		&[value]::-webkit-progress-value {
+			background-color: var(--color-text-accent);
+			transition: inline-size 0.2s ease;
+		}
 	}
 
 	td > input[type="checkbox"] {
@@ -569,20 +571,24 @@
 		border: 1px solid var(--color-bg-high);
 	}
 
-	abbr:not([title]) {
-		text-decoration: none;
+	abbr {
+		&:not([title]) {
+			text-decoration: none;
+		}
+
+		&[title] {
+			cursor: help;
+		}
 	}
 
-	abbr[title] {
-		cursor: help;
-	}
+	.article {
+		& > p {
+			padding-block: var(--s-3);
+		}
 
-	.article > p {
-		padding-block: var(--s-3);
-	}
-
-	.article img {
-		height: auto;
+		& img {
+			height: auto;
+		}
 	}
 
 	/* Hack to deal with Safari bug when the image is loading. See: https://stackoverflow.com/a/73466877 */
@@ -593,16 +599,18 @@
 	}
 }
 
-#nprogress .bar {
-	background: var(--color-text-accent) !important;
-}
+#nprogress {
+	& .bar {
+		background: var(--color-text-accent) !important;
+	}
 
-#nprogress .spinner {
-	display: none !important;
-}
+	& .spinner {
+		display: none !important;
+	}
 
-#nprogress .peg {
-	display: none !important;
+	& .peg {
+		display: none !important;
+	}
 }
 
 .top-leaderboard {
diff --git a/app/styles/front.module.css b/app/styles/front.module.css
index 16197802d..f897cb84e 100644
--- a/app/styles/front.module.css
+++ b/app/styles/front.module.css
@@ -21,10 +21,10 @@
 	font-size: var(--font-xs);
 	border-radius: 100%;
 	color: var(--color-text-high);
-}
 
-.changeLogIconButton:hover {
-	color: var(--color-text-accent);
+	&:hover {
+		color: var(--color-text-accent);
+	}
 }
 
 .externalLinkIcon {
@@ -56,10 +56,10 @@
 	border: var(--border-style-high);
 	transition: --l 0.2s ease-out;
 	margin-block-start: var(--s-6);
-}
 
-.seasonBanner:hover {
-	--l: 75%;
+	&:hover {
+		--l: 75%;
+	}
 }
 
 .seasonBannerHeader {
@@ -90,11 +90,15 @@
 	display: flex;
 	gap: var(--s-2);
 	align-items: center;
-}
 
-.seasonBannerLink svg {
-	width: 24px;
-	transition: all 0.2s ease-out;
+	& svg {
+		width: 24px;
+		transition: all 0.2s ease-out;
+	}
+
+	&:hover svg {
+		translate: 2px;
+	}
 }
 
 .seasonBannerMobileOnly {
@@ -121,10 +125,6 @@
 	}
 }
 
-.seasonBannerLink:hover svg {
-	translate: 2px;
-}
-
 .tournamentCardsSpacer {
 	display: flex;
 	gap: var(--s-2);
@@ -140,15 +140,15 @@
 	display: flex;
 	gap: var(--s-2);
 	padding: var(--s-2);
-}
 
-.resultHighlights > div {
-	flex: 3 1 0;
-	width: 100%;
-}
+	& > div {
+		flex: 3 1 0;
+		width: 100%;
+	}
 
-.resultHighlights > .seasonCardDesktopOnly {
-	flex: 2 1 0;
+	& > .seasonCardDesktopOnly {
+		flex: 2 1 0;
+	}
 }
 
 .resultHighlightsTop {
@@ -186,10 +186,10 @@
 	color: var(--color-text);
 	overflow: hidden;
 	transition: --l 0.2s ease-out;
-}
 
-.seasonCard:hover {
-	--l: 75%;
+	&:hover {
+		--l: 75%;
+	}
 }
 
 .seasonCardHeader {
@@ -284,10 +284,10 @@
 	border-radius: var(--radius-full);
 	padding: var(--s-1);
 	transition: background-color 0.15s ease-out;
-}
 
-.weaponPill:hover {
-	background-color: var(--color-bg-high);
+	&:hover {
+		background-color: var(--color-bg-high);
+	}
 }
 
 .discoverGrid {
@@ -303,6 +303,15 @@
 	}
 }
 
+.discoverGridItemImage {
+	width: var(--field-size-lg);
+	aspect-ratio: 1 / 1;
+	border-radius: var(--radius-field);
+	background-color: var(--color-bg-higher);
+	display: grid;
+	place-items: center;
+}
+
 .discoverGridItem {
 	display: flex;
 	flex-direction: column;
@@ -313,17 +322,8 @@
 	font-size: var(--font-xs);
 	font-weight: var(--weight-semi);
 	text-align: center;
-}
 
-.discoverGridItemImage {
-	width: var(--field-size-lg);
-	aspect-ratio: 1 / 1;
-	border-radius: var(--radius-field);
-	background-color: var(--color-bg-higher);
-	display: grid;
-	place-items: center;
-}
-
-.discoverGridItem:hover .discoverGridItemImage {
-	background-color: var(--color-bg-high);
+	&:hover .discoverGridItemImage {
+		background-color: var(--color-bg-high);
+	}
 }
diff --git a/app/styles/utils.css b/app/styles/utils.css
index ef7609318..598e79955 100644
--- a/app/styles/utils.css
+++ b/app/styles/utils.css
@@ -467,9 +467,11 @@
 		all: unset;
 	}
 
-	.focus-text-decoration:focus-visible {
-		outline: none;
-		text-decoration: underline;
+	.focus-text-decoration {
+		&:focus-visible {
+			outline: none;
+			text-decoration: underline;
+		}
 	}
 
 	.label-no-spacing {
@@ -535,62 +537,62 @@
 	.stack {
 		display: flex;
 		flex-direction: column;
-	}
 
-	.stack.xxxs {
-		gap: var(--s-0-5);
-	}
+		&.xxxs {
+			gap: var(--s-0-5);
+		}
 
-	.stack.xxs {
-		gap: var(--s-1);
-	}
+		&.xxs {
+			gap: var(--s-1);
+		}
 
-	.stack.xs {
-		gap: var(--s-1-5);
-	}
+		&.xs {
+			gap: var(--s-1-5);
+		}
 
-	.stack.sm {
-		gap: var(--s-2);
-	}
+		&.sm {
+			gap: var(--s-2);
+		}
 
-	.stack.sm-column {
-		column-gap: var(--s-2);
-	}
+		&.sm-column {
+			column-gap: var(--s-2);
+		}
 
-	.stack.sm-plus {
-		gap: var(--s-3);
-	}
+		&.sm-plus {
+			gap: var(--s-3);
+		}
 
-	.stack.md {
-		gap: var(--s-4);
-	}
+		&.md {
+			gap: var(--s-4);
+		}
 
-	.stack.md-plus {
-		gap: var(--s-6);
-	}
+		&.md-plus {
+			gap: var(--s-6);
+		}
 
-	.stack.lg {
-		gap: var(--s-8);
-	}
+		&.lg {
+			gap: var(--s-8);
+		}
 
-	.stack.xs-row {
-		row-gap: var(--s-1-5);
-	}
+		&.xs-row {
+			row-gap: var(--s-1-5);
+		}
 
-	.stack.lg-row {
-		row-gap: var(--s-8);
-	}
+		&.lg-row {
+			row-gap: var(--s-8);
+		}
 
-	.stack.xl {
-		gap: var(--s-12);
-	}
+		&.xl {
+			gap: var(--s-12);
+		}
 
-	.stack.xxl {
-		gap: var(--s-16);
-	}
+		&.xxl {
+			gap: var(--s-16);
+		}
 
-	.stack.horizontal {
-		flex-direction: row;
+		&.horizontal {
+			flex-direction: row;
+		}
 	}
 
 	.flex-same-size {