svg {
    width: 95%;
    height: min-content;
}

rect#background {
    fill: rgb(41, 41, 41);
}

g.cell > polygon {
    stroke:var(--default-hex-border-colour);
} 

g.cell {
    opacity: var(--hidden-by-art-opacity);
}

/* Road*/
g.cell[map-code="."] > polygon {
    fill: var(--road-colour);
    stroke: var(--road-border-colour);
}

g.cell[d="0"] { opacity: var(--distance-0-opacity);}
g.cell[d="1"] { opacity: var(--distance-1-opacity);}
g.cell[d="2"] { opacity: var(--distance-2-opacity);}
g.cell[d="3"] { opacity: var(--distance-3-opacity);}
g.cell[d="4"] { opacity: var(--distance-4-opacity);}
g.cell[d="5"] { opacity: var(--distance-5-opacity);}

/* Ice */
g.cell[map-code="I"] > polygon  {
    fill: var(--ice-colour);
}

/* Obstacle */
g.cell[map-code="X"] > polygon {
    fill: var(--obstacle-colour);
}

/* Start */
g.cell[map-code="s"] > polygon {
    fill: var(--start-colour);
}

/* Finish */
g.cell[map-code="e"] > polygon {
    fill: var(--finish-colour);
}

/* Checkpoint 1 */
g.cell[map-code="1"] > polygon {
    fill: lightblue;
}

/* Checkpoint 2 */
g.cell[map-code="2"] > polygon {
    fill: lightgray;
}

line#wind-direction-arrow-line {
    stroke: yellow;
    stroke-width: 5;
}

polygon#wind-direction-arrowhead {
    fill:yellow;
}

g.cell.invisible.fog, g.cell.out-of-sight.line-of-sight {
    opacity: var(--invisible-opacity);
}

g.cell[map-code="X"]:hover > polygon {
    fill: darkred;
}

g.cell:hover > polygon {
    fill: red;
}

g.cell.highlight {
    opacity: var(--distance-0-opacity);

}

g.cell.highlight > polygon {
    stroke: red;
    stroke-width: 5;
}

g.cell.highlight.fail > polygon {
    stroke: red;
    stroke-width: 5;
    fill: rgb(124, 23, 23);
}

svg > g#path > polyline {
    stroke: black;
}

svg > g#path > circle {
    fill: black;
}

svg > g#fail-paths > polyline {
    stroke: red;
    stroke-opacity: 0.3;
}

svg > g#fail-paths > circle {
    fill: red;
    fill-opacity: 0.3;
}


svg > g#success-paths > polyline {
    stroke: green;
}

svg > g#success-paths > circle {
    fill: green;
}
