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; }