/* Tablet and mobile twin-stick-like touch HUD. Joystick controls movement; actions stay on the right. */
#touchControls{position:fixed;inset:0;z-index:5;pointer-events:none;touch-action:none}
#joystickZone{position:absolute;left:calc(13px + env(safe-area-inset-left));bottom:calc(17px + env(safe-area-inset-bottom));width:156px;height:160px;pointer-events:auto;touch-action:none;overscroll-behavior:none;display:grid;place-content:center;justify-items:center;cursor:grab;-webkit-tap-highlight-color:transparent}
#joystickBase{height:126px;width:126px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(150,241,249,.22),rgba(2,43,77,.74));border:2px solid rgba(168,234,255,.64);box-shadow:inset 0 0 24px #053858,0 4px 18px #001a36a3;display:grid;place-items:center;position:relative}
#joystickBase::before,#joystickBase::after{content:"";position:absolute;background:rgba(174,230,248,.22);pointer-events:none}
#joystickBase::before{height:1px;width:88%;top:50%;left:6%}
#joystickBase::after{height:88%;width:1px;left:50%;top:6%}
#joystickThumb{display:block;position:absolute;left:calc(50% - 30px);top:calc(50% - 30px);height:60px;width:60px;border-radius:50%;background:radial-gradient(circle at 32% 27%,#b7f8ff,#1c92b6 55%,#125777);border:2px solid #c2f9ff;box-shadow:0 2px 12px #001e40aa;transform:translate(0,0);will-change:transform;pointer-events:none}
#joystickZone.active #joystickThumb{box-shadow:0 0 20px #67e6ff77,0 2px 14px #001e40}
#joystickZone .touch-label{margin-top:5px;color:#e4f8ff;font-size:10px;letter-spacing:1.6px;text-shadow:0 2px 4px #0015;font-weight:750;pointer-events:none}
#touchFullscreenBtn{position:absolute;top:calc(9px + env(safe-area-inset-top));right:calc(110px + env(safe-area-inset-right));width:36px;height:36px;padding:0;margin:0;pointer-events:auto;background:#074c71cc;border:1px solid #9ae8f6;border-radius:8px;box-shadow:0 1px 5px #002;font-size:23px;touch-action:manipulation}
#hud.touch-active #dashBtn{display:block;min-width:0;width:88px;height:88px;right:calc(22px + env(safe-area-inset-right));bottom:calc(22px + env(safe-area-inset-bottom));padding:3px 8px;margin:0;font-size:17px;border-radius:50%;background:radial-gradient(circle at 38% 25%,#ffdf8b,#f09228 62%,#d65b10);border:2px solid #fff0b2;box-shadow:0 4px 14px #0007;touch-action:manipulation;z-index:6}
#hud.touch-active #suckBtn:not(.hidden){min-width:0;width:69px;height:69px;right:calc(35px + env(safe-area-inset-right));bottom:calc(119px + env(safe-area-inset-bottom));padding:2px;margin:0;border-radius:50%;font-size:15px;z-index:6}
#hud.touch-active #pauseBtn,#hud.touch-active #exitOnlineBtn{top:calc(8px + env(safe-area-inset-top));right:calc(12px + env(safe-area-inset-right));font-size:12px;padding:9px;min-width:60px;z-index:6}
#hud.touch-active #lb{top:calc(56px + env(safe-area-inset-top));right:calc(9px + env(safe-area-inset-right));min-width:125px;max-width:170px;padding:6px;font-size:12px}
#hud.touch-active #lb h4{font-size:11px}
#hud.touch-active #lb ol{font-size:11px}
#hud.touch-active #survivalMiniMap{top:calc(158px + env(safe-area-inset-top));bottom:auto;right:calc(9px + env(safe-area-inset-right));width:105px;height:105px;opacity:.74}
#hud.touch-active #online{bottom:auto;top:calc(47px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left))}
#hud.touch-active #perfHud{right:calc(16px + env(safe-area-inset-right));bottom:calc(117px + env(safe-area-inset-bottom))}
#hud.touch-active #arcadeStats{max-width:calc(100vw - 180px)}
#hud.touch-active #score{max-width:calc(100vw - 160px)}
#hud.touch-active .hud-control:active{transform:scale(.94)}
@media(max-height:490px) and (orientation:landscape){
 #joystickZone{width:130px;height:120px;bottom:calc(7px + env(safe-area-inset-bottom))}
 #joystickBase{width:104px;height:104px}
 #joystickThumb{width:52px;height:52px;left:calc(50% - 26px);top:calc(50% - 26px)}
 #joystickZone .touch-label{display:none}
 #hud.touch-active #dashBtn{width:74px;height:74px;bottom:calc(11px + env(safe-area-inset-bottom))}
 #hud.touch-active #suckBtn:not(.hidden){width:57px;height:57px;bottom:calc(89px + env(safe-area-inset-bottom))}
 #hud.touch-active #survivalMiniMap{width:75px;height:75px;top:calc(122px + env(safe-area-inset-top))}
 #hud.touch-active #lb{max-width:135px}
}