diff --git a/frontend/css/ls.css b/frontend/css/ls.css
index b11c651..fd023b2 100644
--- a/frontend/css/ls.css
+++ b/frontend/css/ls.css
@@ -1486,27 +1486,55 @@ body[data-bg-tone="dark"] .frame-unlock-hint {
 }
 
 /* ── 12. rain (paid, animated) ──────────────────────────────────
-   Two layers of vertical streaks moving down at different rates
-   for parallax. The streaks are linear-gradients tiled at small
-   sizes so they read as drops. */
+   Two pseudo-element layers of elongated radial 'drops' tiled at
+   different sizes/speeds so they read as actual rain — not striped
+   curtains. Drops are 1.5px wide × 12-18px tall ellipses scattered
+   across a 160-200px tile. */
 @keyframes ls-bg-rain-front {
   from { background-position: 0 0; }
-  to   { background-position: 0 80px; }
+  to   { background-position: 0 180px; }
 }
 @keyframes ls-bg-rain-back {
   from { background-position: 0 0; }
-  to   { background-position: 0 120px; }
+  to   { background-position: 0 130px; }
 }
 .bg-rain,
 .bg-preview.bg-rain {
   background-color: #0a1828;
+  position: relative;
+  overflow: hidden;
+}
+.bg-rain::before,
+.bg-preview.bg-rain::before {
+  content: '';
+  position: absolute;
+  inset: 0;
   background-image:
-    linear-gradient(180deg, transparent 0%, transparent 40%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.20) 70%, transparent 80%),
-    linear-gradient(180deg, transparent 0%, transparent 30%, rgba(255,255,255,0.30) 45%, rgba(255,255,255,0.10) 60%, transparent 70%);
-  background-size: 3px 80px, 5px 120px;
-  background-position: 0 0, 25% 0;
-  background-repeat: repeat, repeat;
-  animation: ls-bg-rain-front 0.6s linear infinite, ls-bg-rain-back 1.1s linear infinite;
+    radial-gradient(ellipse 1.5px 14px at 12% 18%, rgba(255,255,255,0.70), transparent 80%),
+    radial-gradient(ellipse 1.5px 12px at 32% 58%, rgba(255,255,255,0.65), transparent 80%),
+    radial-gradient(ellipse 1.5px 16px at 55% 12%, rgba(255,255,255,0.60), transparent 80%),
+    radial-gradient(ellipse 1.5px 14px at 76% 70%, rgba(255,255,255,0.70), transparent 80%),
+    radial-gradient(ellipse 1.5px 12px at 90% 32%, rgba(255,255,255,0.55), transparent 80%),
+    radial-gradient(ellipse 1.5px 18px at 22% 86%, rgba(255,255,255,0.60), transparent 80%),
+    radial-gradient(ellipse 1.5px 13px at 48% 92%, rgba(255,255,255,0.55), transparent 80%);
+  background-size: 180px 180px;
+  background-repeat: repeat;
+  animation: ls-bg-rain-front 0.9s linear infinite;
+}
+.bg-rain::after,
+.bg-preview.bg-rain::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image:
+    radial-gradient(ellipse 1px 10px at 18% 28%, rgba(255,255,255,0.45), transparent 80%),
+    radial-gradient(ellipse 1px 9px  at 45% 72%, rgba(255,255,255,0.40), transparent 80%),
+    radial-gradient(ellipse 1px 11px at 68% 14%, rgba(255,255,255,0.45), transparent 80%),
+    radial-gradient(ellipse 1px 10px at 85% 50%, rgba(255,255,255,0.40), transparent 80%),
+    radial-gradient(ellipse 1px 8px  at 30% 95%, rgba(255,255,255,0.35), transparent 80%);
+  background-size: 130px 130px;
+  background-repeat: repeat;
+  animation: ls-bg-rain-back 0.55s linear infinite;
 }
 
 /* ── 13. snow (paid, animated) ──────────────────────────────────