btroops/public/map.css

image {
  image-rendering: pixelated;
}

image.map-scans {
  image-rendering: auto;
}

text {
  user-select: none;
}

use[href="#point"], use[href="#hex"] {
  opacity: 1;
  fill: teal;
  fill-opacity: 0.2;
  stroke-width: 0.5px;
}

use[href="#point"]:hover,
use[href="#point"].hover,
use[href="#hex"]:hover,
use[href="#hex"].hover {
  opacity: 1;
  fill: orange;
  stroke: orangered;
}

use[href="#point"].active, use[href="#hex"].active {
  opacity: 0.2;
}

use[href="#point"].sight-line-target, use[href="#hex"].sight-line-target {
  opacity: 1;
  stroke: orangered;
  fill-opacity: 0.04;
}

polyline.move-trace {
  stroke: gray;
  stroke-dasharray: 2;
  fill: none;
}

#background {
  fill: #bacae3;
}

g#grid {
  transform: translate(19px, 31px) scale(4);
}

#map2 {
  transform-origin: 0px 0px;
  transform: translate(-0.9px, -2.4px) scale(0.999, 1.007);
}

#map3 {
  transform-origin: 0px 0px;
  transform: translate(1.3px, 1564.1px) rotate(0.1deg) scale(0.999, 1.002);
}

#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 {
  fill: white;
  font-size: 12px;
  font-weight: bold;
  font-family: monospace;
  cursor: default;
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
  transform: translateY(4px);
  stroke: none;
}

g.troop-counter [href="#counter-prone"] {
  transform: translate(-5px, 6px);
}

g#points g use.counter {
  r: 5px;
}

g#points g.hover use[href="#point"] {
  opacity: 1;
  fill: orange;
}

g#points g.hover use.counter {
  r: 7px;
}

g#points use.counter[data-troop-allegiance="davion"] {
  fill: red;
}

g#points use.counter[data-troop-allegiance="liao"] {
  fill: green;
}

g#points use.clone {
  stroke: white;
  stroke-width: 0.5px;
  stroke-dasharray: 1;
}

g#points use[data-troop-allegiance="davion"].clone {
  fill: rgb(255, 126, 126);
}

g#points use[data-troop-allegiance="liao"].clone {
  fill: rgb(130, 190, 130);
}

text.counter, #troop-counter text {
  font-size: 12px;
  font-weight: bold;
  fill: white;
  font-family: sans-serif;
  cursor: default;
  text-anchor: middle;
  transform: translateY(4px);
  pointer-events: none;
  user-select: none;
}

polygon.firing-arc[data-troop-allegiance="davion"] {
  fill: red;
}

polygon.firing-arc[data-troop-allegiance="liao"] {
  fill: green;
}

#shapes {
  opacity: 0.1;
}

#shapes polygon {
  stroke: none;
}

#lines polygon {
  fill: none;
  stroke: black;
}

.sight-line {
  stroke: orangered;
  stroke-width: 0.5px;
  pointer-events: none;
}

defs #point, #hex {
  fill: inherit;
  fill-opacity: inherit;
  stroke: inherit;
  stroke-width: inherit;
  stroke-opacity: inherit;
}

use[href="#davion-1"] {
  r: 5px;
  fill: red;
}

use[href="#davion-1"]:hover {
  transform: scale(2);
}

g.col:hover {
  --scale: 0.97;
}

g.col:hover use[href="#hex"] {
  fill: orange;
  stroke: orangered;
}

g.col:hover use[href="#davion-1"] {
  transform: scale(1.5);
}

.grid {
  --inradius: 8.66px;
  --circumradius: 10px;
  --x-step: calc(var(--inradius) * 2);
  --y-step: calc((3 / 2) * var(--circumradius));
  transform: translate(19px, 31px) scale(4);
}

g.row {
  --translateX: 0;
  transform: translate(var(--translateX), calc(var(--y-step) * (var(--n) - 1)));
}

g.row:nth-child(odd) {
  --translateX: calc(var(--inradius));
}

g.row:nth-child(1) { --n: 1; }
g.row:nth-child(2) { --n: 2; }
g.row:nth-child(3) { --n: 3; }
g.row:nth-child(4) { --n: 4; }

g.col {
  --scale: 1;
  transform: translateX(calc(var(--x-step) * (var(--n) - 1))) scale(var(--scale));
}

g.col:nth-child(1) { --n: 1; }
g.col:nth-child(2) { --n: 2; }
g.col:nth-child(3) { --n: 3; }
g.col:nth-child(4) { --n: 4; }