.mobile-help{display:none}
#mobileControls[hidden],#mobilePanel[hidden]{display:none!important}
#mobileControls{display:none}
.touch-controls #world,.touch-controls #mobileControls{touch-action:none}
.touch-controls{overscroll-behavior:none;-webkit-user-select:none;user-select:none}
.touch-controls button,.touch-controls select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.touch-controls .desktop-help{display:none}
.touch-controls .mobile-help{display:grid}
.touch-controls header{top:calc(12px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));gap:8px;z-index:40}
.touch-controls .brand{gap:8px;flex-shrink:0}
.touch-controls .brand b{font-size:32px;padding-right:9px}
.touch-controls .brand span{font-size:16px;letter-spacing:2px}
.touch-controls .brand small{font-size:6px;letter-spacing:.7px}
.touch-controls #zone{display:none}
.touch-controls #helpButton,.touch-controls #screenSettings{padding:8px;font-size:10px;white-space:nowrap;min-height:40px}
.touch-controls #helpButton{margin-left:auto}
.touch-controls #welcome{left:8%;right:8%;top:23%}
.touch-controls #welcome h1{font-size:48px;line-height:1.25;margin:18px 0}
.touch-controls #start{max-width:100%;padding:14px 24px;font-size:12px;letter-spacing:2px}
.touch-controls #welcome .meta{max-width:100%;letter-spacing:1px}
.touch-controls #mission{top:calc(82px + env(safe-area-inset-top));left:calc(14px + env(safe-area-inset-left));width:170px;pointer-events:none}
.touch-controls #mission h2{margin:4px 0}
.touch-controls #mission strong{font-size:30px}
.touch-controls #mission .eyebrow{font-size:8px}
.touch-controls #mission p{font-size:10px;margin:5px 0}
.touch-controls #mobileControls{display:block;position:fixed;inset:0;z-index:35;pointer-events:none}
#mobileMenu{position:absolute;top:calc(79px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));padding:10px 12px;font-size:11px;min-height:42px;pointer-events:auto;background:#071a2de8}
#mobileMovement,#mobileFlight{position:absolute;bottom:calc(38px + env(safe-area-inset-bottom));pointer-events:auto}
#mobileMovement{left:calc(16px + env(safe-area-inset-left))}
#mobileFlight{right:calc(14px + env(safe-area-inset-right))}
.controlNote{display:block;text-align:center;font-size:10px;letter-spacing:1px;color:#c6e4e6;text-shadow:0 1px 4px #000;margin-bottom:8px;pointer-events:none}
#mobileJoystick{width:132px;height:132px;position:relative;border:1px solid #dbbd8466;border-radius:50%;background:#081a2dc9;box-shadow:inset 0 0 28px #0006;touch-action:none}
#mobileJoystick.active{border-color:#e5b678}
.joystickArrows{position:absolute;inset:14px;text-align:center;color:#bdcbd73b;font-size:19px;line-height:1.7;pointer-events:none}
#mobileJoystickThumb{position:absolute;left:50%;top:50%;width:48px;height:48px;border:1px solid #e6c28f;border-radius:50%;background:#ddb77e66;transform:translate(-50%,-50%);box-shadow:0 0 18px #0003;pointer-events:none;z-index:1}
.flightButtons{display:grid;grid-template-columns:repeat(3,46px);gap:7px}
.flightButtons button{width:46px;height:50px;padding:3px 1px;font-size:20px;line-height:1.05;touch-action:none;background:#081a2ddd;border-color:#dec48e5c;border-radius:9px;box-shadow:0 2px 10px #0005}
.flightButtons small{display:block;font-size:9px;line-height:1.6;margin-top:2px}
.flightButtons button.active{color:#172431;background:#e5b678;border-color:#f3d9b4}
#mobileInteract{background:#174454ed;border-color:#81dce294}
.controls-paused #mobileMovement,.controls-paused #mobileFlight{visibility:hidden}
#mobilePanel{position:fixed;top:calc(132px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));left:calc(12px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom));z-index:38;overflow:auto;overscroll-behavior:contain;touch-action:pan-y;background:#061422f5;padding:12px;border:1px solid #e5b67866;border-radius:12px;box-shadow:0 5px 28px #0008}
.touch-controls #mobilePanel #transport{position:static;width:100%;margin:0;padding:12px;background:transparent;border:0;backdrop-filter:none}
.touch-controls #mobilePanel .vehicles{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.touch-controls #mobilePanel .vehicles button{font-size:11px;min-height:40px}
.touch-controls #mobilePanel #actions{position:static;transform:none;display:flex;flex-wrap:wrap;width:100%;max-width:none;margin:6px 0 0;gap:7px;white-space:normal}
.touch-controls #mobilePanel #actions[hidden]{display:none}
.touch-controls #mobilePanel #actions button{flex:1 1 40%;font-size:11px;min-height:40px}
.touch-controls #dest{font-size:12px;min-height:40px}
.touch-controls #navGo{font-size:12px;min-height:42px}
.touch-controls #prompt{top:52%;max-width:calc(100vw - 34px);width:max-content;text-align:center;font-size:11px;letter-spacing:1px;padding:9px 12px;pointer-events:none}
.touch-controls #toast{top:calc(217px + env(safe-area-inset-top));max-width:calc(100vw - 28px);width:max-content;padding:10px 13px;font-size:11px;z-index:36}
.touch-controls footer{bottom:calc(9px + env(safe-area-inset-bottom));left:calc(13px + env(safe-area-inset-left));right:calc(13px + env(safe-area-inset-right));font-size:9px;letter-spacing:0}
.touch-controls #hint{display:none}
.touch-controls dialog{max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:24px 20px;overflow:auto;touch-action:pan-y;-webkit-user-select:text;user-select:text}
.touch-controls dialog h2{font-size:22px;margin:16px 0}
.touch-controls dialog dl{grid-template-columns:95px 1fr;gap:9px;font-size:11px}
.touch-controls dialog p{font-size:12px}
.touch-controls #complete{padding:26px 25px;width:min(340px,90vw);max-height:80dvh;overflow:auto}
.touch-controls #complete h2{font-size:30px}
@media (orientation:landscape) and (max-height:600px){
 .touch-controls header{top:calc(8px + env(safe-area-inset-top))}
 .touch-controls .brand b{font-size:28px}
 .touch-controls #welcome{top:22%;left:7%;right:auto}
 .touch-controls #welcome h1{font-size:34px;margin:6px 0}
 .touch-controls #welcome p{font-size:11px;line-height:1.5;margin:7px 0}
 .touch-controls #start{margin-top:5px;padding:10px 20px}
 .touch-controls #welcome .meta{margin-top:9px;font-size:8px}
 .touch-controls #mission{top:calc(65px + env(safe-area-inset-top));width:155px}
 .touch-controls #mission strong{font-size:24px}
 .touch-controls #mission .eyebrow{display:none}
 #mobileMenu{top:calc(62px + env(safe-area-inset-top));padding:8px 11px;min-height:38px}
 #mobileMovement,#mobileFlight{bottom:calc(30px + env(safe-area-inset-bottom))}
 #mobileJoystick{width:112px;height:112px}
 #mobileJoystickThumb{width:43px;height:43px}
 .joystickArrows{inset:12px;font-size:17px;line-height:1.5}
 .flightButtons{grid-template-columns:repeat(3,45px);gap:6px}
 .flightButtons button{width:45px;height:45px}
 .controlNote{margin-bottom:6px;font-size:9px}
 #mobilePanel{top:calc(108px + env(safe-area-inset-top));left:auto;width:min(460px,calc(100vw - 24px));bottom:calc(16px + env(safe-area-inset-bottom))}
 .touch-controls #toast{top:calc(115px + env(safe-area-inset-top));max-width:calc(100vw - 370px)}
 .touch-controls #prompt{top:50%;max-width:calc(100vw - 350px)}
}