:root { font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; color:#162C3A; background:#eef3f5; }
* { box-sizing:border-box; } body{margin:0;overflow:hidden} button,input{font:inherit}
.app {display:flex; width:100vw; height:100dvh; min-height:480px;}
.map-panel{position:relative; flex:1;min-width:0;background:#dce8e9;}
#map{width:100%;height:100%;position:absolute;inset:0}
.topbar {position:absolute; z-index:3;top:19px;left:22px;right:24px;display:flex;justify-content:space-between;align-items:start;gap:10px;pointer-events:none}
.brand,.map-actions,.search-box,.toolbox,.footnote,.zoom-chip{pointer-events:auto}
.brand{max-width:380px;background:#ffffffeb;border:1px solid #d7e0e6;border-radius:14px;padding:12px 15px;box-shadow:0 4px 20px #173f5217}
.brand strong{font-size:14px;letter-spacing:.095em;color:#234a5d}
.brand .eyebrow{font-size:10px;color:#66818f;text-transform:uppercase;letter-spacing:.15em;font-weight:700;margin:0 0 4px}
.brand p{font-size:11px;color:#537081;margin:5px 0 0}
.map-actions{display:flex;align-items:center;gap:7px}
button {border:1px solid #d5e0e4;background:white;color:#254457;border-radius:9px;cursor:pointer;white-space:nowrap;}
button:hover{background:#f1f7f8}
.map-actions button{padding:10px 11px;font-size:12px;font-weight:650;box-shadow:0 4px 14px #173f5214}
.overlay-left {z-index:4;position:absolute;left:22px;top:116px;width:min(390px,calc(100% - 50px));display:flex;flex-direction:column;gap:10px;pointer-events:none}
.search-box,.toolbox{position:relative;background:#fffffff2;border:1px solid #d9e3e9;border-radius:14px;box-shadow:0 4px 20px #173f5219;pointer-events:auto}
.search-box{padding:12px}
.search-box label {display:block;font-size:11px;color:#5A7786;letter-spacing:.04em;margin:0 0 8px;font-weight:700}
.search-box input {height:40px;border:1px solid #ccdce5;border-radius:9px;width:100%;padding:0 12px;outline-color:#4596b2;font-size:13px;background:#fff;color:#203d4e}
.search-results{display:none;position:absolute;top:99px;left:0;right:0;background:#fff;border:1px solid #d9e3e9;border-radius:10px;padding:4px;max-height:310px;overflow-y:auto;box-shadow:0 12px 22px #173f522b}
.search-results.is-open{display:block}
.search-results button{display:block;width:100%;text-align:left;white-space:normal;padding:9px 10px;border:0;border-radius:6px}
.search-results .title{display:block;font-size:12px;font-weight:700}
.search-results .sub{display:block;font-size:10px;color:#617785;margin-top:3px}
.toolbox{padding:10px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 17px}
.checkbox{display:flex;gap:6px;align-items:center;font-size:12px;color:#304d5b;font-weight:600;user-select:none;white-space:nowrap}
.checkbox input{accent-color:#196d8c}
.swatch{width:9px;height:9px;border-radius:50%;display:inline-block}
.swatch.sea{background:#047EA7}.swatch.river{background:#2F62CC}.swatch.rail{background:#C77D1C}
.footnote{position:absolute;left:22px;bottom:18px;z-index:3;background:#fffffff1;border:1px solid #d9e3e9;border-radius:10px;padding:9px 13px;box-shadow:0 4px 18px #173f5217;color:#537081;max-width:min(640px,calc(100% - 105px));font-size:11px;line-height:1.45}
.zoom-chip{position:absolute;right:28px;bottom:128px;z-index:4;background:#ffffffed;border:1px solid #d9e3e9;border-radius:9px;padding:7px 9px;font-weight:700;font-size:11px;color:#516b79}
.side-panel{flex:0 0 336px;background:#142636;color:#eaf1f4;display:flex;flex-direction:column;min-width:0;border-left:4px solid #f2f6f7;}
.phone-head{padding:24px 23px 19px;background:#182f42;border-bottom:1px solid #314958;}
.phone-head .eyebrow{font-size:10px;font-weight:750;letter-spacing:.16em;color:#80b5c6;text-transform:uppercase}
.phone-head h2{font-size:21px;font-weight:720;margin:9px 0 7px;letter-spacing:-.03em}
.phone-head p{font-size:12px;color:#a1b8c4;line-height:1.5;margin:0}
.phone-body{padding:23px;flex:1;overflow-y:auto}
.phone-body h3{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800;color:#8bb0c2;margin:0 0 12px}
.phone-stub{border:1px dashed #526c7b;border-radius:15px;padding:23px 16px;color:#c5d3db;text-align:center;background:#1b3344}
.phone-stub strong{font-size:15px;display:block;margin-bottom:8px}
.phone-stub p{font-size:12px;line-height:1.6;margin:0}
.node-readout{margin-top:20px;border-top:1px solid #355061;padding-top:16px}
.node-readout .data-kicker{font-size:10px;color:#96bbc9;letter-spacing:.11em;text-transform:uppercase;margin-bottom:10px}
.node-readout strong{font-size:15px;display:block;line-height:1.4}
.node-readout p{font-size:12px;color:#a6c3d0;line-height:1.5}
.phone-foot{margin-top:auto;padding:18px 23px;border-top:1px solid #314958;font-size:11px;color:#7da2b4}
.lg-popup{max-width:300px;padding:4px}
.lg-popup-strap{font-size:10px;text-transform:uppercase;font-weight:800;letter-spacing:.07em;color:#597b8a}
.lg-popup h3{font-size:15px;line-height:1.3;margin:7px 0 3px;color:#15384b}
.lg-popup-id{font-size:10px;color:#627986;word-break:break-all;margin:3px 0 10px}
.lg-popup-caption{font-weight:800;font-size:11px;text-transform:uppercase;margin:12px 0 6px;color:#477080}
.lg-neighbors{display:grid;gap:5px;max-height:160px;overflow:auto}
.lg-neighbor{width:100%;display:flex;justify-content:space-between;gap:7px;font-size:11px;text-align:left;white-space:normal;padding:8px;border:1px solid #e5edf0}
.lg-neighbor small{color:#8197a0;font-size:9px}
.lg-popup-caveat{color:#b26a16;background:#fff5e4;border-radius:6px;padding:6px;font-size:10px}
.maplibregl-popup-content{border-radius:12px;padding:13px 15px;box-shadow:0 9px 30px #183d4c35}
.mobile-tabs{display:none}
@media(max-width:860px){
 .app{padding-bottom:56px;min-height:0}.map-panel{display:block}.side-panel{display:none;flex:1;border:0}
 .app[data-view="game"] .map-panel{display:none}.app[data-view="game"] .side-panel{display:flex}
 .mobile-tabs{height:56px;position:fixed;bottom:0;left:0;right:0;z-index:12;display:grid;grid-template-columns:1fr 1fr;background:#fff;border-top:1px solid #ccdce3;}
 .mobile-tabs button{border-radius:0;border:0;background:#fff;color:#627c89;font-weight:800;font-size:13px}
 .mobile-tabs button.selected{color:#146380;background:#eaf3f6;border-top:3px solid #146380}
 .topbar{top:12px;left:12px;right:12px;align-items:start}
 .brand{padding:8px 10px}.brand strong{font-size:12px}.brand p{display:none}
 .map-actions button{padding:8px 9px;font-size:11px}
 .overlay-left{left:12px;right:12px;top:76px;width:min(350px,calc(100% - 24px))}
 .footnote{left:12px;bottom:15px;font-size:10px;max-width:calc(100% - 70px)}
 .zoom-chip{right:12px;bottom:120px}
 .phone-head{padding:24px}
}
@media(max-width:460px){
 .brand .eyebrow{font-size:9px}.brand strong{font-size:11px}
 .map-actions{flex-direction:column}.map-actions button{font-size:10px;padding:6px 7px}
 .toolbox{gap:7px 10px}.checkbox{font-size:11px}
 .footnote{max-width:calc(100% - 32px);bottom:12px}
 .zoom-chip{right:12px;bottom:112px}
}

/* Offline map: no CDN / WebGL / third-party tile dependency */
#map{background:#c6e1ec;touch-action:none;overflow:hidden;cursor:grab}
#map.dragging{cursor:grabbing}
#map>canvas{display:block;width:100%;height:100%}
.map-zoom-tools{position:absolute;bottom:30px;right:15px;z-index:5;display:flex;flex-direction:column;gap:5px}
.map-zoom-tools button{width:38px;height:38px;font-size:23px;font-weight:700;border:1px solid #b5cdd7;box-shadow:0 1px 7px #0b304033}
.map-popup{position:absolute;z-index:7;background:#fff;border:1px solid #9cb9c5;box-shadow:0 8px 32px #0b304055;border-radius:12px;padding:14px;width:min(310px,calc(100% - 30px));max-height:min(400px,calc(100% - 26px));overflow:auto;color:#1c3344;font-size:12px}
.map-popup h3{font-size:16px;margin:4px 0 8px}.map-popup p{line-height:1.5;margin:5px 0 10px}.map-popup button{max-width:100%;text-align:left;white-space:normal;font-size:12px;margin:4px;padding:5px 8px}.map-popup .close{float:right;font-size:16px;font-weight:800;margin:0 0 3px 7px}.map-popup .neighbors button{display:block}.map-popup .meta{color:#567385;font-size:11px}
.map-status{position:absolute;z-index:5;bottom:10px;left:12px;padding:6px 9px;background:#f6fafcdd;border-radius:8px;font-size:10px;color:#2c5567;pointer-events:none;max-width:calc(100% - 118px)}
.map-fatal{background:#fee6e2!important;color:#7c2116!important;pointer-events:auto}
@media(max-width:650px){.map-popup{top:135px!important;left:10px!important}.map-zoom-tools{bottom:46px}.map-status{bottom:9px}}

.search-box{z-index:10}.toolbox{z-index:2}.search-results{z-index:11}

body.embed-map .footnote{display:none!important}