/* Original PANEL top strip: 717×22. Its four wells start at x=54,203,354,505.
   Position the identity and the 128×13 fill sprites in these wells together;
   legacy flex padding and meter margins must not add a second row. */
body.desktop-client{
 --native-hud-left:env(safe-area-inset-left,0px);
 --native-hud-width:min(717px,calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 116px));
 --native-hud-height:calc(var(--native-hud-width) * .0306834);
 --native-meter-width:calc(var(--native-hud-width) * .17852162);
 --native-meter-height:calc(var(--native-hud-width) * .01813110);
}
.desktop-client .scene-top{inset:0;display:block}
.desktop-client .player-card{
 position:absolute;left:var(--native-hud-left);top:env(safe-area-inset-top,0px);
 width:var(--native-hud-width);height:var(--native-hud-height);min-width:0;
 display:block;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;
 background:transparent url('/assets/ui/top-0-0.png') left top/100% 100% no-repeat;
}
.desktop-client .player-card .portrait-mark{position:absolute;left:8px;top:0;width:22px;height:22px;padding:0;margin:0;min-height:0;font-size:12px}
.desktop-client .player-card .identity{position:absolute;left:7.53138%;top:0;width:17.99163%;height:100%;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:4px;margin:0;padding:0;line-height:1;font-size:10px;white-space:nowrap}
.desktop-client .player-card .identity b{overflow:hidden;text-overflow:ellipsis;font-size:10px;font-weight:400;line-height:1.2}
.desktop-client .player-card .identity span{flex:none;font-size:8px}
.desktop-client .player-card .meter.hp,
.desktop-client .player-card .meter.mp{
 position:absolute;top:18.18182%;width:var(--native-meter-width);height:var(--native-meter-height);
 margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#101410;overflow:hidden;
}
.desktop-client .player-card .meter.hp{left:28.312413%;--native-fill:url('/assets/ui/top-1-0.png')}
.desktop-client .player-card .meter.mp{left:49.372385%;--native-fill:url('/assets/ui/top-2-0.png')}
.desktop-client .sp-readout{
 position:fixed;left:calc(var(--native-hud-left) + var(--native-hud-width) * .70432357);
 top:calc(env(safe-area-inset-top,0px) + var(--native-hud-height) * .1818182);
 width:var(--native-meter-width);height:var(--native-meter-height);padding:0;margin:0;border:0;background:none;
}
.desktop-client .sp-readout .meter.sp{position:relative;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:#101410;overflow:hidden;--native-fill:url('/assets/ui/top-3-0.png')}
.desktop-client .player-card .meter::before,
.desktop-client .sp-readout .meter::before{content:"";position:absolute;inset:0;background:var(--native-fill) left top/var(--native-meter-width) var(--native-meter-height) no-repeat;filter:grayscale(1) brightness(.4);pointer-events:none}
.desktop-client .player-card .meter>span,
.desktop-client .sp-readout .meter>span{position:relative;height:100%;background:var(--native-fill) left top/var(--native-meter-width) var(--native-meter-height) no-repeat}
.desktop-client .player-card .meter>b,
.desktop-client .sp-readout .meter>b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;margin:0;line-height:1;font-size:9px;font-weight:400;letter-spacing:0;color:#fff4db;text-shadow:1px 1px #000;white-space:nowrap}
.desktop-client .client-network{top:max(2px,env(safe-area-inset-top));right:max(6px,env(safe-area-inset-right))}
@media(max-width:1050px){.desktop-client .client-network #network{display:none}}
/* The minimap is a generated canvas, not a PANEL0100 frame. Remove the extra
   ridge and dark rectangular backing; soften only the canvas's outer pixels. */
.desktop-client .map-card{left:calc(6px + env(safe-area-inset-left));top:calc(30px + env(safe-area-inset-top));width:111px;height:auto;padding:4px;background:none;border:0;border-radius:0;box-shadow:none}
.desktop-client .map-card canvas{display:block;width:99px;height:70px;margin:0;border:0;border-radius:3px;opacity:.92;mask-image:linear-gradient(to right,transparent,#000 5px,#000 calc(100% - 5px),transparent),linear-gradient(to bottom,transparent,#000 5px,#000 calc(100% - 5px),transparent);mask-composite:intersect}
.desktop-client .map-card strong{width:99px;margin:3px 0 0;padding:0;background:none;color:#f4e4bd;text-shadow:1px 1px 2px #101410,-1px -1px 2px #101410;font-size:9px;line-height:14px}
/* rail-1 contains the whole original button stack. Using it behind live
   buttons paints every frame twice. Each button already owns its native PNG. */
.desktop-client .function-rail,
.desktop-client.touch-client .function-rail{background:none!important;border:0;border-radius:0;box-shadow:none;padding:0;right:max(6px,env(safe-area-inset-right));top:max(35px,env(safe-area-inset-top));bottom:24px;width:42px;gap:4px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.desktop-client .function-rail::-webkit-scrollbar{display:none}
.desktop-client .function-rail .rail-orb{display:none}
.desktop-client .function-rail>button,
.desktop-client.touch-client .function-rail>button{border:0;border-radius:0;box-shadow:none;background-color:transparent!important;background-size:contain;background-position:center;background-repeat:no-repeat;padding:0;flex-shrink:0}
.desktop-client .function-rail>button{width:32px;height:35px;flex-basis:35px}
.desktop-client.touch-client .function-rail>button{width:42px;height:42px;flex-basis:42px}
.desktop-client.touch-client .touch-joystick{left:calc(50px + env(safe-area-inset-left,0px))}
@media(max-height:500px){
 .desktop-client .map-card{top:calc(27px + env(safe-area-inset-top));width:104px}
 .desktop-client .map-card canvas{width:94px;height:60px}
 .desktop-client .map-card strong{width:94px;font-size:8px}
 .desktop-client .function-rail,.desktop-client.touch-client .function-rail{top:max(42px,env(safe-area-inset-top));bottom:20px}
}
/* Touch XP belongs directly beneath the HP/MP section, not a second floating
   legacy actionbar. Keep the small label and track in a single 16px strip. */
.desktop-client.touch-client .actionbar .experience{position:fixed;left:calc(var(--native-hud-left) + var(--native-hud-width) * .28312413);right:auto;top:calc(env(safe-area-inset-top,0px) + var(--native-hud-height) + 3px);bottom:auto;width:calc(var(--native-hud-width) * .38912134);height:16px;min-width:0;max-width:none;padding:0;margin:0;border:0;background:none;box-shadow:none;transform:none;pointer-events:none}
.desktop-client.touch-client .actionbar .experience>div:first-child{display:flex;align-items:center;justify-content:space-between;height:11px;line-height:11px;margin:0;padding:0;background:none;border:0;color:#e8dfbc;font-size:8px;text-shadow:1px 1px #000}
.desktop-client.touch-client .actionbar .experience>div:first-child b{font-size:8px;line-height:11px;color:#e8dfbc;font-weight:400}
.desktop-client.touch-client .actionbar .experience .xp-track{display:block;width:100%;height:3px;min-height:0;margin:1px 0 0;padding:0;border:0;background:#151b10a6;box-shadow:none}
/* The world fills the screen. Keep its original HUD edges in that same
   coordinate space using the same origin for the world and its controls. */
body.desktop-client{--native-hud-left:0px;--native-hud-width:min(717px,calc(100vw - 116px))}
.desktop-client .client-network{right:4px}
.desktop-client .map-card{left:6px}
.desktop-client .function-rail,.desktop-client.touch-client .function-rail{right:4px}
.desktop-client.touch-client .function-rail{bottom:58px}
.desktop-client.touch-client .actionbar{right:54px;bottom:54px;transform:none;transform-origin:right bottom}
.desktop-client.touch-client .actionbar button.action:is([data-slot="2"],[data-slot="3"],[data-slot="4"],[data-slot="5"]){position:fixed;left:auto;top:auto;bottom:4px}
.desktop-client.touch-client .actionbar button.action[data-slot="2"]{right:154px}
.desktop-client.touch-client .actionbar button.action[data-slot="3"]{right:104px}
.desktop-client.touch-client .actionbar button.action[data-slot="4"]{right:54px}
.desktop-client.touch-client .actionbar button.action[data-slot="5"]{right:4px}
.desktop-client.touch-client .actionbar #coordinates{right:208px;bottom:4px;min-width:0}
.desktop-client.touch-client .actionbar .experience .xp-track span{height:3px;background:#c6a765}

/* Landscape refinement: identity XP, separate utility controls and a native
   framed rail handle. The handle remains available when the rail is hidden. */
.desktop-client .player-card>.experience{position:absolute;left:7.53138%;right:auto;top:calc(100% + 3px);bottom:auto;width:17.99163%;height:16px;min-width:0;max-width:none;padding:0;margin:0;border:0;background:none;box-shadow:none;transform:none;pointer-events:none}
.desktop-client .player-card>.experience>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:5px;height:11px;line-height:11px;margin:0;padding:0;color:#e8dfbc;font-size:8px;text-shadow:1px 1px #000}
.desktop-client .player-card>.experience b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;line-height:11px;color:#e8dfbc;font-weight:400}
.desktop-client .player-card>.experience .xp-track{display:block;width:100%;height:3px;min-height:0;margin:1px 0 0;padding:0;border:0;background:#151b10a6;box-shadow:none}
.desktop-client .player-card>.experience .xp-track span{height:3px;background:#c6a765}
.desktop-client .map-card,.desktop-client.touch-client .map-card{top:calc(env(safe-area-inset-top,0px) + var(--native-hud-height) + 21px)}
.desktop-client .rail-toggle{position:fixed;z-index:12;right:4px;top:max(36px,env(safe-area-inset-top,0px));width:32px;height:30px;display:grid;place-items:center;padding:0;border:4px solid transparent;border-image:url('/assets/ui/native-entry-action.png') 10 12 fill / 4px 6px / 0 stretch;background:#101a15;color:#f4e0af;font-family:'Asgard Title',serif;font-size:23px;line-height:1;touch-action:manipulation;user-select:none;text-shadow:1px 1px #000}
.desktop-client .rail-toggle:hover{filter:brightness(1.25)}
.desktop-client .function-rail{top:max(74px,calc(env(safe-area-inset-top,0px) + 38px))}
.desktop-client.touch-client .rail-toggle{top:max(42px,env(safe-area-inset-top,0px));width:42px;height:32px}
.desktop-client.touch-client .function-rail{top:max(82px,calc(env(safe-area-inset-top,0px) + 40px));bottom:58px}
.desktop-client.touch-client .actionbar{bottom:12px}
.desktop-client.touch-client .actionbar button.action[data-slot="2"]{right:224px}
.desktop-client.touch-client .actionbar button.action[data-slot="3"]{right:174px}
.desktop-client.touch-client .actionbar button.action[data-slot="4"]{right:124px}
.desktop-client.touch-client .actionbar button.action[data-slot="5"]{right:74px}
.desktop-client.touch-client .actionbar #coordinates{right:278px}