* { margin:0; padding:0; }
body { background:#07070d; overflow:hidden; }
canvas { display:block; }

#hud {
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,0.18); font:11px/1 sans-serif; letter-spacing:3px;
  pointer-events:none; white-space:nowrap;
}
#panel {
  position:fixed; top:18px; right:18px;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
}
.btn {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1);
  color:rgba(255,255,255,0.5); padding:7px 16px; cursor:pointer;
  font:11px/1.4 sans-serif; letter-spacing:2px; transition:background .2s;
}
.btn:hover { background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.85); }
#modeTag { font:10px/1 sans-serif; color:rgba(255,255,255,0.22); letter-spacing:2px; }
#legend {
  position:fixed; top:18px; left:18px;
  display:flex; flex-direction:column; gap:7px;
}
.leg {
  display:flex; align-items:center; gap:8px;
  font:10px/1 sans-serif; color:rgba(255,255,255,0.28); letter-spacing:1px;
}
.dot { width:7px; height:7px; border-radius:50%; }