/* Mobile sticks are isolated from menus and the existing desktop/pad layout. */
html,body{overscroll-behavior:none}#game{height:100dvh}#scene{touch-action:none}
button,summary{touch-action:manipulation}
#touch-controls{position:absolute;inset:0;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-stick{--stick-size:clamp(112px,29vw,148px);position:absolute;bottom:calc(28px + env(safe-area-inset-bottom));width:var(--stick-size);height:var(--stick-size);border-radius:50%;border:2px solid #d4e6f28c;background:radial-gradient(circle,#15314a35 36%,#1024388c 37%,#18354b70 67%);box-shadow:inset 0 0 0 9px #d7e9f00d,0 4px 20px #0003;display:grid;place-items:center;pointer-events:auto;touch-action:none}
.touch-stick[data-stick=move]{left:calc(18px + env(safe-area-inset-left))}
.touch-stick[data-stick=look]{right:calc(18px + env(safe-area-inset-right))}
.touch-stick-knob{width:38%;height:38%;border-radius:50%;background:linear-gradient(145deg,#f9e29ccc,#d9b650a6);border:2px solid #ffedada6;box-shadow:0 3px 12px #0005;pointer-events:none;will-change:transform}
.touch-stick.is-held{border-color:#ffe18b;background-color:#f5d36919}.touch-stick.is-held .touch-stick-knob{background:#f5d478df}
.touch-stick-label{position:absolute;top:calc(100% + 6px);left:0;right:0;text-align:center;font-size:12px;font-weight:750;line-height:1.3;color:#eef5fc;text-shadow:0 1px 4px #081525;pointer-events:none}
#touch-controls[data-enabled=false]{opacity:.45;pointer-events:none}#touch-controls[data-enabled=false] .touch-stick{pointer-events:none}
#game[data-touch=true] .play-footer>div{display:none}
#game[data-touch=true] .play-footer{left:50%;right:auto;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2}
#game[data-touch=true] #pause{padding:10px 12px;min-height:44px;font-size:12px;white-space:nowrap}
#game[data-touch=true] .hud{left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top))}
#game[data-touch=true]:has(.play-screen:not([hidden])) #display-controls{top:calc(108px + env(safe-area-inset-top));bottom:auto;right:calc(12px + env(safe-area-inset-right));max-width:140px}
#game[data-touch=true]:has(.play-screen:not([hidden])) #fullscreen-status{display:none}
#game[data-touch=true]:has(.play-screen:not([hidden])) #sound-controls{top:calc(156px + env(safe-area-inset-top));bottom:auto;right:calc(12px + env(safe-area-inset-right));width:140px}
#game[data-touch=true]:has(.play-screen:not([hidden])) #audio-status{display:none}
#game[data-touch=true]:has(.play-screen:not([hidden])) #fullscreen-toggle,#game[data-touch=true]:has(.play-screen:not([hidden])) #audio-toggle,#game[data-touch=true]:has(.play-screen:not([hidden])) #sound-settings summary{min-height:44px;display:grid;place-items:center}
#game[data-touch=true]:has(.play-screen:not([hidden])) .run-message-stack{max-width:calc(100% - 155px);justify-self:start}
#game[data-touch=true] .pause-panel{width:min(330px,calc(100vw - 32px));max-height:calc(100dvh - 24px);overflow:auto}
#game[data-touch=true] .selection-panel{max-height:calc(100dvh - 28px);overflow:auto}
#game[data-touch=true] .result-panel{overscroll-behavior:contain}
@media(max-height:520px) and (orientation:landscape){
 .touch-stick{--stick-size:108px;bottom:calc(24px + env(safe-area-inset-bottom))}
 #game[data-touch=true] .hud{grid-template-columns:180px auto;gap:6px}
 #game[data-touch=true] .clock{padding:6px 10px}#game[data-touch=true] .clock strong{font-size:24px}#game[data-touch=true] #run-goal{margin-top:0;font-size:9px}
 #game[data-touch=true] .run-message-stack{position:absolute;top:0;left:50%;transform:translateX(-50%);max-width:calc(100% - 390px)}
 #game[data-touch=true] #run-banner{font-size:13px;padding:6px 9px}
 #game[data-touch=true]:has(.play-screen:not([hidden])) #display-controls{top:auto;right:calc(50% + 58px);bottom:calc(14px + env(safe-area-inset-bottom));max-width:140px}
 #game[data-touch=true]:has(.play-screen:not([hidden])) #sound-controls{top:auto;right:auto;left:calc(50% + 58px);bottom:calc(14px + env(safe-area-inset-bottom));width:140px;justify-content:flex-start}
 #game[data-touch=true]:has(.play-screen:not([hidden])) .sound-panel{top:auto;bottom:50px;max-height:calc(100dvh - 80px)}
 #game[data-touch=true] #opening-countdown{top:58%}
}
@media(max-width:360px){.touch-stick{--stick-size:102px}.touch-stick[data-stick=move]{left:12px}.touch-stick[data-stick=look]{right:12px}#game[data-touch=true] #pause{font-size:10px;padding:8px}}

@media(max-width:699px) and (max-height:520px) and (orientation:landscape){
 #game[data-touch=true]:has(.play-screen:not([hidden])) #sound-controls{left:auto;right:calc(12px + env(safe-area-inset-right));bottom:auto;top:82px;width:140px}
 #game[data-touch=true]:has(.play-screen:not([hidden])) #display-controls{right:auto;left:calc(12px + env(safe-area-inset-left));bottom:auto;top:100px}
 #game[data-touch=true]:has(.play-screen:not([hidden])) .sound-panel{top:48px;bottom:auto;max-height:calc(100dvh - 150px)}
 #game[data-touch=true] .run-message-stack{max-width:calc(100% - 330px)}
 #game[data-touch=true] .enemy-counter{padding:6px 10px}
 #game[data-touch=true] .selection-panel .input-hint{display:none}
}
/* Keep the optional QA toggle away from both thumb pads. */
#game[data-touch=true]:has(#touch-controls:not([hidden])) #qa:has(details:not([open])){top:auto;bottom:calc(76px + env(safe-area-inset-bottom));right:auto;left:50%;transform:translateX(-50%);width:auto;max-width:140px}