.desktop-client .map-card,.desktop-client.touch-client .map-card{position:fixed;left:max(2px,env(safe-area-inset-left,0px));right:auto;top:calc(env(safe-area-inset-top,0px) + var(--native-hud-height) + 4px);width:116px;padding:0;text-align:center;pointer-events:auto}
.desktop-client .map-card canvas,.desktop-client.touch-client .map-card canvas{width:112px;height:76px;margin:auto;cursor:pointer;opacity:1}
.desktop-client .map-card canvas:focus-visible{outline:2px solid #ebd294;outline-offset:2px}
.desktop-client .map-card strong,.desktop-client.touch-client .map-card strong{display:block;width:116px;margin:2px 0 0;font-size:12px;line-height:17px;color:#ffedc3;text-shadow:0 1px 2px #000,1px 0 2px #000,-1px 0 2px #000;white-space:normal;overflow:visible}
.desktop-client .map-card #coordinates,.desktop-client.touch-client .map-card #coordinates{position:static;display:block;width:116px;padding:1px 0;margin:0;font-size:11px;line-height:16px;color:#fff2cf;text-shadow:0 1px 2px #000,1px 0 2px #000,-1px 0 2px #000;background:#15211783;border:0;border-radius:3px}
.skill-page-toggle{display:none}
.desktop-client.touch-client .actionbar .skill-page-toggle{position:absolute;display:grid;place-items:center;left:235px;top:65px;width:28px;height:28px;min-height:0;padding:0;border:0;background:url('/assets/ui/native-round-bezel.png') center/contain no-repeat;font:13px/1 var(--font);color:#f7e7ba;text-shadow:0 1px #000;pointer-events:auto;touch-action:manipulation;z-index:2}
.action-icon .native-action-icon{display:block;width:29px;height:29px;object-fit:contain;margin:auto}
.desktop-client .function-rail>button[hidden]{display:none!important}
.desktop-client .function-rail .rail-custom-icon{background-image:url('/assets/ui/native-round-bezel.png');background-size:contain;background-position:center;background-repeat:no-repeat;font-size:0}
.desktop-client.touch-client .function-rail .rail-custom-icon{background:none!important}
.desktop-client.touch-client .function-rail .rail-custom-icon::after{display:none}
.desktop-client .function-rail .rail-custom-icon>.rail-native-icon{display:flex;position:absolute;inset:5px;align-items:center;justify-content:center;pointer-events:none;background:none;font-size:0}
.desktop-client.touch-client .function-rail .rail-custom-icon>.rail-native-icon{display:flex;inset:6px}
.desktop-client .function-rail .rail-native-icon .native-item-icon{width:31px;height:31px}
.desktop-client .function-rail .rail-native-icon .native-item-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;inset:auto;margin:0;padding:0;border:0;background:none;opacity:1;visibility:visible;transform:none;box-shadow:none}
.desktop-client .function-rail .rail-native-icon .native-item-icon>span{position:static;display:block;inset:auto;margin:0;padding:0;border:0;opacity:1;visibility:visible;box-shadow:none}
.desktop-client.touch-client .function-rail [data-panel="party"]{--rail-glyph:url('/assets/ui/rail-10-0-full.png')}
.desktop-client:not(.touch-client) .function-rail [data-panel="party"]{background:url('/assets/ui/rail-10-0-full.png') center/contain no-repeat;font-size:0}
.desktop-client:not(.touch-client) .function-rail [data-panel="settings"]{background:url('/assets/ui/rail-6-0.png') center/contain no-repeat;font-size:0}
.desktop-client #rail-toggle{isolation:isolate;width:44px;height:44px;min-height:44px;padding:0;border:0;border-image:none;box-shadow:none;background:none!important;overflow:visible;color:#f1db9f;font-size:17px;line-height:1;text-shadow:0 1px 2px #000}
.desktop-client #rail-toggle::before,.desktop-client #rail-toggle[aria-expanded="false"]::before{content:'';position:absolute;inset:auto;left:calc(50% - 75.65px);top:calc(50% - 20.4px);width:94.35px;height:98.6px;background:url('/assets/ui/rail-0-0.png') center/contain no-repeat;filter:none;transform:none;pointer-events:none;z-index:-1}
.desktop-client #rail-toggle::after{display:none}
.desktop-client .function-rail{isolation:isolate}
.desktop-client .function-rail::before{content:'';position:absolute;left:calc(50% - 16px);top:0;bottom:0;width:32px;background:url('/assets/ui/rail-1-0.png') center top/32px auto repeat-y;pointer-events:none;z-index:-1}
.desktop-client .function-rail .rail-custom-icon>.rail-native-icon{border:0;padding:0;margin:0;box-shadow:none;clip-path:circle(50%);border-radius:50%;background:#11232e;transform:none}
.area-map{box-sizing:border-box;width:min(950px,92vw,calc((100dvh - 144px) * var(--area-map-ratio) + 257px));max-width:92vw;max-height:calc(100dvh - 36px);padding:9px 12px;color:#ebdcba;border:8px solid transparent;border-image:url('/assets/ui/native-detail-frame.png') 7 / 8px / 0 stretch;background:linear-gradient(#1b201ae8,#1b201ae8),url('/assets/ui/native-detail-wood.png');box-shadow:0 5px 22px #0009;font:12px/1.5 var(--font);overflow:hidden}
.area-map::backdrop{background:#09140b83}
.area-map header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;height:28px;gap:10px;background:url('/assets/ui/native-detail-wood.png');padding:0 5px;color:#f5dfab}
.area-map header strong{font-size:16px}
.area-map [data-area-close]{display:grid;place-items:center;width:26px;height:26px;min-height:0;padding:0;border:0;background:url('/assets/ui/native-round-bezel.png') center/contain no-repeat;color:#f3dfb7;font-size:20px}
.area-map-layout{display:grid;grid-template-columns:minmax(0,1fr) 205px;gap:12px;align-items:start;max-height:calc(100dvh - 144px)}
.area-map-scene{position:relative;width:100%;box-sizing:border-box;overflow:hidden;border:1px solid #92764b;box-shadow:inset 0 0 12px #0009;background:#000;border-radius:5px}
.area-map-scene canvas{display:block;width:100%;height:100%;object-fit:fill}
.area-map-markers{position:absolute;inset:0;pointer-events:none}
.area-map .area-marker{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:22px;height:22px;min-height:0;padding:0;border:1px solid #edda99;border-radius:50%;background:#3c6256;color:#fff5d3;font:11px/1 var(--font);text-shadow:0 1px #000;box-shadow:0 1px 4px #000;pointer-events:auto;z-index:2}
.area-map .area-marker.portal{border-radius:5px;background:#745730}
.area-map .area-marker.selected{outline:2px solid #fff0ab;z-index:4}
.area-player{position:absolute;transform:translate(-50%,-50%);width:9px;height:9px;border:2px solid #fff7d4;border-radius:50%;background:#e4b639;box-shadow:0 0 0 3px #151d1599;pointer-events:none;z-index:3}
.area-map aside{display:flex;flex-direction:column;min-width:0;max-height:calc(100dvh - 144px)}
.area-map-legend{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:11px;color:#d1d4b5;margin-bottom:5px}
.area-map-list{min-height:50px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;flex:1}
.area-map .area-map-list button{display:flex;align-items:center;gap:8px;min-height:36px;width:100%;padding:5px 3px;border:0;border-bottom:1px solid #a58c5033;border-radius:0;background:none;text-align:left;font:12px/1.4 var(--font);color:#e9dfbc;box-shadow:none}
.area-map-list button>b{display:grid;place-items:center;flex:none;width:20px;height:20px;background:#3c6256;border:1px solid #ab9869;border-radius:50%;font-size:11px}
.area-map-list button.portal>b{background:#745730;border-radius:4px}
.area-map-list button.selected{background:#b3964530}
.area-map-list small{display:block;color:#b3b594;font-size:10px}
.area-map-detail{display:flex;flex-direction:column;gap:3px;border-top:1px solid #a99161;padding-top:6px;margin-top:6px;flex:none}
.area-map-detail small{color:#bfc0a0}
.area-map .area-map-detail button{min-height:25px;padding:3px 8px 3px 25px;border:0;background:url('/assets/ui/script-button-12-0.png') 3px center/17px no-repeat;text-align:left;font:12px var(--font);color:#f2ddab;box-shadow:none}
.area-map footer{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-size:11px;color:#c4c6a2}
.area-map-loading{position:absolute;bottom:6px;left:6px;right:6px;text-align:center;background:#152117d9;border-radius:4px;color:#f1e2be;font-size:11px;padding:3px;pointer-events:none}
@media(max-width:600px){.desktop-client .map-card,.desktop-client.touch-client .map-card,.desktop-client .map-card strong,.desktop-client .map-card #coordinates,.desktop-client.touch-client .map-card strong,.desktop-client.touch-client .map-card #coordinates{width:108px}.desktop-client .map-card canvas,.desktop-client.touch-client .map-card canvas{width:104px;height:71px}}
@media(max-height:400px){.area-map{width:min(92vw,calc((100dvh - 120px) * var(--area-map-ratio) + 220px));padding:5px 8px;max-height:calc(100dvh - 22px)}.area-map-layout,.area-map aside{max-height:calc(100dvh - 120px)}.area-map-layout{grid-template-columns:minmax(0,1fr) 180px;gap:8px}.area-map header{margin-bottom:4px;height:24px}.area-map footer{margin-top:4px}.area-map header strong{font-size:13px}}