From e79c8058048641c59348a1b81d26b355877584ff Mon Sep 17 00:00:00 2001
From: Wraith <54374743+wraith4081@users.noreply.github.com>
Date: Wed, 7 Jan 2026 01:21:52 +0300
Subject: [PATCH] refactor(ui): migrate tailwindcss v3 to v4 (#2735)

## Description:

migrate tailwindcss v3 to v4

## 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:

wraith4081

---------

Co-authored-by: iamlewis <lewismmmm@gmail.com>
Co-authored-by: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
---
 index.html                                    |   61 +-
 package-lock.json                             | 1412 ++++++++---------
 package.json                                  |    5 +-
 postcss.config.js                             |    6 -
 src/client/AccountModal.ts                    |   18 +-
 src/client/DarkModeButton.ts                  |    2 +-
 src/client/FlagInput.ts                       |    8 +-
 src/client/FlagInputModal.ts                  |   16 +-
 src/client/GameInfoModal.ts                   |   11 +-
 src/client/GoogleAdElement.ts                 |    3 +-
 src/client/HelpModal.ts                       |   13 +-
 src/client/HostLobbyModal.ts                  |   27 +-
 src/client/LanguageModal.ts                   |    4 +-
 src/client/Matchmaking.ts                     |    4 +-
 src/client/NewsModal.ts                       |    4 +-
 src/client/PublicLobby.ts                     |   30 +-
 src/client/SinglePlayerModal.ts               |   16 +-
 src/client/StatsModal.ts                      |    6 +-
 src/client/TerritoryPatternsModal.ts          |   13 +-
 src/client/UsernameInput.ts                   |    4 +-
 src/client/components/LobbyTeamView.ts        |   10 +-
 src/client/components/ModalOverlay.ts         |    2 +-
 src/client/components/PatternButton.ts        |   41 +-
 .../baseComponents/ranking/PlayerRow.ts       |   54 +-
 .../baseComponents/ranking/RankingControls.ts |    8 +-
 .../baseComponents/ranking/RankingHeader.ts   |    8 +-
 .../baseComponents/setting/SettingKeybind.ts  |    9 +-
 .../baseComponents/stats/GameList.ts          |   20 +-
 .../baseComponents/stats/PlayerStatsTable.ts  |   10 +-
 .../baseComponents/stats/PlayerStatsTree.ts   |    8 +-
 src/client/components/ui/ActionButton.ts      |    4 +-
 src/client/graphics/layers/BuildMenu.ts       |    2 +-
 src/client/graphics/layers/ChatDisplay.ts     |   16 +-
 src/client/graphics/layers/ControlPanel.ts    |   21 +-
 src/client/graphics/layers/EmojiTable.ts      |    8 +-
 src/client/graphics/layers/EventsDisplay.ts   |   29 +-
 src/client/graphics/layers/GameLeftSidebar.ts |    9 +-
 .../graphics/layers/GameRightSidebar.ts       |    2 +-
 src/client/graphics/layers/HeadsUpMessage.ts  |    4 +-
 src/client/graphics/layers/ImmunityTimer.ts   |    2 +-
 src/client/graphics/layers/MultiTabModal.ts   |    5 +-
 .../graphics/layers/PerformanceOverlay.ts     |   21 +-
 .../graphics/layers/PlayerInfoOverlay.ts      |   14 +-
 src/client/graphics/layers/PlayerPanel.ts     |   59 +-
 src/client/graphics/layers/ReplayPanel.ts     |    4 +-
 .../graphics/layers/SendResourceModal.ts      |   30 +-
 src/client/graphics/layers/SettingsModal.ts   |   32 +-
 src/client/graphics/layers/SpawnTimer.ts      |    6 +-
 src/client/graphics/layers/TeamStats.ts       |    4 +-
 src/client/graphics/layers/UnitDisplay.ts     |   18 +-
 src/client/graphics/layers/WinModal.ts        |   21 +-
 src/client/styles.css                         |   35 +-
 src/client/utilities/RenderUnitTypeOptions.ts |    7 +-
 tailwind.config.js                            |   10 -
 tsconfig.json                                 |    2 +-
 vite.config.ts                                |    2 +
 56 files changed, 999 insertions(+), 1201 deletions(-)
 delete mode 100644 postcss.config.js
 delete mode 100755 tailwind.config.js

diff --git a/index.html b/index.html
index 43fdcf5b3..b68f66957 100644
--- a/index.html
+++ b/index.html
@@ -115,9 +115,22 @@
       }
     </style>
 
-    <!-- Immediate execution to prevent FOUC -->
+    <!-- Immediate execution to prevent FOUC + apply persisted dark mode -->
     <script>
-      document.documentElement.className = "preload";
+      (function () {
+        const root = document.documentElement;
+        root.classList.add("preload");
+        try {
+          const storedDarkMode = localStorage.getItem("settings.darkMode");
+          if (storedDarkMode === "true") {
+            root.classList.add("dark");
+          } else if (storedDarkMode === "false") {
+            root.classList.remove("dark");
+          }
+        } catch (error) {
+          // Ignore storage access errors.
+        }
+      })();
     </script>
 
     <!-- CrazyGames SDK -->
@@ -178,7 +191,7 @@
   </head>
 
   <body
-    class="h-full select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-col"
+    class="h-full select-none font-sans min-h-screen bg-black/0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-col"
   >
     <header class="l-header">
       <div class="l-header__content">
@@ -246,7 +259,7 @@
     <div class="bg-image"></div>
     <div
       id="turnstile-container"
-      class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[99999]"
+      class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-99999"
     ></div>
     <gutter-ads></gutter-ads>
 
@@ -260,7 +273,7 @@
           <territory-patterns-modal class="w-[20%] md:w-[15%]">
             <button
               id="territory-patterns-input-preview-button"
-              class="w-full border p-[4px] rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)] justify-center"
+              class="w-full border p-1 rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)] justify-center"
               title="Pick a pattern!"
             ></button>
           </territory-patterns-modal>
@@ -318,14 +331,10 @@
     <button
       id="settings-button"
       title="Settings"
-      class="fixed bottom-4 right-4 z-50 rounded-full p-2 shadow-lg transition-colors duration-300 flex items-center justify-center"
-      style="width: 60px; height: 60px; background-color: #0075ff"
+      class="fixed bottom-4 right-4 z-50 rounded-full p-2 shadow-lg transition-colors duration-300 flex items-center justify-center size-15 bg-(--primaryColor)"
+      style="--primaryColor: #0075ff"
     >
-      <img
-        src="/images/SettingIconWhite.svg"
-        alt="Settings"
-        style="width: 52px; height: 52px"
-      />
+      <img src="/images/SettingIconWhite.svg" alt="Settings" class="size-18" />
     </button>
 
     <!-- Game components -->
@@ -334,22 +343,20 @@
     </div>
     <div id="app"></div>
     <div id="radialMenu" class="radial-menu"></div>
-    <div class="flex gap-2 fixed right-[10px] top-[10px] z-50 flex-col">
+    <div class="flex gap-2 fixed right-2.5 top-2.5 z-50 flex-col">
       <player-info-overlay></player-info-overlay>
     </div>
     <div
-      class="fixed bottom-[30px] sm:bottom-auto sm:top-[20px] z-50 mx-auto max-w-max inset-x-0 items-center"
+      class="fixed bottom-7.5 sm:bottom-auto sm:top-5 z-50 mx-auto max-w-max inset-x-0 items-center"
     >
       <heads-up-message></heads-up-message>
     </div>
 
     <div
-      class="left-0 bottom-0 sm:left-4 sm:bottom-4 w-full flex-col-reverse sm:flex-row z-50 md:w-[320px]"
-      style="position: fixed; pointer-events: none"
+      class="left-0 bottom-0 sm:left-4 sm:bottom-4 w-full flex-col-reverse sm:flex-row z-50 md:w-[320px] fixed pointer-events-none"
     >
       <div
-        class="w-full md:w-2/3 md:fixed sm:right-0 md:bottom-0 md:flex flex-col items-end"
-        style="pointer-events: none"
+        class="w-full md:w-2/3 md:fixed sm:right-0 md:bottom-0 md:flex flex-col items-end pointer-events-none"
       >
         <chat-display></chat-display>
         <events-display></events-display>
@@ -361,13 +368,13 @@
 
     <!-- Footer section -->
     <footer
-      class="flex justify-center px-3 py-3 md:px-6 md:py-3 bg-[var(--boxBackgroundColor)] backdrop-blur-sm"
+      class="flex justify-center px-3 py-3 md:px-6 md:py-3 bg-(--boxBackgroundColor) backdrop-blur-xs"
     >
       <div
-        class="flex flex-col md:flex-row flex-nowrap justify-between items-center gap-4 md:gap-0 w-full max-w-[860px] flex-1"
+        class="flex flex-col md:flex-row flex-nowrap justify-between items-center gap-4 md:gap-0 w-full max-w-215 flex-1"
       >
         <div
-          class="flex flex-col sm:flex-row gap-4 sm:gap-5 text-white/70 justify-center md:justify-start flex-shrink-0"
+          class="flex flex-col sm:flex-row gap-4 sm:gap-5 text-white/70 justify-center md:justify-start shrink-0"
         >
           <a
             href="https://openfront.wiki/Main_Page"
@@ -392,7 +399,7 @@
             <span data-i18n="main.join_discord"> Discord </span>
           </a>
         </div>
-        <div class="flex justify-center text-white/70 flex-shrink-0">
+        <div class="flex justify-center text-white/70 shrink-0">
           <a
             href="https://github.com/openfrontio/OpenFrontIO"
             class="text-white/70 hover:text-white transition-colors duration-300 ease-in-out inline-flex items-center gap-2 whitespace-nowrap"
@@ -409,7 +416,7 @@
           </a>
         </div>
         <div
-          class="flex flex-col sm:flex-row gap-4 sm:gap-4 text-white/70 justify-center md:justify-end flex-shrink-0"
+          class="flex flex-col sm:flex-row gap-4 sm:gap-4 text-white/70 justify-center md:justify-end shrink-0"
         >
           <a
             href="/privacy-policy.html"
@@ -441,7 +448,7 @@
     <game-starting-modal></game-starting-modal>
     <game-top-bar></game-top-bar>
     <unit-display></unit-display>
-    <div class="flex flex-col items-end fixed top-4 right-4 z-[1000] gap-2">
+    <div class="flex flex-col items-end fixed top-4 right-4 z-1000 gap-2">
       <game-right-sidebar></game-right-sidebar>
       <replay-panel></replay-panel>
     </div>
@@ -463,16 +470,16 @@
     <performance-overlay></performance-overlay>
     <div
       id="language-modal"
-      class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex justify-center items-center"
+      class="fixed inset-0 bg-black/50 z-50 hidden flex justify-center items-center"
     >
       <div class="bg-white rounded-lg shadow-lg p-6 w-96 max-w-full">
         <h2 class="text-xl font-semibold mb-4">Select Language</h2>
         <div
           id="language-list"
-          class="space-y-2 max-h-80 overflow-y-auto"
+          class="flex flex-col gap-2 max-h-80 overflow-y-auto"
         ></div>
         <button
-          class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded"
+          class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-sm"
           onclick="
             document.getElementById('language-modal').classList.add('hidden')
           "
diff --git a/package-lock.json b/package-lock.json
index ecab9cf78..099243ade 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,6 +44,7 @@
         "@datastructures-js/priority-queue": "^6.3.3",
         "@eslint/compat": "^1.2.7",
         "@eslint/js": "^9.21.0",
+        "@tailwindcss/vite": "^4.1.18",
         "@types/benchmark": "^2.1.5",
         "@types/chai": "^4.3.17",
         "@types/d3": "^7.4.3",
@@ -72,6 +73,7 @@
         "eslint": "^9.21.0",
         "eslint-config-prettier": "^10.1.1",
         "eslint-formatter-gha": "^1.5.2",
+        "glob": "^13.0.0",
         "globals": "^16.0.0",
         "husky": "^9.1.7",
         "jsdom": "^27.4.0",
@@ -81,14 +83,13 @@
         "mrmime": "^2.0.0",
         "pixi-filters": "^6.1.4",
         "pixi.js": "^8.11.0",
-        "postcss": "^8.5.1",
         "prettier": "^3.5.3",
         "prettier-plugin-organize-imports": "^4.1.0",
         "prettier-plugin-sh": "^0.17.4",
         "protobufjs": "^7.5.3",
         "sinon": "^21.0.0",
         "sinon-chai": "^4.0.0",
-        "tailwindcss": "^3.4.17",
+        "tailwindcss": "^4.1.18",
         "tsconfig-paths": "^4.2.0",
         "typescript": "^5.7.2",
         "typescript-eslint": "^8.26.0",
@@ -106,19 +107,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@asamuzakjp/css-color": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/css-color/-/css-color-4.1.1.tgz",
@@ -133,16 +121,6 @@
         "lru-cache": "^11.2.4"
       }
     },
-    "node_modules/@asamuzakjp/css-color/node_modules/lru-cache": {
-      "version": "11.2.4",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.4.tgz",
-      "integrity": "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": "20 || >=22"
-      }
-    },
     "node_modules/@asamuzakjp/dom-selector": {
       "version": "6.7.6",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/dom-selector/-/dom-selector-6.7.6.tgz",
@@ -157,16 +135,6 @@
         "lru-cache": "^11.2.4"
       }
     },
-    "node_modules/@asamuzakjp/dom-selector/node_modules/lru-cache": {
-      "version": "11.2.4",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.4.tgz",
-      "integrity": "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": "20 || >=22"
-      }
-    },
     "node_modules/@asamuzakjp/nwsapi": {
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/@asamuzakjp/nwsapi/-/nwsapi-2.3.9.tgz",
@@ -1218,7 +1186,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -1262,7 +1229,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2032,51 +1998,27 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
+    "node_modules/@isaacs/balanced-match": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
+      "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+        "node": "20 || >=22"
       }
     },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+    "node_modules/@isaacs/brace-expansion": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
+      "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "ansi-regex": "^6.0.1"
+        "@isaacs/balanced-match": "^4.0.1"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+        "node": "20 || >=22"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
@@ -2094,6 +2036,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -2201,7 +2154,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
       "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -2589,17 +2541,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.29",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz",
@@ -3784,6 +3725,278 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
+      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
+      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-x64": "4.1.18",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
+      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
+      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
+      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
+      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
+      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
+      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
+      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
+      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
+      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
+      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.0",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
+      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
+      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.18.tgz",
+      "integrity": "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.18",
+        "@tailwindcss/oxide": "4.1.18",
+        "tailwindcss": "4.1.18"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
@@ -4275,7 +4488,6 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.32.tgz",
       "integrity": "sha512-3jigKqgSjsH6gYZv2nEsqdXfZqIFGAV36XYYjf9KGZ3PSG+IhLecqPnI310RvjutyMwifE2hhhNEklOUrvx/wA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.21.0"
       }
@@ -4442,7 +4654,6 @@
       "integrity": "sha512-4O3idHxhyzjClSMJ0a29AcoK0+YwnEqzI6oz3vlRf3xw0zbzt15MzXwItOlnr5nIth6zlY2RENLsOPvhyrKAQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.34.1",
         "@typescript-eslint/types": "8.34.1",
@@ -4922,7 +5133,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5005,13 +5215,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -5026,13 +5229,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -5310,7 +5506,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001718",
         "electron-to-chromium": "^1.5.160",
@@ -5415,16 +5610,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001762",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001762.tgz",
@@ -5474,7 +5659,6 @@
       "integrity": "sha512-mCuXncKXk5iCLhfhwTc0izo0gtEmpz5CtG2y8GiOINBlMVS6v8TMRc5TaLWKS6692m9+dVVfzgeVxR5UxWHTYw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "assertion-error": "^2.0.1",
         "check-error": "^2.1.1",
@@ -6041,19 +6225,6 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/cssstyle": {
       "version": "5.3.5",
       "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-5.3.5.tgz",
@@ -6411,7 +6582,6 @@
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -6649,13 +6819,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/diff": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
@@ -6666,13 +6829,6 @@
         "node": ">=0.3.1"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -6805,13 +6961,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6841,13 +6990,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/enabled": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/enabled/-/enabled-2.0.0.tgz",
@@ -6873,6 +7015,20 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
+      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -7011,7 +7167,6 @@
       "integrity": "sha512-GsGizj2Y1rCWDu6XoEekL3RLilp0voSePurjZIkxL3wlm5o5EC9VpgaP7lrCvjnkuLvzFBQWB3vWB3K5KQTveQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -7627,23 +7782,6 @@
       "integrity": "sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==",
       "license": "MIT"
     },
-    "node_modules/foreground-child": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
-      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.6",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -7811,21 +7949,18 @@
       "license": "MIT"
     },
     "node_modules/glob": {
-      "version": "10.5.0",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.5.0.tgz",
-      "integrity": "sha512-DfXN8DfhJ7NH3Oe7cFmu3NCu1wKbkReJ8TorzSAFbSKrlNaQSKfIzqYqVY8zlbs2NLBbWpRiU52GX2PbaBVNkg==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.0.tgz",
+      "integrity": "sha512-tvZgpqk6fz4BaNZ66ZsRaZnbHvP/jG3uKJvAZOwEVUL4RTA5nJeeLYfyN9/VA8NX/V3IBG+hkeuGpKjvELkVhA==",
       "dev": true,
-      "license": "ISC",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
+        "minimatch": "^10.1.1",
         "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
+        "path-scurry": "^2.0.0"
       },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
+      "engines": {
+        "node": "20 || >=22"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -7845,16 +7980,16 @@
       }
     },
     "node_modules/glob/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.1.1.tgz",
+      "integrity": "sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==",
       "dev": true,
-      "license": "ISC",
+      "license": "BlueOak-1.0.0",
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "@isaacs/brace-expansion": "^5.0.0"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
+        "node": "20 || >=22"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -8180,22 +8315,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-core-module": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
-      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -8339,22 +8458,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
     "node_modules/jake": {
       "version": "10.9.4",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
@@ -8374,13 +8477,13 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/jose": {
@@ -8417,7 +8520,6 @@
       "integrity": "sha512-mjzqwWRD9Y1J1KUi7W97Gja1bwOOM5Ug0EZ6UDK3xS7j7mndrkwozHtSblfomlzyB4NepioNt+B2sOSzczVgtQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@acemir/cssom": "^0.9.28",
         "@asamuzakjp/dom-selector": "^6.7.6",
@@ -8529,6 +8631,267 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -8542,13 +8905,6 @@
         "url": "https://github.com/sponsors/antonk52"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/lint-staged": {
       "version": "16.1.2",
       "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.1.2.tgz",
@@ -9009,6 +9365,16 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/lru-cache": {
+      "version": "11.2.4",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.4.tgz",
+      "integrity": "sha512-B5Y16Jr9LB9dHVkh6ZevG+vAbOsNOYCX+sXvFWFu7B3Iz5mijW3zdbMyhsh8ANd2mSWBYdJgnqi+mL7/LrOPYg==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -9272,18 +9638,6 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nano-spawn": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nano-spawn/-/nano-spawn-1.0.2.tgz",
@@ -9426,26 +9780,6 @@
         "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -9565,13 +9899,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
-      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0"
-    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -9676,37 +10003,23 @@
         "node": ">=8"
       }
     },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.1.tgz",
+      "integrity": "sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==",
       "dev": true,
       "license": "BlueOak-1.0.0",
       "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+        "lru-cache": "^11.0.0",
+        "minipass": "^7.1.2"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.18"
+        "node": "20 || >=22"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/path-to-regexp": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
@@ -9797,26 +10110,6 @@
         "node": ">=0.10"
       }
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/pixi-filters": {
       "version": "6.1.4",
       "resolved": "https://registry.npmjs.org/pixi-filters/-/pixi-filters-6.1.4.tgz",
@@ -9836,7 +10129,6 @@
       "integrity": "sha512-dyuThzncsgEgJZnvd/A/5x6IkUERbK+phXqUQrI+0C6WE+8xqGH5VChRTLecemhgZF0kQ+gZOM3tJTX9937xpg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@pixi/colord": "^2.9.6",
         "@types/css-font-loading-module": "^0.0.12",
@@ -9881,7 +10173,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -9891,120 +10182,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -10098,7 +10275,6 @@
       "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -10312,16 +10488,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
     "node_modules/readable-stream": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
@@ -10382,27 +10548,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/resolve": {
-      "version": "1.22.10",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
-      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "is-core-module": "^2.16.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/resolve-pkg-maps": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
@@ -10969,7 +11114,6 @@
       "integrity": "sha512-TOgRcwFPbfGtpqvZw+hyqJDvqfapr1qUlOizROIk4bBLjlsjlB00Pg6wMFXNtJRpu+eCZuVOaLatG7M8105kAw==",
       "dev": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "@sinonjs/commons": "^3.0.1",
         "@sinonjs/fake-timers": "^13.0.5",
@@ -11115,86 +11259,6 @@
         "node": ">=0.6.19"
       }
     },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -11208,20 +11272,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -11247,39 +11297,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -11293,19 +11310,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -11314,55 +11318,24 @@
       "license": "MIT"
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
+      "license": "MIT"
     },
-    "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
       "engines": {
-        "node": ">=4"
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/tar-fs": {
@@ -11504,29 +11477,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
@@ -11585,7 +11535,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11713,13 +11662,6 @@
         "typescript": ">=4.8.4"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/ts-node": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
@@ -11835,7 +11777,6 @@
       "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.20.3.tgz",
       "integrity": "sha512-qjbnuR9Tr+FJOMBqJCW5ehvIo/buZq7vH7qD7JziU98h6l3qGy0a/yPFjwO+y0/T7GFpNgNAvEcPPVfyT8rrPQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.25.0",
         "get-tsconfig": "^4.7.5"
@@ -11904,7 +11845,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -12051,7 +11991,6 @@
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -12717,7 +12656,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12731,7 +12669,6 @@
       "integrity": "sha512-E4t7DJ9pESL6E3I8nFjPa4xGUd3PmiWDLsDztS2qXSJWfHtbQnwAWylaBvSNY48I3vr8PTqIZlyK8TE3V3CA4Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.0.16",
         "@vitest/mocker": "4.0.16",
@@ -12978,117 +12915,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
diff --git a/package.json b/package.json
index 4a8fbd540..02ff2ca6e 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@datastructures-js/priority-queue": "^6.3.3",
     "@eslint/compat": "^1.2.7",
     "@eslint/js": "^9.21.0",
+    "@tailwindcss/vite": "^4.1.18",
     "@types/benchmark": "^2.1.5",
     "@types/chai": "^4.3.17",
     "@types/d3": "^7.4.3",
@@ -60,6 +61,7 @@
     "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.1.1",
     "eslint-formatter-gha": "^1.5.2",
+    "glob": "^13.0.0",
     "globals": "^16.0.0",
     "husky": "^9.1.7",
     "jsdom": "^27.4.0",
@@ -69,14 +71,13 @@
     "mrmime": "^2.0.0",
     "pixi-filters": "^6.1.4",
     "pixi.js": "^8.11.0",
-    "postcss": "^8.5.1",
     "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
     "prettier-plugin-sh": "^0.17.4",
     "protobufjs": "^7.5.3",
     "sinon": "^21.0.0",
     "sinon-chai": "^4.0.0",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.18",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.7.2",
     "typescript-eslint": "^8.26.0",
diff --git a/postcss.config.js b/postcss.config.js
deleted file mode 100644
index 2aa7205d4..000000000
--- a/postcss.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-};
diff --git a/src/client/AccountModal.ts b/src/client/AccountModal.ts
index 226b15414..9a2fece0d 100644
--- a/src/client/AccountModal.ts
+++ b/src/client/AccountModal.ts
@@ -157,7 +157,7 @@ export class AccountModal extends LitElement {
     return html`
       <button
         @click="${this.handleLogout}"
-        class="px-6 py-3 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
+        class="px-6 py-3 text-sm font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
       >
         Log Out
       </button>
@@ -172,7 +172,7 @@ export class AccountModal extends LitElement {
           <div class="mb-6">
             <button
               @click="${this.handleDiscordLogin}"
-              class="w-full px-6 py-3 text-sm font-medium text-white bg-[#5865F2] border border-transparent rounded-md hover:bg-[#4752C4] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#5865F2] transition-colors duration-200 flex items-center justify-center space-x-2"
+              class="w-full px-6 py-3 text-sm font-medium text-white bg-[#5865F2] border border-transparent rounded-md hover:bg-[#4752C4] focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-[#5865F2] transition-colors duration-200 flex items-center justify-center gap-2"
             >
               <img
                 src="/images/DiscordLogo.svg"
@@ -209,23 +209,23 @@ export class AccountModal extends LitElement {
               name="email"
               .value="${this.email}"
               @input="${this.handleEmailInput}"
-              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-black"
+              class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-black"
               placeholder="Enter your email address"
               required
             />
           </div>
         </div>
 
-        <div class="flex justify-end space-x-3">
+        <div class="flex justify-end gap-3">
           <button
             @click="${this.close}"
-            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             Cancel
           </button>
           <button
             @click="${this.handleSubmit}"
-            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
           >
             Submit
           </button>
@@ -233,7 +233,7 @@ export class AccountModal extends LitElement {
       </div>
       <button
         @click="${this.handleLogout}"
-        class="px-3 py-1 text-xs font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
+        class="px-3 py-1 text-xs font-medium text-white bg-red-600 border border-transparent rounded-md hover:bg-red-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200"
       >
         ${translateText("account_modal.clear_session")}
       </button>
@@ -376,10 +376,10 @@ export class AccountButton extends LitElement {
     }
 
     return html`
-      <div class="fixed top-4 right-4 z-[9998]">
+      <div class="fixed top-4 right-4 z-9998">
         <button
           @click="${this.open}"
-          class="w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-2xl hover:shadow-3xl transition-all duration-200 flex items-center justify-center text-xl focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-offset-4"
+          class="w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-2xl hover:shadow-2xl transition-all duration-200 flex items-center justify-center text-xl focus:outline-hidden focus:ring-4 focus:ring-blue-500 focus:ring-offset-4"
           title="${buttonTitle}"
         >
           ${this.renderIcon()}
diff --git a/src/client/DarkModeButton.ts b/src/client/DarkModeButton.ts
index 56fe34adc..f301802af 100644
--- a/src/client/DarkModeButton.ts
+++ b/src/client/DarkModeButton.ts
@@ -35,7 +35,7 @@ export class DarkModeButton extends LitElement {
     return html`
       <button
         title="Toggle Dark Mode"
-        class="absolute top-0 left-0 md:top-[10px] md:left-[10px] border-none bg-none cursor-pointer text-2xl"
+        class="absolute top-0 left-0 md:top-2.5 md:left-2.5 border-none bg-none cursor-pointer text-2xl"
         @click=${() => this.toggleDarkMode()}
       >
         ${this.darkMode ? "☀️" : "🌙"}
diff --git a/src/client/FlagInput.ts b/src/client/FlagInput.ts
index 77fabef46..ddc2c9287 100644
--- a/src/client/FlagInput.ts
+++ b/src/client/FlagInput.ts
@@ -73,16 +73,14 @@ export class FlagInput extends LitElement {
       <div class="flex relative">
         <button
           id="flag-input_"
-          class="border rounded-lg flex cursor-pointer border-black/30
+          class="w-full border rounded-lg flex cursor-pointer border-black/30
           dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)]
-          "
+          justify-center aspect-square"
           title=${translateText("flag_input.button_title")}
         >
           <span
             id="flag-preview"
-            style="display:inline-block;
-            vertical-align:middle; background:#333; border-radius:6px;
-            overflow:hidden;"
+            class="block w-full aspect-3/2 bg-[#333] overflow-hidden rounded-md"
           ></span>
         </button>
       </div>
diff --git a/src/client/FlagInputModal.ts b/src/client/FlagInputModal.ts
index a352bdbff..cfa3bf359 100644
--- a/src/client/FlagInputModal.ts
+++ b/src/client/FlagInputModal.ts
@@ -20,10 +20,10 @@ export class FlagInputModal extends LitElement {
   render() {
     return html`
       <o-modal alwaysMaximized title=${translateText("flag_input.title")}>
-        <div class="flex justify-center w-full p-[1rem]">
+        <div class="flex justify-center w-full p-4">
           <input
-            class="h-[2rem] border-none border border-gray-300 
-          rounded-xl shadow-sm text-2xl text-center focus:outline-none
+            class="h-8 border-none border border-gray-300
+          rounded-xl shadow-xs text-2xl text-center focus:outline-hidden
           focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-black
           dark:border-gray-300/60 dark:bg-gray-700 dark:text-white"
             type="text"
@@ -34,7 +34,7 @@ export class FlagInputModal extends LitElement {
         </div>
 
         <div
-          class="flex flex-wrap justify-evenly gap-[1rem] overflow-y-auto overflow-x-hidden h-[90%]"
+          class="flex flex-wrap justify-evenly gap-4 overflow-y-auto overflow-x-hidden h-[90%]"
         >
           ${this.isModalOpen
             ? Countries.filter(
@@ -47,10 +47,10 @@ export class FlagInputModal extends LitElement {
                       this.setFlag(country.code);
                       this.close();
                     }}
-                    class="text-center cursor-pointer border-none bg-none opacity-70 
-                  w-[calc(100%/2-15px)] sm:w-[calc(100%/4-15px)] 
-                  md:w-[calc(100%/6-15px)] lg:w-[calc(100%/8-15px)] 
-                  xl:w-[calc(100%/10-15px)] min-w-[80px]"
+                    class="text-center cursor-pointer border-none bg-none opacity-70
+                  w-[calc(100%/2-15px)] sm:w-[calc(100%/4-15px)]
+                  md:w-[calc(100%/6-15px)] lg:w-[calc(100%/8-15px)]
+                  xl:w-[calc(100%/10-15px)] min-w-20"
                   >
                     <img
                       class="country-flag w-full h-auto"
diff --git a/src/client/GameInfoModal.ts b/src/client/GameInfoModal.ts
index c467b7ba1..d1e75d59d 100644
--- a/src/client/GameInfoModal.ts
+++ b/src/client/GameInfoModal.ts
@@ -49,10 +49,8 @@ export class GameInfoModal extends LitElement {
         title="${translateText("game_info_modal.title")}"
         translationKey="main.game_info"
       >
-        <div
-          class="flex flex-col items-center pl-[100px] pr-[100px] text-center mb-4"
-        >
-          <div class="w-[300px] sm:w-[500px]">
+        <div class="flex flex-col items-center px-25 text-center mb-4">
+          <div class="w-75 sm:w-125">
             ${this.isLoadingGame
               ? this.renderLoadingAnimation()
               : this.renderRanking()}
@@ -109,13 +107,12 @@ export class GameInfoModal extends LitElement {
     }
     return html`
       <div
-        class="h-[150px] flex relative justify-between rounded-xl bg-blue-600 items-center"
+        class="h-37.5 flex relative justify-between rounded-xl bg-blue-600 items-center"
       >
         ${this.mapImage
           ? html`<img
               src="${this.mapImage}"
-              class="absolute place-self-start col-span-full row-span-full h-full rounded-xl"
-              style="mask-image: linear-gradient(to left, transparent, #fff)"
+              class="absolute place-self-start col-span-full row-span-full h-full rounded-xl mask-[linear-gradient(to_left,transparent,#fff)]"
             />`
           : html`<div
               class="place-self-start col-span-full row-span-full h-full rounded-xl bg-gray-300"
diff --git a/src/client/GoogleAdElement.ts b/src/client/GoogleAdElement.ts
index 8d86e47fa..464991edb 100644
--- a/src/client/GoogleAdElement.ts
+++ b/src/client/GoogleAdElement.ts
@@ -55,8 +55,7 @@ export class GoogleAdElement extends LitElement {
     return html`
       <div class="google-ad-container">
         <ins
-          class="adsbygoogle"
-          style="display:block"
+          class="adsbygoogle block"
           data-ad-client="${this.adClient}"
           data-ad-slot="${this.adSlot}"
           data-ad-format="${this.adFormat}"
diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts
index 4cf2a802f..9d8d0191b 100644
--- a/src/client/HelpModal.ts
+++ b/src/client/HelpModal.ts
@@ -417,8 +417,7 @@ export class HelpModal extends LitElement {
               <li class="mb-4">
                 <img
                   src="/images/InfoIcon.svg"
-                  class="inline-block icon"
-                  style="fill: white; background: transparent;"
+                  class="inline-block icon fill-white bg-transparent"
                   loading="lazy"
                 />
                 <span>${translateText("help_modal.radial_info")}</span>
@@ -614,7 +613,7 @@ export class HelpModal extends LitElement {
               class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
             >
               <div
-                class="text-gray-300 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
+                class="text-gray-300 flex flex-col justify-start min-h-12 w-full px-2 mb-1"
               >
                 ${translateText("help_modal.icon_crown")}
               </div>
@@ -631,7 +630,7 @@ export class HelpModal extends LitElement {
               class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
             >
               <div
-                class="text-gray-300 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
+                class="text-gray-300 flex flex-col justify-start min-h-12 w-full px-2 mb-1"
               >
                 ${translateText("help_modal.icon_traitor")}
               </div>
@@ -648,7 +647,7 @@ export class HelpModal extends LitElement {
               class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
             >
               <div
-                class="text-gray-300 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
+                class="text-gray-300 flex flex-col justify-start min-h-12 w-full px-2 mb-1"
               >
                 ${translateText("help_modal.icon_ally")}
               </div>
@@ -667,7 +666,7 @@ export class HelpModal extends LitElement {
               class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
             >
               <div
-                class="text-gray-300 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
+                class="text-gray-300 flex flex-col justify-start min-h-12 w-full px-2 mb-1"
               >
                 ${translateText("help_modal.icon_embargo")}
               </div>
@@ -684,7 +683,7 @@ export class HelpModal extends LitElement {
               class="flex flex-col items-center w-full md:w-1/3 mb-2 md:mb-0"
             >
               <div
-                class="text-gray-300 flex flex-col justify-start min-h-[3rem] w-full px-2 mb-1"
+                class="text-gray-300 flex flex-col justify-start min-h-12 w-full px-2 mb-1"
               >
                 ${translateText("help_modal.icon_request")}
               </div>
diff --git a/src/client/HostLobbyModal.ts b/src/client/HostLobbyModal.ts
index 1853d5c28..639ff1344 100644
--- a/src/client/HostLobbyModal.ts
+++ b/src/client/HostLobbyModal.ts
@@ -97,12 +97,11 @@ export class HostLobbyModal extends LitElement {
             ${
               this.lobbyIdVisible
                 ? html`<svg
-                    class="visibility-icon"
+                    class="visibility-icon mr-2 cursor-pointer"
                     @click=${() => {
                       this.lobbyIdVisible = !this.lobbyIdVisible;
                       this.requestUpdate();
                     }}
-                    style="margin-right: 8px; cursor: pointer;"
                     stroke="currentColor"
                     fill="currentColor"
                     stroke-width="0"
@@ -116,12 +115,11 @@ export class HostLobbyModal extends LitElement {
                     ></path>
                   </svg>`
                 : html`<svg
-                    class="visibility-icon"
+                    class="visibility-icon mr-2 cursor-pointer"
                     @click=${() => {
                       this.lobbyIdVisible = !this.lobbyIdVisible;
                       this.requestUpdate();
                     }}
-                    style="margin-right: 8px; cursor: pointer;"
                     stroke="currentColor"
                     fill="currentColor"
                     stroke-width="0"
@@ -146,12 +144,12 @@ export class HostLobbyModal extends LitElement {
                   </svg>`
             }
             <!-- Lobby ID (conditionally shown) -->
-            <span class="lobby-id" @click=${this.copyToClipboard} style="cursor: pointer;">
+            <span class="lobby-id cursor-pointer" @click=${this.copyToClipboard}>
               ${this.lobbyIdVisible ? this.lobbyId : "••••••••"}
             </span>
 
             <!-- Copy icon/success indicator -->
-            <div @click=${this.copyToClipboard} style="margin-left: 8px; cursor: pointer;">
+            <div @click=${this.copyToClipboard} class="cursor-pointer ml-2">
               ${
                 this.copySuccess
                   ? html`<span class="copy-success-icon">✓</span>`
@@ -225,7 +223,7 @@ export class HostLobbyModal extends LitElement {
                   <img
                     src=${randomMap}
                     alt="Random Map"
-                    style="width:100%; aspect-ratio: 4/2; object-fit:cover; border-radius:8px;"
+                    class="w-full aspect-2/1 object-cover rounded-lg"
                   />
                 </div>
                 <div class="option-card-title">
@@ -516,8 +514,8 @@ export class HostLobbyModal extends LitElement {
                             id="end-timer-value"
                             min="0"
                             max="120"
-                            .value=${String(this.maxTimerValue ?? 0)}
-                            style="width: 60px; color: black; text-align: right; border-radius: 8px;"
+                            .value=${String(this.maxTimerValue ?? "")}
+                            class="w-15 text-black text-right rounded-lg"
                             @input=${this.handleMaxTimerValueChanges}
                             @keydown=${this.handleMaxTimerValueKeyDown}
                           />`
@@ -526,7 +524,6 @@ export class HostLobbyModal extends LitElement {
                     ${translateText("host_modal.max_timer")}
                   </div>
                 </label>
-
                 <label
                   for="spawn-immunity"
                   class="option-card  ${this.spawnImmunity ? "selected" : ""}"
@@ -566,17 +563,17 @@ export class HostLobbyModal extends LitElement {
                     <span>${translateText("host_modal.player_immunity_duration")}</span>
                   </div>
                 </label>
-                
-                <hr style="width: 100%; border-top: 1px solid #444; margin: 16px 0;" />
+
+                <hr class="w-full border-t border-t-[#444] my-4" />
 
                 <!-- Individual disables for structures/weapons -->
                 <div
-                  style="margin: 8px 0 12px 0; font-weight: bold; color: #ccc; text-align: center;"
+                  class="mt-2 mb-3 font-bold text-[#ccc] text-center"
                 >
                   ${translateText("host_modal.enables_title")}
                 </div>
                 <div
-                  style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;"
+                  class="flex flex-wrap justify-center gap-3"
                 >
                    ${renderUnitTypeOptions({
                      disabledUnits: this.disabledUnits,
@@ -597,7 +594,7 @@ export class HostLobbyModal extends LitElement {
                 ? translateText("host_modal.player")
                 : translateText("host_modal.players")
             }
-            <span style="margin: 0 8px;">•</span>
+            <span class="mx-2">•</span>
             ${this.getEffectiveNationCount()}
             ${
               this.getEffectiveNationCount() === 1
diff --git a/src/client/LanguageModal.ts b/src/client/LanguageModal.ts
index cff548892..248d4521f 100644
--- a/src/client/LanguageModal.ts
+++ b/src/client/LanguageModal.ts
@@ -64,10 +64,10 @@ export class LanguageModal extends LitElement {
 
     return html`
       <aside
-        class="fixed p-4 z-[9999] inset-0 bg-black/50 overflow-y-auto flex items-center justify-center"
+        class="fixed p-4 z-9999 inset-0 bg-black/50 overflow-y-auto flex items-center justify-center"
       >
         <div
-          class="bg-gray-800/80 dark:bg-gray-900/90 backdrop-blur-md rounded-lg min-w-[340px] max-w-[480px] w-full"
+          class="bg-gray-800/80 dark:bg-gray-900/90 backdrop-blur-md rounded-lg min-w-85 max-w-120 w-full"
         >
           <header
             class="relative rounded-t-md text-lg bg-black/60 dark:bg-black/80 text-center text-white px-6 py-4 pr-10"
diff --git a/src/client/Matchmaking.ts b/src/client/Matchmaking.ts
index 1e1a2b405..e36ce18c4 100644
--- a/src/client/Matchmaking.ts
+++ b/src/client/Matchmaking.ts
@@ -170,10 +170,10 @@ export class MatchmakingButton extends LitElement {
     }
 
     return html`
-      <div class="z-[9999]">
+      <div class="z-9999">
         <button
           @click="${this.open}"
-          class="w-full h-16 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-2xl hover:shadow-3xl transition-all duration-200 flex items-center justify-center text-xl focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-offset-4"
+          class="w-full h-16 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-2xl hover:shadow-2xl transition-all duration-200 flex items-center justify-center text-xl focus:outline-hidden focus:ring-4 focus:ring-blue-500 focus:ring-offset-4"
           title="${translateText("matchmaking_modal.title")}"
         >
           Matchmaking
diff --git a/src/client/NewsModal.ts b/src/client/NewsModal.ts
index 2aa71124d..4fe01609c 100644
--- a/src/client/NewsModal.ts
+++ b/src/client/NewsModal.ts
@@ -158,11 +158,11 @@ export class NewsButton extends LitElement {
     return html`
       <div class="flex relative">
         <button
-          class="border p-[4px] rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)]"
+          class="border p-1 rounded-lg flex cursor-pointer border-black/30 dark:border-gray-300/60 bg-white/70 dark:bg-[rgba(55,65,81,0.7)]"
           @click=${this.openNewsModel}
         >
           <img
-            class="size-[48px] dark:invert"
+            class="size-12 dark:invert"
             src="${megaphone}"
             alt=${translateText("news.title")}
           />
diff --git a/src/client/PublicLobby.ts b/src/client/PublicLobby.ts
index 90c6cf682..31990be49 100644
--- a/src/client/PublicLobby.ts
+++ b/src/client/PublicLobby.ts
@@ -121,8 +121,8 @@ export class PublicLobby extends LitElement {
         ?disabled=${this.isButtonDebounced}
         class="isolate grid h-40 grid-cols-[100%] grid-rows-[100%] place-content-stretch w-full overflow-hidden ${this
           .isLobbyHighlighted
-          ? "bg-gradient-to-r from-green-600 to-green-500"
-          : "bg-gradient-to-r from-blue-600 to-blue-500"} text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90 ${this
+          ? "bg-linear-to-r via-none from-green-600 to-green-500"
+          : "bg-linear-to-r via-none from-blue-600 to-blue-500"} text-white font-medium rounded-xl transition-opacity duration-200 hover:opacity-90 ${this
           .isButtonDebounced
           ? "opacity-70 cursor-not-allowed"
           : ""}"
@@ -131,8 +131,7 @@ export class PublicLobby extends LitElement {
           ? html`<img
               src="${mapImageSrc}"
               alt="${lobby.gameConfig.gameMap}"
-              class="place-self-start col-span-full row-span-full h-full -z-10"
-              style="mask-image: linear-gradient(to left, transparent, #fff)"
+              class="place-self-start col-span-full row-span-full h-full -z-10 mask-[linear-gradient(to_left,transparent,#fff)]"
             />`
           : html`<div
               class="place-self-start col-span-full row-span-full h-full -z-10 bg-gray-300"
@@ -152,19 +151,16 @@ export class PublicLobby extends LitElement {
                 : translateText("public_lobby.join")}
             </div>
             <div class="text-md font-medium text-white-400">
-              ${fullModeLabel
-                ? html`<span
-                    class="text-sm ${this.isLobbyHighlighted
-                      ? "text-green-600"
-                      : "text-blue-600"} bg-white rounded-sm px-1 ml-1"
-                    >${fullModeLabel}</span
-                  >`
-                : ""}
-              <span
-                >${translateText(
-                  `map.${lobby.gameConfig.gameMap.toLowerCase().replace(/[\s.]+/g, "")}`,
-                )}</span
-              >
+              <span class="text-sm text-blue-600 bg-white rounded-xs px-1 mr-1">
+                ${fullModeLabel}
+              </span>
+              <span>
+                ${translateText(
+                  `map.${lobby.gameConfig.gameMap
+                    .toLowerCase()
+                    .replace(/[\s.]+/g, "")}`,
+                )}
+              </span>
             </div>
           </div>
 
diff --git a/src/client/SinglePlayerModal.ts b/src/client/SinglePlayerModal.ts
index 4c7e95f8e..9e2f0cf44 100644
--- a/src/client/SinglePlayerModal.ts
+++ b/src/client/SinglePlayerModal.ts
@@ -200,7 +200,7 @@ export class SinglePlayerModal extends LitElement {
                   <img
                     src=${randomMap}
                     alt="Random Map"
-                    style="width:100%; aspect-ratio: 4/2; object-fit:cover; border-radius:8px;"
+                    class="w-full aspect-2/1 object-cover rounded-lg"
                   />
                 </div>
                 <div class="option-card-title">
@@ -457,7 +457,7 @@ export class SinglePlayerModal extends LitElement {
                       min="0"
                       max="120"
                       .value=${String(this.maxTimerValue ?? "")}
-                      style="width: 60px; color: black; text-align: right; border-radius: 8px;"
+                      class="w-15 text-black text-right rounded-lg"
                       @input=${this.handleMaxTimerValueChanges}
                       @keydown=${this.handleMaxTimerValueKeyDown}
                     />`}
@@ -467,17 +467,11 @@ export class SinglePlayerModal extends LitElement {
               </label>
             </div>
 
-            <hr
-              style="width: 100%; border-top: 1px solid #444; margin: 16px 0;"
-            />
-            <div
-              style="margin: 8px 0 12px 0; font-weight: bold; color: #ccc; text-align: center;"
-            >
+            <hr class="w-full border-t border-t-[#444] my-4" />
+            <div class="mt-2 mb-3 font-bold text-[#ccc] text-center">
               ${translateText("single_modal.enables_title")}
             </div>
-            <div
-              style="display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;"
-            >
+            <div class="flex flex-wrap justify-center gap-3">
               ${renderUnitTypeOptions({
                 disabledUnits: this.disabledUnits,
                 toggleUnit: this.toggleUnit.bind(this),
diff --git a/src/client/StatsModal.ts b/src/client/StatsModal.ts
index 615d86c6b..0b1b89668 100644
--- a/src/client/StatsModal.ts
+++ b/src/client/StatsModal.ts
@@ -91,7 +91,7 @@ export class StatsModal extends LitElement {
         <div class="flex flex-col items-center justify-center p-6 text-white">
           <p class="mb-4 text-center">${this.error}</p>
           <button
-            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded text-sm font-medium"
+            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-sm text-sm font-medium"
             @click=${() => this.loadLeaderboard()}
           >
             Retry
@@ -222,10 +222,10 @@ export class StatsButton extends LitElement {
     }
 
     return html`
-      <div class="fixed top-20 right-4 z-[9998]">
+      <div class="fixed top-20 right-4 z-9998">
         <button
           @click="${this.open}"
-          class="w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-2xl hover:shadow-3xl transition-all duration-200 flex items-center justify-center text-xl focus:outline-none focus:ring-4 focus:ring-blue-500 focus:ring-offset-4"
+          class="w-12 h-12 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-2xl hover:shadow-2xl transition-all duration-200 flex items-center justify-center text-xl focus:outline-hidden focus:ring-4 focus:ring-blue-500 focus:ring-offset-4"
           title="${translateText("stats_modal.title")}"
         >
           <img src="/icons/stats.svg" alt="Stats" class="w-6 h-6" />
diff --git a/src/client/TerritoryPatternsModal.ts b/src/client/TerritoryPatternsModal.ts
index 40a12d1fc..f17c4ccb8 100644
--- a/src/client/TerritoryPatternsModal.ts
+++ b/src/client/TerritoryPatternsModal.ts
@@ -140,10 +140,7 @@ export class TerritoryPatternsModal extends LitElement {
             ? this.renderMySkinsButton()
             : this.renderNotLoggedInWarning()}
         </div>
-        <div
-          class="flex flex-wrap gap-4 p-2"
-          style="justify-content: center; align-items: flex-start;"
-        >
+        <div class="flex flex-wrap gap-4 p-2 justify-center items-start">
           ${this.affiliateCode === null
             ? html`
                 <pattern-button
@@ -193,8 +190,8 @@ export class TerritoryPatternsModal extends LitElement {
         ${hexCodes.map(
           (hexCode) => html`
             <div
-              class="w-12 h-12 rounded-lg border-2 border-white/30 cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-lg"
-              style="background-color: ${hexCode};"
+              class="w-12 h-12 rounded-lg border-2 border-white/30 bg-(--bg) cursor-pointer transition-all duration-200 hover:scale-110 hover:shadow-lg"
+              style="--bg: ${hexCode};"
               title="${hexCode}"
               @click=${() => this.selectColor(hexCode)}
             ></div>
@@ -267,8 +264,8 @@ export class TerritoryPatternsModal extends LitElement {
   ): TemplateResult {
     return html`
       <div
-        class="rounded"
-        style="width: ${width}px; height: ${height}px; background-color: ${hexCode};"
+        class="rounded-sm size-(--size) bg-(--bg)"
+        style="--size: ${width}px; --bg: ${hexCode};"
       ></div>
     `;
   }
diff --git a/src/client/UsernameInput.ts b/src/client/UsernameInput.ts
index 37e26dc00..5c43f0285 100644
--- a/src/client/UsernameInput.ts
+++ b/src/client/UsernameInput.ts
@@ -40,12 +40,12 @@ export class UsernameInput extends LitElement {
         @change=${this.handleChange}
         placeholder="${translateText("username.enter_username")}"
         maxlength="${MAX_USERNAME_LENGTH}"
-        class="w-full px-4 py-2 border border-gray-300 rounded-xl shadow-sm text-2xl text-center focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-300/60 dark:bg-gray-700 dark:text-white"
+        class="w-full px-4 py-2 border border-gray-300 rounded-xl shadow-xs text-2xl text-center focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:border-gray-300/60 dark:bg-gray-700 dark:text-white"
       />
       ${this.validationError
         ? html`<div
             id="username-validation-error"
-            class="absolute z-10 w-full mt-2 px-3 py-1 text-lg border rounded bg-white text-red-600 border-red-600 dark:bg-gray-700 dark:text-red-300 dark:border-red-300"
+            class="absolute z-10 w-full mt-2 px-3 py-1 text-lg border rounded-sm bg-white text-red-600 border-red-600 dark:bg-gray-700 dark:text-red-300 dark:border-red-300"
           >
             ${this.validationError}
           </div>`
diff --git a/src/client/components/LobbyTeamView.ts b/src/client/components/LobbyTeamView.ts
index 711d9790c..18762e04d 100644
--- a/src/client/components/LobbyTeamView.ts
+++ b/src/client/components/LobbyTeamView.ts
@@ -83,7 +83,7 @@ export class LobbyTeamView extends LitElement {
           this.clients,
           (c) => c.clientID ?? c.username,
           (client) =>
-            html`<div class="px-2 py-1 rounded bg-gray-700/70 mb-1 text-xs">
+            html`<div class="px-2 py-1 rounded-sm bg-gray-700/70 mb-1 text-xs">
               ${client.username}
             </div>`,
         )}
@@ -162,9 +162,9 @@ export class LobbyTeamView extends LitElement {
           class="px-2 py-1 font-bold flex items-center justify-between text-white rounded-t-xl text-[13px] gap-2 bg-gray-700/70"
         >
           ${this.showTeamColors
-            ? html`<span
-                class="inline-block w-2.5 h-2.5 rounded-full border-2 border-white/90 shadow-inner"
-                style="background:${this.teamHeaderColor(preview.team)};"
+            ? html` <span
+                class="inline-block w-2.5 h-2.5 rounded-full border-2 border-white/90 shadow-inner bg-(--bg)"
+                style="--bg:${this.teamHeaderColor(preview.team)};"
               ></span>`
             : null}
           <span class="truncate">${preview.team}</span>
@@ -180,7 +180,7 @@ export class LobbyTeamView extends LitElement {
                 (p) => p.clientID ?? p.username,
                 (p) =>
                   html` <div
-                    class="bg-gray-700/70 px-2 py-1 rounded text-xs flex items-center justify-between"
+                    class="bg-gray-700/70 px-2 py-1 rounded-sm text-xs flex items-center justify-between"
                   >
                     <span class="truncate">${p.username}</span>
                     ${p.clientID === this.lobbyCreatorClientID
diff --git a/src/client/components/ModalOverlay.ts b/src/client/components/ModalOverlay.ts
index 468de56eb..d182a3244 100644
--- a/src/client/components/ModalOverlay.ts
+++ b/src/client/components/ModalOverlay.ts
@@ -1,5 +1,5 @@
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property } from "lit/decorators.js";
 
 @customElement("modal-overlay")
 export class ModalOverlay extends LitElement {
diff --git a/src/client/components/PatternButton.ts b/src/client/components/PatternButton.ts
index 9c35347e1..dd09a4178 100644
--- a/src/client/components/PatternButton.ts
+++ b/src/client/components/PatternButton.ts
@@ -70,7 +70,7 @@ export class PatternButton extends LitElement {
 
     return html`
       <div
-        class="flex flex-col items-center gap-1 p-1 bg-white/10 rounded-lg max-w-[200px]"
+        class="flex flex-col items-center gap-1 p-1 bg-white/10 rounded-lg max-w-50"
       >
         <button
           class="bg-white/90 border-2 border-black/10 rounded-lg cursor-pointer transition-all duration-200 w-full
@@ -98,8 +98,7 @@ export class PatternButton extends LitElement {
               `
             : null}
           <div
-            class="w-[120px] h-[120px] flex items-center justify-center bg-white rounded p-1 mx-auto"
-            style="overflow: hidden;"
+            class="size-30 flex items-center justify-center bg-white rounded-sm p-1 mx-auto overflow-hidden"
           >
             ${renderPatternPreview(
               this.pattern !== null
@@ -143,43 +142,27 @@ export function renderPatternPreview(
   return html`<img
     src="${generatePreviewDataUrl(pattern, width, height)}"
     alt="Pattern preview"
-    class="w-full h-full object-contain"
-    style="image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;"
+    <!-- pixelated should also handle crisp-edges -->
+    class="w-full h-full object-contain [image-rendering:pixelated]"
   />`;
 }
 
 function renderBlankPreview(width: number, height: number): TemplateResult {
   return html`
     <div
+      class="flex items-center justify-center bg-white rounded-sm box-border overflow-hidden relative border border-[#ccc] w-(--width) h-(--height)"
       style="
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: ${height}px;
-        width: ${width}px;
-        background-color: #ffffff;
-        border-radius: 4px;
-        box-sizing: border-box;
-        overflow: hidden;
-        position: relative;
-        border: 1px solid #ccc;
+        --height: ${height}px;
+        --width: ${width}px;
       "
     >
       <div
-        style="display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 0; width: calc(100% - 1px); height: calc(100% - 2px); box-sizing: border-box;"
+        class="grid grid-cols-2 grid-rows-2 gap-0 w-[calc(100%-1px)] h-[calc(100%-2px)] box-border"
       >
-        <div
-          style="background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box;"
-        ></div>
-        <div
-          style="background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box;"
-        ></div>
-        <div
-          style="background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box;"
-        ></div>
-        <div
-          style="background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.1); box-sizing: border-box;"
-        ></div>
+        <div class="bg-white border border-black/10 box-border"></div>
+        <div class="bg-white border border-black/10 box-border"></div>
+        <div class="bg-white border border-black/10 box-border"></div>
+        <div class="bg-white border border-black/10 box-border"></div>
       </div>
     </div>
   `;
diff --git a/src/client/components/baseComponents/ranking/PlayerRow.ts b/src/client/components/baseComponents/ranking/PlayerRow.ts
index c90606a4a..2ebe635ed 100644
--- a/src/client/components/baseComponents/ranking/PlayerRow.ts
+++ b/src/client/components/baseComponents/ranking/PlayerRow.ts
@@ -22,16 +22,18 @@ export class PlayerRow extends LitElement {
     const visibleBorder = player.winner || this.currentPlayer;
     return html`
       <li
-        class="bg-gradient-to-r ${player.winner
-          ? "from-sky-400 to-blue-700"
-          : "bg-slate-700"} border-[2px]
+        class="${player.winner
+          ? "bg-linear-to-r via-none from-sky-400 to-blue-700"
+          : "bg-slate-700"} border-2
           ${player.winner
           ? "border-yellow-500"
-          : "border-yellow-50"} ${visibleBorder ? "" : "border-opacity-0"}
-          relative pt-1 pb-1 pr-2 pl-2 sm:pl-5 sm:pr-5 mb-[5px] rounded-lg flex justify-between items-center hover:bg-slate-500 transition duration-150 ease-in-out"
+          : visibleBorder
+            ? "border-yellow-50"
+            : "border-yellow-50/0"}
+          relative pt-1 pb-1 pr-2 pl-2 sm:pl-5 sm:pr-5 mb-1.25 rounded-lg flex justify-between items-center hover:bg-slate-500 transition duration-150 ease-in-out"
       >
         <div
-          class="font-bold text-right w-[30px] text-lg text-white absolute left-[-40px]"
+          class="font-bold text-right w-7.5 text-lg text-white absolute -left-10"
         >
           ${this.rank}
         </div>
@@ -50,7 +52,7 @@ export class PlayerRow extends LitElement {
     return html`
       <img
         src="/images/CrownIcon.svg"
-        class="absolute top-[-3px] left-[16px] w-[15px] h-[15px] sm:top-[-7px] sm:left-[30px] sm:w-[20px] sm:h-[20px]"
+        class="absolute -top-0.75 left-4 size-3.75 sm:-top-1.75 sm:left-7.5 sm:size-5"
       />
     `;
   }
@@ -84,7 +86,7 @@ export class PlayerRow extends LitElement {
       </div>
       <div>
         <div
-          class="font-bold rounded-[50%] w-[30px] h-[30px] leading-[1.6rem] border text-center bg-white text-black"
+          class="font-bold rounded-[50%] size-7.5 leading-[1.6rem] border border-gray-200 text-center bg-white text-black"
         >
           ${Number(this.score).toFixed(0)}
         </div>
@@ -96,10 +98,13 @@ export class PlayerRow extends LitElement {
     const bestScore = Math.max(this.bestScore, 1);
     const width = Math.min(Math.max((this.score / bestScore) * 100, 0), 100);
     return html`
-      <div class="w-full pr-[10px] m-auto">
-        <div class="h-[7px] bg-neutral-800" style="width: 100%;">
+      <div class="w-full pr-2.5 m-auto">
+        <div class="h-1.75 bg-neutral-800 w-full">
           <!-- bar background -->
-          <div class="h-[7px] bg-white" style="width: ${width}%;"></div>
+          <div
+            class="h-1.75 bg-white w-(--width)"
+            style="--width: ${width}%;"
+          ></div>
         </div>
       </div>
     `;
@@ -109,7 +114,7 @@ export class PlayerRow extends LitElement {
       <div
         class="${highlight
           ? "font-bold text-[18px]"
-          : ""} min-w-[30px] sm:min-w-[60px] inline-block text-center"
+          : ""} min-w-7.5 sm:min-w-15 inline-block text-center"
       >
         ${value}
       </div>
@@ -152,32 +157,27 @@ export class PlayerRow extends LitElement {
     return html`
       <div class="flex gap-3 items-center">
         ${this.renderPlayerIcon()}
-        <div
-          class="text-left w-[125px] max-w-[125px] sm:w-[250px] sm:max-w-[250px]"
-        >
+        <div class="text-left w-31.25 sm:w-62.5">
           ${this.renderPlayerName()}
         </div>
       </div>
       <div class="flex gap-2">
         <div
-          class="font-bold rounded-md w-[60px] max-w-[60px] h-[30px] text-sm sm:w-[100px] sm:h-[30px] leading-[1.9rem] text-center"
+          class="font-bold rounded-md w-15 shrink-0 h-7.5 text-sm sm:w-25 sm:h-7.5 leading-[1.9rem] text-center"
         >
           ${renderNumber(this.score)}
         </div>
-        <img
-          src="/images/GoldCoinIcon.svg"
-          class="w-[14px] h-[14px] sm:w-[20px] sm:h-[20px] m-auto"
-        />
+        <img src="/images/GoldCoinIcon.svg" class="size-3.5 sm:size-5 m-auto" />
       </div>
     `;
   }
 
   private renderPlayerName() {
     return html`
-      <div class="flex gap-1 items-center max-w-[200px] min-w-[200px]">
+      <div class="flex gap-1 items-center w-50 shrink-0">
         ${this.player.tag ? this.renderTag(this.player.tag) : ""}
         <div
-          class="text-xs sm:text-sm font-bold text-ellipsis max-w-[150px] min-w-[150px] overflow-hidden whitespace-nowrap"
+          class="text-xs sm:text-sm font-bold text-ellipsis w-37.5 shrink-0 overflow-hidden whitespace-nowrap"
         >
           ${this.player.username}
         </div>
@@ -188,7 +188,7 @@ export class PlayerRow extends LitElement {
   private renderTag(tag: string) {
     return html`
       <div
-        class="bg-white text-black rounded-lg sm:rounded-xl border text-xs leading-[12px] sm:leading-[18px] text-blue-900 h-[15px] pr-[4px] pl-[4px] sm:h-[20px] sm:pr-[8px] sm:pl-[8px] font-bold"
+        class="bg-white text-black rounded-lg sm:rounded-xl border border-gray-200 text-xs leading-3 sm:leading-4.5 text-blue-900 h-3.75 px-1 sm:h-5 sm:px-2 font-bold"
       >
         ${tag}
       </div>
@@ -198,24 +198,24 @@ export class PlayerRow extends LitElement {
   private renderIcon() {
     if (this.player.killedAt) {
       return html` <div
-        class="w-[30px] h-[30px] leading-[5px] text-lg sm:min-w-[40px] sm:w-[40px] sm:h-[40px] pt-[12px] sm:leading-[15px] sm:rounded-[50%] sm:border text-center sm:bg-slate-500 sm:text-2xl"
+        class="size-7.5 leading-1.25 shrink-0 text-lg sm:size-10 pt-3 sm:leading-3.75 sm:rounded-[50%] sm:border sm:border-gray-200 text-center sm:bg-slate-500 sm:text-2xl"
       >
         💀
       </div>`;
     } else if (this.player.flag) {
       return html`<img
         src="/flags/${this.player.flag}.svg"
-        class="min-w-[30px] h-[30px] sm:min-w-[40px] sm:h-[40px]"
+        class="min-w-7.5 h-7.5 sm:min-w-10 sm:h-10 shrink-0"
       />`;
     }
 
     return html`
       <div
-        class="w-[30px] h-[30px] min-w-[30px] leading-[5px] rounded-[50%] sm:min-w-[40px] sm:w-[40px] sm:h-[40px] sm:pt-[10px] sm:leading-[14px] border text-center bg-slate-500"
+        class="size-7.5 leading-1.25 shrink-0 rounded-[50%] sm:size-10 sm:pt-2.5 sm:leading-3.5 border border-gray-200 text-center bg-slate-500"
       >
         <img
           src="/images/ProfileIcon.svg"
-          class="w-[20px] h-[20px] mt-[2px] sm:w-[25px] sm:h-[25px] sm:mt-[-5px] m-auto"
+          class="size-5 mt-0.5 sm:size-6.25 sm:-mt-1.25 m-auto"
         />
       </div>
     `;
diff --git a/src/client/components/baseComponents/ranking/RankingControls.ts b/src/client/components/baseComponents/ranking/RankingControls.ts
index dcbc07baf..59e3ea76c 100644
--- a/src/client/components/baseComponents/ranking/RankingControls.ts
+++ b/src/client/components/baseComponents/ranking/RankingControls.ts
@@ -55,9 +55,8 @@ export class RankingControls extends LitElement {
     return html`
       <button
         class="rounded-lg bg-blue-600 text-white text-lg p-3 hover:bg-blue-400 ${active
-          ? "active"
+          ? "active outline-2 outline-white font-bold"
           : ""}"
-        style="${active ? "outline: solid 2px white; font-weight: bold;" : ""}"
         @click=${() => this.onSort(type)}
       >
         ${translateText(label)}
@@ -107,8 +106,9 @@ export class RankingControls extends LitElement {
     return html`
       <button
         @click=${() => this.onSort(type)}
-        class="rounded-md bg-blue-50 text-black text-sm p-2 hover:bg-blue-200"
-        style="${active ? "outline: solid 2px white; font-weight: bold;" : ""}"
+        class="rounded-md bg-blue-50 text-black text-sm p-2 hover:bg-blue-200 ${active
+          ? "outline-2 outline-white font-bold"
+          : ""}"
       >
         ${translateText(label)}
       </button>
diff --git a/src/client/components/baseComponents/ranking/RankingHeader.ts b/src/client/components/baseComponents/ranking/RankingHeader.ts
index c86f511b2..881de1101 100644
--- a/src/client/components/baseComponents/ranking/RankingHeader.ts
+++ b/src/client/components/baseComponents/ranking/RankingHeader.ts
@@ -14,7 +14,7 @@ export class RankingHeader extends LitElement {
   render() {
     return html`
       <li
-        class="text-lg bg-gray-800 font-bold relative pt-2 pb-2 pr-5 pl-5 mb-[5px] rounded-md flex justify-between items-center"
+        class="text-lg bg-gray-800 font-bold relative pt-2 pb-2 pr-5 pl-5 mb-1.25 rounded-md flex justify-between items-center"
       >
         ${this.renderHeaderContent()}
       </li>
@@ -35,7 +35,7 @@ export class RankingHeader extends LitElement {
       case RankType.Hydros:
       case RankType.MIRV:
         return html`
-          <div class="flex justify-between sm:pl-[70px] sm:pr-[70px] w-full">
+          <div class="flex justify-between sm:px-17.5 w-full">
             ${this.renderBombHeaderButton(
               translateText("game_info_modal.atoms"),
               RankType.Atoms,
@@ -78,8 +78,8 @@ export class RankingHeader extends LitElement {
     return html`
       <button
         @click=${() => this.onSort(type)}
-        style="${this.rankType === type
-          ? "border-bottom: solid 2px white;"
+        class="${this.rankType === type
+          ? "border-b-2 border-b-white"
           : nothing}"
       >
         ${label}
diff --git a/src/client/components/baseComponents/setting/SettingKeybind.ts b/src/client/components/baseComponents/setting/SettingKeybind.ts
index f498c4e3f..140a8e1f3 100644
--- a/src/client/components/baseComponents/setting/SettingKeybind.ts
+++ b/src/client/components/baseComponents/setting/SettingKeybind.ts
@@ -21,12 +21,11 @@ export class SettingKeybind extends LitElement {
     return html`
       <div class="setting-item column${this.easter ? " easter-egg" : ""}">
         <div class="setting-label-group">
-          <label class="setting-label block mb-1">${this.label}</label>
+          <label class="setting-label block mb-1">${this.label} </label>
 
           <div class="setting-keybind-box flex flex-wrap items-start gap-2">
             <div
-              class="setting-keybind-description flex-1 min-w-[240px] max-w-full whitespace-normal break-words text-sm text-gray-300"
-              style="word-break: break-word;"
+              class="setting-keybind-description flex-1 min-w-60 max-w-full whitespace-normal wrap-break-words text-sm text-gray-300 [word-break:break-word]"
             >
               ${this.description}
             </div>
@@ -44,13 +43,13 @@ export class SettingKeybind extends LitElement {
               </span>
 
               <button
-                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded transition whitespace-normal break-words max-w-full"
+                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded-sm transition whitespace-normal wrap-break-words max-w-full"
                 @click=${this.resetToDefault}
               >
                 ${translateText("user_setting.reset")}
               </button>
               <button
-                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded transition whitespace-normal break-words max-w-full"
+                class="text-xs text-gray-400 hover:text-white border border-gray-500 px-2 py-0.5 rounded-sm transition whitespace-normal wrap-break-words max-w-full"
                 @click=${this.unbindKey}
               >
                 ${translateText("user_setting.unbind")}
diff --git a/src/client/components/baseComponents/stats/GameList.ts b/src/client/components/baseComponents/stats/GameList.ts
index 7452045ca..5bbd26336 100644
--- a/src/client/components/baseComponents/stats/GameList.ts
+++ b/src/client/components/baseComponents/stats/GameList.ts
@@ -120,21 +120,19 @@ export class GameList extends LitElement {
                   </div>
                 </div>
                 <div
-                  class="details"
-                  style="max-height:${this.expandedGameId === game.gameId
-                    ? "200px"
-                    : "0"}; ${this.expandedGameId === game.gameId
-                    ? ""
-                    : "padding-top:0; padding-bottom:0;"}"
+                  class="details max-h-(--max-height) ${this.expandedGameId ===
+                  game.gameId
+                    ? "max-h-50"
+                    : "py-0"}"
                 >
                   <div>
-                    <span class="title" style="font-size:0.75rem;"
+                    <span class="title text-xs"
                       >${translateText("game_list.started")}:</span
                     >
                     ${new Date(game.start).toLocaleString()}
                   </div>
                   <div>
-                    <span class="title" style="font-size:0.75rem;"
+                    <span class="title text-xs"
                       >${translateText("game_list.mode")}:</span
                     >
                     ${game.mode === GameMode.FFA
@@ -142,19 +140,19 @@ export class GameList extends LitElement {
                       : translateText("game_list.mode_team")}
                   </div>
                   <div>
-                    <span class="title" style="font-size:0.75rem;"
+                    <span class="title text-xs"
                       >${translateText("game_list.map")}:</span
                     >
                     ${game.map}
                   </div>
                   <div>
-                    <span class="title" style="font-size:0.75rem;"
+                    <span class="title text-xs"
                       >${translateText("game_list.difficulty")}:</span
                     >
                     ${game.difficulty}
                   </div>
                   <div>
-                    <span class="title" style="font-size:0.75rem;"
+                    <span class="title text-xs"
                       >${translateText("game_list.type")}:</span
                     >
                     ${game.type}
diff --git a/src/client/components/baseComponents/stats/PlayerStatsTable.ts b/src/client/components/baseComponents/stats/PlayerStatsTable.ts
index 027a5a594..402867e4c 100644
--- a/src/client/components/baseComponents/stats/PlayerStatsTable.ts
+++ b/src/client/components/baseComponents/stats/PlayerStatsTable.ts
@@ -117,16 +117,16 @@ export class PlayerStatsTable extends LitElement {
         <table>
           <thead>
             <tr>
-              <th class="text-left" style="width:40%">
+              <th class="text-left w-2/5">
                 ${translateText("player_stats_table.weapon")}
               </th>
-              <th class="text-center" style="width:20%">
+              <th class="text-center w-1/5">
                 ${translateText("player_stats_table.launched")}
               </th>
-              <th class="text-center" style="width:20%">
+              <th class="text-center w-1/5">
                 ${translateText("player_stats_table.landed")}
               </th>
-              <th class="text-center" style="width:20%">
+              <th class="text-center w-1/5">
                 ${translateText("player_stats_table.hits")}
               </th>
             </tr>
@@ -170,7 +170,7 @@ export class PlayerStatsTable extends LitElement {
             </tr>
           </tbody>
         </table>
-        <table style="margin-top: 0.75rem;">
+        <table class="mt-3">
           <thead>
             <tr>
               <th>${translateText("player_stats_table.gold")}</th>
diff --git a/src/client/components/baseComponents/stats/PlayerStatsTree.ts b/src/client/components/baseComponents/stats/PlayerStatsTree.ts
index 4527529a2..728ba2671 100644
--- a/src/client/components/baseComponents/stats/PlayerStatsTree.ts
+++ b/src/client/components/baseComponents/stats/PlayerStatsTree.ts
@@ -122,8 +122,8 @@ export class PlayerStatsTreeView extends LitElement {
         ${types.map(
           (t) => html`
             <button
-              class="text-xs px-2 py-0.5 rounded border ${this.selectedType ===
-              t
+              class="text-xs px-2 py-0.5 rounded-sm border ${this
+                .selectedType === t
                 ? "border-white/60 text-white"
                 : "border-white/20 text-gray-300"}"
               @click=${() => this.setGameType(t)}
@@ -143,7 +143,7 @@ export class PlayerStatsTreeView extends LitElement {
             ${modes.map(
               (m) => html`
                 <button
-                  class="text-xs px-2 py-0.5 rounded border ${this
+                  class="text-xs px-2 py-0.5 rounded-sm border ${this
                     .selectedMode === m
                     ? "border-white/60 text-white"
                     : "border-white/20 text-gray-300"}"
@@ -162,7 +162,7 @@ export class PlayerStatsTreeView extends LitElement {
             ${diffs.map(
               (d) =>
                 html` <button
-                  class="text-xs px-2 py-0.5 rounded border ${this
+                  class="text-xs px-2 py-0.5 rounded-sm border ${this
                     .selectedDifficulty === d
                     ? "border-white/60 text-white"
                     : "border-white/20 text-gray-300"}"
diff --git a/src/client/components/ui/ActionButton.ts b/src/client/components/ui/ActionButton.ts
index e1b0fc980..08185f3b4 100644
--- a/src/client/components/ui/ActionButton.ts
+++ b/src/client/components/ui/ActionButton.ts
@@ -25,9 +25,9 @@ const TEXT_SIZE =
 const getButtonStyles = () => {
   const btnBase =
     "group w-full min-w-[50px] select-none flex flex-col items-center justify-center " +
-    "gap-1 rounded-lg py-1.5 border border-white/10 bg-white/[0.04] shadow-sm " +
+    "gap-1 rounded-lg py-1.5 border border-white/10 bg-white/4 shadow-xs " +
     "transition-all duration-150 " +
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 " +
+    "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-white/20 " +
     "active:translate-y-[1px]";
 
   return {
diff --git a/src/client/graphics/layers/BuildMenu.ts b/src/client/graphics/layers/BuildMenu.ts
index 291fa70da..e2e46f9b1 100644
--- a/src/client/graphics/layers/BuildMenu.ts
+++ b/src/client/graphics/layers/BuildMenu.ts
@@ -460,7 +460,7 @@ export class BuildMenu extends LitElement implements Layer {
                         alt="gold"
                         width="12"
                         height="12"
-                        style="vertical-align: middle;"
+                        class="align-middle"
                       />
                     </span>
                     ${item.countable
diff --git a/src/client/graphics/layers/ChatDisplay.ts b/src/client/graphics/layers/ChatDisplay.ts
index 941b08551..4704e0f51 100644
--- a/src/client/graphics/layers/ChatDisplay.ts
+++ b/src/client/graphics/layers/ChatDisplay.ts
@@ -125,13 +125,12 @@ export class ChatDisplay extends LitElement implements Layer {
     }
     return html`
       <div
-        class="${this._hidden
-          ? "w-fit px-[10px] py-[5px]"
-          : ""} rounded-md bg-black bg-opacity-60 relative max-h-[30vh] flex flex-col-reverse overflow-y-auto w-full lg:bottom-2.5 lg:right-2.5 z-50 lg:max-w-[30vw] lg:w-full lg:w-auto"
-        style="pointer-events: auto"
+        class="pointer-events-auto ${this._hidden
+          ? "w-fit px-2.5 py-1.25"
+          : ""} rounded-md bg-black/60 relative max-h-[30vh] flex flex-col-reverse overflow-y-auto w-full lg:bottom-2.5 lg:right-2.5 z-50 lg:max-w-[30vw] lg:w-full lg:w-auto"
       >
         <div>
-          <div class="w-full bg-black/80 sticky top-0 px-[10px]">
+          <div class="w-full bg-black/80 sticky top-0 px-2.5">
             <button
               class="text-white cursor-pointer pointer-events-auto ${this
                 ._hidden
@@ -153,22 +152,21 @@ export class ChatDisplay extends LitElement implements Layer {
             <span
               class="${this.newEvents
                 ? ""
-                : "hidden"} inline-block px-2 bg-red-500 rounded-sm"
+                : "hidden"} inline-block px-2 bg-red-500 rounded-xs"
               >${this.newEvents}</span
             >
           </button>
 
           <table
-            class="w-full border-collapse text-white shadow-lg lg:text-xl text-xs ${this
+            class="w-full border-collapse text-white shadow-lg lg:text-xl text-xs pointer-events-none ${this
               ._hidden
               ? "hidden"
               : ""}"
-            style="pointer-events: auto;"
           >
             <tbody>
               ${this.chatEvents.map(
                 (chat) => html`
-                  <tr class="border-b border-opacity-0">
+                  <tr class="border-b border-gray-200/0">
                     <td class="lg:p-3 p-1 text-left">
                       ${this.getChatContent(chat)}
                     </td>
diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index 29fec73d8..cbe0ef70c 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -160,13 +160,12 @@ export class ControlPanel extends LitElement implements Layer {
         }
       </style>
       <div
-        class="${this._isVisible
-          ? "w-full sm:max-w-[320px] text-sm sm:text-base bg-gray-800/70 p-2 pr-3 sm:p-4 shadow-lg sm:rounded-lg backdrop-blur"
+        class="pointer-events-auto ${this._isVisible
+          ? "w-full sm:max-w-[320px] text-sm sm:text-base bg-gray-800/70 p-2 pr-3 sm:p-4 shadow-lg sm:rounded-lg backdrop-blur-sm"
           : "hidden"}"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
-        style="pointer-events: auto;"
       >
-        <div class="block bg-black/30 text-white mb-4 p-2 rounded">
+        <div class="block bg-black/30 text-white mb-4 p-2 rounded-sm">
           <div class="flex justify-between mb-1">
             <span class="font-bold"
               >${translateText("control_panel.troops")}:</span
@@ -192,30 +191,30 @@ export class ControlPanel extends LitElement implements Layer {
 
         <div class="relative mb-0 sm:mb-4">
           <label class="block text-white mb-1">
-            ${translateText("control_panel.attack_ratio")}:
+            ${translateText("control_panel.attack_ratio")} :
             <span
-              class="inline-flex items-center gap-1"
+              class="inline-flex items-center gap-1 [unicode-bidi:isolate]"
               dir="ltr"
-              style="unicode-bidi: isolate;"
               translate="no"
             >
               <span>${(this.attackRatio * 100).toFixed(0)}%</span>
               <span>
                 (${renderTroops(
                   (this.game?.myPlayer()?.troops() ?? 0) * this.attackRatio,
-                )})
+                )}
+                )
               </span>
             </span>
           </label>
           <div class="relative h-8">
             <!-- Background track -->
             <div
-              class="absolute left-0 right-0 top-3 h-2 bg-white/20 rounded"
+              class="absolute left-0 right-0 top-3 h-2 bg-white/20 rounded-sm"
             ></div>
             <!-- Fill track -->
             <div
-              class="absolute left-0 top-3 h-2 bg-red-500/60 rounded transition-all duration-300"
-              style="width: ${this.attackRatio * 100}%"
+              class="absolute left-0 top-3 h-2 bg-red-500/60 rounded-sm transition-all duration-300 w-(--width)"
+              style="--width: ${this.attackRatio * 100}%"
             ></div>
             <!-- Range input - exactly overlaying the visual elements -->
             <input
diff --git a/src/client/graphics/layers/EmojiTable.ts b/src/client/graphics/layers/EmojiTable.ts
index 9da4c4cee..ef3547e41 100644
--- a/src/client/graphics/layers/EmojiTable.ts
+++ b/src/client/graphics/layers/EmojiTable.ts
@@ -73,22 +73,22 @@ export class EmojiTable extends LitElement {
 
     return html`
       <div
-        class="fixed inset-0 bg-black/15 backdrop-brightness-110 flex items-start sm:items-center justify-center z-[10002] pt-4 sm:pt-0"
+        class="fixed inset-0 bg-black/15 backdrop-brightness-110 flex items-start sm:items-center justify-center z-10002 pt-4 sm:pt-0"
         @click=${this.handleBackdropClick}
       >
         <div class="relative">
           <!-- Close button -->
           <button
             class="absolute -top-3 -right-3 w-7 h-7 flex items-center justify-center
-                    bg-zinc-700 hover:bg-red-500 text-white rounded-full shadow transition-colors z-[10004]"
+                    bg-zinc-700 hover:bg-red-500 text-white rounded-full shadow-sm transition-colors z-10004"
             @click=${this.hideTable}
           >
             ✕
           </button>
 
           <div
-            class="bg-zinc-900/95 p-2 sm:p-3 rounded-[10px] z-[10003] shadow-2xl shadow-black/50 ring-1 ring-white/5 
-                   w-[calc(100vw-32px)] sm:w-[400px] max-h-[calc(100vh-60px)] overflow-y-auto"
+            class="bg-zinc-900/95 p-2 sm:p-3 rounded-[10px] z-10003 shadow-2xl shadow-black/50 ring-1 ring-white/5
+                   w-[calc(100vw-32px)] sm:w-100 max-h-[calc(100vh-60px)] overflow-y-auto"
             @contextmenu=${(e: MouseEvent) => e.preventDefault()}
             @wheel=${(e: WheelEvent) => e.stopPropagation()}
             @click=${(e: MouseEvent) => e.stopPropagation()}
diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts
index ec80e42d4..2b66f3336 100644
--- a/src/client/graphics/layers/EventsDisplay.ts
+++ b/src/client/graphics/layers/EventsDisplay.ts
@@ -153,9 +153,9 @@ export class EventsDisplay extends LitElement implements Layer {
       content: html`<img
         src="${src}"
         class="${toggleButtonSizeMap["default"]}"
-        style="filter: ${this.eventsFilters.get(category)
-          ? "grayscale(1) opacity(0.5)"
-          : "none"}"
+        style="${this.eventsFilters.get(category)
+          ? "filter: grayscale(1) opacity(0.5);"
+          : ""}"
       />`,
       onClick: () => this.toggleEventFilter(category),
       className: "cursor-pointer pointer-events-auto",
@@ -816,7 +816,7 @@ export class EventsDisplay extends LitElement implements Layer {
                           content: translateText("events_display.retaliate"),
                           onClick: () => this.handleRetaliate(attack),
                           className:
-                            "inline-block px-3 py-1 text-white rounded text-md md:text-sm cursor-pointer transition-colors duration-300 bg-red-600 hover:bg-red-700",
+                            "inline-block px-3 py-1 text-white rounded-sm text-md md:text-sm cursor-pointer transition-colors duration-300 bg-red-600 hover:bg-red-700",
                           translate: true,
                         })
                       : ""}
@@ -854,10 +854,10 @@ export class EventsDisplay extends LitElement implements Layer {
                       ? this.renderButton({
                           content: "❌",
                           onClick: () => this.emitCancelAttackIntent(attack.id),
-                          className: "text-left flex-shrink-0",
+                          className: "text-left shrink-0",
                           disabled: attack.retreating,
                         })
-                      : html`<span class="flex-shrink-0 text-blue-400"
+                      : html`<span class="shrink-0 text-blue-400"
                           >(${translateText(
                             "events_display.retreating",
                           )}...)</span
@@ -890,10 +890,10 @@ export class EventsDisplay extends LitElement implements Layer {
                           content: "❌",
                           onClick: () =>
                             this.emitCancelAttackIntent(landAttack.id),
-                          className: "text-left flex-shrink-0",
+                          className: "text-left shrink-0",
                           disabled: landAttack.retreating,
                         })
-                      : html`<span class="flex-shrink-0 text-blue-400"
+                      : html`<span class="shrink-0 text-blue-400"
                           >(${translateText(
                             "events_display.retreating",
                           )}...)</span
@@ -926,10 +926,10 @@ export class EventsDisplay extends LitElement implements Layer {
                       ? this.renderButton({
                           content: "❌",
                           onClick: () => this.emitBoatCancelIntent(boat.id()),
-                          className: "text-left flex-shrink-0",
+                          className: "text-left shrink-0",
                           disabled: boat.retreating(),
                         })
-                      : html`<span class="flex-shrink-0 text-blue-400"
+                      : html`<span class="shrink-0 text-blue-400"
                           >(${translateText(
                             "events_display.retreating",
                           )}...)</span
@@ -1026,14 +1026,14 @@ export class EventsDisplay extends LitElement implements Layer {
                 `,
                 onClick: this.toggleHidden,
                 className:
-                  "text-white cursor-pointer pointer-events-auto w-fit p-2 lg:p-3 rounded-lg bg-gray-800/70 backdrop-blur",
+                  "text-white cursor-pointer pointer-events-auto w-fit p-2 lg:p-3 rounded-lg bg-gray-800/70 backdrop-blur-sm",
               })}
             </div>
           `
         : html`
             <!-- Main Events Display -->
             <div
-              class="relative w-full sm:bottom-4 sm:right-4 z-50 sm:w-96 backdrop-blur"
+              class="relative w-full sm:bottom-4 sm:right-4 z-50 sm:w-96 backdrop-blur-sm"
             >
               <!-- Button Bar -->
               <div class="w-full p-2 lg:p-3 bg-gray-800/70 rounded-t-lg">
@@ -1083,8 +1083,7 @@ export class EventsDisplay extends LitElement implements Layer {
               >
                 <div>
                   <table
-                    class="w-full max-h-none border-collapse text-white shadow-lg lg:text-base text-md md:text-xs"
-                    style="pointer-events: auto;"
+                    class="w-full max-h-none border-collapse text-white shadow-lg lg:text-base text-md md:text-xs pointer-events-auto"
                   >
                     <tbody>
                       ${filteredEvents.map(
@@ -1123,7 +1122,7 @@ export class EventsDisplay extends LitElement implements Layer {
                                       ${event.buttons.map(
                                         (btn) => html`
                                           <button
-                                            class="inline-block px-3 py-1 text-white rounded text-md md:text-sm cursor-pointer transition-colors duration-300
+                                            class="inline-block px-3 py-1 text-white rounded-sm text-md md:text-sm cursor-pointer transition-colors duration-300
                             ${btn.className.includes("btn-info")
                                               ? "bg-blue-500 hover:bg-blue-600"
                                               : btn.className.includes(
diff --git a/src/client/graphics/layers/GameLeftSidebar.ts b/src/client/graphics/layers/GameLeftSidebar.ts
index 6c9c1360c..9b3aa2f65 100644
--- a/src/client/graphics/layers/GameLeftSidebar.ts
+++ b/src/client/graphics/layers/GameLeftSidebar.ts
@@ -87,7 +87,7 @@ export class GameLeftSidebar extends LitElement implements Layer {
   render() {
     return html`
       <aside
-        class=${`fixed top-4 left-4 z-[1000] flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-lg transition-transform duration-300 ease-out transform ${
+        class=${`fixed top-4 left-4 z-1000 flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40 backdrop-blur-xs shadow-xs rounded-lg transition-transform duration-300 ease-out transform ${
           this.isVisible ? "translate-x-0" : "hidden"
         }`}
       >
@@ -98,14 +98,17 @@ export class GameLeftSidebar extends LitElement implements Layer {
                 @contextmenu=${(e: Event) => e.preventDefault()}
               >
                 ${translateText("help_modal.ui_your_team")}
-                <span style="color: ${this.playerColor.toRgbString()}">
+                <span
+                  style="--color: ${this.playerColor.toRgbString()}"
+                  class="text-(--color)"
+                >
                   &nbsp;${this.getTranslatedPlayerTeamLabel()} &#10687;
                 </span>
               </div>
             `
           : null}
         <div
-          class=${`flex items-center gap-2 space-x-2 text-white ${
+          class=${`flex items-center gap-2 text-white ${
             this.isLeaderboardShow || this.isTeamLeaderboardShow ? "mb-2" : ""
           }`}
         >
diff --git a/src/client/graphics/layers/GameRightSidebar.ts b/src/client/graphics/layers/GameRightSidebar.ts
index 0ad1ec96b..e86317a7c 100644
--- a/src/client/graphics/layers/GameRightSidebar.ts
+++ b/src/client/graphics/layers/GameRightSidebar.ts
@@ -139,7 +139,7 @@ export class GameRightSidebar extends LitElement implements Layer {
 
     return html`
       <aside
-        class=${`w-fit flex flex-row items-center gap-3 py-2 px-3 bg-gray-800/70 backdrop-blur-sm shadow-xs rounded-lg transition-transform duration-300 ease-out transform text-white ${
+        class=${`w-fit flex flex-row items-center gap-3 py-2 px-3 bg-gray-800/70 backdrop-blur-xs shadow-xs rounded-lg transition-transform duration-300 ease-out transform text-white ${
           this._isVisible ? "translate-x-0" : "translate-x-full"
         }`}
         @contextmenu=${(e: Event) => e.preventDefault()}
diff --git a/src/client/graphics/layers/HeadsUpMessage.ts b/src/client/graphics/layers/HeadsUpMessage.ts
index 5d889dff2..e9f9849f2 100644
--- a/src/client/graphics/layers/HeadsUpMessage.ts
+++ b/src/client/graphics/layers/HeadsUpMessage.ts
@@ -59,8 +59,8 @@ export class HeadsUpMessage extends LitElement implements Layer {
     return html`
       <div
         class="flex items-center relative
-                    w-full justify-evenly h-8 lg:h-10 md:top-[70px] left-0 lg:left-4
-                    bg-opacity-60 bg-gray-900 rounded-md lg:rounded-lg
+                    w-full justify-evenly h-8 lg:h-10 md:top-17.5 left-0 lg:left-4
+                    bg-gray-900/60 rounded-md lg:rounded-lg
                     backdrop-blur-md text-white text-md lg:text-xl p-1 lg:p-2"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
diff --git a/src/client/graphics/layers/ImmunityTimer.ts b/src/client/graphics/layers/ImmunityTimer.ts
index 702a08b38..29f66fbac 100644
--- a/src/client/graphics/layers/ImmunityTimer.ts
+++ b/src/client/graphics/layers/ImmunityTimer.ts
@@ -82,7 +82,7 @@ export class ImmunityTimer extends LitElement implements Layer {
     const widthPercent = this.progressRatio * 100;
 
     return html`
-      <div class="w-full h-full flex z-[999]">
+      <div class="w-full h-full flex z-999">
         <div
           class="h-full transition-all duration-100 ease-in-out"
           style="width: ${widthPercent}%; background-color: rgba(255, 165, 0, 0.9);"
diff --git a/src/client/graphics/layers/MultiTabModal.ts b/src/client/graphics/layers/MultiTabModal.ts
index 312b092d6..868462cfb 100644
--- a/src/client/graphics/layers/MultiTabModal.ts
+++ b/src/client/graphics/layers/MultiTabModal.ts
@@ -171,8 +171,9 @@ export class MultiTabModal extends LitElement implements Layer {
             class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4"
           >
             <div
-              class="bg-red-600 dark:bg-red-500 h-2.5 rounded-full transition-all duration-1000 ease-linear"
-              style="width: ${(this.countdown / (this.duration / 1000)) * 100}%"
+              class="bg-red-600 dark:bg-red-500 h-2.5 rounded-full transition-all duration-1000 ease-linear w-(--width)"
+              style="--width: ${(this.countdown / (this.duration / 1000)) *
+              100}%"
             ></div>
           </div>
 
diff --git a/src/client/graphics/layers/PerformanceOverlay.ts b/src/client/graphics/layers/PerformanceOverlay.ts
index fb744d4a0..50a782e10 100644
--- a/src/client/graphics/layers/PerformanceOverlay.ts
+++ b/src/client/graphics/layers/PerformanceOverlay.ts
@@ -537,12 +537,6 @@ export class PerformanceOverlay extends LitElement implements Layer {
       return html``;
     }
 
-    const style = `
-      left: ${this.position.x}px;
-      top: ${this.position.y}px;
-      transform: none;
-    `;
-
     const copyLabel =
       this.copyStatus === "success"
         ? translateText("performance_overlay.copied")
@@ -557,8 +551,10 @@ export class PerformanceOverlay extends LitElement implements Layer {
 
     return html`
       <div
-        class="performance-overlay ${this.isDragging ? "dragging" : ""}"
-        style="${style}"
+        class="performance-overlay ${this.isDragging
+          ? "dragging"
+          : ""} transform-none left-(--left) top-(--top)"
+        style="--left: ${this.position.x}; --top: ${this.position.y};"
         @mousedown="${this.handleMouseDown}"
       >
         <button class="reset-button" @click="${this.handleReset}">
@@ -612,10 +608,13 @@ export class PerformanceOverlay extends LitElement implements Layer {
                 );
                 return html`<div class="layer-row">
                   <span class="layer-name" title=${layer.name}
-                    >${layer.name}</span
-                  >
+                    >${layer.name}
+                  </span>
                   <div class="layer-bar">
-                    <div class="layer-bar-fill" style="width: ${width}%;"></div>
+                    <div
+                      class="layer-bar-fill w-(--width)"
+                      style="--width: ${width}%;"
+                    ></div>
                   </div>
                   <span class="layer-metrics">
                     ${layer.avg.toFixed(2)} / ${layer.max.toFixed(2)}ms
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index e28aa9ff8..97988b40c 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -203,7 +203,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
             width="20"
             height="20"
             alt="${translateText(description)}"
-            style="vertical-align: middle;"
+            class="align-middle"
           />
           <span class="w-full text-right p-1"
             >${player.totalUnitLevels(type)}</span
@@ -285,7 +285,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
             alt=${translateText("player_info_overlay.alliance_timeout")}
             width="20"
             height="20"
-            style="vertical-align: middle;"
+            class="align-middle"
           />
           ${this.allianceExpirationText(alliance)}
         </span>`;
@@ -318,7 +318,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
           ${player.cosmetics.flag
             ? player.cosmetics.flag!.startsWith("!")
               ? html`<div
-                  class="h-8 mr-1 aspect-[3/4] player-flag"
+                  class="h-8 mr-1 aspect-3/4 player-flag"
                   ${ref((el) => {
                     if (el instanceof HTMLElement) {
                       requestAnimationFrame(() => {
@@ -328,7 +328,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
                   })}
                 ></div>`
               : html`<img
-                  class="h-8 mr-1 aspect-[3/4]"
+                  class="h-8 mr-1 aspect-3/4"
                   src=${"/flags/" + player.cosmetics.flag! + ".svg"}
                 />`
             : html``}
@@ -390,7 +390,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
                   alt=${translateText("player_info_overlay.gold")}
                   width="15"
                   height="15"
-                  style="vertical-align: middle;"
+                  class="align-middle"
                 />
                 <span class="w-full text-center"
                   >${renderNumber(player.gold())}</span
@@ -514,11 +514,11 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
 
     return html`
       <div
-        class="block lg:flex fixed top-[150px] right-4 w-full z-50 flex-col max-w-[180px]"
+        class="block lg:flex fixed top-37.5 right-4 w-full z-50 flex-col max-w-45"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
         <div
-          class="bg-gray-800/70 backdrop-blur-sm shadow-xs rounded-lg shadow-lg transition-all duration-300  text-white text-lg md:text-base ${containerClasses}"
+          class="bg-gray-800/70 backdrop-blur-xs shadow-xs rounded-lg shadow-lg transition-all duration-300  text-white text-lg md:text-base ${containerClasses}"
         >
           ${this.player !== null ? this.renderPlayerInfo(this.player) : ""}
           ${this.unit !== null ? this.renderUnitInfo(this.unit) : ""}
diff --git a/src/client/graphics/layers/PlayerPanel.ts b/src/client/graphics/layers/PlayerPanel.ts
index b742ff49c..20883f88e 100644
--- a/src/client/graphics/layers/PlayerPanel.ts
+++ b/src/client/graphics/layers/PlayerPanel.ts
@@ -391,7 +391,7 @@ export class PlayerPanel extends LitElement implements Layer {
     const label = secs !== null ? renderDuration(secs) : null;
     const dotCls =
       secs !== null
-        ? `mx-1 h-[4px] w-[4px] rounded-full bg-red-400/70 ${secs <= 10 ? "animate-pulse" : ""}`
+        ? `mx-1 size-1 rounded-full bg-red-400/70 ${secs <= 10 ? "animate-pulse" : ""}`
         : "";
 
     return html`
@@ -402,12 +402,7 @@ export class PlayerPanel extends LitElement implements Layer {
             shadow-[inset_0_0_8px_rgba(239,68,68,0.12)]"
           title=${translateText("player_panel.traitor")}
         >
-          <img
-            src=${traitorIcon}
-            alt=""
-            aria-hidden="true"
-            class="h-[18px] w-[18px]"
-          />
+          <img src=${traitorIcon} alt="" aria-hidden="true" class="size-4.5" />
           <span class="tracking-tight"
             >${translateText("player_panel.traitor")}</span
           >
@@ -498,8 +493,8 @@ export class PlayerPanel extends LitElement implements Layer {
     return html`
       <div class="mb-1 flex justify-between gap-2">
         <div
-          class="inline-flex items-center gap-1.5 rounded-lg bg-white/[0.04] px-3 py-1.5 
-                    text-white w-[140px] min-w-[140px] flex-shrink-0"
+          class="inline-flex items-center gap-1.5 rounded-lg bg-white/4 px-3 py-1.5 shrink-0
+                    text-white w-35"
         >
           <span class="mr-0.5">💰</span>
           <span translate="no" class="tabular-nums w-[5ch] font-semibold">
@@ -511,8 +506,8 @@ export class PlayerPanel extends LitElement implements Layer {
         </div>
 
         <div
-          class="inline-flex items-center gap-1.5 rounded-lg bg-white/[0.04] px-3 py-1.5 
-                    text-white w-[140px] min-w-[140px] flex-shrink-0"
+          class="inline-flex items-center gap-1.5 rounded-lg bg-white/4 px-3 py-1.5
+                    text-white w-35 shrink-0"
         >
           <span class="mr-0.5">🛡️</span>
           <span translate="no" class="tabular-nums w-[5ch] font-semibold">
@@ -530,7 +525,7 @@ export class PlayerPanel extends LitElement implements Layer {
     return html`
       <ui-divider></ui-divider>
       <button
-        class="flex w-full items-center justify-between rounded-xl bg-white/[0.05] px-3 py-2 text-left text-white hover:bg-white/[0.08] active:scale-[0.995] transition"
+        class="flex w-full items-center justify-between rounded-xl bg-white/5 px-3 py-2 text-left text-white hover:bg-white/8 active:scale-[0.995] transition"
         @click=${(e: Event) => this.handleToggleRocketDirection(e)}
       >
         <div class="flex flex-col">
@@ -551,7 +546,7 @@ export class PlayerPanel extends LitElement implements Layer {
   private renderStats(other: PlayerView, my: PlayerView) {
     return html`
       <!-- Betrayals -->
-      <div class="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2">
+      <div class="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2">
         <div
           class="flex items-center gap-2 text-[15px] font-medium text-zinc-100 leading-snug"
         >
@@ -564,7 +559,7 @@ export class PlayerPanel extends LitElement implements Layer {
       </div>
 
       <!-- Trading / Embargo -->
-      <div class="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2">
+      <div class="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2">
         <div
           class="flex items-center gap-2 text-[15px] font-medium text-zinc-100 leading-snug"
         >
@@ -605,7 +600,7 @@ export class PlayerPanel extends LitElement implements Layer {
           </div>
           <span
             aria-labelledby="alliances-title"
-            class="inline-flex items-center justify-center min-w-[20px] h-5 px-[6px] rounded-[10px]
+            class="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-[10px]
                  text-[12px] text-zinc-100 bg-white/10 border border-white/20"
           >
             ${allies.length}
@@ -616,7 +611,7 @@ export class PlayerPanel extends LitElement implements Layer {
           class="rounded-lg bg-zinc-800/70 ring-1 ring-zinc-700/60 w-full min-w-0"
         >
           <ul
-            class="max-h-[120px] overflow-y-auto p-2
+            class="max-h-30 overflow-y-auto p-2
                  flex flex-wrap gap-1.5
                  scrollbar-thin scrollbar-thumb-zinc-600 hover:scrollbar-thumb-zinc-500 scrollbar-track-zinc-800"
             role="list"
@@ -631,9 +626,9 @@ export class PlayerPanel extends LitElement implements Layer {
                   (p) =>
                     html`<li
                       class="max-w-full inline-flex items-center gap-1.5
-                             rounded-md border border-white/10 bg-white/[0.05]
+                             rounded-md border border-white/10 bg-white/5
                              px-2.5 py-1 text-[14px] text-zinc-100
-                             hover:bg-white/[0.08] active:scale-[0.99] transition"
+                             hover:bg-white/8 active:scale-[0.99] transition"
                       title=${p.name()}
                     >
                       <span class="truncate">${p.name()}</span>
@@ -648,7 +643,7 @@ export class PlayerPanel extends LitElement implements Layer {
   private renderAllianceExpiry() {
     if (this.allianceExpiryText === null) return html``;
     return html`
-      <div class="grid grid-cols-[auto,1fr] gap-x-6 gap-y-2 text-base">
+      <div class="grid grid-cols-[auto_1fr] gap-x-6 gap-y-2 text-base">
         <div class="font-semibold text-zinc-300">
           ${translateText("player_panel.alliance_time_remaining")}
         </div>
@@ -859,14 +854,14 @@ export class PlayerPanel extends LitElement implements Layer {
       </style>
 
       <div
-        class="fixed inset-0 z-[10001] flex items-center justify-center overflow-auto
+        class="fixed inset-0 z-10001 flex items-center justify-center overflow-auto
                bg-black/15 backdrop-brightness-110 pointer-events-auto"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
         @wheel=${(e: MouseEvent) => e.stopPropagation()}
         @click=${() => this.hide()}
       >
         <div
-          class="pointer-events-auto max-h-[90vh] min-w-[300px] max-w-[400px] px-4 py-2"
+          class="pointer-events-auto max-h-[90vh] min-w-75 max-w-100 px-4 py-2"
           @click=${(e: MouseEvent) => e.stopPropagation()}
         >
           <div class="relative">
@@ -877,18 +872,20 @@ export class PlayerPanel extends LitElement implements Layer {
               class=${`relative w-full bg-zinc-900/95 rounded-2xl text-zinc-100 shadow-2xl shadow-black/50
                  ${other.isTraitor() ? "traitor-ring" : "ring-1 ring-white/5"}`}
             >
-              <div style="overflow: visible;">
+              <div class="overflow-visible">
                 <div
-                  style="max-height: calc(100vh - 120px - env(safe-area-inset-bottom)); overflow:auto; -webkit-overflow-scrolling: touch; resize: vertical;"
+                  class="overflow-auto [-webkit-overflow-scrolling:touch] resize-y max-h-[calc(100vh-120px-env(safe-area-inset-bottom))]"
                 >
-                  <button
-                    @click=${this.handleClose}
-                    class="absolute right-3 top-3 z-20 flex h-7 w-7 items-center justify-center rounded-full bg-zinc-700 text-white shadow hover:bg-red-500 transition-colors"
-                    aria-label=${translateText("common.close") || "Close"}
-                    title=${translateText("common.close") || "Close"}
-                  >
-                    ✕
-                  </button>
+                  <div class="sticky top-0 z-20 flex justify-end p-2">
+                    <button
+                      @click=${this.handleClose}
+                      class="absolute right-3 top-3 z-20 flex h-7 w-7 items-center justify-center rounded-full bg-zinc-700 text-white shadow-sm hover:bg-red-500 transition-colors"
+                      aria-label=${translateText("common.close") || "Close"}
+                      title=${translateText("common.close") || "Close"}
+                    >
+                      ✕
+                    </button>
+                  </div>
 
                   <div
                     class="p-6 flex flex-col gap-2 font-sans antialiased text-[14.5px] leading-relaxed"
diff --git a/src/client/graphics/layers/ReplayPanel.ts b/src/client/graphics/layers/ReplayPanel.ts
index e5265a5e3..eb5cf4f1a 100644
--- a/src/client/graphics/layers/ReplayPanel.ts
+++ b/src/client/graphics/layers/ReplayPanel.ts
@@ -66,7 +66,7 @@ export class ReplayPanel extends LitElement implements Layer {
 
     return html`
       <div
-        class="p-2 bg-gray-800/70 backdrop-blur-sm shadow-xs rounded-lg"
+        class="p-2 bg-gray-800/70 backdrop-blur-xs shadow-xs rounded-lg"
         @contextmenu=${(e: Event) => e.preventDefault()}
       >
         <label class="block mb-2 text-white" translate="no">
@@ -93,7 +93,7 @@ export class ReplayPanel extends LitElement implements Layer {
 
     return html`
       <button
-        class="py-0.5 px-1 text-sm text-white rounded border transition border-gray-500 ${backgroundColor} hover:border-gray-200"
+        class="py-0.5 px-1 text-sm text-white rounded-sm border transition border-gray-500 ${backgroundColor} hover:border-gray-200"
         @click=${() => this.onReplaySpeedChange(value)}
       >
         ${label}
diff --git a/src/client/graphics/layers/SendResourceModal.ts b/src/client/graphics/layers/SendResourceModal.ts
index 5e7b3a1ed..38495a6a1 100644
--- a/src/client/graphics/layers/SendResourceModal.ts
+++ b/src/client/graphics/layers/SendResourceModal.ts
@@ -255,7 +255,7 @@ export class SendResourceModal extends LitElement {
         <button
           type="button"
           @click=${() => this.closeModal()}
-          class="absolute -top-3 -right-3 flex h-7 w-7 items-center justify-center rounded-full bg-zinc-700 text-white shadow hover:bg-red-500 transition-colors focus-visible:ring-2 focus-visible:ring-white/30 focus:outline-none"
+          class="absolute -top-3 -right-3 flex h-7 w-7 items-center justify-center rounded-full bg-zinc-700 text-white shadow-sm hover:bg-red-500 transition-colors focus-visible:ring-2 focus-visible:ring-white/30 focus:outline-hidden"
           aria-label=${this.i18n.closeLabel()}
           title=${this.i18n.closeLabel()}
         >
@@ -361,7 +361,7 @@ export class SendResourceModal extends LitElement {
               const clamped = Math.min(raw, hardMax);
               this.sendAmount = this.clampSend(clamped);
             }}
-            class="w-full appearance-none bg-transparent range-x focus:outline-none"
+            class="w-full appearance-none bg-transparent range-x focus:outline-hidden"
             aria-label=${this.i18n.ariaSlider()}
             aria-valuemin="0"
             aria-valuemax=${hardMax}
@@ -374,11 +374,11 @@ export class SendResourceModal extends LitElement {
 
           <!-- Tooltip -->
           <div
-            class="pointer-events-none absolute -top-6 -translate-x-1/2 select-none"
-            style="left:${percentNow}%"
+            class="pointer-events-none absolute -top-6 -translate-x-1/2 select-none left-(--pos)"
+            style="--pos: ${percentNow}%"
           >
             <div
-              class="rounded bg-[#0f1116] ring-1 ring-zinc-700 text-zinc-100 px-1.5 py-0.5 text-[12px] shadow whitespace-nowrap w-max z-50"
+              class="rounded-sm bg-[#0f1116] ring-1 ring-zinc-700 text-zinc-100 px-1.5 py-0.5 text-[12px] shadow-sm whitespace-nowrap w-max z-50"
             >
               ${percentNow}% • ${this.format(this.sendAmount)}
             </div>
@@ -388,16 +388,16 @@ export class SendResourceModal extends LitElement {
           ${capPercent !== null
             ? html`
                 <div
-                  class="pointer-events-none absolute top-1/2 -translate-y-1/2 h-3 w-[2px] bg-amber-400/80 shadow"
-                  style="left:${capPercent}%;"
+                  class="pointer-events-none absolute top-1/2 -translate-y-1/2 h-3 w-0.5 bg-amber-400/80 shadow-sm left-(--pos)"
+                  style="--pos:${capPercent}%;"
                   title=${this.i18n.capTooltip()}
                 ></div>
                 <div
-                  class="pointer-events-none absolute top-full mt-1.5 -translate-x-1/2 select-none"
-                  style="left:${capPercent}%"
+                  class="pointer-events-none absolute top-full mt-1.5 -translate-x-1/2 select-none left-(--pos)"
+                  style="--pos:${capPercent}%"
                 >
                   <div
-                    class="rounded bg-[#0f1116] ring-1 ring-amber-400/40 text-amber-200 px-1 py-0.5 text-[11px] shadow whitespace-nowrap"
+                    class="rounded-sm bg-[#0f1116] ring-1 ring-amber-400/40 text-amber-200 px-1 py-0.5 text-[11px] shadow-sm whitespace-nowrap"
                   >
                     ${this.i18n.cap()}
                   </div>
@@ -451,7 +451,7 @@ export class SendResourceModal extends LitElement {
         <button
           class="h-10 min-w-24 rounded-lg px-3 text-sm font-semibold
                  text-zinc-100 bg-zinc-800 ring-1 ring-zinc-700
-                 hover:bg-zinc-700 focus:outline-none
+                 hover:bg-zinc-700 focus:outline-hidden
                  focus-visible:ring-2 focus-visible:ring-white/20"
           @click=${() => this.closeModal()}
         >
@@ -460,7 +460,7 @@ export class SendResourceModal extends LitElement {
         <button
           class="h-10 min-w-24 rounded-lg px-3 text-sm font-semibold text-white
                  bg-indigo-600 enabled:hover:bg-indigo-500
-                 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-400/50
+                 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-indigo-400/50
                  disabled:cursor-not-allowed disabled:opacity-50"
           ?disabled=${disabled}
           @click=${() => this.confirm()}
@@ -541,9 +541,7 @@ export class SendResourceModal extends LitElement {
     const allowed = this.limitAmount(this.sendAmount);
 
     return html`
-      <div
-        class="absolute inset-0 z-[1100] flex items-center justify-center p-4"
-      >
+      <div class="absolute inset-0 z-1100 flex items-center justify-center p-4">
         <div
           class="absolute inset-0 bg-black/60 rounded-2xl"
           @click=${() => this.closeModal()}
@@ -553,7 +551,7 @@ export class SendResourceModal extends LitElement {
           role="dialog"
           aria-modal="true"
           aria-labelledby="send-title"
-          class="relative z-10 w-full max-w-[540px] focus:outline-none"
+          class="relative z-10 w-full max-w-135 focus:outline-hidden"
           tabindex="0"
           @keydown=${this.handleKeydown}
         >
diff --git a/src/client/graphics/layers/SettingsModal.ts b/src/client/graphics/layers/SettingsModal.ts
index c13890d83..029324142 100644
--- a/src/client/graphics/layers/SettingsModal.ts
+++ b/src/client/graphics/layers/SettingsModal.ts
@@ -189,7 +189,7 @@ export class SettingsModal extends LitElement implements Layer {
 
     return html`
       <div
-        class="modal-overlay fixed inset-0 bg-black/50 backdrop-blur-sm z-[2000] flex items-center justify-center p-4"
+        class="modal-overlay fixed inset-0 bg-black/50 backdrop-blur-xs z-2000 flex items-center justify-center p-4"
         @contextmenu=${(e: Event) => e.preventDefault()}
       >
         <div
@@ -204,7 +204,7 @@ export class SettingsModal extends LitElement implements Layer {
                 alt="settings"
                 width="24"
                 height="24"
-                style="vertical-align: middle;"
+                class="align-middle"
               />
               <h2 class="text-xl font-semibold text-white">
                 ${translateText("user_setting.tab_basic")}
@@ -218,9 +218,9 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
           </div>
 
-          <div class="p-4 space-y-3">
+          <div class="p-4 flex flex-col gap-3">
             <div
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
             >
               <img src=${musicIcon} alt="musicIcon" width="20" height="20" />
               <div class="flex-1">
@@ -242,7 +242,7 @@ export class SettingsModal extends LitElement implements Layer {
             </div>
 
             <div
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
             >
               <img
                 src=${musicIcon}
@@ -269,7 +269,7 @@ export class SettingsModal extends LitElement implements Layer {
             </div>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onTerrainButtonClick}"
             >
               <img src=${treeIcon} alt="treeIcon" width="20" height="20" />
@@ -289,7 +289,7 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onToggleEmojisButtonClick}"
             >
               <img src=${emojiIcon} alt="emojiIcon" width="20" height="20" />
@@ -309,7 +309,7 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onToggleDarkModeButtonClick}"
             >
               <img
@@ -334,7 +334,7 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onToggleSpecialEffectsButtonClick}"
             >
               <img
@@ -359,7 +359,7 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onToggleAlertFrameButtonClick}"
             >
               <img src=${sirenIcon} alt="alertFrame" width="20" height="20" />
@@ -379,7 +379,7 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onToggleStructureSpritesButtonClick}"
             >
               <img
@@ -404,7 +404,7 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onToggleCursorCostLabelButtonClick}"
             >
               <img
@@ -429,7 +429,7 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onToggleRandomNameModeButtonClick}"
             >
               <img src=${ninjaIcon} alt="ninjaIcon" width="20" height="20" />
@@ -449,7 +449,7 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onToggleLeftClickOpensMenu}"
             >
               <img src=${mouseIcon} alt="mouseIcon" width="20" height="20" />
@@ -469,7 +469,7 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded-sm text-white transition-colors"
               @click="${this.onTogglePerformanceOverlayButtonClick}"
             >
               <img
@@ -495,7 +495,7 @@ export class SettingsModal extends LitElement implements Layer {
 
             <div class="border-t border-slate-600 pt-3 mt-4">
               <button
-                class="flex gap-3 items-center w-full text-left p-3 hover:bg-red-600/20 rounded text-red-400 transition-colors"
+                class="flex gap-3 items-center w-full text-left p-3 hover:bg-red-600/20 rounded-sm text-red-400 transition-colors"
                 @click="${this.onExitButtonClick}"
               >
                 <img src=${exitIcon} alt="exitIcon" width="20" height="20" />
diff --git a/src/client/graphics/layers/SpawnTimer.ts b/src/client/graphics/layers/SpawnTimer.ts
index 393cf96d4..66b1053b1 100644
--- a/src/client/graphics/layers/SpawnTimer.ts
+++ b/src/client/graphics/layers/SpawnTimer.ts
@@ -93,13 +93,13 @@ export class SpawnTimer extends LitElement implements Layer {
     }
 
     return html`
-      <div class="w-full h-full flex z-[999]">
+      <div class="w-full h-full flex z-999">
         ${this.ratios.map((ratio, i) => {
           const color = this.colors[i] || "rgba(0, 0, 0, 0.5)";
           return html`
             <div
-              class="h-full transition-all duration-100 ease-in-out"
-              style="width: ${ratio * 100}%; background-color: ${color};"
+              class="h-full transition-all duration-100 ease-in-out w-(--width) bg-(--bg)"
+              style="--width: ${ratio * 100}%; --bg: ${color};"
             ></div>
           `;
         })}
diff --git a/src/client/graphics/layers/TeamStats.ts b/src/client/graphics/layers/TeamStats.ts
index 58feb7f39..edbd881cd 100644
--- a/src/client/graphics/layers/TeamStats.ts
+++ b/src/client/graphics/layers/TeamStats.ts
@@ -129,8 +129,8 @@ export class TeamStats extends LitElement implements Layer {
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >
         <div
-          class="grid w-full"
-          style="grid-template-columns: repeat(${this.showUnits ? 5 : 4}, 1fr);"
+          class="grid w-full grid-cols-[repeat(var(--cols),1fr)]"
+          style="--cols:${this.showUnits ? 5 : 4};"
         >
           <!-- Header -->
           <div class="contents font-bold bg-slate-700/50">
diff --git a/src/client/graphics/layers/UnitDisplay.ts b/src/client/graphics/layers/UnitDisplay.ts
index b63a48387..6ea196ec3 100644
--- a/src/client/graphics/layers/UnitDisplay.ts
+++ b/src/client/graphics/layers/UnitDisplay.ts
@@ -130,9 +130,9 @@ export class UnitDisplay extends LitElement implements Layer {
 
     return html`
       <div
-        class="hidden 2xl:flex lg:flex fixed bottom-4 left-1/2 transform -translate-x-1/2 z-[1100] 2xl:flex-row xl:flex-col lg:flex-col 2xl:gap-5 xl:gap-2 lg:gap-2 justify-center items-center"
+        class="hidden 2xl:flex lg:flex fixed bottom-4 left-1/2 transform -translate-x-1/2 z-1100 2xl:flex-row xl:flex-col lg:flex-col 2xl:gap-5 xl:gap-2 lg:gap-2 justify-center items-center"
       >
-        <div class="bg-gray-800/70 backdrop-blur-sm rounded-lg p-0.5">
+        <div class="bg-gray-800/70 backdrop-blur-xs rounded-lg p-0.5">
           <div class="grid grid-rows-1 auto-cols-max grid-flow-col gap-1 w-fit">
             ${this.renderUnitItem(
               cityIcon,
@@ -178,7 +178,7 @@ export class UnitDisplay extends LitElement implements Layer {
             )}
           </div>
         </div>
-        <div class="bg-gray-800/70 backdrop-blur-sm rounded-lg p-0.5 w-fit">
+        <div class="bg-gray-800/70 backdrop-blur-xs rounded-lg p-0.5 w-fit">
           <div class="grid grid-rows-1 auto-cols-max grid-flow-col gap-1">
             ${this.renderUnitItem(
               warshipIcon,
@@ -242,7 +242,7 @@ export class UnitDisplay extends LitElement implements Layer {
         ${hovered
           ? html`
               <div
-                class="absolute -top-[250%] left-1/2 -translate-x-1/2 text-gray-200 text-center w-max text-xs bg-gray-800/90 backdrop-blur-sm rounded p-1 z-20 shadow-lg pointer-events-none"
+                class="absolute -top-[250%] left-1/2 -translate-x-1/2 text-gray-200 text-center w-max text-xs bg-gray-800/90 backdrop-blur-xs rounded-sm p-1 z-20 shadow-lg pointer-events-none"
               >
                 <div class="font-bold text-sm mb-1">
                   ${translateText(
@@ -264,9 +264,9 @@ export class UnitDisplay extends LitElement implements Layer {
         <div
           class="${this.canBuild(unitType)
             ? ""
-            : "opacity-40"} border border-slate-500 rounded pr-2 pb-1 flex items-center gap-2 cursor-pointer 
+            : "opacity-40"} border border-slate-500 rounded-sm pr-2 pb-1 flex items-center gap-2 cursor-pointer
              ${selected ? "hover:bg-gray-400/10" : "hover:bg-gray-800"}
-             rounded text-white ${selected ? "bg-slate-400/20" : ""}"
+             rounded-sm text-white ${selected ? "bg-slate-400/20" : ""}"
           @click=${() => {
             if (selected) {
               this.uiState.ghostStructure = null;
@@ -302,11 +302,7 @@ export class UnitDisplay extends LitElement implements Layer {
             ${hotkey.toUpperCase()}
           </div>`}
           <div class="flex items-center gap-1 pt-1">
-            <img
-              src=${icon}
-              alt=${structureKey}
-              style="vertical-align: middle; width: 24px; height: 24px;"
-            />
+            <img src=${icon} alt=${structureKey} class="align-middle size-6" />
             ${number !== null ? renderNumber(number) : null}
           </div>
         </div>
diff --git a/src/client/graphics/layers/WinModal.ts b/src/client/graphics/layers/WinModal.ts
index d044fc3e5..cf4c0535c 100644
--- a/src/client/graphics/layers/WinModal.ts
+++ b/src/client/graphics/layers/WinModal.ts
@@ -56,7 +56,7 @@ export class WinModal extends LitElement implements Layer {
     return html`
       <div
         class="${this.isVisible
-          ? "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-800/70 p-6 rounded-lg z-[9999] shadow-2xl backdrop-blur-sm text-white w-[350px] max-w-[90%] md:w-[700px] md:max-w-[700px] animate-fadeIn"
+          ? "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-gray-800/70 p-6 shrink-0 rounded-lg z-9999 shadow-2xl backdrop-blur-xs text-white w-87.5 max-w-[90%] md:w-175 animate-fadeIn"
           : "hidden"}"
       >
         <h2 class="m-0 mb-4 text-[26px] text-center text-white">
@@ -70,13 +70,13 @@ export class WinModal extends LitElement implements Layer {
         >
           <button
             @click=${this._handleExit}
-            class="flex-1 px-3 py-3 text-base cursor-pointer bg-blue-500/60 text-white border-0 rounded transition-all duration-200 hover:bg-blue-500/80 hover:-translate-y-px active:translate-y-px"
+            class="flex-1 px-3 py-3 text-base cursor-pointer bg-blue-500/60 text-white border-0 rounded-sm transition-all duration-200 hover:bg-blue-500/80 hover:-translate-y-px active:translate-y-px"
           >
             ${translateText("win_modal.exit")}
           </button>
           <button
             @click=${this.hide}
-            class="flex-1 px-3 py-3 text-base cursor-pointer bg-blue-500/60 text-white border-0 rounded transition-all duration-200 hover:bg-blue-500/80 hover:-translate-y-px active:translate-y-px"
+            class="flex-1 px-3 py-3 text-base cursor-pointer bg-blue-500/60 text-white border-0 rounded-sm transition-all duration-200 hover:bg-blue-500/80 hover:-translate-y-px active:translate-y-px"
           >
             ${this.isWin
               ? translateText("win_modal.keep")
@@ -123,13 +123,14 @@ export class WinModal extends LitElement implements Layer {
 
   renderYoutubeTutorial() {
     return html`
-      <div class="text-center mb-6 bg-black/30 p-2.5 rounded">
+      <div class="text-center mb-6 bg-black/30 p-2.5 rounded-sm">
         <h3 class="text-xl font-semibold text-white mb-3">
           ${translateText("win_modal.youtube_tutorial")}
         </h3>
-        <div class="relative w-full" style="padding-bottom: 56.25%;">
+        <!-- 56.25% = 9:16 -->
+        <div class="relative w-full pb-[56.25%]">
           <iframe
-            class="absolute top-0 left-0 w-full h-full rounded"
+            class="absolute top-0 left-0 w-full h-full rounded-sm"
             src="${this.isVisible
               ? "https://www.youtube.com/embed/EN2oOog3pSs"
               : ""}"
@@ -145,7 +146,7 @@ export class WinModal extends LitElement implements Layer {
 
   renderPatternButton() {
     return html`
-      <div class="text-center mb-6 bg-black/30 p-2.5 rounded">
+      <div class="text-center mb-6 bg-black/30 p-2.5 rounded-sm">
         <h3 class="text-xl font-semibold text-white mb-3">
           ${translateText("win_modal.support_openfront")}
         </h3>
@@ -215,7 +216,7 @@ export class WinModal extends LitElement implements Layer {
   }
 
   steamWishlist(): TemplateResult {
-    return html`<p class="m-0 mb-5 text-center bg-black/30 p-2.5 rounded">
+    return html`<p class="m-0 mb-5 text-center bg-black/30 p-2.5 rounded-sm">
       <a
         href="https://store.steampowered.com/app/3560670"
         target="_blank"
@@ -229,7 +230,7 @@ export class WinModal extends LitElement implements Layer {
 
   discordDisplay(): TemplateResult {
     return html`
-      <div class="text-center mb-6 bg-black/30 p-2.5 rounded">
+      <div class="text-center mb-6 bg-black/30 p-2.5 rounded-sm">
         <h3 class="text-xl font-semibold text-white mb-3">
           ${translateText("win_modal.join_discord")}
         </h3>
@@ -240,7 +241,7 @@ export class WinModal extends LitElement implements Layer {
           href="https://discord.com/invite/openfront"
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-block px-6 py-3 bg-indigo-600 text-white rounded font-semibold transition-all duration-200 hover:bg-indigo-700 hover:-translate-y-px no-underline"
+          class="inline-block px-6 py-3 bg-indigo-600 text-white rounded-sm font-semibold transition-all duration-200 hover:bg-indigo-700 hover:-translate-y-px no-underline"
         >
           ${translateText("win_modal.join_server")}
         </a>
diff --git a/src/client/styles.css b/src/client/styles.css
index e8e7f4ae2..37563229b 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -1,6 +1,35 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+
+@custom-variant hover (&:hover);
+
+@theme {
+  --default-ring-width: 3px;
+  --default-ring-color: var(--color-blue-500);
+}
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: var(--color-gray-400);
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  dialog {
+    margin: auto;
+  }
+}
 
 * {
   -webkit-box-sizing: border-box;
diff --git a/src/client/utilities/RenderUnitTypeOptions.ts b/src/client/utilities/RenderUnitTypeOptions.ts
index 0392935d6..4465e0937 100644
--- a/src/client/utilities/RenderUnitTypeOptions.ts
+++ b/src/client/utilities/RenderUnitTypeOptions.ts
@@ -28,8 +28,9 @@ export function renderUnitTypeOptions({
   return unitOptions.map(
     ({ type, translationKey }) => html`
       <label
-        class="option-card ${disabledUnits.includes(type) ? "" : "selected"}"
-        style="width: 140px;"
+        class="option-card ${disabledUnits.includes(type)
+          ? ""
+          : "selected"} w-35"
       >
         <div class="checkbox-icon"></div>
         <input
@@ -40,7 +41,7 @@ export function renderUnitTypeOptions({
             toggleUnit(type, checked);
           }}
         />
-        <div class="option-card-title" style="text-align: center;">
+        <div class="option-card-title text-center">
           ${translateText(translationKey)}
         </div>
       </label>
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100755
index 8e86f6878..000000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// tailwind.config.js
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./index.html", "./src/**/*.{html,ts,js}"],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-  darkMode: "class",
-};
diff --git a/tsconfig.json b/tsconfig.json
index 3ad4a2bc3..a4c5f7cc3 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
     // Modules
     "module": "ESNext",
     "rootDir": ".",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "baseUrl": ".",
     "paths": {
       "resources/*": ["resources/*"]
diff --git a/vite.config.ts b/vite.config.ts
index e02a03522..7c4d772c0 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,3 +1,4 @@
+import tailwindcss from "@tailwindcss/vite";
 import { execSync } from "child_process";
 import path from "path";
 import { fileURLToPath } from "url";
@@ -67,6 +68,7 @@ export default defineConfig(({ mode }) => {
           },
         ],
       }),
+      tailwindcss(),
     ],
 
     define: {