body { display:flex; flex-direction:column; height:100dvh; box-sizing:border-box; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.touch-mode canvas { touch-action:none; }
.touch-mode #hint { display:none; }
.touch-mode #notice { bottom:auto; top:12px; max-width:90%; z-index:2; }
#touch-controls { flex:none; padding:8px 12px; background:#151e28; color:#edf4ff; font:14px system-ui,sans-serif; user-select:none; -webkit-user-select:none; }
#touch-controls[hidden] { display:none; }
#touch-controls button { min-width:48px; min-height:48px; border:1px solid #647589; border-radius:10px; background:#29394b; color:#fff; font:600 14px system-ui,sans-serif; padding:8px 12px; touch-action:none; }
#touch-controls button.held, #touch-controls button:active, #touch-controls button[aria-pressed="true"] { background:#476484; border-color:#a6ceff; }
#touch-controls button:focus-visible { outline:3px solid #ffd166; outline-offset:2px; }
#touch-controls button:disabled { opacity:.4; }
.touch-toolbar, .touch-pad, .touch-movement, .touch-actions, .touch-picker-heading { display:flex; gap:8px; align-items:center; }
.touch-toolbar { margin-bottom:8px; }
#touch-status { flex:1; font-size:12px; }
.touch-pad { justify-content:space-between; }
.touch-movement { display:grid; grid-template-columns:repeat(4,minmax(48px,1fr)); }
#touch-controls .touch-fire { background:#a43f32; min-width:100px; min-height:60px; }
#touch-controls small { font-size:10px; font-weight:400; }
.touch-help { margin:6px 0 0; color:#b5c5d6; font-size:11px; text-align:center; }
#touch-controls dialog { width:min(620px,calc(100vw - 48px)); max-height:75dvh; box-sizing:border-box; padding:14px; border:1px solid #647589; border-radius:14px; background:#151e28; color:#fff; overscroll-behavior:contain; }
#touch-controls dialog::backdrop { background:#000a; }
.touch-picker-heading { justify-content:space-between; margin-bottom:12px; }
.touch-weapons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#touch-controls .touch-weapons button { touch-action:pan-y; min-height:56px; }
@media(max-width:540px) {
  #touch-controls { padding:8px; }
  .touch-movement { grid-template-columns:repeat(2,minmax(56px,1fr)); }
  .touch-toolbar { flex-wrap:wrap; }
  #touch-status { order:4; flex-basis:100%; text-align:center; }
  .touch-actions { align-self:stretch; }
  #touch-controls .touch-fire { min-width:90px; }
  .touch-toolbar [data-action="weapons"] { margin-right:auto; }
}
@media(max-height:450px) and (min-width:541px) {
  #touch-controls { padding:4px 10px; }
  .touch-toolbar { margin-bottom:4px; }
  .touch-help { display:none; }
  #touch-controls .touch-fire { min-height:48px; }
}

#display-controls { position:fixed; z-index:3; top:max(6px,env(safe-area-inset-top)); right:max(6px,env(safe-area-inset-right)); display:flex; gap:6px; }
#display-controls button { min-height:44px; border:1px solid #647589; border-radius:8px; padding:6px 10px; color:#fff; background:#151e28e8; font:600 13px system-ui,sans-serif; touch-action:manipulation; }
#display-controls button[hidden] { display:none; }
#display-controls button:focus-visible { outline:3px solid #ffd166; }
body:not(.touch-mode) #hint { max-width:calc(100% - 160px); }