:root {
    color-scheme: light dark;
}

.board {
    border-collapse: collapse;
}

.cell {
    border: solid black;
    background-color: green;
    text-align: center;
}

.cell-button {
    width: 11vmin;
    height: 11vmin;
    background-color: unset;
    border: unset;
}

.cell-button>img {
    opacity: 0;
    pointer-events: none;
}

@keyframes flipBlack {
    0% {
        transform: rotate3d(1, 1, 0, 0deg);
        filter: invert(1);
    }

    29.333% {
        filter: invert(1);
    }

    29.334% {
        filter: invert(0);
    }

    100% {
        transform: rotate3d(1, 1, 0, 180deg);
        filter: invert(0);
    }
}

@keyframes flipWhite {
    0% {
        transform: rotate3d(1, 1, 0, 180deg);
        filter: invert(0);

    }

    29.333% {
        filter: invert(0);
    }

    29.334% {
        filter: invert(1);
    }

    100% {
        transform: rotate3d(1, 1, 0, 0deg);
        filter: invert(1);
    }
}

.black>img {
    opacity: 1;
    transform: rotate3d(1, 1, 0, 180deg);
}
.black.flip>img {
    animation: flipBlack 2000ms 1 ease forwards;
}

.white>img {
    opacity: 1;
    filter: invert(1);
}
.white.flip>img {
    animation: flipWhite 2000ms 1 ease forwards;
}

.hilight {
    background-color: aqua;
}