update ui (#1368)

## Description:

Center pop & gold information, and split up & remove the top bar.

Before:

<img width="1913" alt="Screenshot 2025-07-07 at 7 54 55 PM"
src="https://github.com/user-attachments/assets/8ab59102-1f0e-4023-905f-e0b1b2fa73a2"
/>


After:

<img width="1916" alt="Screenshot 2025-07-07 at 7 53 02 PM"
src="https://github.com/user-attachments/assets/06c885e3-a179-4447-9d1d-0da3849e726d"
/>


reference:

![image](https://github.com/user-attachments/assets/8c985a1a-e232-45ce-9af7-c1981df7fb15)

## 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
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

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

evan

src/client/graphics/layers/ReplayPanel.ts

@@ -10,6 +10,10 @@ import {
 import { translateText } from "../../Utils";
 import { Layer } from "./Layer";
 
+export class ShowReplayPanelEvent {
+  constructor(public visible: boolean = true) {}
+}
+
 @customElement("replay-panel")
 export class ReplayPanel extends LitElement implements Layer {
   public game: GameView | undefined;
@@ -28,7 +32,13 @@ export class ReplayPanel extends LitElement implements Layer {
     return this; // Enable Tailwind CSS
   }
 
-  init() {}
+  init() {
+    if (this.eventBus) {
+      this.eventBus.on(ShowReplayPanelEvent, (event: ShowReplayPanelEvent) => {
+        this.visible = event.visible;
+      });
+    }
+  }
 
   tick() {
     if (!this.visible) return;
@@ -52,7 +62,7 @@ export class ReplayPanel extends LitElement implements Layer {
 
     return html`
       <div
-        class="bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-es-sm lg:rounded-lg backdrop-blur-md"
+        class="flex-shrink-0 bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-es-sm lg:rounded-lg backdrop-blur-md"
         @contextmenu=${(e: Event) => e.preventDefault()}
       >
         <label class="block mb-1 text-white" translate="no">