.game-board {
    height: 850px;
    width: 850px;
    min-height: 850px;
    min-width: 850px;
    display: grid;
    grid-template-columns: repeat(7, auto);
    gap: auto;
    padding: 50px;

    .cell {
        width: 100px;
        height: 100px;
        border: 2px solid black;
        border-radius: 10%;

        &.house {
            background-color: blue;
        }

        &.university {
            background-color: orange;
        }

        &.factory {
            background-color: grey;
        }

        .exit:has(.exit-road) {
            border: solid black;
            border-width: 0 1px;

            .exit-road {
                margin: auto;
                width: 0;
                height: 100%;
                border: dashed black;
                border-width: 0 1px;
                transform: translate(calc(50% - 1px));
            }
        }
        
        .exit:has(.exit-road) {
            border: solid black;
            border-width: 0 1px;

            .exit-road {
                margin: auto;
                width: 0;
                height: 100%;
                border: dashed black;
                border-width: 0 1px;
                transform: translate(calc(50% - 1px));
            }
        }

        .exit:has(.exit-rail) {
            border-width: 0 1px;

            .exit-rail {
                margin: auto;
                width: 0;
                height: 100%;
                border: solid black;
                border-width: 0 1px;
                transform: translate(calc(50% - 1px));
            }
        }

        .exit:has(.exit-ambivalent) {
            border-width: 0 1px;
            border-style: dotted;

            .exit-ambivalent {
                margin: auto;
                width: 0;
                height: 100%;
                border: dotted black;
                border-width: 0 1px 0 0;
                transform: translate(calc(50%));
            }
        }
    }
}

.exit {
    position: relative;
    width: 20px;
    height: 20px;

    &:has(.exit-north) {
        left: 50%;
        transform: translate(calc(-50% - 1px), -100%);
    }

    &:has(.exit-south) {
        left: 50%;
        top: 100%;
        transform: translate(calc(-50% - 1px), 0%);
    }

    &:has(.exit-east) {
        left: 100%;
        top: 50%;
        transform: rotate(90deg) translate(-50%, 0);
    }

    &:has(.exit-west) {
        left: 0%;
        top: 50%;
        transform: rotate(90deg) translate(-50%, 100%);
    }

    &:has(.exit-north), &:has(.exit-south) {
        + .exit:has(.exit-east) {
            left: 100%;
            transform: rotate(90deg) translate(-150%, 0);
        }
    }

    &:has(.exit-north), &:has(.exit-south) {
        + .exit:has(.exit-west) {
            top: 50%;
            transform: rotate(90deg) translate(-150%, 100%);
        }
    }
}