Re-implements hitanimation

styles.less

@@ -224,7 +224,17 @@ input[type="radio"] {
     &:checked {
       counter-increment: score;
       pointer-events: none;
-      animation: hitAnim 0.3s !important;
+
+      &::before  {
+        animation: hitAnim 0.3s !important;
+        height: 100%;
+        width: 100%;
+        display: block;
+        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>');
+        // background-size: contain;
+        background-repeat: space;
+        content: '';
+      }
     }
   }
 }
@@ -283,6 +293,10 @@ input[type="radio"] {
   outline: 1px solid;
   bottom: 5px;
   pointer-events: none;
+
+  &::after {
+
+  }
 }
 
 .playButton {
@@ -305,8 +319,14 @@ input[type="radio"] {
 
 
 @keyframes hitAnim {
-  0% { transform: translateY(0) scale(1); opacity: 1; }
-  100% { transform: translateY(-100px) scale(2); opacity: 0.3; }
+  0% { 
+    transform: translateY(0) scale(1); 
+    opacity: 1; 
+  }
+  100% { 
+    transform: translateY(-100px) scale(2); 
+    opacity: 0.3; 
+  }
 }
 
 @keyframes hide {