2 files changed, 22 insertions, 41 deletions
diff --git a/index.html b/index.html
index cd2b38f..1b0e219 100644
--- a/index.html
+++ b/index.html
@@ -156,9 +156,7 @@
         <defs>
           <polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
 
-          <symbol id="counter-base" viewBox="-6 -6 12 12" width="12" height="12">
-            <circle cx="0" cy="0" r="5" />
-          </symbol>
+          <circle id="counter-base" cx="0" cy="0" r="5" />
 
           <g id="t-1" class="troop-counter-template"><use href="#counter-base" /><text>1</text></g>
           <g id="t-2" class="troop-counter-template"><use href="#counter-base" /><text>2</text></g>
diff --git a/style.css b/style.css
index 29284dd..2e4cbd7 100644
--- a/style.css
+++ b/style.css
@@ -145,7 +145,7 @@ use[href="#point"]:hover, use[href="#point"].hover {
 }
 
 use[href="#point"].active {
-  opacity: 1;
+  opacity: 0.2;
 }
 
 polyline.move-trace {
@@ -199,8 +199,16 @@ g#grid {
   transform: rotate(180deg);
 }
 
-g.troop-counter-template use[href="#counter-base"] {
-  transform: translate(-6px, -6px);
+#counter-base {
+  r: inherit;
+}
+
+g.troop-counter-template, g.troop-counter-template use {
+  r: inherit;
+}
+
+g.troop-counter, g.troop-counter use {
+  r: inherit;
 }
 
 g.troop-counter-template text {
@@ -224,6 +232,16 @@ g#counters {
   pointer-events: none;
 }
 
+g#counters use {
+  r: 5px;
+}
+
+g#counters use:hover {
+  stroke: orange;
+  stroke-width: 2px;
+  r: 8px;
+}
+
 g#counters use[data-troop-allegiance="davion"] {
   fill: red;
 }
@@ -287,11 +305,6 @@ button.set-firing-arc img {
   pointer-events: none;
 }
 
-line.firing-arc {
-  stroke: blue;
-  opacity: 0.1;
-}
-
 .sight-line {
   stroke: orangered;
   stroke-width: 0.5px;
@@ -314,11 +327,6 @@ line.firing-arc {
   opacity: 0.5;
 }
 
-image#img1 {
-  transform: scale(3.41) rotate(-0.15deg);
-  /* opacity: 0.33; */
-}
-
 .wall {
   fill: none;
   stroke: red;
@@ -336,31 +344,6 @@ img.logo {
   display: block;
 }
 
-rect#debug-view-box {
-  /* stroke: red;
-  stroke-width: 20px; */
-  fill: blue;
-  fill-opacity: 0.2;
-}
-
-#troop-counter > .outer {
-  fill: inherit;
-}
-
-#troop-counter > .inner {
-  fill: red;
-}
-
-use[href="#troop-counter"] {
-  transform: translate(-7.5px, -7.5px);
-  fill: transparent;
-  /* fill: orange; */
-}
-
-use[href="#troop-counter"]:hover {
-  fill: orange;
-}
-
 @media (width >= 1800px) {
   #record-sheet {
     flex-direction: row;