fix messages button styling

src/ui/render.js

@@ -1232,11 +1232,16 @@ function getEnemyType(enemyId) {
 
 export function renderRelicSelection(root) {
     import("../data/relics.js").then(({ RELICS, START_RELIC_CHOICES }) => {
+        import("../data/messages.js").then(({ getAllMessages }) => {
             const relicChoices = START_RELIC_CHOICES.slice(0, 3); // Show first 3 relics
 
             root.app.innerHTML = `
             <div class="game-screen relic-select">
               <div class="game-header">
+                <button class="messages-button" data-action="show-messages">
+                  Inbox
+                  <span class="message-count-badge">${getAllMessages().length}</span>
+                </button>
                 <div class="game-logo relic-title-logo">
                   <svg width="600" height="240" viewBox="0 0 600 240" xmlns="http://www.w3.org/2000/svg">
                     <defs>
@@ -1300,12 +1305,20 @@ export function renderRelicSelection(root) {
             </div>
             `;
 
+            // Set up relic selection event listeners
             root.app.querySelectorAll("[data-relic]").forEach(btn => {
                 btn.addEventListener("click", () => {
                     const relicId = btn.dataset.relic;
                     root.selectStartingRelic(relicId);
                 });
             });
+
+            // Add Messages button event listener
+            const messagesBtn = root.app.querySelector("[data-action='show-messages']");
+            if (messagesBtn) {
+                messagesBtn.addEventListener("click", () => showMessagesModal());
+            }
+        });
     });
 }
 

style.css

@@ -2469,29 +2469,11 @@ h3 {
     background-attachment: fixed;
     display: flex;
     flex-direction: column;
-    padding: 60px 40px 40px 40px;
     font-family: 'Arial', sans-serif;
     position: relative;
     overflow: hidden;
 }
 
-.game-screen.relic-select::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1;
-}
-
-
-
-.game-screen.relic-select > * {
-    position: relative;
-    z-index: 2;
-}
-
 .game-header {
     text-align: center;
     margin-bottom: 50px;
@@ -2759,7 +2741,6 @@ h3 {
 
 .welcome-panel {
     width: 500px;
-    margin-right: 20px;
     display: flex;
     flex-direction: column;
     gap: 25px;
@@ -5418,8 +5399,8 @@ h3 {
 /* Messages Button */
 .messages-button {
     position: absolute;
-    top: 20px;
+    top: 10px;
-    right: 20px;
+    right: 10px;
     background: linear-gradient(135deg, #8B4513 0%, #D2691E 50%, #CD853F 100%);
     border: 2px solid var(--accent);
     border-radius: 12px;