.field {
  position: relative;
  width: min(420px, 100%);
  border-radius: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 18%),
    linear-gradient(180deg, #12382c, #071510);
  box-shadow: 0 0 0 2px #f0d48a, 0 0 0 5px #6d4318, 0 18px 36px rgba(0, 0, 0, .35);
  touch-action: none;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  box-shadow: inset 0 -6px 8px rgba(0, 0, 0, .18), 0 3px 6px rgba(0, 0, 0, .2);
}

.bubble::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 14%;
  width: 22%;
  height: 14%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
}

.bubble.c0 { background: radial-gradient(circle at 32% 28%, #ff8d98, #ff2d42 42%, #c00022); }
.bubble.c1 { background: radial-gradient(circle at 32% 28%, #fff3a0, #ffe03a 42%, #e09400); }
.bubble.c2 { background: radial-gradient(circle at 32% 28%, #8dff9e, #22c24a 42%, #0c7a28); }
.bubble.c3 { background: radial-gradient(circle at 32% 28%, #9ec6ff, #2f7dff 42%, #143fb8); }
.bubble.c4 { background: radial-gradient(circle at 32% 28%, #ffc08a, #ff7a1a 42%, #e04800); }
.bubble.c5 { background: radial-gradient(circle at 32% 28%, #d7b0ff, #9a3dff 42%, #5c14b8); }

.aim-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: rgba(255, 246, 232, .85);
  pointer-events: none;
}

#ghost { opacity: .4; pointer-events: none; }
#flyer { z-index: 4; pointer-events: none; transform: translate(-50%, -50%); }
#shot { z-index: 3; }
#next { z-index: 3; box-shadow: 0 0 0 3px rgba(255, 224, 138, .45), inset 0 -4px 6px rgba(0, 0, 0, .18); }

.dead {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 0;
  border-top: 2px dashed rgba(226, 61, 140, .75);
  pointer-events: none;
}