From 6e9ff9812d2288b97419fa534538d5fdc7877282 Mon Sep 17 00:00:00 2001
From: tomt610 <tomt610@gmail.com>
Date: Mon, 12 Jan 2026 22:54:46 +0000
Subject: [PATCH] Fix mobile view for weather effects

- Replace % units with dvh/vw for dynamic viewport sizing
- Fix stars, fireflies, dust motes, and light orbs positioning
- Fix moon and moon glow positioning to use dvh/vw
- Update snowfall and rainfall animations to use 100dvh
- Ensures proper distribution across full mobile viewport
---
 src/systems/ui/weatherEffects.js | 20 ++++++++++----------
 style.css                        | 14 +++++++-------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/systems/ui/weatherEffects.js b/src/systems/ui/weatherEffects.js
index 04228b1..0d24ca8 100644
--- a/src/systems/ui/weatherEffects.js
+++ b/src/systems/ui/weatherEffects.js
@@ -247,8 +247,8 @@ function createSunshine() {
     for (let i = 0; i < 25; i++) {
         const particle = document.createElement('div');
         particle.className = 'rpg-weather-particle rpg-clear-dust-mote';
-        particle.style.left = `${Math.random() * 100}%`;
-        particle.style.top = `${Math.random() * 100}%`;
+        particle.style.left = `${Math.random() * 100}vw`;
+        particle.style.top = `${Math.random() * 100}dvh`;
         particle.style.animationDelay = `${Math.random() * 15}s`;
         particle.style.animationDuration = `${12 + Math.random() * 8}s`;
         // Vary the size slightly
@@ -262,8 +262,8 @@ function createSunshine() {
     for (let i = 0; i < 6; i++) {
         const orb = document.createElement('div');
         orb.className = 'rpg-weather-particle rpg-clear-light-orb';
-        orb.style.left = `${10 + Math.random() * 80}%`;
-        orb.style.top = `${10 + Math.random() * 80}%`;
+        orb.style.left = `${10 + Math.random() * 80}vw`;
+        orb.style.top = `${10 + Math.random() * 80}dvh`;
         orb.style.animationDelay = `${i * 2}s`;
         orb.style.animationDuration = `${20 + Math.random() * 10}s`;
         // Vary the size
@@ -307,8 +307,8 @@ function createNighttime() {
     for (let i = 0; i < 60; i++) {
         const star = document.createElement('div');
         star.className = 'rpg-weather-particle rpg-night-star';
-        star.style.left = `${Math.random() * 100}%`;
-        star.style.top = `${Math.random() * 60}%`; // Stars mostly in upper portion
+        star.style.left = `${Math.random() * 100}vw`;
+        star.style.top = `${Math.random() * 60}dvh`; // Stars mostly in upper portion
         star.style.animationDelay = `${Math.random() * 5}s`;
         star.style.animationDuration = `${2 + Math.random() * 3}s`;
         // Vary the size
@@ -322,8 +322,8 @@ function createNighttime() {
     for (let i = 0; i < 8; i++) {
         const brightStar = document.createElement('div');
         brightStar.className = 'rpg-weather-particle rpg-night-star rpg-night-star-bright';
-        brightStar.style.left = `${Math.random() * 100}%`;
-        brightStar.style.top = `${Math.random() * 50}%`;
+        brightStar.style.left = `${Math.random() * 100}vw`;
+        brightStar.style.top = `${Math.random() * 50}dvh`;
         brightStar.style.animationDelay = `${Math.random() * 4}s`;
         brightStar.style.animationDuration = `${3 + Math.random() * 2}s`;
         container.appendChild(brightStar);
@@ -333,8 +333,8 @@ function createNighttime() {
     for (let i = 0; i < 15; i++) {
         const firefly = document.createElement('div');
         firefly.className = 'rpg-weather-particle rpg-night-firefly';
-        firefly.style.left = `${Math.random() * 100}%`;
-        firefly.style.top = `${40 + Math.random() * 55}%`; // Fireflies in lower portion
+        firefly.style.left = `${Math.random() * 100}vw`;
+        firefly.style.top = `${40 + Math.random() * 55}dvh`; // Fireflies in lower portion
         firefly.style.animationDelay = `${Math.random() * 10}s`;
         firefly.style.animationDuration = `${8 + Math.random() * 7}s`;
         container.appendChild(firefly);
diff --git a/style.css b/style.css
index 313c75e..4b6bc55 100644
--- a/style.css
+++ b/style.css
@@ -9524,11 +9524,11 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
 /* Snowfall animation */
 @keyframes rpg-snowfall {
     0% {
-        transform: translateY(0vh) rotate(0deg);
+        transform: translateY(0) rotate(0deg);
         opacity: 0.8;
     }
     100% {
-        transform: translateY(100vh) rotate(360deg);
+        transform: translateY(100dvh) rotate(360deg);
         opacity: 0.2;
     }
 }
@@ -9598,7 +9598,7 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
         opacity: 0.8;
     }
     100% {
-        transform: translateY(100vh);
+        transform: translateY(100dvh);
         opacity: 0.3;
     }
 }
@@ -9849,8 +9849,8 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
 /* Moon */
 .rpg-night-moon {
     position: fixed;
-    top: 8%;
-    left: 12%;
+    top: 8dvh;
+    left: 12vw;
     width: 60px;
     height: 60px;
     background: radial-gradient(circle at 35% 35%,
@@ -9880,8 +9880,8 @@ body[data-theme="cyberpunk"] .rpg-music-widget-play {
 /* Moon glow aura */
 .rpg-night-moon-glow {
     position: fixed;
-    top: 5%;
-    left: 9%;
+    top: 5dvh;
+    left: 9vw;
     width: 120px;
     height: 120px;
     background: radial-gradient(circle at center,