Implement 20x warp speed over water with land prediction and speedometer UI

frontend/src/styles/App.css

@@ -81,6 +81,12 @@
   background: #e9ecef;
 }
 
+.setting-row button.active-style {
+  background: #34495e;
+  color: white;
+  border-color: #2c3e50;
+}
+
 .action-btn {
   width: 100%;
   padding: 12px;
@@ -322,6 +328,8 @@
   align-items: center;
   font-family: sans-serif;
   z-index: 100;
+  cursor: pointer;
+  pointer-events: auto !important;
 }
 
 .marker-number {
@@ -371,6 +379,38 @@
   white-space: nowrap;
 }
 
+.map-info-popup {
+  padding: 5px;
+  font-family: sans-serif;
+}
+
+.popup-header {
+  border-bottom: 1px solid #eee;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  color: #2c3e50;
+  font-size: 14px;
+}
+
+.popup-body {
+  font-size: 12px;
+  color: #666;
+}
+
+.popup-body p {
+  margin: 3px 0;
+}
+
+.maplibregl-popup {
+  z-index: 2000 !important;
+}
+
+.maplibregl-popup-content {
+  border-radius: 8px !important;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
+  padding: 15px !important;
+}
+
 @media (max-width: 768px) {
   .app-container {
     flex-direction: column;