replace leave lobby popup with custom popup (#4449)

## Description:
old:
<img width="1009" height="491" alt="image"
src="https://github.com/user-attachments/assets/0b95877c-dac7-4025-bdfa-62ab6879d208"
/>

new:
<img width="1017" height="561" alt="image"
src="https://github.com/user-attachments/assets/cfb49b31-eb46-4d64-bd9e-3f25bb7cd0fb"
/>




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

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

w.o.n

tests/client/LeaderboardModal.test.ts

@@ -303,7 +303,7 @@ describe("LeaderboardModal", () => {
       expect(modal.tagName.toLowerCase()).toBe("leaderboard-modal");
     });
 
-    it("should close on Escape when open", () => {
+    it("should close on Escape when open", async () => {
       const mockModalEl = { open: vi.fn(), close: vi.fn() };
       Object.defineProperty(modal, "modalEl", {
         get: () => mockModalEl,
@@ -317,6 +317,9 @@ describe("LeaderboardModal", () => {
       );
 
       window.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+      // handleKeyDown awaits confirmBeforeClose() before closing, so the close
+      // is deferred to a later microtask — flush it before asserting.
+      await new Promise((resolve) => setTimeout(resolve, 0));
       expect((modal as unknown as { isModalOpen: boolean }).isModalOpen).toBe(
         false,
       );