svg {
overflow: hidden;
}
image {
image-rendering: pixelated;
}
image.map-scans {
image-rendering: auto;
}
text {
user-select: none;
}
use[href="#hex"] {
opacity: 0;
fill: transparent;
fill-opacity: 0.5;
stroke-width: 0.5px;
stroke: black;
}
/* use[href="#hex"]:hover, use[href="#hex"].hover
{
opacity: 1;
fill: orange;
stroke: orangered;
} */
use[href="#hex"].active {
opacity: 0.2;
fill: teal;
stroke: black;
}
use[href="#hex"].sight-line-target {
opacity: 1;
stroke: orangered;
fill-opacity: 0.04;
}
polyline.move-trace {
stroke: white;
stroke-dasharray: 2;
fill: none;
}
#background {
fill: #bacae3;
}
#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, g.counter, g.troop-counter use {
r: inherit;
}
g.troop-counter-template, g.troop-counter-template 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;
}
[href="#counter-prone"] {
transform: translate(-5px, 6px);
}
[href="#counter-grenade"] {
transform: translate(-5px, -5px);
}
g.clone {
stroke: white;
stroke-width: 0.5px;
stroke-dasharray: 1;
}
g.clone [href="#counter-prone"] {
opacity: 0.5;
}
.removed[href="#counter-prone"] {
opacity: 0.5;
}
g[data-allegiance="davion"].clone {
fill: rgb(255, 126, 126);
}
g[data-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-allegiance="davion"] {
fill: red;
}
polygon.firing-arc[data-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;
}
#hex {
fill: inherit;
fill-opacity: inherit;
stroke: inherit;
stroke-width: inherit;
stroke-opacity: inherit;
}
use[href*="#t-"] {
r: 5px;
}
g.selected use {
animation: 1s selected 0.25s linear infinite;
stroke-width: 2px;
stroke: yellow;
r: 6px;
}
@keyframes selected {
50% {
/* stroke: yellow; */
stroke-width: 0px;
r: 5px;
}
}
.counter[data-allegiance="liao"] {
fill: #008000;
}
.counter[data-allegiance="davion"] {
fill: red;
}
.board {
transform: translate(19px, 31px) scale(4);
}
g.start-locations > g:first-child {
--i: -2;
}
g.start-locations > g:last-child {
--i: 52;
}
/* Inradius and circumradius values come from the hexagon */
.grid {
--inradius: 8.66px;
--circumradius: 10px;
--x-step: calc(var(--inradius) * 2);
--y-step: calc((3 / 2) * var(--circumradius));
}
g[data-y], g.start-locations > g {
--translateX: 0;
transform: translate(var(--translateX), calc(var(--y-step) * var(--i)));
}
g[data-y]:nth-child(even) {
--translateX: calc(var(--inradius));
}
[data-x] use[href="#hex"] {
--scale: 1;
transform: scale(var(--scale));
}
[data-x]:hover use[href="#hex"] {
/* --scale: 0.95; */
opacity: 1;
fill: orange;
stroke: black;
}
[data-x]:hover use[href*="#t-"] {
transform: scale(1.5);
}
[data-x] {
--scale: 1;
transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));
}
g[data-y="0"] { --i: 0; }
g[data-y="1"] { --i: 1; }
g[data-y="2"] { --i: 2; }
g[data-y="3"] { --i: 3; }
g[data-y="4"] { --i: 4; }
g[data-y="5"] { --i: 5; }
g[data-y="6"] { --i: 6; }
g[data-y="7"] { --i: 7; }
g[data-y="8"] { --i: 8; }
g[data-y="9"] { --i: 9; }
g[data-y="10"] { --i: 10; }
g[data-y="11"] { --i: 11; }
g[data-y="12"] { --i: 12; }
g[data-y="13"] { --i: 13; }
g[data-y="14"] { --i: 14; }
g[data-y="15"] { --i: 15; }
g[data-y="16"] { --i: 16; }
g[data-y="17"] { --i: 17; }
g[data-y="18"] { --i: 18; }
g[data-y="19"] { --i: 19; }
g[data-y="20"] { --i: 20; }
g[data-y="21"] { --i: 21; }
g[data-y="22"] { --i: 22; }
g[data-y="23"] { --i: 23; }
g[data-y="24"] { --i: 24; }
g[data-y="25"] { --i: 25; }
g[data-y="26"] { --i: 26; }
g[data-y="27"] { --i: 27; }
g[data-y="28"] { --i: 28; }
g[data-y="29"] { --i: 29; }
g[data-y="30"] { --i: 30; }
g[data-y="31"] { --i: 31; }
g[data-y="32"] { --i: 32; }
g[data-y="33"] { --i: 33; }
g[data-y="34"] { --i: 34; }
g[data-y="35"] { --i: 35; }
g[data-y="36"] { --i: 36; }
g[data-y="37"] { --i: 37; }
g[data-y="38"] { --i: 38; }
g[data-y="39"] { --i: 39; }
g[data-y="40"] { --i: 40; }
g[data-y="41"] { --i: 41; }
g[data-y="42"] { --i: 42; }
g[data-y="43"] { --i: 43; }
g[data-y="44"] { --i: 44; }
g[data-y="45"] { --i: 45; }
g[data-y="46"] { --i: 46; }
g[data-y="47"] { --i: 47; }
g[data-y="48"] { --i: 48; }
g[data-y="49"] { --i: 49; }
g[data-y="50"] { --i: 50; }
[data-x="0"] { --i: 0; }
[data-x="1"] { --i: 1; }
[data-x="2"] { --i: 2; }
[data-x="3"] { --i: 3; }
[data-x="4"] { --i: 4; }
[data-x="5"] { --i: 5; }
[data-x="6"] { --i: 6; }
[data-x="7"] { --i: 7; }
[data-x="8"] { --i: 8; }
[data-x="9"] { --i: 9; }
[data-x="10"] { --i: 10; }
[data-x="11"] { --i: 11; }
[data-x="12"] { --i: 12; }
[data-x="13"] { --i: 13; }
[data-x="14"] { --i: 14; }
[data-x="15"] { --i: 15; }
[data-x="16"] { --i: 16; }
[data-x="17"] { --i: 17; }
[data-x="18"] { --i: 18; }
[data-x="19"] { --i: 19; }
[data-x="20"] { --i: 20; }
[data-x="21"] { --i: 21; }
[data-x="22"] { --i: 22; }
[data-x="23"] { --i: 23; }
[data-x="24"] { --i: 24; }
[data-x="25"] { --i: 25; }
[data-x="26"] { --i: 26; }
[data-x="27"] { --i: 27; }
[data-x="28"] { --i: 28; }
[data-x="29"] { --i: 29; }
[data-x="30"] { --i: 30; }
[data-x="31"] { --i: 31; }
[data-x="32"] { --i: 32; }
.buildings {
display: none;
}