From 807b3167dfdcbe120f3e9b4af4acd69ff00e862a Mon Sep 17 00:00:00 2001
From: HikeMap User <melancholytron@gmail.com>
Date: Wed, 7 Jan 2026 22:44:39 -0600
Subject: [PATCH] Enhance login screen monsters: double count, wandering,
 transparent card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increase monster count to 16-24 (doubled)
- Add slow wandering behavior - monsters drift to new positions
- Make login card semi-transparent with backdrop blur
- 4 second smooth transitions for wandering movement

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 index.html | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 1802c0b..dc5923a 100644
--- a/index.html
+++ b/index.html
@@ -1262,7 +1262,9 @@
             margin-top: 8px;
         }
         .login-card {
-            background: rgba(255, 255, 255, 0.95);
+            background: rgba(255, 255, 255, 0.85);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
             padding: 30px;
             border-radius: 16px;
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
@@ -1292,7 +1294,7 @@
             position: absolute;
             width: 80px;
             height: 80px;
-            transition: transform 0.3s ease;
+            transition: left 4s ease-in-out, top 4s ease-in-out, transform 0.3s ease;
         }
         .login-monster img {
             width: 100%;
@@ -11138,6 +11140,7 @@
         // Login screen animated monsters background
         const loginMonsterAnimations = ['idle', 'attack', 'skill', 'flipy', 'flipz', 'shrink_grow'];
         let loginMonstersInterval = null;
+        let loginMonstersWanderInterval = null;
 
         async function initLoginMonsters() {
             const container = document.getElementById('loginMonstersBg');
@@ -11159,8 +11162,8 @@
                 console.log('Using fallback monster IDs for login screen');
             }
 
-            // Create 8-12 monsters at random positions
-            const numMonsters = 8 + Math.floor(Math.random() * 5);
+            // Create 16-24 monsters at random positions
+            const numMonsters = 16 + Math.floor(Math.random() * 9);
             for (let i = 0; i < numMonsters; i++) {
                 const monsterId = monsterIds[Math.floor(Math.random() * monsterIds.length)];
                 const monster = document.createElement('div');
@@ -11173,9 +11176,21 @@
                 container.appendChild(monster);
             }
 
-            // Start random animations
+            // Start random animations and wandering
             animateLoginMonsters();
+            wanderLoginMonsters();
             loginMonstersInterval = setInterval(animateLoginMonsters, 2500);
+            loginMonstersWanderInterval = setInterval(wanderLoginMonsters, 3000);
+        }
+
+        function wanderLoginMonsters() {
+            const monsters = document.querySelectorAll('.login-monster');
+            monsters.forEach(monster => {
+                // 30% chance to wander each cycle
+                if (Math.random() > 0.3) return;
+                monster.style.left = `${Math.random() * 90}%`;
+                monster.style.top = `${Math.random() * 85}%`;
+            });
         }
 
         function animateLoginMonsters() {
@@ -11213,6 +11228,10 @@
                 clearInterval(loginMonstersInterval);
                 loginMonstersInterval = null;
             }
+            if (loginMonstersWanderInterval) {
+                clearInterval(loginMonstersWanderInterval);
+                loginMonstersWanderInterval = null;
+            }
         }
 
         // Initialize login monsters when page loads