body[data-page="map"]{background:#000;overflow:hidden}
.map-page{position:relative;height:calc(100svh - 82px);min-height:620px;background:#071018;isolation:isolate}
.map-canvas{position:absolute;inset:0;z-index:1;background:#0a2638;contain:layout paint;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.map-canvas:active{cursor:grabbing}
.map-tile-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;transform:translateZ(0)}
.map-native-tile{position:absolute;width:256px;height:256px;max-width:none;user-select:none;-webkit-user-drag:none;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0)}
.map-overlay{position:absolute;inset:0;z-index:2;pointer-events:none}
.map-intro{position:absolute;top:18px;left:max(18px,3vw);width:min(300px,calc(100% - 36px));padding:12px 14px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(9,9,9,.76);box-shadow:0 12px 30px rgba(0,0,0,.26);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:auto}
.map-kicker{display:block;margin-bottom:5px;color:#9f9b95;font-size:7px;font-weight:800;letter-spacing:1.45px}
.map-intro h1{margin:0;font-size:25px;line-height:1;letter-spacing:-1px}
.map-intro p{margin:6px 0 0;color:#aaa59e;font-size:9px;line-height:1.38}
.map-status-line{display:flex;align-items:center;gap:7px;margin-top:8px;color:#d0ccc6;font-size:7.8px;font-weight:700}
.map-status-line i{width:5px;height:5px;border-radius:50%;background:#7fb467;box-shadow:0 0 0 3px rgba(127,180,103,.1)}
.map-bottom-bar{position:absolute;left:max(14px,3vw);right:max(14px,3vw);bottom:max(14px,calc(env(safe-area-inset-bottom) + 10px));display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none}
.map-layer-card,.map-controls{pointer-events:auto;border:1px solid rgba(255,255,255,.09);background:rgba(10,10,10,.84);box-shadow:0 10px 28px rgba(0,0,0,.26);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.map-layer-card{display:flex;align-items:center;gap:3px;padding:4px;border-radius:13px;flex:1;max-width:310px}
.map-layer-card button{height:36px;flex:1;padding:0 11px;border:0;border-radius:9px;background:transparent;color:#8e8a84;font-size:9px;font-weight:800}
.map-layer-card button[aria-pressed="true"]{background:var(--site-accent,#ffab00);color:#111}
.map-controls{display:flex;align-items:center;gap:4px;padding:4px;border-radius:13px}
.map-controls button{height:36px;min-width:36px;padding:0 9px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.025);color:#efede8;display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:8px;font-weight:800}
.map-controls button:active{transform:scale(.95)}
.map-controls svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.map-source{position:absolute;left:50%;bottom:max(65px,calc(env(safe-area-inset-bottom) + 58px));transform:translateX(-50%);max-width:calc(100% - 28px);padding:5px 8px;border-radius:999px;background:rgba(0,0,0,.42);color:#8e8a84;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto}
.map-source a{color:#c8c3bc;text-decoration:none}
.map-error{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:8;width:min(520px,calc(100% - 28px));padding:10px 13px;border:1px solid rgba(255,171,0,.35);border-radius:11px;background:rgba(22,17,8,.95);color:#f2e9d8;font-size:9px;box-shadow:0 14px 36px rgba(0,0,0,.35)}
.map-loading{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#071018;color:#d8d5cf;pointer-events:none;transition:opacity .14s ease,visibility .14s ease}
.map-loading[hidden]{display:none!important}
.map-loader-inner{width:min(280px,calc(100% - 48px));display:grid;gap:8px}
.map-loader-inner>span{font-size:9.5px;font-weight:700;letter-spacing:.035em}
.map-loader-track{height:3px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.11)}
.map-loader-track i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--site-accent,#ffab00);transform:scaleX(0);transform-origin:left center;transition:transform .1s linear}
.map-loader-inner small{color:#99948d;font-size:7.5px;font-weight:600}
.map-page:fullscreen,.map-page:-webkit-full-screen{height:100svh}
.map-page:fullscreen .map-intro,.map-page:-webkit-full-screen .map-intro{top:max(14px,env(safe-area-inset-top))}
@media(max-width:820px){body[data-page="map"] .site-header{height:72px}.map-page{height:calc(100svh - 72px);min-height:520px}.map-intro{top:12px;left:12px;width:min(230px,calc(100% - 24px));padding:10px 11px;border-radius:12px}.map-kicker{font-size:6.4px;letter-spacing:1.2px}.map-intro h1{font-size:21px}.map-intro p{font-size:8px;line-height:1.32;margin-top:5px}.map-status-line{margin-top:6px;font-size:7px}.map-bottom-bar{left:10px;right:10px;bottom:max(10px,calc(env(safe-area-inset-bottom) + 7px));gap:7px}.map-layer-card{max-width:none;min-width:0}.map-layer-card button{height:34px;padding:0 7px;font-size:8px}.map-controls button{height:34px;min-width:34px;padding:0 7px}.map-controls svg{width:15px;height:15px}.map-source{bottom:max(57px,calc(env(safe-area-inset-bottom) + 52px));font-size:6.3px;max-width:calc(100% - 24px)}}
@media(max-width:390px){.map-intro{width:min(215px,calc(100% - 24px))}.map-layer-card button{font-size:7.3px;padding:0 5px}.map-controls{gap:3px;padding:3px}.map-controls button{height:32px;min-width:32px;padding:0 5px}}
@media(prefers-reduced-motion:reduce){.map-loader-track i{transition:none}}