main.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, form {
  position: relative;
  width: 100vw;
  height: 100vh;
}

body {
  counter-reset: score;
}

label {
  cursor: pointer;
}

input {
  position: fixed;
  top: -2000px;
}

.point:checked {
  counter-increment: score 10;
}

.stage {
  position: absolute;
  display: block;
  width: 100vw;
  height: 100vh;
}

.stage--op {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stage--main {
  display: none;
}

.stage--main__score {
  position: absolute;
  top: 10px;
  left: 10px;
}

.stage--main__timer {
  position: absolute;
  top: 10px;
  right: 10px;
}

.stage--end {
  display: none;
  opacity: 0.3;
  background: black;
  color: white;
  font-size: 36px;
}

#game-start:checked ~ .stage--op {
  display: none;
}

#game-start:checked ~ .stage--main {
  display: block;
}

#game-start:checked ~ .stage--end {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  animation: game-end-animation 30s;
}

@keyframes game-end-animation {
  0% { visibility: hidden; z-index: -1; }
  99% { visibility: hidden; z-index: -1; }
  100% { visibility: visible; z-index: 100; }
}

.target {
  position: absolute;
  top: calc(50% - 13px);
  left: calc(50% - 13px);
  width: 26px;
  height: 26px;
  background: red;
  border-radius: 50%;
}

.target[for="target1"] {
  animation: target1-animation 5s infinite;
}

.target[for="target2"] {
  animation: target2-animation 5s infinite;
}

.target[for="target3"] {
  animation: target3-animation 5s infinite;
}

.target[for="target4"] {
  animation: target4-animation 5s infinite;
}

.target[for="target5"] {
  animation: target5-animation 5s infinite;
}

.target[for="target6"] {
  animation: target6-animation 5s infinite;
}

.target[for="target7"] {
  animation: target7-animation 5s infinite;
}

.target[for="target8"] {
  animation: target8-animation 5s infinite;
}

.target[for="target9"] {
  animation: target9-animation 5s infinite;
}

.target[for="target10"] {
  animation: target10-animation 5s infinite;
}

.target[for="target11"] {
  animation: target11-animation 5s infinite;
}

.target[for="target12"] {
  animation: target12-animation 5s infinite;
}

.target[for="target13"] {
  animation: target13-animation 5s infinite;
}

.target[for="target14"] {
  animation: target14-animation 5s infinite;
}

.target[for="target15"] {
  animation: target15-animation 5s infinite;
}

#target1:checked ~ .stage--main > [for="target1"] {
  background: blue;
  pointer-events: none;
}

#target2:checked ~ .stage--main > [for="target2"] {
  background: blue;
  pointer-events: none;
}

#target3:checked ~ .stage--main > [for="target3"] {
  background: blue;
  pointer-events: none;
}

#target4:checked ~ .stage--main > [for="target4"] {
  background: blue;
  pointer-events: none;
}

#target5:checked ~ .stage--main > [for="target5"] {
  background: blue;
  pointer-events: none;
}

#target6:checked ~ .stage--main > [for="target6"] {
  background: blue;
  pointer-events: none;
}

#target7:checked ~ .stage--main > [for="target7"] {
  background: blue;
  pointer-events: none;
}

#target8:checked ~ .stage--main > [for="target8"] {
  background: blue;
  pointer-events: none;
}

#target9:checked ~ .stage--main > [for="target9"] {
  background: blue;
  pointer-events: none;
}

#target10:checked ~ .stage--main > [for="target10"] {
  background: blue;
  pointer-events: none;
}

#target11:checked ~ .stage--main > [for="target11"] {
  background: blue;
  pointer-events: none;
}

#target12:checked ~ .stage--main > [for="target12"] {
  background: blue;
  pointer-events: none;
}

#target13:checked ~ .stage--main > [for="target13"] {
  background: blue;
  pointer-events: none;
}

#target14:checked ~ .stage--main > [for="target14"] {
  background: blue;
  pointer-events: none;
}

#target15:checked ~ .stage--main > [for="target15"] {
  background: blue;
  pointer-events: none;
}

@keyframes target1-animation {
  0% { transform: translate(100px, 50px) }
  50% { transform: translate(50px, 100px) }
  100% { transform: translate(100px, 50px) }
}

@keyframes target2-animation {
  0% { transform: translate(-100px, -50px) }
  50% { transform: translate(-50px, -100px) }
  100% { transform: translate(-100px, -50px) }
}

@keyframes target3-animation {
  0% { transform: translate(-210px, 34px) }
  50% { transform: translate(-10px, 320px) }
  100% { transform: translate(-210px, 34px) }
}

@keyframes target4-animation {
  0% { transform: translate(0px, 300px) }
  50% { transform: translate(0px, -100px) }
  100% { transform: translate(0px, 300px) }
}

@keyframes target5-animation {
  0% { transform: translate(300px, 0px) }
  50% { transform: translate(-100px, 0px) }
  100% { transform: translate(300px, 0px) }
}

@keyframes target6-animation {
  0% { transform: translate(40px, -56px) }
  50% { transform: translate(52px, 100px) }
  100% { transform: translate(40px, -56px) }
}

@keyframes target7-animation {
  0% { transform: translate(-100px, 50px) }
  50% { transform: translate(-50px, 100px) }
  100% { transform: translate(-100px, 50px) }
}

@keyframes target8-animation {
  0% { transform: translate(100px, -50px) }
  50% { transform: translate(50px, -100px) }
  100% { transform: translate(100px, -50px) }
}

@keyframes target9-animation {
  0% { transform: translate(100px, -50px) }
  50% { transform: translate(-100px, 50px) }
  100% { transform: translate(100px, -50px) }
}

@keyframes target10-animation {
  0% { transform: translate(200px, 100px) }
  50% { transform: translate(-200px, 100px) }
  100% { transform: translate(200px, 100px) }
}

@keyframes target11-animation {
  0% { transform: translate(50px, -100px) }
  50% { transform: translate(50px, -200px) }
  75% { transform: translate(50px, 100px) }
  100% { transform: translate(50px, -100px) }
}

@keyframes target12-animation {
  0% { transform: translate(100px, -140px) }
  50% { transform: translate(10px, 200px) }
  75% { transform: translate(50px, 200px) }
  100% { transform: translate(100px, -140px) }
}

@keyframes target13-animation {
  0% { transform: translate(-100px, -140px) }
  25% { transform: translate(0px, 0px) }
  50% { transform: translate(200px, -100px) }
  100% { transform: translate(-100px, -140px) }
}

@keyframes target14-animation {
  0% { transform: translate(-300px, -40px) }
  25% { transform: translate(300px, 0px) }
  50% { transform: translate(100px, -150px) }
  75% { transform: translate(-100px, 200px) }
  100% { transform: translate(-300px, -40px) }
}

@keyframes target15-animation {
  0% { transform: translate(300px, 40px) }
  25% { transform: translate(-300px, 0px) }
  50% { transform: translate(-100px, 150px) }
  75% { transform: translate(100px, -200px) }
  100% { transform: translate(300px, 40px) }
}

.mini-game-score::before {
  content: "Score: " counter(score);
}

.mini-game-timer {
  width: 46px;
  height: 46px;
  line-height: 24px;
  border: #333 solid 1px;
  border-radius: 50%;
  padding: 10px 10px;
}

.mini-game-timer__a, .mini-game-timer__b {
  display: inline-block;
  position:relative;
  overflow: hidden;
  height: 24px;
  width: 12px;
}

.mini-game-timer__a > div, .mini-game-timer__b > div {
  position: absolute;
}

.mini-game-timer__a > div {
  animation: timer-mekuri-a 30s steps(3) 1;
}

.mini-game-timer__b > div {
  animation: timer-mekuri-b 10s steps(10) 3;
}

@keyframes timer-mekuri-a {
  0% { top: -48px; }
  100% { top: 24px; }
}

@keyframes timer-mekuri-b {
  0% { top: -216px; }
  100% { top: 24px; }
}