/* Mobile function controls use the same viewport edge as the rendered world.
   Source glyphs sit inside complete circular bezels; the hit area stays 44px. */
.desktop-client.touch-client{--function-edge:4px;--function-width:44px}
/* Keep the complete identity strip and minimap clear of the left phone cutout. */
body.desktop-client{--native-hud-left:max(84px,calc(env(safe-area-inset-left,0px) + 8px));--native-hud-width:min(717px,calc(100vw - var(--native-hud-left) - 56px))}
/* Reuse only the original 75px right ornament, mirrored at the left seam.
   Both caps use the strip's scale; no stretched replacement artwork. */
.desktop-client .player-card::before{content:"";position:absolute;top:0;right:100%;width:calc(var(--native-hud-width) * 75 / 717);height:100%;background:url('/assets/ui/top-0-0.png') right top/var(--native-hud-width) 100% no-repeat;transform:scaleX(-1);pointer-events:none}
.desktop-client.touch-client .map-card{left:calc(var(--native-hud-left) + 2px)}
.desktop-client.touch-client .client-network :is([data-panel="help"],#fullscreen){display:none}
.desktop-client.touch-client .function-rail{right:var(--function-edge);top:82px;bottom:18px;width:var(--function-width);gap:4px;padding:0;align-items:center;scroll-padding:0;scroll-snap-type:y mandatory;background:none!important}
.desktop-client.touch-client .function-rail>button{position:relative;display:block;flex:0 0 44px;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none!important;color:transparent;font-size:0;overflow:visible;touch-action:pan-y;scroll-snap-align:start;scroll-snap-stop:always;transition:filter .15s}
.desktop-client.touch-client .function-rail>button::before{content:"";position:absolute;inset:2px;background:url('/assets/ui/native-round-bezel.png') center/contain no-repeat,radial-gradient(circle at 40% 32%,#283b49 0,#0e1c25 64%,transparent 66%);border-radius:50%;filter:drop-shadow(0 1px 2px #0009);pointer-events:none}
.desktop-client.touch-client .function-rail>button::after{content:"";position:absolute;inset:8px;background:var(--rail-glyph) center/32px 32px no-repeat;clip-path:circle(50%);pointer-events:none}
.desktop-client.touch-client .function-rail>button>span{display:none}
.desktop-client.touch-client .function-rail>button:hover{filter:brightness(1.12)}
.desktop-client.touch-client .function-rail>button:active{transform:none;filter:brightness(1.25)}
.desktop-client.touch-client .function-rail>button:focus-visible{outline:1px solid #e8cf92;outline-offset:-2px}
.desktop-client.touch-client .function-rail [data-panel="character"],.desktop-client.touch-client .function-rail [data-panel="codex"]{--rail-glyph:url('/assets/ui/rail-2-0-full.png')}
.desktop-client.touch-client .function-rail [data-panel="bag"]{--rail-glyph:url('/assets/ui/rail-3-0-full.png')}
.desktop-client.touch-client .function-rail [data-panel="skills"]{--rail-glyph:url('/assets/ui/rail-4-0-full.png')}
.desktop-client.touch-client .function-rail [data-panel="titles"]{--rail-glyph:url('/assets/ui/rail-5-0-full.png')}
.desktop-client.touch-client .function-rail :is([data-panel="quests"],[data-panel="party"],[data-panel="journal"]){--rail-glyph:url('/assets/ui/rail-8-0-full.png')}
.desktop-client.touch-client .function-rail [data-panel="world"]{--rail-glyph:url('/assets/ui/rail-9-0-full.png')}
.desktop-client.touch-client .function-rail :is([data-panel="nearby"],#chat-toggle){--rail-glyph:url('/assets/ui/rail-10-0-full.png')}
.desktop-client.touch-client .function-rail [data-panel="settings"]{--rail-glyph:url('/assets/ui/rail-6-0.png')}
/* The original circular script arrows include their own carved metal rim. */
.desktop-client.touch-client .rail-toggle{right:var(--function-edge);top:max(34px,calc(env(safe-area-inset-top,0px) + 32px));width:44px;height:44px;min-height:44px;margin:0;padding:0;box-sizing:border-box;border:0;border-image:none;border-radius:50%;background:none;box-shadow:none;color:transparent;font-size:0;text-shadow:none;overflow:visible;touch-action:manipulation;transition:filter .15s}
.desktop-client.touch-client .rail-toggle::before{content:"";position:absolute;inset:4px;background:url('/assets/ui/script-button-12-0.png') center/contain no-repeat;filter:drop-shadow(0 2px 2px #0009);pointer-events:none}
.desktop-client.touch-client .rail-toggle[aria-expanded="false"]::before{background-image:url('/assets/ui/script-button-11-0.png')}
.desktop-client.touch-client .rail-toggle:hover{filter:brightness(1.15)}
.desktop-client.touch-client .rail-toggle:active{transform:none;filter:brightness(1.3)}
.desktop-client.touch-client .rail-toggle:focus-visible{outline:1px solid #f1dda8;outline-offset:-2px}
.desktop-client.touch-client .actionbar{right:calc(var(--function-edge) + var(--function-width) + 10px)}
@media(max-height:350px){.desktop-client.touch-client .function-rail{top:80px;bottom:14px}}