Add text to the bubbles in a CSS made diagram for a web app

I have created a basic star topology diagram using simple CSS and HTML. I have 2 problems with the code I have:

1. When I try to add text to the bubbles, it overflows from the bubble and the text is not oriented based on the bubble.
2. Instead of a simple bubble I would like a cloud shape.

Any suggestions/solutions would be highly appreciated.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

figure {
  --containerWidth: 500px;
  --containerHeight: 500px;
  width: var(--containerWidth);
  height: var(--containerHeight);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

figure div {
  background: gray;
  width: 140px;
  height: 140px;
  border-radius: 50%;
}

figure .connected-device {
  --connectedDeviceWidth: 100px;
  --connectedDeviceHeight: 100px;
  width: var(--connectedDeviceWidth);
  height: var(--connectedDeviceHeight);
  position: absolute;
  background: gold;
  top: 0;
  transform-origin: calc(var(--connectedDeviceHeight) / 2) calc(var(--containerHeight) / 2);
  display: flex;
  justify-content: center;
}

figure .connected-device::before {
  content: '';
  height: calc((var(--containerHeight) / 2) - var(--connectedDeviceHeight));
  display: block;
  border-right: 2px dashed grey;
  position: relative;
  top: var(--connectedDeviceHeight);
}

figure .connected-device:nth-of-type(2) {
  transform: rotate(calc(1 / var(--number-connectedDevices) * 360deg));
}

figure .connected-device:nth-of-type(3) {
  transform: rotate(calc(2 / var(--number-connectedDevices) * 360deg));
}

figure .connected-device:nth-of-type(4) {
  transform: rotate(calc(3 / var(--number-connectedDevices) * 360deg));
}

figure .connected-device:nth-of-type(5) {
  transform: rotate(calc(4 / var(--number-connectedDevices) * 360deg));
}

figure .connected-device:nth-of-type(6) {
  transform: rotate(calc(5 / var(--number-connectedDevices) * 360deg));
}

figure .connected-device:nth-of-type(7) {
  transform: rotate(calc(6 / var(--number-connectedDevices) * 360deg));
}

figure .connected-device:nth-of-type(8) {
  transform: rotate(calc(7 / var(--number-connectedDevices) * 360deg));
}

<figure style="--number-connectedDevices: 8">
  <div class="central-device"></div>
  <div class="connected-device"></div>
  <div class="connected-device"></div>
  <div class="connected-device"></div>
  <div class="connected-device"></div>
  <div class="connected-device"></div>
  <div class="connected-device"></div>
  <div class="connected-device"></div>
  <div class="connected-device"></div>
</figure>