Why when my input is not working inside a Div?

Question

I tried to make a game in HTML & CSS with no JS. When the input is inside <div class="bird-1"> it doesn't work:

<style>
  body {
    counter-reset: checked-sum, unchecked-sum;
  }
  
  input[type="radio"] {
    counter-increment: unchecked-sum;
  }
  
  input[type="radio"]:checked {
    counter-increment: checked-sum;
  }
  
  .totalChecked::after {
    content: counter(checked-sum);
  }
  /* UI */
  
  .bird-1 {
    background: url(/assets/img/bird.svg) no-repeat scroll 3%;
  }
</style>
<div class=grid>

  <div class="bird-1">
    <input type="radio" id="c-1">
  </div>
  <div class=total>
    <span class=totalChecked> Total checked: </span>
  </div>
</div>