@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{font-family:'Noto Sans Thai',Tahoma,sans-serif;color:#e4f3ed;background:#0a2330;--mint:#c2e8b4;--muted:#98b7bc}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,summary,select{cursor:pointer}a{color:inherit;text-decoration:none}:focus-visible{outline:2px solid #d1efbd;outline-offset:4px}[hidden]{display:none!important}.atlas{height:100svh;min-height:650px;position:relative;overflow:hidden;background:#0a2330}.masthead{position:absolute;z-index:3;left:34px;right:34px;top:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}.brand{font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px;pointer-events:auto}.brand svg{width:33px;fill:none;stroke:var(--mint);stroke-width:2.5}.masthead p{font-size:11px;color:var(--muted);letter-spacing:.5px}.map-surface{position:absolute;inset:0 0 0 275px}#world-map{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#world-map:active{cursor:grabbing}.district-shape{fill:url(#land);stroke:#ccebc2;stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;outline:none}.district-shape:hover,.district-shape:focus,.district-shape.active{fill:#d6edba;stroke:#f4ffe0;stroke-width:2}.district-shape.muted{fill:#4c8179;stroke:#69998f}.neighbor-shape{fill:#244451;stroke:#4b6b75;stroke-width:.8;vector-effect:non-scaling-stroke;cursor:pointer;outline:none}.neighbor-shape:hover,.neighbor-shape:focus,.neighbor-shape.active{fill:#385f66;stroke:#b9d8c7;stroke-width:1.5}.district-name,.tambon-name,.neighbor-name{pointer-events:none;text-anchor:middle;paint-order:stroke;fill:#ecf8df;stroke:#24464b;stroke-width:3px;stroke-linejoin:round}.district-name{font-size:13px;font-weight:600}.neighbor-name{font-size:13px;fill:#9db8bd;font-weight:400;letter-spacing:1px;stroke:#1d3b48}.tambon-shape{fill:#badfac;fill-opacity:.88;stroke:#527c70;stroke-width:1;vector-effect:non-scaling-stroke;cursor:pointer;outline:none}.tambon-shape:hover,.tambon-shape:focus,.tambon-shape.active{fill:#f0e9ac;stroke:#ffffd8;stroke-width:2}.tambon-name{font-size:9px;stroke-width:2px}.tambon-name.active{fill:#fff6c1}.area-panel{position:absolute;z-index:4;left:34px;top:125px;width:265px;border:1px solid #779b922c;border-radius:20px;background:#102c38ed;padding:24px;box-shadow:0 20px 60px #0002;backdrop-filter:blur(16px)}.eyebrow{font-size:8px;color:#afd8bd;font-weight:600;letter-spacing:2px}h1{font-size:44px;margin:17px 0 22px;line-height:1.3;letter-spacing:-1px}h1>span{font-size:21px;font-weight:500;letter-spacing:0}#map-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:20px;font-size:11px;color:var(--muted)}#map-breadcrumbs button{font-size:10px;color:#b1c8c7;border:0;background:none;padding:3px 0}#map-breadcrumbs button[aria-current]{color:#e6f3c7}#map-breadcrumbs button:hover{text-decoration:underline}.select-fields{display:grid;gap:13px}.select-fields label{display:grid;gap:5px;font-size:10px;color:var(--muted)}select{width:100%;min-height:42px;min-width:0;padding:9px 11px;border-radius:9px;border:1px solid #4c716f;background:#183a45;color:#eef5e5;font-size:12px;color-scheme:dark}select:disabled{opacity:.4;cursor:default}.context-toggle{display:flex;align-items:center;gap:8px;color:#b8cbc8;font-size:10px;margin:19px 0 0;cursor:pointer}.context-toggle input{margin:0;width:14px;height:14px;accent-color:#bee8b0}#area-status{font-size:10px;color:#c2d9c5;line-height:1.8;padding-top:15px;margin:15px 0 0;border-top:1px solid #70938b33}.compass{position:absolute;right:37px;top:100px;display:grid;justify-items:center;gap:6px;color:#8fadb5;font-size:11px;pointer-events:none}.compass svg{width:20px;height:44px;fill:none;stroke:currentColor;stroke-width:1.5}.sea-label{position:absolute;left:12%;bottom:15%;color:#76a0aa;font-size:11px;letter-spacing:5px;pointer-events:none}.sea-label span{display:block;font-size:10px;letter-spacing:1px;margin-top:7px;color:#75929d}.map-controls{position:absolute;right:28px;bottom:92px;display:grid;gap:7px}.map-controls button{width:42px;height:42px;border:1px solid #557c7a;border-radius:11px;color:#dcefe6;background:#12333fe8;font-size:22px;box-shadow:0 5px 15px #0001}.map-controls button:hover{background:#34534e}.map-controls button:disabled{opacity:.35;cursor:default}.gesture-hint{position:absolute;bottom:35px;left:50%;transform:translateX(-50%);white-space:nowrap;color:#799ca5;font-size:10px;pointer-events:none}.map-footer{position:absolute;z-index:5;bottom:20px;left:34px;right:32px;display:flex;align-items:end;justify-content:space-between;gap:12px;color:#829fa7;font-size:9px;pointer-events:none}.map-footer details{pointer-events:auto;text-align:right}.map-footer summary{color:#b6ccc7;padding:8px 0;list-style:none}.map-footer summary:before{content:'ⓘ ';margin-right:4px}.map-footer details>div{position:absolute;bottom:35px;right:0;width:min(370px,calc(100vw - 40px));padding:16px 20px;text-align:left;border:1px solid #547570;border-radius:14px;background:#122e3cf5;line-height:1.9;font-size:10px;box-shadow:0 12px 40px #0005}.map-footer p{margin:0 0 10px}.map-footer a{text-decoration:underline;text-underline-offset:3px}.no-script{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);padding:25px;background:#163842;border:1px solid #aecba8;border-radius:15px;width:min(90vw,400px);line-height:1.8}@media(prefers-reduced-motion:no-preference){.area-panel{animation:panel-enter .65s ease-out both}.terrain-piece{animation:land-enter .9s ease-out both}button,select{transition:background .2s,border-color .2s}}@keyframes panel-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes land-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.map-surface{left:220px}.masthead p{display:none}.area-panel{left:20px;width:230px;padding:20px;top:100px}.masthead{left:22px;top:22px}h1{font-size:38px}h1>span{font-size:18px}.map-footer{left:22px}}@media(max-width:640px){.atlas{min-height:700px}.masthead{top:18px;left:20px;right:20px}.brand{font-size:18px}.map-surface{inset:58px 0 275px}#world-map{height:100%;min-height:0}.area-panel{left:12px;right:12px;top:auto;bottom:54px;width:auto;padding:15px 17px;border-radius:18px}.eyebrow{display:none}h1{margin:0 0 9px;font-size:21px;line-height:1.4;display:flex;align-items:center;gap:8px;letter-spacing:0}h1 br{display:none}h1>span{font-size:13px;color:#b1cbbf}#map-breadcrumbs{margin-bottom:10px;gap:6px;min-height:18px}.select-fields{grid-template-columns:1fr 1fr 1fr;gap:8px}.select-fields label{font-size:9px}select{font-size:11px;padding:8px 7px;min-height:42px}.context-toggle{margin-top:12px;font-size:9px}#area-status{border:0;padding:0;margin:9px 0 0;font-size:9px;line-height:1.5}.compass{right:19px;top:15px;gap:2px}.compass svg{height:28px;width:15px}.map-controls{right:14px;bottom:20px;gap:5px}.map-controls button{width:36px;height:36px;font-size:19px}.sea-label{left:8%;bottom:12%;font-size:8px;letter-spacing:3px}.sea-label span{font-size:8px}.gesture-hint{font-size:8px;bottom:0;left:45%}.map-footer{left:20px;right:20px;bottom:10px;font-size:8px}.map-footer summary{padding:8px 0}.neighbor-name{letter-spacing:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#terrain-map{position:absolute;inset:0}#terrain-map .maplibregl-canvas:focus-visible{outline-offset:-4px}.terrain-modes{position:absolute;top:94px;left:22px;z-index:2;display:flex;border:1px solid #587f77;border-radius:12px;background:#102f3ce8;padding:4px;gap:4px}.terrain-modes button{border:0;background:none;border-radius:8px;color:#b6cecb;font-size:11px;padding:8px 12px}.terrain-modes button[aria-pressed=true]{background:#c2e8b4;color:#183d35}.terrain-modes button:disabled{opacity:.5;cursor:wait}.terrain-status{position:absolute;left:26px;top:145px;z-index:2;color:#c6d9c5;font-size:10px;background:#0b2833df;max-width:290px;padding:7px 11px;border-radius:8px;line-height:1.7}.terrain-place-label{color:#e8f2dd;font-size:11px;font-family:'Noto Sans Thai',Tahoma,sans-serif;text-shadow:0 1px 3px #102b35,0 -1px 3px #102b35;pointer-events:none;white-space:nowrap}.terrain-place-label.context{color:#a6bfc0;font-size:12px}.terrain-place-label.tambon{font-size:10px}.terrain-place-label.active{color:#fff3b0}.map-surface.is-3d .compass{display:none}.maplibregl-ctrl-top-right{top:85px!important;right:25px!important}.maplibregl-ctrl-group{background:#d8e3d7!important}.maplibregl-ctrl-bottom-right{bottom:5px!important;right:0!important}.maplibregl-ctrl-attrib{font-size:9px!important;background:#12313ce8!important;color:#adc8bd!important}.maplibregl-ctrl-attrib a{color:#d6e4d1!important}.maplibregl-map{font-family:inherit!important}@media(max-width:640px){.terrain-modes{top:10px;left:12px}.terrain-modes button{font-size:10px;padding:7px 9px}.terrain-status{top:48px;left:12px;max-width:250px;font-size:9px;padding:5px 8px}.maplibregl-ctrl-top-right{top:8px!important;right:9px!important}.maplibregl-ctrl-bottom-right{bottom:0!important}.terrain-place-label{font-size:10px}}

.map-surface{overflow:hidden;isolation:isolate}.atlas{isolation:isolate}

.map-surface.is-3d .sea-label{display:none}