body {
    margin: 0px;
    background-color: #fff;
    height: 100dvh;
    width: 100dvw;
    overflow: hidden;
    box-sizing: border-box;
    font-weight: bold;
    font-family: "Segoe UI", "Tahoma", "Geneva", "Verdana", sans-serif;
}

#map {
    width: 100dvw;
    height: 100dvh;
    z-index: 0;
}

button {
    z-index: 1;
    font-size: 14px;
}

.b, .edge, .end-highlight {
    /* stroke-only */
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.t {
    fill-rule: evenodd;
    stroke: none;
}
/* asphalt */
.as {fill: #666}
/* buildings */
.bd {fill: #aad}
/* basement, walls */
.bm, .wl {fill: #222}
/* bushes */
.bu {fill: #080}
/* dirt */
.dt {fill: #752}
/* dense forest */
.fd {fill: #362}
/* fernland */
.fn {fill: #a62}
/* forest (regular) */
.fr {fill: #583}
/* hollybush */
.hb {fill: #140}
/* pebbles */
.pb {fill: #ee7}
/* concrete */ 
.cn {fill: #cc4}
/* plains, shaded downhill */
.pd {fill: #491}
/* plains */
.pl {fill: #5a2}
/* plains, shaded uphill */
.pu {fill: #6b3}
/* shipping-container */
.sc {fill: #030}
/* wood-chip piles */
.lg, .wc, .wd {fill: #b96}

.b {
    /* borders */
    stroke: #000;
    display: var(--borders);
}

.ankai {
    /* ankai-border */
    stroke-width: calc(var(--stroke-mod) * 2);
}

.region {
    /* region-border */
    stroke-width: calc(var(--stroke-mod) * 1);
}

.sector {
    /* sector-border */
    stroke-width: calc(var(--stroke-mod) / 3);
}

#map path, #map image, #map use {
    transform: scale(var(--zoom)) translate(var(--x), var(--y));
}

.region-fill, .sector-fill, .ankai-fill {
    fill: #0000;
    animation: fill 0.5s;
    cursor: pointer;
    &:hover {
        fill: #0004;
    };
}

g:has(.ankai-fill) {
    display: var(--ankai);
}

g:has(.region-fill) {
    display: var(--regions);
}

g:has(.sector-fill) {
    display: var(--sectors);
}

#zoom-controls {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 3dvmin;
    bottom: 3dvmin;
}

#overlay-controls {
    position: absolute;
    right: 3dvmin;
    bottom: 3dvmin;
}

#home-button {
    position: absolute;
    left: 3dvmin;
    top: 3dvmin;
    button {
        cursor: pointer;
    }
}

#help-button {
    position: absolute;
    right: 3dvmin;
    top: 3dvmin;
}

#help-button a {
    font-size: 44px;
    text-decoration: none;
    color: #69c;
    &:hover {
        color: #028;
    };
    &:active {
        color: #a48;
    };
}

button:has(svg.icon) {
    padding: 0px;
    height: 22px;
    &.double {
        height: 44px;
    }
}

svg.icon .b {
    /* borders in icons */
    stroke: #444;
    stroke-width: 1;
}

svg.icon .home {
    /* home icon */
    fill: #ccc;
    stroke: #444;
    stroke-width: 1;
    stroke-linejoin: round;
}

button:hover > svg.icon > .home {
    fill: #69c;
}

button:active > svg.icon > .home {
    fill: #c69;
}

svg.icon .fill {
    fill: var(--fill);
}

/* basic edges*/

path:has(title), g {
    cursor: pointer;
}

.single {
    stroke-width: calc(var(--stroke-mod) / 2);
    stroke: #000;
}

.multi {
    stroke-width: calc(var(--stroke-mod));
    stroke: #880;
}

.deprecated {
    stroke-width: calc(var(--stroke-mod) / 4);
    stroke: #f88;
}

.error {
    stroke-width: calc(var(--stroke-mod) / 2);
    stroke: #f00;
}

.end-highlight {
    stroke-width: calc(var(--stroke-mod) * 1.5);
}

.crosshair {
    stroke-width: calc(var(--stroke-mod) / 4);
}

.red {
    stroke: #f88;
}

.green {
    stroke: #4c4;
}

.edge:hover, .error:hover {
    stroke: #088;
}

text.tooltip {
    fill: #fff;
}

path.tooltip {
    fill: #000c;
    stroke: none;
}