html.touch-controls, .touch-controls body, .touch-controls canvas { touch-action:none; overscroll-behavior:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#mobile-controls { position:fixed;inset:0;z-index:10;pointer-events:none;color:#fff8de;font:13px system-ui,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.mobile-hud { position:absolute;top:calc(12px + env(safe-area-inset-top));left:14px;right:14px;padding:12px 14px;background:#132a35c9;border-radius:14px;line-height:1.4; }
.mobile-hud strong { letter-spacing:2px;font-size:16px; }.mobile-hud p { margin:7px 0 0;font-size:12px;max-width:90%; }#mobile-score { float:right;font-size:19px;font-weight:700; }
.touch-stick { position:absolute;width:108px;height:108px;bottom:calc(36px + env(safe-area-inset-bottom));border:2px solid #fffae845;border-radius:50%;background:#152d392b;box-shadow:0 3px 20px #0002;pointer-events:auto;touch-action:none;color:#fff8de;display:grid;place-items:center;padding:0; }
#mobile-move {left:40px;}#mobile-look {right:40px;}.stick-knob { width:44px;height:44px;border-radius:50%;background:#faf4dd3d;border:1px solid #ffffff45;pointer-events:none; }
.touch-stick b {position:absolute;bottom:12px;font-size:10px;letter-spacing:1px;pointer-events:none;}.touch-stick.engaged {border-color:#abffd67a;background:#1a3b4345;}.touch-stick.engaged .stick-knob {background:#acffd766;}
#mobile-action {right:28px;bottom:calc(172px + env(safe-area-inset-bottom));width:96px;height:96px;background:#e6bd654d;color:#21313a;border-color:#fff1bc70;}
#mobile-action .stick-knob {width:38px;height:38px;background:#fff1bc3d;border-color:#ffffff45;}
#mobile-action b {font-size:10px;letter-spacing:0;bottom:14px;}#mobile-action.charging {background:#7de4bc55;border-color:#d5ffeb80;}
.mobile-crosshair {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;text-shadow:0 1px 4px #000;}
#mobile-power {position:absolute;left:22px;right:150px;bottom:calc(183px + env(safe-area-inset-bottom));font-size:10px;letter-spacing:.4px;text-shadow:0 1px 3px #000;}
#mobile-power>div {height:10px;margin-top:7px;background:#132a35cc;border:1px solid #fffae86b;border-radius:8px;overflow:hidden;}#mobile-power i {display:block;width:0;height:100%;background:#9bffd4;}
#mobile-recover {position:absolute;top:calc(128px + env(safe-area-inset-top));right:14px;background:#fff0be;color:#21313a;padding:12px 20px;border:0;border-radius:12px;font-weight:bold;pointer-events:auto;}
[hidden] {display:none!important;}
@media(max-height:520px) { .touch-stick {width:90px;height:90px;bottom:18px;}#mobile-action {bottom:124px;width:80px;height:80px;}#mobile-power {bottom:132px;} .mobile-hud{max-width:350px;} }

/* Keep gameplay feedback minimal; input buttons remain available. */
.mobile-hud, .mobile-crosshair, #mobile-power-label {display:none;}

html.touch-controls, .touch-controls body {width:100%;height:100%;height:100dvh;margin:0;}
:fullscreen {width:100%;height:100%;background:#172b34;}
#landscape-hint {position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#172b34;color:#faf5dd;font:16px system-ui;text-align:center;touch-action:none;}
#fullscreen-open {padding:18px 30px;border:1px solid #ffffff65;border-radius:14px;background:#faf5dd;color:#172b34;font:600 18px system-ui;touch-action:manipulation;}
@media(orientation:landscape) {
  #mobile-move {left:calc(40px + env(safe-area-inset-left));}
  #mobile-look {right:calc(40px + env(safe-area-inset-right));}
  #mobile-action {right:calc(142px + env(safe-area-inset-right));bottom:calc(26px + env(safe-area-inset-bottom));width:80px;height:80px;}
  #mobile-power {left:35%;right:35%;bottom:calc(30px + env(safe-area-inset-bottom));}
  #mobile-recover {top:calc(18px + env(safe-area-inset-top));right:calc(18px + env(safe-area-inset-right));}
}