body {
  margin: 0;
  background: rgb(245, 245, 245);
  overflow: hidden;
}
main {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100svh;
}

#ballpool .ball {
  position: absolute;
  top: 0px;
  left: 0px;
  border-radius: 10000px;
  cursor: grab;
}
#ballpool .ball:active {
  cursor: grabbing;
}
#ballpool .ball .circle {
  border-radius: inherit;
  background-color: var(--fg);
}
#ballpool .ball .shadow {
  width: 30px;
  height: 30px;
  z-index: 190000;
  border-radius: inherit;
}
#ballpool .ball.no1 .circle {
  background-color: var(--yellow);
}
#ballpool .ball.no2 .circle {
  background-color: var(--blue);
}
#ballpool .ball.no3 .circle {
  background-color: var(--red);
}
#ballpool.real .ball.no1 .circle {
  background-image: url('/resource/image/ball_yellow.png');
  background-size: contain;
  background-color: transparent;
}
#ballpool.real .ball.no2 .circle {
  background-image: url('/resource/image/ball_blue.png');
  background-size: contain;
  background-color: transparent;
}
#ballpool.real .ball.no3 .circle {
  background-image: url('/resource/image/ball_red.png');
  background-size: contain;
  background-color: transparent;
}