/* 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; }
}

/* Header fits its row: one score link per viewport, and the brand keeps its room. */
/* map.css forces .nav-btn with !important, so these must match it. */
.unified-nav-header .mobile-score-link { display:none !important; }
@media(min-width:769px) {
    .unified-nav-header { gap:12px; }
    .unified-nav-header .brand-section { width:auto; flex:0 0 auto; }
    .unified-nav-header .map-filter-controls { flex:1 1 auto; min-width:0; justify-content:center; }
    .unified-nav-header .map-filter-controls .filter-select:not(.mobile-only) { flex:1 1 0; min-width:0; max-width:170px; }
    .unified-nav-header .nav-actions { flex:0 0 auto; }
    .unified-nav-header .nav-btn.score-btn { background:#f26a1b !important; color:#fff !important; font-weight:700 !important; }
    .unified-nav-header .nav-btn.score-btn:hover { background:#d9590f !important; }
}
@media(min-width:769px) and (max-width:1100px) { .unified-nav-header .brand-logo { display:none; } }
@media(max-width:768px) {
    .unified-nav-header .mobile-score-link { display:inline-flex !important; background:#f26a1b !important; color:#fff !important; font-weight:700 !important; padding:8px 12px !important; }
}
/* Welcome banner */
.hero-banner { background:#1b2434f2; border:1px solid #ffffff1f; border-radius:16px; box-shadow:0 12px 40px #0b12204d; animation:hero-in .45s cubic-bezier(.2,.9,.3,1) both; }
.hero-eyebrow { margin:0 0 .25rem; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#f9a26c; }
.hero-title { font-weight:800; letter-spacing:-.02em; }
.hero-btn { transition:transform .12s ease, background .15s ease; }
.hero-btn:active { transform:scale(.97); }
.hero-btn-primary { background:#f26a1b; }
.hero-btn-primary:hover { background:#d9590f; }
.hero-tour { margin-top:.75rem; min-height:44px; padding:.25rem .75rem; background:none; border:none; color:#ffffffcc; font-size:.875rem; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.hero-tour:hover { color:#fff; }
@keyframes hero-in { from { opacity:0; margin-top:-12px; } to { opacity:1; margin-top:0; } }
@media (prefers-reduced-motion: reduce) { .hero-banner { animation:none; } .hero-btn { transition:none; } }
/* Narrow tablets: tighter spacing so filter labels stay readable. */
@media(min-width:769px) and (max-width:1000px) {
    .unified-nav-header { padding-left:12px; padding-right:12px; gap:6px; }
    .unified-nav-header .map-filter-controls { gap:6px; }
    .unified-nav-header .map-filter-controls .filter-select:not(.mobile-only) { font-size:13px; padding-left:8px; padding-right:18px; }
    .unified-nav-header .nav-btn { padding:8px 10px !important; }
    .unified-nav-header .nav-actions { gap:6px; }
}

/* Tour entry: a round "?" in the desktop header; the phone menu has a text entry. */
.unified-nav-header .nav-btn.tour-btn { width:36px !important; min-width:36px !important; height:36px !important; padding:0 !important; border-radius:50% !important; justify-content:center !important; font-weight:700 !important; flex:0 0 auto !important; }