body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; overflow: hidden; } #map { height: 100vh; /* fallback for browsers without dvh support */ height: 100dvh; /* mobile Chrome: track the visible viewport as the URL bar shows/hides */ width: 100%; } /* --- CONTROL PANEL --- */ #controls { position: absolute; top: 20px; right: 20px; z-index: 2000; width: 340px; background: rgba(255, 255, 255, 0.5); padding: 15px; border-radius: 12px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; gap: 10px; backdrop-filter: blur(5px); max-height: 90vh; max-height: 90dvh; overflow-y: auto; } @media (max-width: 600px) { #controls { width: auto; left: 10px; right: 10px; top: 10px; } .live-height-box { display: none; } } #controls.minimized #controls-content { display: none; } #controls.minimized { overflow: hidden; } .header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; } .header-buttons { display: flex; align-items: center; gap: 8px; } h3 { margin: 0; font-size: 18px; color: #333; white-space: nowrap; } .toggle-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: #555; padding: 0 5px; line-height: 1; } /* BUTTONS IN HEADER (INFO & LANGUAGE) */ .circle-btn { background: none; border: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: opacity 0.2s; overflow: hidden; } .circle-btn:hover { color: #2563eb; } .info-btn { font-size: 14px; font-family: serif; font-weight: bold; font-style: italic; color: #555; } .share-circle-btn { color: #555; } /* Share button: Android-style (three connected dots) icon by default; swap to the Apple-style icon on Apple platforms (, set in index.html). */ .share-circle-btn .share-icon-apple { display: none; } .apple-platform .share-circle-btn .share-icon-android { display: none; } .apple-platform .share-circle-btn .share-icon-apple { display: block; } .footer-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 4px; } .footer-metrics { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } /* MODAL (COMMON DESIGN) */ .modal-overlay { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); align-items: center; justify-content: center; } .modal-content { background-color: #fff; padding: 25px; border-radius: 12px; width: 90%; max-width: 400px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); text-align: center; } /* Inline help icon + hover/tap tooltip for each Advanced-settings row. The row (a