svg {
 max-height: 100vh;
 stroke-width: 0.02;
 width: 100%;
}
.hex {
 fill: #fafafa;
 stroke: #888;
}
.path {
 fill: none;
 stroke-width: 0.04;
 stroke: #222;
}
.highlighted .hex {
 stroke: #bfb;
}
.selected .hex {
 fill: #ddd;
 stroke: #222;
}
.border {
 fill: none;
 stroke-width: 0.095;
}
.border.p1, .path.p1 {
 stroke: #e56;
}
.border.p2, .path.p2 {
 stroke: #48e;
}
.border.p3, .path.p3 {
 stroke: #888;
}
.tile-chooser {
 transform: scale(0.5);
}
.tile-chooser-bg {
 fill: #bfb;
 stroke: #888;
}
text {
 cursor: pointer;
 dominant-baseline: central;
 font-size: 0.7px;
 font-weight: bold;
 opacity: 0.875;
 stroke-width: 0.03;
 stroke: #fff;
 text-anchor: middle;
}
text.undo {
 fill: #e56;
 font-size: 0.3px;
 stroke: none;
}
text.p1 {
 fill: #e56;
}
text.p2 {
 fill: #48e;
}
text.p3 {
 fill: #888;
}
span.p1 {
 color: #e56;
}
span.p2 {
 color: #48e;
}
span.p3 {
 color: #888;
}