From 5cf9220c6725839667b92488a209bc65433673b1 Mon Sep 17 00:00:00 2001
From: FloPinguin <25036848+FloPinguin@users.noreply.github.com>
Date: Fri, 12 Jun 2026 18:23:42 +0200
Subject: [PATCH] Fix modal background missing in dev mode by reordering CSS
 imports

---
 src/client/Main.ts | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/client/Main.ts b/src/client/Main.ts
index d63f691c6..cb5011275 100644
--- a/src/client/Main.ts
+++ b/src/client/Main.ts
@@ -17,6 +17,8 @@ import {
   USER_SETTINGS_CHANGED_EVENT,
   UserSettings,
 } from "../core/game/UserSettings";
+// CSS imports must come before component imports so that Tailwind styles
+// are in the DOM when shadow-DOM components call documentStylesSheet().
 import "./AccountModal";
 import { getUserMe, invalidateUserMe } from "./Api";
 import { userAuth } from "./Auth";
@@ -66,6 +68,12 @@ import {
   isInIframe,
   translateText,
 } from "./Utils";
+import "./styles.css";
+import "./styles/core/typography.css";
+import "./styles/core/variables.css";
+import "./styles/layout/container.css";
+import "./styles/layout/header.css";
+import "./styles/modal/chat.css";
 import { installSafariPinchZoomBlocker } from "./utilities/DisableSafariPinchZoom";
 
 import "./components/DesktopNavBar";
@@ -76,12 +84,6 @@ import "./components/PlayPage";
 import "./components/RankedModal";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
-import "./styles.css";
-import "./styles/core/typography.css";
-import "./styles/core/variables.css";
-import "./styles/layout/container.css";
-import "./styles/layout/header.css";
-import "./styles/modal/chat.css";
 
 function updateAccountNavButton(userMeResponse: UserMeResponse | false) {
   const button = document.getElementById("nav-account-button");