<details open id="root">
    <summary class="balloon r4 c5">🎈</summary>
    <button class="balloon r2 c2" popovertarget="pop1" popovertargetaction="show">🎈</button>
    <details open>
      <summary class="balloon r6 c6">🎈</summary>
      <button class="balloon r1 c4" popovertarget="pop5" popovertargetaction="show">🎈</button>
    </details>
    <button class="balloon r1 c5" popovertarget="pop3" popovertargetaction="show">🎈</button>
    <details open>
      <summary class="balloon r2 c6">🎈</summary>
      <button class="balloon r7 c3" popovertarget="pop4" popovertargetaction="show">🎈</button>
      <button class="balloon r3 c4" popovertarget="pop1" popovertargetaction="hide">🎈</button>
    </details>
    <details open>
    <summary class="balloon r4 c6">🎈</summary>
    <button class="balloon r3 c7" popovertarget="pop2" popovertargetaction="show">🎈</button>
    <details open>
      <summary class="balloon r2 c3">🎈</summary>
      <button class="balloon r6 c1" popovertarget="pop1" popovertargetaction="show">🎈</button>
    </details>
    <button class="balloon r5 c4" popovertarget="pop4" popovertargetaction="show">🎈</button>
    <details open>
      <summary class="balloon r7 c7">🎈</summary>
      <button class="balloon r5 c2" popovertarget="pop1" popovertargetaction="show">🎈</button>
      <button class="balloon r3 c1" popovertarget="pop2" popovertargetaction="hide">🎈</button>
    </details>
  </details>
  </details>
  
  <div id="pop1" popover="manual">
    <button class="balloon r4 c2" popovertarget="pop1" popovertargetaction="hide">🎈</button>
  </div>
  <div id="pop2" popover="manual">
    <button class="balloon r3 c3" popovertarget="pop2" popovertargetaction="hide">🎈</button>
    <button class="balloon r1 c1" popovertarget="pop4" popovertargetaction="hide">🎈</button>
  </div>
  <div id="pop3" popover="manual">
    <button class="balloon r5 c5" popovertarget="pop4" popovertargetaction="hide">🎈</button>
    <button class="balloon r6 c2" popovertarget="pop3" popovertargetaction="hide">🎈</button>
  </div>
  <div id="pop4" popover="manual">
    <button class="balloon r7 c2" popovertarget="pop4" popovertargetaction="hide">🎈</button>
    <button class="balloon r6 c5" popovertarget="pop2" popovertargetaction="hide">🎈</button>
  </div>
  <div id="pop5" popover="manual">
    <button class="balloon r4 c7" popovertarget="pop4" popovertargetaction="hide">🎈</button>
    <button class="balloon r5 c3" popovertarget="pop5" popovertargetaction="hide">🎈</button>
  </div>

body {
  margin: 0;
  background-color: lightskyblue;
}

details,
div {
  inset: unset;
  overflow: visible;
  border: none;
  background-color: transparent;
  padding: 0;
}

.r1 {
  --row: 1;
}

.r2 {
  --row: 2;
}

.r3 {
  --row: 3;
}

.r4 {
  --row: 4;
}

.r5 {
  --row: 5;
}

.r6 {
  --row: 6;
}

.r7 {
  --row: 7;
}

.c1 {
  --col: 1;
}

.c2 {
  --col: 2;
}

.c3 {
  --col: 3;
}

.c4 {
  --col: 4;
}

.c5 {
  --col: 5;
}

.c6 {
  --col: 6;
}

.c7 {
  --col: 7;
}

.balloon {
  position: absolute;
  display: block;
  font-size: 4em;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  height: 1em;
  width: 1em;
  top: calc(12.5vh * (var(--row) + 1) - 12.5vh);
  left: calc(12.5vw * (var(--col) + 1) - 12.5vw);
  list-style-type: none;
  cursor: pointer;
  text-align: center;
  user-select: none;
  scale: 1;
}

.balloon:active {
  scale: 0.7;
  transition: 0.5s;
}

details summary::-webkit-details-marker {
  display: none;
}