Minor layout changes for the achievements tab

static/js/game.js

@@ -131,6 +131,8 @@ function handleAchievementUnlock(data) {
 
 function fetchUserAchievements() {
     const achievementsGrid = document.getElementById('achievementsGrid');
+    const achievementInfoBox = document.getElementById('achievementInfoBox');
+    
     if (!achievementsGrid) {
         console.error('Achievements grid not found');
         return;
@@ -138,9 +140,16 @@ function fetchUserAchievements() {
 
     if (!currentUser) {
         displaySignInMessage(achievementsGrid, 'achievements');
+        if (achievementInfoBox) {
+            achievementInfoBox.style.display = 'none';
+        }
         return;
     }
 
+    if (achievementInfoBox) {
+        achievementInfoBox.style.display = 'block';
+    }
+
     fetch('/get-user-achievements', {
         headers: {
             'Authorization': getSessionToken()
@@ -169,12 +178,11 @@ function displaySignInMessage(container, feature) {
     container.innerHTML = `
         <div class="sign-in-message">
             <p>Please sign in to view your ${feature}.</p>
-            <button id="signInButton" class="glowing-button">Sign In</button>
         </div>
     `;
-    document.getElementById('signInButton').addEventListener('click', showLoginForm);
 }
 
+
 function displayNoAchievementsMessage(container) {
     container.innerHTML = `
         <div class="no-achievements-message">
@@ -2056,7 +2064,7 @@ function onCustomizationTabOpen() {
     }
 
     // Show loading indicator immediately
-    skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>';
+    // skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>';
 
     // Load skin options asynchronously
     setTimeout(() => {

static/js/skinselector.js

@@ -31,9 +31,9 @@ function loadSkinOptions() {
 
 function fetchAndCacheSkins() {
     const skinCustomization = document.getElementById('skinCustomization');
-    if (skinCustomization) {
-        skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>';
-    }
+    // if (skinCustomization) {
+    //     skinCustomization.innerHTML = '<div class="loading-spinner">Loading skins...</div>';
+    // }
 
     const cachedEtag = localStorage.getItem('skinCacheEtag');
     const headers = {

static/styles.css

@@ -1389,16 +1389,37 @@ body {
     justify-content: center;
     height: 100%;
     text-align: center;
-    color: #ffffff;
+    color: #00ffff;
     font-family: 'Orbitron', sans-serif;
+    padding: 20px;
+    background-color: rgba(18, 4, 88, 0.6);
+    border-radius: 10px;
+    box-shadow: 0 0 10px #ff00ff, inset 0 0 5px #00ffff;
 }
 
+
 .sign-in-message p,
 .no-achievements-message p,
 .error-message p {
-    margin-bottom: 20px;
+    margin-bottom: 0;
+    font-size: 16px;
 }
 
+@media screen and (max-width: 600px) {
+    .sign-in-message,
+    .no-achievements-message,
+    .error-message {
+        padding: 15px;
+    }
+
+    .sign-in-message p,
+    .no-achievements-message p,
+    .error-message p {
+        font-size: 14px;
+    }
+}
+
+
 .glowing-button {
     background-color: transparent;
     border: 2px solid #00ffff;