Dark gray sociowall, taller map, lower wall position

- Change sociowall to dark gray glassmorphism for blue theme (not blue)
- Make map 85vh tall (almost full screen)
- Position sociowall below map with spacing (2rem margin)
- Remove overlap between map and wall
- Premium glassmorphism styling with subtle shadows

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/styles/map.css

@@ -1,6 +1,6 @@
 :root{
   --sw-subcats-nudge: -45px; /* subcats vertical nudge */
-  --sw-below-overlap: 40px;  /* wall overlaps map a bit */
+  --sw-below-overlap: 0px;  /* no overlap - sociowall sits below map */
 }
 
 .map-page{
@@ -9,11 +9,11 @@
   width:100%;
 }
 
-/* Map stage first */
+/* Map stage first - much taller, almost full screen */
 .map-stage{
   position:relative;
   width:100%;
-  height: clamp(520px, 72vh, 860px);
+  height: clamp(600px, 85vh, 1000px);
   overflow: hidden;
 }
 
@@ -115,10 +115,10 @@
   100%{ opacity: 0.6; }
 }
 
-/* Landscape: vh is small, reduce min height */
+/* Landscape: vh is small, but still keep map tall */
 @media (orientation: landscape){
-  :root{ --sw-below-overlap: 22px; }
-  .map-stage{ height: clamp(360px, 62vh, 720px); }
+  :root{ --sw-below-overlap: 0px; }
+  .map-stage{ height: clamp(400px, 75vh, 800px); }
 }
 
 .map-container,
@@ -140,12 +140,12 @@
   z-index:30;
 }
 
-/* BELOW MAP (scroll area) – pulled up slightly over map */
+/* BELOW MAP (scroll area) – sits below map with spacing */
 .below-stage{
-  margin-top: calc(var(--sw-below-overlap) * -1);
+  margin-top: 2rem;
   position:relative;
   z-index:25;
-  padding: .25rem .7rem 1.0rem;
+  padding: 0.5rem 1rem 1.5rem;
   transition: opacity 320ms ease, filter 320ms ease;
 }
 

src/styles/theme.css

@@ -1,12 +1,33 @@
 body[data-theme="dark"] { background:#050816; color:#ffffff; }
 
-body[data-theme="blue"] .sociowall-panel,
+/* Blue theme - sociowall uses dark gray glassmorphism */
+body[data-theme="blue"] .sociowall-panel {
+  background: linear-gradient(
+    165deg,
+    rgba(28, 32, 42, 0.97) 0%,
+    rgba(22, 26, 36, 0.98) 50%,
+    rgba(18, 21, 30, 0.99) 100%
+  );
+  border-color: rgba(80, 90, 110, 0.25);
+  box-shadow:
+    0 4px 32px rgba(0, 0, 0, 0.5),
+    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
+}
+
+body[data-theme="blue"] .post-card {
+  background: linear-gradient(
+    145deg,
+    rgba(35, 40, 52, 0.95) 0%,
+    rgba(28, 32, 44, 0.97) 100%
+  );
+  border-color: rgba(90, 100, 120, 0.18);
+}
+
 body[data-theme="blue"] .chat-panel,
-body[data-theme="blue"] .post-card,
 body[data-theme="blue"] .post-pin--expanded .post-card,
 body[data-theme="blue"] .post-pin--compact .post-pin-bubble {
-  background: rgba(12, 20, 60, 0.96);
-  border-color: rgba(96, 165, 250, 0.95);
+  background: rgba(22, 26, 38, 0.96);
+  border-color: rgba(96, 165, 250, 0.5);
 }
 
 body[data-theme="light"] { background:#e5e7eb; color:#111827; }