Improve legend display on mobile

style.css

@@ -11,9 +11,11 @@
     --cullThreshold_state_6: none;
 
     --absScale: 1;
+    --legendButtonSize: 50px;
 }
 
-html, body, #map, #mapContainer, h1, h2, h3, h4, h5{
+html *{
+    box-sizing: border-box;
     padding: 0px;
     margin: 0px;
 }
@@ -24,6 +26,8 @@ html, body{
     font-family: "Noto Sans";
     font-variation-settings: "wght" 400;
     color: #e9e9e9;
+    font-size: 14px;
+    overflow:hidden;
 }
 
 a{
@@ -37,51 +41,63 @@ a:visited{
     color: #e79830;
 }
 
-#topleft{
-    position:fixed;
-    top: 0px;
-    left: 0px;
-    pointer-events: none;
-}
-
 .panel{
-    width: fit-content;
     border: 2px solid #b3b3b396;
     background: linear-gradient(120deg, #2c3f58, #191e2e);
     text-shadow: 2px 2px 5px #0003;
     margin: 5px;
     padding: 8px 13px;
-    border-radius: 10px;
+    border-radius: 5px;
     pointer-events: all;
 }
 
+#topleft{
+    position:fixed;
+    top: 0px;
+    left: 0px;
+    pointer-events: none;
+    height: 100vh;
+    overflow: hidden;
+    max-width: min(500px,100vw);
+    display: flex;
+    flex-direction: column;
+}
+
 #headerbar{
     background: linear-gradient(120deg, #3d5779, #121522);
-    font-size: 30px;
+    font-size: 2em;
     border-left: 0px;
     font-variation-settings: "wght" 500;
     padding: 10px 30px 10px 30px;
     margin: 10px 0px;
     border-radius: 0px 10px 10px 0px;
+    max-width: fit-content;
 }
 
 #legendButton{
     cursor: pointer;
     user-select: none;
+    padding: 8px;
+    height: var(--legendButtonSize);
+    width: var(--legendButtonSize);
+    >*{
+        transition: transform 200ms ease;
+        height: 100%;
+    }
 }
 
 #legend{
     transition: transform 400ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
-}
-#legendButton>*{
-    transition: transform 200ms ease;
-}
-
-#legendKey{
-    font-size: 15px;
     display: flex;
-    flex-flow: column wrap;
-    max-height: 310px;
+    flex-direction: row;
+    flex-shrink: 1;
+    min-height: 0px;
+}
+#legendContents{
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #62778a #1c1e2d;
+    pointer-events: all;
 }
 
 #settingsPanel{
@@ -91,12 +107,12 @@ a:visited{
     }
 }
 
-#footer{
+#stats{
     position: fixed;
     width: fit-content;
     right: 10px;
     bottom: 5px;
-    font-size: 12px;
+    font-size: 0.8em;
     text-align: right;
 }