/* All geometry is opt-in: a resized PC window or a Windows touch screen keeps
   its existing native layout. Insets protect the notch and the Home indicator. */
html[data-mobile=true] #game{position:fixed;left:var(--mobile-left,0px);top:var(--mobile-top,0px);width:var(--mobile-width,100%);height:var(--mobile-height,100dvh);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);overscroll-behavior:none;touch-action:manipulation}
html[data-mobile=true] #stage{left:env(safe-area-inset-left,0px);top:env(safe-area-inset-top,0px);touch-action:none}
html[data-mobile=true] #game>footer{display:none!important}
html[data-mobile=true] #game.native-cursors,html[data-mobile=true] #game.native-cursors *{cursor:auto!important}
html[data-mobile=true] #credentials input{font-size:16px!important}
html[data-mobile=true] #game>.server-accessible[data-unscaled=true]{left:max(8px,env(safe-area-inset-left,0px))!important;top:calc(env(safe-area-inset-top,0px) + 60px)!important;max-height:calc(var(--mobile-height,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 80px);font-size:16px;--login-target-size:44px}
html[data-mobile=true] .server-accessible summary,html[data-mobile=true] .server-accessible select{min-height:44px!important}
#mobile-joystick{position:absolute;left:calc(env(safe-area-inset-left,0px) + 18px);bottom:calc(env(safe-area-inset-bottom,0px) + 96px);width:clamp(112px,17vmin,144px);aspect-ratio:1;padding:0;border:1px solid #c4b58288;border-radius:50%;background:radial-gradient(circle,#12252a66 0 32%,#0a161b80 33% 65%,#b7a67130 66% 68%,#0a161b88 69%);box-shadow:inset 0 0 20px #0006,0 3px 12px #0005;z-index:7;touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
#mobile-joystick:focus-visible{outline:2px solid #bdeaf4;outline-offset:4px}
#mobile-joystick[data-active=true]{border-color:#e4d197c0;background-color:#12495745}
.joystick-guide{position:absolute;inset:15%;border:1px dashed #b9c8bf45;border-radius:50%;pointer-events:none}
.joystick-guide::before,.joystick-guide::after{content:'';position:absolute;background:#b9c8bf35;left:50%;top:50%;transform:translate(-50%,-50%)}
.joystick-guide::before{width:100%;height:1px}.joystick-guide::after{width:1px;height:100%}
.joystick-knob{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;border-radius:50%;border:1px solid #c7b884bb;background:radial-gradient(circle at 35% 25%,#819e9be8,#254853e8 50%,#0c222ce8);box-shadow:0 3px 9px #0009,inset 0 1px 4px #e8e0b466;transform:translate(calc(-50% + var(--stick-x,0px)),calc(-50% + var(--stick-y,0px)));pointer-events:none}
html:not([data-mobile=true]) #mobile-joystick{display:none}
#mobile-tools{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);right:calc(env(safe-area-inset-right,0px) + 8px);display:flex;gap:8px;z-index:35}
#mobile-tools button,#mobile-help button{min-height:44px;padding:8px 14px;border:1px solid #8b7952;border-radius:4px;background:#12242bec;color:#eadcb5;font:14px/1.3 Tahoma,Arial,sans-serif;touch-action:manipulation}
#mobile-tools button:focus-visible,#mobile-help button:focus-visible{outline:2px solid #c9e9f0;outline-offset:3px}
#mobile-help{width:min(440px,calc(100% - 32px));max-height:calc(var(--mobile-height,100dvh) - 32px);overflow:auto;padding:22px;background:#111a1e;color:#ded4bd;border:1px solid #8b7952;font:16px/1.5 Tahoma,Arial,sans-serif}
#mobile-help::backdrop{background:#000b}
#mobile-help h2{font-size:20px;margin:0 0 12px;color:#edddb3}
#mobile-help p{margin:12px 0}
#mobile-landscape{color:#a9bdc3}
html:not([data-mobile=true]) #mobile-tools,body.selecting #mobile-tools,body.in-field #mobile-tools,#game:has(#loading:not([hidden])) #mobile-tools{display:none}
@media(max-height:500px){html[data-mobile=true] #loading{padding:12px}html[data-mobile=true] .load-panel{padding:12px 18px}html[data-mobile=true] #loading .load-brand{width:64px;height:64px;margin-bottom:6px}html[data-mobile=true] #loading .load-hint{display:none}html[data-mobile=true] #loading #load-count{margin-bottom:0;min-height:20px}}