Ok, hover and firing arc doesn't get stuck at all

Not sure about counters

public/assets/css/map.css

@@ -184,7 +184,6 @@ g.counter.selected {
 
 g.counter use.primary-weapon {
   r: inherit;
-  pointer-events: none;
 }
 
 g.counter use.troop-number, g.counter use.squad-number {
@@ -480,7 +479,7 @@ text.elevation {
   fill: black;
 }
 
-.grid-top:hover use[href="#hex"] {
+[data-q][data-r][data-s][data-t].hover use[href="#hex"] {
   opacity: 1;
   fill: orange;
   stroke: black;
@@ -502,12 +501,12 @@ g.counter use[class^="counter-"] {
   --translateY: calc(var(--y) / 6 - 5px);
 }
 
-.grid-top .container > g.counter ~ use[class^="counter-"] {
+.frontmost > g.counter ~ use[class^="counter-"] {
   --translateX: calc(var(--x) * 2 - 5px);
   --translateY: calc(var(--y) * 2 - 5px);
 }
 
-.grid-top .container > use[class^="counter-"] {
+.frontmost > use[class^="counter-"] {
   --translateX: calc(var(--x) * 1.5 - 5px);
   --translateY: calc(var(--y) * 1.5 - 5px);
 }

public/assets/images/scenario_template.svg

@@ -70,10 +70,8 @@
       <g id="lines"/>
     </g>
 
-    <g class="grid"/>
-    <g class="grid-top">
-      <use href="#hex"/>
-      <g class="container"/>
+    <g class="grid">
+      <g class="frontmost"/>
     </g>
   </g>
 </svg>