Main Menu UI Overhaul (#2829)

## Description:

Overhauls the Main Menu UI, visit https://menu.openfront.dev to see
everything.

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

w.o.n

src/client/styles/components/button.css

@@ -5,10 +5,13 @@
   outline: none;
   display: inline-block;
   font-size: 16px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   border: 1px solid transparent;
   text-align: center;
   padding: 0.8rem 1rem;
-  border-radius: 8px;
+  border-radius: 0.75rem;
   transition: var(--transition);
 
   @media (min-width: 1024px) {
@@ -21,6 +24,7 @@
 .c-button:focus {
   background: var(--primaryColorHover);
   transition: var(--transition);
+  transform: translateY(-1px);
 }
 
 .c-button:disabled {

src/client/styles/components/modal.css

@@ -1,53 +1,9 @@
-.c-modal {
-  position: fixed;
-  padding: 1rem;
-  z-index: 1000;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  top: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  overflow-y: auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+/* Deprecated global modal styles.
+   The component-scoped styles in src/client/components/baseComponents/Modal.ts
+   are the single source of truth now. Removing global overrides so the
+   component can control layout and internal scrolling behavior. */
 
-.c-modal__wrapper {
-  background: #23232382;
-  border-radius: 8px;
-  min-width: 340px;
-  max-width: 860px;
-}
-
-.c-modal__header {
-  position: relative;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
-  font-size: 18px;
-  background: #000000a1;
-  text-align: center;
-  color: #fff;
-  padding: 1rem 2.4rem 1rem 1.4rem;
-}
-
-.c-modal__close {
-  cursor: pointer;
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-}
-
-.c-modal__content {
-  position: relative;
-  color: #fff;
-  padding: 1.4rem;
-  max-height: 60dvh;
-  overflow-y: scroll;
-  backdrop-filter: blur(8px);
-}
-
-/*This will be removed in future*/
+/* Keep small helper rule for legacy button layout, remove global .c-modal rules */
 o-modal o-button {
   @media (min-width: 1024px) {
     margin: 0 auto;

src/client/styles/components/setting.css

@@ -1,27 +1,68 @@
 .settings-list {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 12px;
-  align-items: center;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  gap: 16px 16px;
+  padding: 12px 8px 20px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.settings-section-title {
+  grid-column: 1 / -1;
+  text-align: left;
+  color: #e5e7eb;
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  margin: 4px 6px 2px;
+}
+
+.settings-section-heading {
+  grid-column: 1 / -1;
+  text-align: center;
+  color: #e5e7eb;
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  margin: 14px 0 8px;
+}
+
+.settings-section-paragraph {
+  grid-column: 1 / -1;
+  margin: 0 6px 10px;
 }
 
 .setting-item {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  background: #1e1e1e;
-  border: 1px solid #333;
-  border-radius: 10px;
-  padding: 12px 20px;
-  width: 360px !important;
-  max-width: 360px !important;
-  min-width: 360px !important;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
-  transition: background 0.3s ease;
+  flex-direction: column;
+  align-items: stretch;
+  background: #1b1b1b;
+  border: 1px solid #2f2f2f;
+  border-radius: 12px;
+  padding: 14px 16px;
+  width: 100% !important;
+  max-width: 720px;
+  min-width: 0 !important;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+  transition:
+    background 0.25s ease,
+    border-color 0.25s ease;
   gap: 12px;
 }
 
+@media (max-width: 640px) {
+  .settings-list {
+    grid-template-columns: 1fr;
+    gap: 14px;
+    padding: 10px 6px 16px;
+  }
+
+  .setting-item {
+    max-width: 100%;
+    padding: 12px 14px;
+  }
+}
+
 .setting-item.column {
   flex-direction: column;
 }
@@ -121,6 +162,7 @@
 
 .setting-item:hover {
   background: #2a2a2a;
+  border-color: #3a3a3a;
 }
 
 .setting-item.easter-egg:hover {
@@ -141,8 +183,9 @@
 
 .setting-label {
   color: #f0f0f0;
-  font-size: 15px;
-  font-weight: 500;
+  font-size: 1.05rem;
+  font-weight: 600;
+  letter-spacing: 0.01em;
 }
 
 .setting-input {
@@ -175,13 +218,25 @@
 }
 
 .setting-input.slider {
-  -webkit-appearance: none;
-  width: 180px;
-  height: 10px;
-  background: linear-gradient(to right, #2196f3 50%, #444 50%);
-  border-radius: 5px;
+  width: 100%;
+  height: 12px;
+  background: transparent;
+  border-radius: 6px;
+  appearance: none;
   outline: none;
-  transition: background 0.3s;
+  --fill: 0%;
+}
+
+.setting-input.slider::-webkit-slider-runnable-track {
+  height: 12px;
+  border-radius: 6px;
+  background: linear-gradient(
+    to right,
+    #2196f3 0%,
+    #2196f3 var(--fill),
+    #444 var(--fill),
+    #444 100%
+  );
 }
 
 .setting-input.slider::-webkit-slider-thumb {
@@ -292,18 +347,19 @@
 
 .setting-keybind-box {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 12px 16px;
 }
 
 .setting-keybind-description {
-  flex: 1;
-  font-size: 0.75rem;
-  color: #e5e5e5;
+  flex: 1 1 clamp(320px, 45vw, 620px);
+  font-size: 0.95rem;
+  color: #e5e7eb;
   word-break: break-word;
   overflow-wrap: break-word;
-  min-width: 0;
+  max-width: 100%;
+  line-height: 1.55;
 }
 
 .setting-key {