More mobile-friendly

styles.css

@@ -27,6 +27,7 @@ body {
 
 body {
   min-height: 100vh;
+  min-height: 100svh;
 }
 
 .app-shell {
@@ -107,11 +108,14 @@ code {
 }
 
 main {
+  display: flex;
   min-width: 0;
 }
 
 #map {
+  flex: 1;
   min-height: calc(100vh - 2rem);
+  min-height: calc(100svh - 2rem);
   border-radius: 28px;
   overflow: hidden;
   box-shadow: var(--shadow);
@@ -233,11 +237,116 @@ main {
 }
 
 @media (max-width: 900px) {
+  body {
+    min-height: auto;
+  }
+
   .app-shell {
     grid-template-columns: 1fr;
+    gap: 0.75rem;
+    min-height: auto;
+    padding: 0.75rem;
+    padding:
+      max(0.75rem, env(safe-area-inset-top))
+      max(0.75rem, env(safe-area-inset-right))
+      max(0.75rem, env(safe-area-inset-bottom))
+      max(0.75rem, env(safe-area-inset-left));
+  }
+
+  main {
+    order: -1;
+    min-height: min(72svh, 46rem);
+  }
+
+  .panel {
+    padding: 1rem;
+    border-radius: 12px;
+    box-shadow: 0 12px 36px rgba(60, 44, 22, 0.14);
+  }
+
+  h1 {
+    margin-bottom: 0.65rem;
+    font-size: clamp(2rem, 12vw, 3rem);
+  }
+
+  .intro {
+    margin-bottom: 0;
+  }
+
+  .legend {
+    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+    gap: 0.5rem 0.75rem;
+    margin: 1rem 0 0;
+  }
+
+  .legend-item {
+    gap: 0.5rem;
+    min-width: 0;
+    font-size: 0.9rem;
+  }
+
+  .legend-item span:last-child {
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 
   #map {
-    min-height: 65vh;
+    min-height: min(72svh, 46rem);
+    border-radius: 12px;
+  }
+
+  .timeline-control {
+    width: min(18rem, calc(100vw - 2rem));
+    max-width: calc(100vw - 2rem);
+  }
+
+  .timeline-buttons {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .timeline-buttons button {
+    min-height: 2.65rem;
+    padding: 0.38rem 0.45rem;
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+
+  .leaflet-control-container .leaflet-top {
+    top: 0.5rem;
+  }
+
+  .leaflet-control-container .leaflet-right {
+    right: 0.5rem;
+  }
+
+  .leaflet-control-container .leaflet-bottom {
+    bottom: 0.5rem;
+  }
+
+  .leaflet-popup-content {
+    max-width: min(16rem, calc(100vw - 5rem));
+  }
+}
+
+@media (max-width: 520px) {
+  .app-shell {
+    padding: 0;
+  }
+
+  main,
+  #map {
+    min-height: 68svh;
+  }
+
+  #map {
+    border-radius: 0;
+  }
+
+  .panel {
+    margin: 0 0.75rem 0.75rem;
+  }
+
+  .timeline-control {
+    padding: 0.55rem;
   }
 }