/* Personal HUD: landscape uses the free sides as a handheld console. */
#hudLayout{display:none}#hudReset[hidden]{display:none}
.hud-editing #hud,.hud-editing #joystick,.hud-editing #actionPad,.hud-editing #chatToggle,.hud-editing #chat{outline:2px dashed #f4d98b;outline-offset:5px;touch-action:none}.hud-editing .hudMoving{opacity:.78}
@media(pointer:coarse) and (orientation:landscape){
 body{background:#111916}
 main{width:100vw;height:100svh;max-width:none;max-height:none;aspect-ratio:auto}
 #game{position:absolute;left:50%;top:50%;width:min(60vw,calc(100svh * 1.2));height:auto;max-height:100svh;aspect-ratio:6/5;transform:translate(-50%,-50%);border:2px solid #66745d;border-radius:4px;box-shadow:0 0 0 4px #0b120f,0 6px 0 #253128}
 #joystick{left:max(26px,env(safe-area-inset-left));right:auto;top:50%;bottom:auto;transform:translateY(-50%)}
 #actionPad{left:auto;right:max(28px,env(safe-area-inset-right));top:50%;bottom:auto;transform:translateY(-50%) rotate(-12deg)}
 #chatToggle{left:calc(50% - 18px);right:auto;top:12px;bottom:auto}
 #chat{left:calc(50% - 155px);right:auto;top:48px;bottom:auto;width:310px}
 #hud{left:calc(50% - 210px);right:auto;top:10px;bottom:auto;width:420px;justify-content:flex-end}
 #online{margin-right:auto}
 #cameraFrame{top:48px;right:16px}
 #remoteCameras{top:48px;right:126px}
 #hudLayout{display:inline-flex;align-items:center;justify-content:center}
}
@media(pointer:coarse) and (orientation:portrait){#hudLayout{display:inline-flex;align-items:center;justify-content:center}}
@media(pointer:coarse){#hudLayout,#hudReset{padding:5px 7px;font-size:10px;min-height:28px}.hud-editing #hudLayout{background:#c59c55;color:#203228}.hud-editing #hudReset{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;color:#fff4dc;background:#765749}}