#mobile-controls{position:fixed;inset:0;pointer-events:none;z-index:15;font:600 14px system-ui,"Malgun Gothic",sans-serif;--touch-key:40px;--touch-gap:4px}
#mobile-direction-pad,#mobile-action-pad{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));display:grid;gap:var(--touch-gap);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
#mobile-direction-pad{left:max(8px,env(safe-area-inset-left));grid-template:repeat(3,var(--touch-key))/repeat(3,var(--touch-key))}
#mobile-action-pad{right:max(8px,env(safe-area-inset-right));grid-template:repeat(2,var(--touch-key))/repeat(2,var(--touch-key))}
#mobile-controls button{min-width:0;min-height:0;border:1px solid #748ca5;border-radius:8px;background:#192b3d;color:#eef7ff;font:inherit;touch-action:none;-webkit-touch-callout:none;padding:0}
#mobile-direction-pad button{font-size:23px}#mobile-controls button.pressed{background:#d5e8fa;color:#102033;border-color:#fff}#mobile-speed{grid-column:1/3}#mobile-controls button:focus-visible{outline:2px solid #fff;outline-offset:2px}
body.touch-game-controls{padding:76px 0 152px}body.touch-game-controls main{width:min(100vw,calc((100dvh - 228px)*4/3));height:auto}
@media(orientation:landscape){body.touch-game-controls{padding:40px 144px 0}body.touch-game-controls main{width:min(calc(100vw - 288px),calc((100dvh - 40px)*4/3))}}
@media(orientation:landscape) and (max-width:720px){body.touch-game-controls{padding-top:76px}body.touch-game-controls main{width:min(calc(100vw - 288px),calc((100dvh - 76px)*4/3))}}

#mobile-direction-pad[data-mode="city"]{grid-template-rows:repeat(2,var(--touch-key))}

#mobile-direction-pad{transform:scale(var(--control-scale,1));transform-origin:left bottom}#mobile-action-pad{transform:scale(var(--control-scale,1));transform-origin:right bottom}
#controls-size{display:flex;align-items:center;gap:8px;height:34px;flex-shrink:0;pointer-events:auto;color:#fff;font:12px/1.4 system-ui,"Malgun Gothic",sans-serif;user-select:none}
#controls-size svg{width:22px;height:22px;margin-inline:6px;flex-shrink:0;fill:currentColor}#controls-size output{min-width:38px;text-align:right;font-variant-numeric:tabular-nums;flex-shrink:0}
#controls-size-slider{--size-fill:0%;appearance:none;-webkit-appearance:none;min-width:0;width:110px;height:24px;margin:0 6px;border:0;padding:0;background:linear-gradient(to right,#fff 0 var(--size-fill),#5d626b var(--size-fill) 100%) center/100% 4px no-repeat;cursor:pointer;touch-action:pan-y}
#controls-size-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;border:0;border-radius:50%;background:#fff}#controls-size-slider::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}#controls-size-slider:focus-visible{outline:2px solid #8ec5ff;outline-offset:3px}

/* Keep both ranges visually and physically equal, including their touch areas. */
#sound-volume{height:24px;background-size:100% 4px;background-position:center;background-repeat:no-repeat}
@media(max-width:1000px){#sound-volume,#controls-size-slider{width:86px}}
@media(min-width:721px) and (max-width:900px){#save-backup-toolbar .backup-direct-actions button{padding-inline:6px;font-size:11px}#sound-volume,#controls-size-slider{width:64px}#audio-controls,#controls-size{gap:6px}}
@media(max-width:560px){#sound-volume,#controls-size-slider{width:64px}#controls-size{gap:5px}}
@media(max-width:360px){#sound-volume,#controls-size-slider{width:48px}#audio-controls,#controls-size{gap:3px}#sound-volume-value,#controls-size output{min-width:34px;width:34px}}

/* Keep the first notice clear of the controls, including short landscape screens. */
body.touch-game-controls:has(> #project-intro:not([hidden])) #project-intro{max-height:calc(100dvh - 228px);max-width:100%}
@media(orientation:landscape){body.touch-game-controls:has(> #project-intro:not([hidden])) #project-intro{width:min(760px,calc(100vw - 320px));max-height:calc(100dvh - 64px)}}