* { margin: 0; box-sizing: border-box; }
html, body, #map { height: 100%; width: 100%; }
body { font-family: system-ui, -apple-system, sans-serif; background: #0b1e2d; overflow: hidden; }

#status {
  position: fixed; top: 8px; left: 8px; z-index: 2;
  background: rgba(0,0,0,.55); color: #cfe; padding: 4px 10px;
  border-radius: 8px; font-size: 13px;
}
#panel {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2;
  display: flex; gap: 2px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0,0,0,.65));
}
#panel .m { flex: 1; text-align: center; color: #fff; }
#panel .l { display: block; font-size: 12px; color: #2b2f36; font-weight: 600; letter-spacing: .05em;
  text-shadow: 0 0 3px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }
#panel .v { font-size: 20px; font-weight: 600; }