*{ box-sizing:border-box }

body{
  margin:0;
  background:#111;
  font-family:monospace;
  overflow:hidden;
  color:white;
}

canvas{
  display:block;
  background:#2b2b2b;
}

#ui{
  position:fixed;
  top:10px;
  left:10px;
}

button,input{
  padding:10px 22px;
  font-size:16px;
  background:#222;
  color:white;
  border:1px solid #555;
  cursor:pointer;
}

button:hover{ background:#333 }

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.hidden{ display:none }

#menu{
  position:fixed;
  inset:0;
  background:#000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
}

footer{
  font-size:14px;
  opacity:.8;
  margin-top:16px;
}

a{ color:#4ea3ff; text-decoration:none }

#pauseBtn{
  position:fixed;
  top:10px;
  right:10px;
}

/* ===== MOBILE JOYSTICKS ===== */

#mobileControls{
  position:fixed;
  inset:0;
  pointer-events:none;
  display:none;
}

.joystick{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:2px solid rgba(255,255,255,0.25);
  pointer-events:auto;
  touch-action:none;
}

#moveStick{
  bottom:30px;
  left:30px;
}

#aimStick{
  bottom:30px;
  right:30px;
}

.stick{
  position:absolute;
  width:70px;
  height:70px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  left:55px;
  top:55px;
}

@media (hover:none){
  #mobileControls{ display:block }
}