/* Mobile navigation and a scroll-friendly city guide. Desktop remains unchanged. */
.mobile-map-actions,.mobile-map-hint{display:none}
@media(max-width:760px){
 html{scroll-padding-top:170px}
 body{background:#f6f8f1;padding-bottom:calc(82px + env(safe-area-inset-bottom));overflow-wrap:break-word}
 body>header{position:relative!important;inset:auto;min-height:0;height:65px;padding:12px 16px;display:flex;justify-content:center;gap:0}
 .brand{font-size:21px;line-height:1.2;letter-spacing:1px}
 .brand small{font-size:10px;letter-spacing:2px;margin-top:5px}
 .map-topbar{position:sticky;top:0;left:auto;right:auto;z-index:20;display:block;padding:8px 12px 10px;background:#f6f8f1f5;backdrop-filter:blur(12px);border-bottom:1px solid #dfe7dc}
 .map-topbar .district-dock{position:static;width:100%;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none;transform:none}
 .map-topbar .group-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;flex-wrap:nowrap}
 .map-topbar .group-nav button{min-width:0;min-height:44px;padding:8px 2px;border-radius:13px;font-size:14px}
 .group-nav b{font-size:11px;margin-left:2px;padding:1px 3px}
 .map-topbar .district-nav{position:relative;display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;margin:8px 0 0;padding:0 0 4px}
 .map-topbar .district-nav button{flex:0 0 auto;min-height:44px;padding:9px 14px;font-size:14px;border-radius:12px}
 .map-topbar nav{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));width:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:6px;border:1px solid #d4e1d6;border-radius:20px;background:#fffef9;box-shadow:0 5px 24px #244c5426;z-index:30}
 .map-topbar nav button{min-width:0;min-height:48px;padding:10px 2px;font-size:13px;border:0;border-radius:14px;box-shadow:none;background:transparent;color:#456a67}
 .map-topbar nav button.active{background:#2c857a;color:white}
 /* Backdrop filters create a fixed-position containing block: keep bottom navigation viewport-bound. */
 .map-topbar{backdrop-filter:none}
 body[data-view="rank"] .map-topbar,body[data-view="board"] .map-topbar{height:0;padding:0;border:0}
 #exploreView{height:auto;min-height:0;display:block;padding:0}
 .world{height:clamp(260px,36svh,340px);min-height:0;width:auto;margin:10px 12px 0;border-radius:22px;background:#d7efed;isolation:isolate}
 .world #scene,.world #scene canvas{touch-action:pan-y}
 .world #scene canvas{cursor:default}
 .world.map-interacting #scene,.world.map-interacting #scene canvas{touch-action:none;cursor:grab}
 .map-label{font-size:12px;padding:7px 10px;min-height:36px}
 .scene-title,.compass{display:none!important}
 .cloud-frame{opacity:.3}
 .mobile-map-actions{display:flex;position:absolute;left:10px;right:10px;bottom:35px;justify-content:space-between;gap:8px;z-index:9;pointer-events:none}
 .mobile-map-actions button{pointer-events:auto;min-height:44px;border:1px solid #fff;border-radius:14px;background:#fffdf5f5;color:#244c54;padding:10px 13px;font-size:14px;font-weight:600;box-shadow:0 3px 12px #244c5420}
 #showPlaces{background:#2c857a;color:white;border-color:#2c857a}
 #mapInteraction[aria-pressed="true"]{background:#244c54;color:white}
 .mobile-map-hint{display:block;position:absolute;bottom:6px;left:5px;right:5px;z-index:9;margin:0;font-size:11px;text-align:center;color:#244c54;background:#fffdf5d9;border-radius:8px;padding:3px;pointer-events:none}
 .scene-bottom{right:10px;top:10px;bottom:auto;z-index:9}
 .zoom{flex-direction:row;border-radius:13px}
 .zoom button{height:44px;width:44px}
 .zoom span{display:none}
 #loading{padding:20px;text-align:center;font-size:14px}
 #districtPanel{position:relative;inset:auto;margin:12px 12px 0;padding:20px 16px;width:auto;height:auto;max-height:none;overflow:visible;border:1px solid #e0e8db;border-radius:22px;background:#fffef9;box-shadow:none;backdrop-filter:none;scroll-margin-top:10px}
 #districtPanel .panel-top{margin:0 0 12px;font-size:11px}
 .panel-top>span:first-child{font-size:10px;letter-spacing:1px}
 .district-heading h2{font-size:30px}
 .english{display:none}
 .district-intro{margin:8px 0 12px}
 .district-intro summary,footer summary{min-height:44px;padding:10px 0}
 .section-heading{margin:14px 0 12px;font-size:16px}
 .section-heading span{font-size:12px}
 .photo-button img{height:auto;aspect-ratio:16/10;object-fit:cover}
 .place-card{margin-bottom:24px}
 .place-info h4{font-size:17px;line-height:1.6}
 .heart{min-height:44px;min-width:70px}
 .address{color:#66796d;line-height:1.7;margin-top:9px}
 #dashboard,#community{padding:16px 16px 30px;min-height:calc(100svh - 150px);width:100%}
 .rank-heading h1{font-size:26px;letter-spacing:0}
 .rank-heading .eyebrow{font-size:10px;letter-spacing:1px}
 .rank-heading p{font-size:14px}
 .outlined,#refreshMessages,.rank-tools select{min-height:44px}
 .metrics{margin:20px 0;gap:8px}
 .metrics article{padding:16px}
 .metrics small{font-size:12px}
 .rank-tools{gap:12px}
 .rank-tools h2{width:100%;font-size:20px}
 .rank-row{grid-template-columns:22px 76px minmax(0,1fr);gap:10px}
 .rank-thumb img{width:76px;height:76px}
 .rank-name h3{font-size:16px;overflow-wrap:anywhere}
 #community h1{margin:4px 0 10px;font-size:28px}
 #messageForm{padding:16px;gap:8px}
 #messageForm input,#messageForm textarea{font-size:16px}
 .message-card{padding:16px}
 .message-card header{flex-wrap:wrap;gap:4px;min-height:0}
 .message-card button{min-height:44px}
 .board-heading{gap:10px}
 .board-heading h2{font-size:20px}
 #refreshMessages{padding:10px 14px;white-space:nowrap}
 #lightbox{width:100%;max-width:100%;max-height:100dvh;margin:auto 0;border-radius:18px;padding:60px 12px calc(18px + env(safe-area-inset-bottom))}
 .lightbox-close,.lightbox-arrow{min-width:44px;min-height:44px}
 .lightbox-main img{height:min(48svh,420px)}
 .lightbox-main figcaption{gap:10px;padding:0 4px}
 .lightbox-main h2{font-size:20px}
 .lightbox-bottom>span:last-child{display:none}
 #toast{bottom:calc(90px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 32px)}
}