:root {
    --zoom: 1;
    --board-size: min(calc(95vw * var(--zoom)), calc(95vh) * var(--zoom));
    --square-size: calc(var(--board-size) / 8 - 0.001%);
}

chessboard {
    display: flex;
    width: var(--board-size);
    height: auto;
    aspect-ratio: 1;
    flex-flow: wrap-reverse;
    border: 2px solid #333;

    justify-content: center;
    align-items: center;

    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    font-size: xx-large;
}

square {
    display: inherit;
    width: var(--square-size);
    height: auto;
    aspect-ratio: 1;
}

square.white {
    background-color: #f0d9b5;
    /* background-color: #ffffdd; */
}

square.black {
    background-color: #b58863;
    /* background-color: #86a666; */
}

square.white.last-move {
    background-color: #cdd26a;
}

square.black.last-move {
    background-color: #aaa23a;

}

piece {
    display: inherit;
    cursor: pointer;
    position: absolute;
    width: inherit;
    height: auto;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

mark {
    position: relative;
    display: inherit;
    width: calc(var(--square-size) / 2);
    height: auto;
    z-index: 2;
    background-repeat: no-repeat;
    background-color: transparent;
    pointer-events: none;
    left: calc(var(--square-size) * 3 / 4);
    bottom: calc(var(--square-size) / 4);
}

mark.checkmate {
    background-image: url('../assets/checkmate.svg');
}

mark.check {
    background-image: url('../assets/check.svg');
}

.dragging {
    z-index: 1;
}

.white.pawn {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/45/Chess_plt45.svg');
}

.white.rook {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/72/Chess_rlt45.svg');
}

.white.knight {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/70/Chess_nlt45.svg');
}

.white.bishop {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b1/Chess_blt45.svg');
}

.white.queen {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/15/Chess_qlt45.svg');
}

.white.king {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/42/Chess_klt45.svg');
}

.black.pawn {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c7/Chess_pdt45.svg');
}

.black.rook {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/f/ff/Chess_rdt45.svg');
}

.black.knight {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/e/ef/Chess_ndt45.svg');
}

.black.bishop {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/98/Chess_bdt45.svg');
}

.black.queen {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/47/Chess_qdt45.svg');
}

.black.king {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/f/f0/Chess_kdt45.svg');
}

.dot-and-select-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dot-player-marker {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
}

.player-select {
    flex-grow: 1;
    padding: 5px;
    font-size: 14px;
}