div > img {
    width: 100%;
    background-color: darkgray;
}

div > svg {
    width: 100%;
    height: min-content;
    background-color: darkgray;
}

div#playing {
    width: 100%;
}

body {
    background-color: lightgray; 
}

.hidden {
    display: none;
}

/* Playing map */

g.cell.within-sight[map-code="T"], g.cell.within-sight[map-code="?"] {
    opacity: var(--distance-0-opacity);
}


g.cell.within-sight[map-code="T"] > polygon {
    fill: rgb(118, 170, 170);
}

g.cell.within-sight[map-code="?"] > polygon {
    fill: rgb(236, 28, 219);
    opacity: var(--distance-0-opacity);
}

g.cell.out-of-sight[map-code="T"], g.cell.out-of-sight[map-code="?"] {
    fill: var(--obstacle-colour);
}


/* Complete Screen */

div#complete > svg > g#basic-stars > path.visible {
    visibility: visible;
}

div#complete > svg > g#perfect.visible {
    visibility: visible;
}