1 files changed, 63 insertions, 21 deletions
diff --git a/style.css b/style.css
index 9954d29..9e481fc 100644
--- a/style.css
+++ b/style.css
@@ -16,18 +16,22 @@ svg {
   height: 100%;
 }
 
-svg text {
+svg image#numbers {
+  image-rendering: pixelated;
+}
+
+/* svg text {
   user-select: none;
   font-size: 4px;
   fill: black;
-  /* stroke: black; */
+  stroke: black;
   stroke-width: 0.2px;
   font-weight: bold;
   transform: translateY(6px);
   font-family: monospace;
   text-anchor: middle;
-  /* display: none; */
-}
+  display: none;
+} */
 
 div#status {
   position: absolute;
@@ -65,6 +69,10 @@ div#content {
   border-bottom: 1px solid gray;
 }
 
+#content #buttons {
+  line-height: 1.5em;
+}
+
 #content > div {
   display: none;
 }
@@ -121,25 +129,31 @@ div#content {
 }
 
 svg > defs > #point {
-  fill: teal;
-  fill-opacity: 0.2;
-  stroke: black;
-  stroke-width: 0.5px;
+  fill: inherit;
+  fill-opacity: inherit;
+  stroke: inherit;
+  stroke-width: inherit;
+  stroke-opacity: inherit;
 }
 
 use[href="#point"] {
   opacity: 0;
+  fill: teal;
+  fill-opacity: 0.2;
+  stroke: black;
+  stroke-width: 0.5px;
 }
 
-use[href="#point"]:hover {
+use[href="#point"]:hover, use[href="#point"].hover {
   opacity: 1;
+  fill: orange;
 }
 
 use[href="#point"].active {
   opacity: 1;
 }
 
-g#points {
+g#grid {
   transform: translate(19px, 31px) scale(4);
 }
 
@@ -174,10 +188,10 @@ image.map-scans {
   text-align: right;
 }
 
-circle.counter {
+/* circle.counter {
   stroke: transparent;
   stroke-width: 0.5in;
-}
+} */
 
 circle.counter[data-troop-allegiance="liao"] {
   fill: green;
@@ -187,15 +201,19 @@ circle.counter[data-troop-allegiance="davion"] {
   fill: red;
 }
 
-text.counter {
-  font-size: 80px;
+text.counter, #troop-counter text {
+  font-size: 12px;
   font-weight: bold;
-  stroke: black;
+  /* stroke: black; */
   fill: white;
-  stroke-width: 2px;
+  /* stroke-width: 0.5px; */
   font-family: sans-serif;
   cursor: default;
+  text-anchor: middle;
+  /* transform: translateY(25%); */
+  transform: translateY(4px);
   pointer-events: none;
+  user-select: none;
 }
 
 rect#map {
@@ -226,7 +244,8 @@ line.firing-arc {
 
 .sight-line {
   stroke: orangered;
-  stroke-width: 3px;
+  stroke-width: 0.5px;
+  pointer-events: none;
 }
 
 .soldier-record {
@@ -236,6 +255,15 @@ line.firing-arc {
   background-color: white;
 }
 
+.soldier-record.selected {
+  background-color: khaki;
+}
+
+.soldier-record.movement-ended {
+  background-color: none;
+  opacity: 0.5;
+}
+
 image#img1 {
   transform: scale(3.41) rotate(-0.15deg);
   /* opacity: 0.33; */
@@ -258,10 +286,6 @@ img.logo {
   display: block;
 }
 
-div.soldier-record.selected {
-  background-color: khaki;
-}
-
 rect#debug-view-box {
   /* stroke: red;
   stroke-width: 20px; */
@@ -269,6 +293,24 @@ rect#debug-view-box {
   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;