openfrontio · evanpelle · Feb 19, 2026 · Feb 12, 2026 · Feb 12, 2026 · Feb 12, 2026
@@ -122,12 +122,29 @@
   <body
     class="h-full select-none font-sans min-h-screen bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-row overflow-hidden"
   >
-    <div
-      class="fixed inset-0 w-full h-full -z-50 bg-cover bg-center bg-fixed pointer-events-none brightness-[0.5]"
-      style="
-        background-image: url(&quot;/images/EuropeBackgroundBlurred.webp&quot;);
-      "
-    ></div>
+    <div id="hex-grid" class="fixed inset-0 -z-50 pointer-events-none">
+      <div
+        id="background-layer"
+        class="absolute inset-0 bg-cover bg-center opacity-50 [filter:brightness(1.0)] dark:[filter:sepia(0.2)_saturate(1.2)_hue-rotate(180deg)_brightness(0.9)]"
+        style="
+          background-image: url(&quot;/resources/images/background.png&quot;);
+        "
+      ></div>
+      <div
+        class="absolute inset-0 bg-center bg-no-repeat bg-contain hidden lg:block"
+        style="
+          background-image: url(&quot;/resources/images/OpenFront.png&quot;);
+          opacity: 0.25;
+        "
+      ></div>
+      <div
+        class="absolute inset-0 bg-center bg-no-repeat bg-contain lg:hidden"
+        style="
+          background-image: url(&quot;/resources/images/OF.png&quot;);
+          opacity: 0.25;
+        "
+      ></div>
+    </div>
 
     <!-- LEFT SIDEBAR MENU -->
 
@@ -140,10 +157,9 @@
 
     <mobile-nav-bar
       id="sidebar-menu"
-      class="peer in-[.in-game]:hidden z-40001 fixed left-0 top-0 h-full flex flex-col justify-start overflow-visible bg-black/60 backdrop-blur-md transition-transform duration-500 ease-out transform -translate-x-full w-[80%] [&.open]:translate-x-0 lg:hidden"
+      class="peer [.in-game_&]:hidden z-[40001] fixed left-0 top-0 h-full flex flex-col justify-start overflow-visible bg-black/70 backdrop-blur-xl border-r border-white/10 transition-transform duration-500 ease-out transform -translate-x-full w-[70%] [&.open]:translate-x-0 lg:hidden"
       role="dialog"
       data-i18n-aria-label="main.menu"
-      aria-hidden="true"
     ></mobile-nav-bar>
 
     <!-- MAIN CONTENT AREA -->
@@ -163,7 +179,11 @@
       <!-- Main container with responsive padding -->
       <main-layout class="contents">
         <play-page class="contents"></play-page>
-
+        <matchmaking-modal
+          id="page-matchmaking"
+          inline
+          class="hidden w-full h-full page-content"
+        ></matchmaking-modal>
         <news-modal
           id="page-news"
           inline
@@ -225,6 +245,11 @@
           inline
           class="hidden w-full h-full page-content"
         ></flag-input-modal>
+        <ranked-modal
+          id="page-ranked"
+          inline
+          class="hidden w-full h-full page-content"
+        ></ranked-modal>
       </main-layout>
 
       <!-- Desktop Footer -->

@@ -356,7 +356,6 @@
   },
   "public_lobby": {
     "title": "Waiting for Game Start...",
-    "join": "Join next Game",
     "teams_Duos": "{team_count} teams of 2 (Duos)",
     "teams_Trios": "{team_count} teams of 3 (Trios)",
     "teams_Quads": "{team_count} teams of 4 (Quads)",
@@ -377,7 +376,8 @@
     "connecting": "Connecting to matchmaking server...",
     "searching": "Searching for game...",
     "waiting_for_game": "Waiting for game to start...",
-    "elo": "Your ELO: {elo}"
+    "elo": "Your ELO: {elo}",
+    "no_elo": "No ELO yet"
   },
   "username": {
     "enter_username": "Enter your username",
@@ -391,7 +391,6 @@
   },
   "host_modal": {
     "title": "Create Private Lobby",
-    "label": "Private",
     "mode": "Mode",
     "team_count": "Number of Teams",
     "team_type": "Team Type",
@@ -454,6 +453,16 @@
     "ffa": "Free for All",
     "teams": "Teams"
   },
+  "mode_selector": {
+    "special_title": "Special Mix",
+    "teams_title": "Teams",
+    "teams_count": "{teamCount} teams",
+    "teams_of": "{teamCount} teams of {playersPerTeam}",
+    "ranked_title": "Ranked",
+    "ranked_1v1_title": "1v1",
+    "ranked_2v2_title": "2v2",
+    "coming_soon": "Coming Soon"
+  },
   "public_game_modifier": {
     "random_spawn": "Random Spawn",
     "compact_map": "Compact Map",
@@ -931,8 +940,6 @@
     "recent_games": "Recent Games",
     "game_id": "Game ID",
     "mode": "Mode",
-    "mode_ffa": "Free-for-All",
-    "mode_team": "Team",
     "replay": "Replay",
     "details": "Details",
     "ranking": "Ranking",
@@ -949,8 +956,6 @@
     "stats_losses": "Losses",
     "stats_wlr": "Win:Loss Ratio",
     "stats_games_played": "Games Played",
-    "mode_ffa": "Free-for-All",
-    "mode_team": "Team",
     "no_stats": "No stats recorded for this selection."
   },
   "matchmaking_button": {

@@ -61,18 +61,9 @@ export class AccountModal extends BaseModal {
 
   render() {
     const content = this.isLoadingUser
-      ? html`
-          <div
-            class="flex flex-col items-center justify-center p-12 text-white bg-black/60 backdrop-blur-md rounded-2xl border border-white/10 h-full min-h-[400px]"
-          >
-            <div
-              class="w-12 h-12 border-4 border-blue-500/30 border-t-blue-500 rounded-full animate-spin mb-4"
-            ></div>
-            <p class="text-white/60 font-medium tracking-wide animate-pulse">
-              ${translateText("account_modal.fetching_account")}
-            </p>
-          </div>
-        `
+      ? this.renderLoadingSpinner(
+          translateText("account_modal.fetching_account"),
+        )
       : this.renderInner();
 
     if (this.inline) {
@@ -99,9 +90,7 @@ export class AccountModal extends BaseModal {
     const displayId = publicId || translateText("account_modal.not_found");
 
     return html`
-      <div
-        class="h-full flex flex-col bg-black/60 backdrop-blur-md rounded-2xl border border-white/10 overflow-hidden"
-      >
+      <div class="${this.modalContainerClass}">
         ${modalHeader({
           title,
           onBack: () => this.close(),

@@ -84,7 +84,7 @@ export class FlagInput extends LitElement {
     return html`
       <button
         id="flag-input"
-        class="flag-btn p-0! m-0 border-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-slate-900/80 hover:bg-slate-800/80 active:bg-slate-800/90 rounded-lg overflow-hidden"
+        class="flag-btn p-0 m-0 border-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-[color-mix(in_oklab,var(--frenchBlue)_75%,black)] hover:brightness-[1.08] active:brightness-[0.95] rounded-lg overflow-hidden"
         title=${buttonTitle}
         @click=${this.onInputClick}
       >
@@ -94,7 +94,7 @@ export class FlagInput extends LitElement {
         ></span>
         ${showSelect
           ? html`<span
-              class="text-[10px] font-black text-white/40 uppercase leading-none break-words w-full text-center px-1"
+              class="text-[10px] font-black text-white uppercase leading-none break-words w-full text-center px-1"
             >
               ${translateText("flag_input.title")}
             </span>`

@@ -18,9 +18,7 @@ export class FlagInputModal extends BaseModal {
 
   render() {
     const content = html`
-      <div
-        class="h-full flex flex-col bg-black/60 backdrop-blur-md rounded-2xl border border-white/10 overflow-hidden"
-      >
+      <div class="${this.modalContainerClass}">
         <div
           class="relative flex flex-col border-b border-white/10 pb-4 shrink-0"
         >

@@ -180,7 +180,7 @@ export class GameInfoModal extends LitElement {
     try {
       const mapType = gameMap as GameMapType;
       const data = terrainMapFileLoader.getMapData(mapType);
-      this.mapImage = await data.webpPath();
+      this.mapImage = data.webpPath;
     } catch (error) {
       console.error("Failed to load map image:", error);
     }