feat: stack update and globe background change

Author: lunasrc

docs/country_timeline.html

@@ -74,11 +74,11 @@
   .brand-dim { color: rgba(255,255,255,0.6); font-style: italic; }
 
   .breadcrumb {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
+    flex: 1;
+    min-width: 0;
     display: flex;
     align-items: center;
+    justify-content: center;
     font-family: 'Inter', sans-serif;
     font-size: 11px;
     font-style: italic;
@@ -87,6 +87,7 @@
     text-transform: uppercase;
     color: rgba(255,255,255,0.6);
     white-space: nowrap;
+    overflow: hidden;
   }
   .breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; }
   .breadcrumb a:hover { color: rgba(255,255,255,0.9); }
@@ -892,7 +893,7 @@ <h2>No records found.</h2>
     <span class="brand-earth">Earth</span> Natural Disaster Museum<span class="brand-dim"> · est. 2026</span>
   </div>
   <nav class="breadcrumb">
-    <a href="index.html">The Globe: Earth</a>
+    <a href="globe.html">The Globe: Earth</a>
     <span class="sep">/</span>
     <span id="breadcrumbCountry">—</span>
   </nav>

docs/css/style.css

@@ -430,11 +430,11 @@ button {
 }
 
 .breadcrumb {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+  flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 0;
   font-family: 'Inter', sans-serif;
   font-size: 11px;
@@ -444,6 +444,7 @@ button {
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.6);
   white-space: nowrap;
+  overflow: hidden;
 }
 
 .breadcrumb .sep {
@@ -482,6 +483,32 @@ button {
 .pill-btn .arrow { transition: transform .3s ease; }
 .pill-btn:hover .arrow { transform: translateX(3px); }
 
+@media (max-width: 640px) {
+  .top-bar {
+    height: auto;
+    padding: 12px 16px;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+  .brand {
+    text-align: center;
+    white-space: normal;
+  }
+  .breadcrumb {
+    display: none;
+  }
+  .top-bar-action {
+    min-width: 0;
+    justify-content: center;
+  }
+  /* direct pill-btn child (country_timeline.html) */
+  .top-bar > .pill-btn {
+    font-size: 14px;
+    padding: 7px 20px;
+  }
+}
+
 #museum-nav {
   position: fixed;
   bottom: 30px;
@@ -537,7 +564,7 @@ button {
    ============================================ */
 
 #scene-globe {
-  background: var(--void);
+  background: var(--bgcolor);
 }
 
 #globeCanvas {
@@ -1250,30 +1277,19 @@ button {
    SCENE 2: 3D GLOBE WITH SPACE BACKGROUND
    ============================================ */
 
-#globeContainer {
+#starfieldCanvas {
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse at center, #0a0e27 0%, #020308 100%);
-  overflow: hidden;
-  z-index: 1;
+  z-index: 0;
+  pointer-events: none;
 }
 
-/* Starfield background */
-#globeContainer::before {
-  content: '';
+#globeContainer {
   position: absolute;
   inset: 0;
-  background-image:
-    radial-gradient(2px 2px at 20px 30px, white, transparent),
-    radial-gradient(2px 2px at 60px 70px, white, transparent),
-    radial-gradient(1px 1px at 50px 50px, white, transparent),
-    radial-gradient(1px 1px at 130px 80px, white, transparent),
-    radial-gradient(2px 2px at 90px 10px, white, transparent);
-  background-repeat: repeat;
-  background-size: 200px 200px;
-  opacity: 0.5;
-  animation: twinkle 100s linear infinite;
-  pointer-events: none;
+  background: transparent;
+  overflow: hidden;
+  z-index: 2;
 }
 
 @keyframes twinkle {
@@ -1290,7 +1306,7 @@ button {
 
 .globe-filter-panel {
   position: absolute;
-  top: 18px;
+  top: calc(74px + 18px);
   left: 22px;
   bottom: auto;
   width: 285px;
@@ -1302,7 +1318,7 @@ button {
   border: 1px solid #353738;
   border-radius: 20px;
   color: var(--text);
-  max-height: calc(100vh - 36px);
+  max-height: calc(100vh - 74px - 36px);
   overflow-x: hidden;
   overflow-y: auto;
   z-index: 80;
@@ -1614,7 +1630,7 @@ button {
 @media (max-width: 900px) {
   .globe-filter-panel {
     left: 16px;
-    top: 16px;
+    top: calc(74px + 16px);
     width: min(285px, calc(100vw - 32px));
   }
 
@@ -1627,7 +1643,8 @@ button {
 
 @media (max-width: 640px) {
   .globe-filter-panel {
-    max-height: calc(100vh - 32px);
+    top: calc(92px + 16px);
+    max-height: calc(100vh - 92px - 32px);
     overflow-y: auto;
   }