/* One fixed header and one map offset across viewports. Loaded after legacy map styles. */
:root { --map-header-height: 80px; }
.unified-nav-header { position:fixed; height:var(--map-header-height); }
.container-fluid.p-0 { position:absolute; top:var(--map-header-height); height:calc(100vh - var(--map-header-height)); height:calc(100dvh - var(--map-header-height)); }
#map { position:absolute; top:0; margin-top:0; height:100%; }
.hero-banner { top:12px; }
.custom-zoom-controls { top:auto; bottom:170px; right:16px; }
.trophy-gradient-toggle { top:auto; bottom:30px; right:16px; }
.image-density-legend { bottom:30px; left:16px; }
.mobile-score-link { display:none; }
@media(max-width:768px) {
    :root { --map-header-height:64px; }
    .unified-nav-header { position:fixed; height:64px; display:flex; flex-direction:row; align-items:center; justify-content:flex-start; flex-wrap:nowrap; padding:8px; gap:6px; }
    .brand-section { order:0; width:auto; min-width:0; flex:1 1 auto; gap:0; margin:0; justify-content:flex-start; }
    .brand-logo { display:none; }
    .app-title { font-size:18px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mobile-score-link { order:1; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px; white-space:nowrap; background:#fff; color:#0057ff; font-size:13px; font-weight:700; }
    .filter-toggle-btn, .hamburger-btn { position:static; width:44px; min-width:44px; height:44px; margin:0; align-self:center; }
    .filter-toggle-btn { order:2; }
    .hamburger-btn { order:3; }
    .desktop-nav { display:none; }
    .map-filter-controls { top:64px; }
    .mobile-menu { top:64px; }
    .hero-banner { top:10px; left:12px; transform:none; width:calc(100% - 88px); max-width:560px; padding:18px 14px; }
    .hero-title { font-size:22px; }
    .hero-subtitle { font-size:14px; }
    .hero-actions { gap:8px; }
    .hero-btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; padding:10px 14px; }
    .custom-zoom-controls { top:12px; bottom:auto; right:12px; }
    .trophy-gradient-toggle { bottom:30px; right:12px; }
    .image-density-legend { bottom:30px; left:12px; }
}
@media(max-height:520px) and (max-width:768px) {
    .hero-banner { width:calc(100% - 140px); left:12px; transform:none; }
    .hero-title { font-size:18px; }
    .hero-subtitle { margin-bottom:8px; }
    .image-density-legend { display:none; }
}