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

body {
  background: rgba(255,228,196,.6);
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.board {
  width:240px;
  height:200px;
  background:darkred;
  border:5px solid rgb(133,83,77);
  border-radius:20px;
  padding:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  position:relative;
  top: -95px;
  justify-content: center;
  align-content: flex-start;
}

/* Hide inputs safely */
.board input {
  position:absolute;
  opacity:0;
}

/* Balloon base */
.balloon {
  width:42px;
  height:55px;
  border-radius:50% 45%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2px;
  transition:.2s;
animation: float 2s ease-in-out infinite alternate;
}

@keyframes float {
  from { transform: translateY(0) rotate(var(--r)); }
  to   { transform: translateY(-6px) rotate(var(--r)); }
}

/* Colors */
.good:nth-of-type(1){
background: aqua;
}
.good:nth-of-type(2) { background:palevioletred; }
.good:nth-of-type(3) { background:rgb(41,41,146); }
.good:nth-of-type(4) { background:rgb(206,209,23); }
.bad:nth-of-type(5){
background: darkorange;
}
.bad:nth-of-type(6) { background:rgb(236,176,63); }
.bad:nth-of-type(7) { background:rgb(71,146,41); }
.bad:nth-of-type(8) { background:rgb(172,65,79); }
.bad:nth-of-type(9) { background:rgb(194,14,125); }
/* Pop effect */
input:checked + label {
  transform: scale(1.4);
  opacity: 0;
}

.balloon:nth-of-type(odd) { --r: -5deg; }
.balloon:nth-of-type(even){ --r: 5deg; }

/* Dart bar */
.dart {
  width: 100%;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.dart span {
  width:25px;
  height:15px;
  background:greenyellow;
  border-radius:20px 20px 2px;
  transition:.2s;
}

/* Remove darts on miss */
#miss1:checked ~ .dart span:nth-child(1),
#miss2:checked ~ .dart span:nth-child(2),
#miss3:checked ~ .dart span:nth-child(3),
#miss4:checked ~ .dart span:nth-child(4){
  opacity:.2;
}

.win, .lose {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  color:white;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  font-size:24px;
  opacity:0;
  pointer-events:none;
  transition:.3s;
  border-radius:20px;
  z-index: 999;
}

#star1:checked ~ #star2:checked ~ #star3:checked ~ #star4:checked ~ .win {
  opacity:1;
  pointer-events:auto;
}

#miss1:checked ~ #miss2:checked ~ #miss3:checked ~ #miss4:checked ~ .lose {
  opacity:1;
  pointer-events:auto;
}

.restart-btn{
 background: white;
 font-family: 'Courier New', Courier, monospace;
 width: 115px;
 height: 45px;
 border-radius: 15px;
 text-decoration: none;
 color: black;
 font-weight: 900;
 padding: 10px;
 display: block
}

.restart-btn:hover{
  font-family: monospace;
  color: white;
  background: black;
  transition: .2s;
}

.win,
.lose {
  z-index:10;
}


.game {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .balloon {
    animation: none;
  }

  * {
    transition: none !important;
  }
}