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.css

@@ -38,19 +38,35 @@
   }
 }
 
+/* Ensure the main page never scrolls; modals handle internal scrolling */
+html {
+  height: 100%; /* Fallback */
+  height: 100dvh;
+}
+
+body {
+  height: 100%;
+  overflow: hidden !important;
+  /* Safe area padding for notched devices */
+  padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
+
 * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
+  scrollbar-width: auto;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
 }
 
 /* Add custom scrollbar styles */
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 12px;
 }
 
 ::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
+  background: transparent;
   border-radius: 4px;
 }
 
@@ -59,10 +75,6 @@
   border-radius: 4px;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
 .hide-scrollbar {
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE/Edge */
@@ -376,102 +388,6 @@ label.option-card:hover {
   height: 32px;
 }
 
-#helpModal .city-icon {
-  mask: url("../../resources/images/CityIconWhite.svg") no-repeat center / cover;
-}
-
-#helpModal .factory-icon {
-  mask: url("../../resources/images/FactoryIconWhite.svg") no-repeat center /
-    cover;
-}
-
-#helpModal .defense-post-icon {
-  mask: url("../../resources/images/ShieldIconWhite.svg") no-repeat center /
-    cover;
-}
-
-#helpModal .port-icon {
-  mask: url("../../resources/images/PortIcon.svg") no-repeat center / cover;
-}
-
-#helpModal .warship-icon {
-  mask: url("../../resources/images/BattleshipIconWhite.svg") no-repeat center /
-    cover;
-}
-
-#helpModal .missile-silo-icon {
-  mask: url("../../resources/images/MissileSiloIconWhite.svg") no-repeat
-    center / cover;
-}
-
-#helpModal .sam-launcher-icon {
-  mask: url("../../resources/images/SamLauncherIconWhite.svg") no-repeat
-    center / cover;
-}
-
-#helpModal .atom-bomb-icon {
-  mask: url("../../resources/images/NukeIconWhite.svg") no-repeat center / cover;
-}
-
-#helpModal .hydrogen-bomb-icon {
-  mask: url("../../resources/images/MushroomCloudIconWhite.svg") no-repeat
-    center / cover;
-}
-
-#helpModal .mirv-icon {
-  mask: url("../../resources/images/MIRVIcon.svg") no-repeat center / cover;
-}
-
-#helpModal .chat-icon {
-  mask: url("../../resources/images/ChatIconWhite.svg") no-repeat center / cover;
-}
-
-#helpModal .target-icon {
-  mask: url("../../resources/images/TargetIcon.svg") no-repeat center / cover;
-}
-
-#helpModal .alliance-icon {
-  mask: url("../../resources/images/AllianceIconWhite.svg") no-repeat center /
-    cover;
-}
-
-#helpModal .emoji-icon {
-  mask: url("../../resources/images/EmojiIconWhite.svg") no-repeat center /
-    cover;
-}
-
-#helpModal .betray-icon {
-  mask: url("../../resources/images/TraitorIconWhite.svg") no-repeat center /
-    cover;
-}
-
-#helpModal .donate-icon {
-  mask: url("../../resources/images/DonateTroopIconWhite.svg") no-repeat
-    center / cover;
-}
-
-#helpModal .donate-gold-icon {
-  mask: url("../../resources/images/DonateGoldIconWhite.svg") no-repeat center /
-    cover;
-}
-
-#helpModal .build-icon {
-  mask: url("../../resources/images/BuildIconWhite.svg") no-repeat center /
-    cover;
-}
-
-#helpModal .info-icon {
-  mask: url("../../resources/images/InfoIcon.svg") no-repeat center / cover;
-}
-
-#helpModal .boat-icon {
-  mask: url("../../resources/images/BoatIcon.svg") no-repeat center / cover;
-}
-
-#helpModal .cancel-icon {
-  mask: url("../../resources/images/XIcon.svg") no-repeat center / cover;
-}
-
 @media screen and (max-width: 768px) {
   #helpModal .modal-content {
     max-height: 90vh;