/* Compact landscape controls, with complete source bezels and room to play. */
.desktop-client.touch-client{--mobile-wheel-scale:.78;--touch-bottom:104px}
.desktop-client.touch-client .touch-joystick{width:116px;height:116px;left:calc(44px + env(safe-area-inset-left,0px));bottom:24px}
.desktop-client.touch-client .joystick-stick{width:46px;height:46px}
.desktop-client.touch-client .joystick-arrows::before{width:46px;height:46px}
.desktop-client.touch-client .actionbar{right:calc(56px + env(safe-area-inset-right,0px));bottom:10px;height:246px;transform:scale(var(--mobile-wheel-scale));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:absolute;top:202px;bottom:auto;right:auto}
.desktop-client.touch-client .actionbar button.action[data-slot="2"]{left:44px}
.desktop-client.touch-client .actionbar button.action[data-slot="3"]{left:94px}
.desktop-client.touch-client .actionbar button.action[data-slot="4"]{left:144px}
.desktop-client.touch-client .actionbar button.action[data-slot="5"]{left:194px}
.desktop-client.touch-client .actionbar button.action:is([data-slot="2"],[data-slot="3"],[data-slot="4"],[data-slot="5"]) .action-icon{height:30px;margin-bottom:7px}
.desktop-client.touch-client .actionbar button.action:is([data-slot="2"],[data-slot="3"],[data-slot="4"],[data-slot="5"]) .native-item-icon{width:32px;height:32px}
.desktop-client.touch-client .actionbar button.action:is([data-slot="2"],[data-slot="3"],[data-slot="4"],[data-slot="5"]) b{font-size:10px;line-height:1.1}
.desktop-client.touch-client .actionbar button.action::before{background:url('/assets/ui/native-round-bezel.png') center/contain no-repeat;clip-path:none}
.desktop-client.touch-client .actionbar button.action::after{inset:14%;background:radial-gradient(circle at 38% 32%,#27352e,#0d1718 78%)}
.desktop-client.touch-client .function-rail{right:calc(7px + env(safe-area-inset-right,0px));top:76px;bottom:64px;width:44px;gap:2px;align-items:center;padding:3px 0;scroll-snap-type:y mandatory}
/* Each original rail PNG already includes its complete rim. Preserve its
   aspect ratio and keep a 44px touch target without adding another frame. */
.desktop-client.touch-client .function-rail>button{position:relative;width:44px;height:44px;flex:0 0 44px;background-size:32px auto;overflow:visible;scroll-snap-align:start}
.desktop-client.touch-client .function-rail>button::before{content:none}
.desktop-client.touch-client .rail-toggle{right:calc(8px + env(safe-area-inset-right,0px));top:40px;width:38px;height:30px;border:0;border-image:none;border-radius:50%;background:radial-gradient(circle,#26312a,#101715);box-shadow:none}
.desktop-client.touch-client .rail-toggle::before{content:"";position:absolute;inset:0;background:url('/assets/ui/native-round-bezel.png') center/contain no-repeat;pointer-events:none}
.desktop-client .map-card #coordinates{position:static;display:block;box-sizing:border-box;width:94px;min-width:0;height:auto;margin:0;padding:1px 0;border:0;background:none;font:8px/14px var(--font);color:#d7ceb1;text-align:center;text-shadow:0 1px 2px #101410;white-space:nowrap}
.desktop-client.touch-client .map-card{width:100px;padding:3px;top:calc(env(safe-area-inset-top,0px) + var(--native-hud-height) + 20px)}
.desktop-client.touch-client .map-card canvas{width:88px;height:auto;aspect-ratio:144/100}
.desktop-client.touch-client .map-card #map-subtitle{display:none}
.desktop-client.touch-client .map-card strong,.desktop-client.touch-client .map-card #coordinates{width:88px}
.desktop-client.touch-client .actionbar .bottom-nav{display:none}
.desktop-client.touch-client .scene-bottom{left:180px;right:300px}
@media(max-height:350px){
 .desktop-client.touch-client{--mobile-wheel-scale:.72}
 .desktop-client.touch-client .touch-joystick{width:104px;height:104px;bottom:18px}
 .desktop-client.touch-client .function-rail{top:72px;bottom:52px}
}