.board-wrapper {
    /*width: 100%;
    height: 100%;*/
    /*position: relative;*/
    /*display: flex;*/
/*    justify-content: center;
    align-items: center;*/
}

.board {
    display: table;
    border: 1px solid black;
    table-layout: fixed;
    aspect-ratio: 1 / 1;
    user-select: none;
}


/* Wide screen */
@media (min-aspect-ratio: 1/1) {
    .board {
        /* width: 95vh;*/
        width: 100%;
        /*width: calc(95vw - 210px);*/
        max-width: 100vh;
        /*height: 95%;*/
    }
}

/* Tall screen */
@media (max-aspect-ratio: 1/1) {
    .board {
        /* width: 95%;*/
        height: calc(95vh - 210px);
        max-height: 100vw;
    }
}

.board .rank {
    height: calc((100% - 2em)/8);
}

.board .file {
    text-align: center;
    width: calc((100% - 2em)/8);
}

.board .coordCorner {
    width: 1em;
    height: 1em;
}

.board .square {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border: 1px solid black;
    position: relative;
}

    .board .square img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: absolute;
        top: 0;
        left: 0;
    }

        .board .square.light {
            background-color: lightgray;
        }

        .board .square.dark {
            background-color: darkgray;
        }

    .board.showMoveFrom .square.moveFrom,
    .board.showMoveTo .square.moveTo,
    .promotionSelection {
        background-color: lightcyan;
    }

/*    .board.showMoveFrom .square.dark.moveFrom,
    .board.showMoveTo .square.dark.moveTo {
        background-color: powderblue;
    }*/

    .board .square.selected {
        background-color: yellow;
    }

    .board .square.secondarySelected {
        background-color: lightcoral;
    }

        .board .square.selected.moveTo {
            background-color: lightcoral !important;
        }