/* ======================================= */
/* =============== classic =============== */
/* ======================================= */
#board.classic {
    background: url('../assets/theme/classic/board.webp') no-repeat contain;
}
#board.classic .highlight {
    background-color: var(--highlight);
}
.classic .piece.wp {
    background-image: url(../assets/theme/classic/pieces/wp.webp);
}

.classic .piece.wr {
    background-image: url(../assets/theme/classic/pieces/wr.webp);
}

.classic .piece.wn {
    background-image: url(../assets/theme/classic/pieces/wn.webp);
}

.classic .piece.wb {
    background-image: url(../assets/theme/classic/pieces/wb.webp);
}

.classic .piece.wq {
    background-image: url(../assets/theme/classic/pieces/wq.webp);
}

.classic .piece.wk {
    background-image: url(../assets/theme/classic/pieces/wk.webp);
}

.classic .piece.bp {
    background-image: url(../assets/theme/classic/pieces/bp.webp);
}

.classic .piece.br {
    background-image: url(../assets/theme/classic/pieces/br.webp);
}

.classic .piece.bn {
    background-image: url(../assets/theme/classic/pieces/bn.webp);
}

.classic .piece.bb {
    background-image: url(../assets/theme/classic/pieces/bb.webp);
}

.classic .piece.bq {
    background-image: url(../assets/theme/classic/pieces/bq.webp);
}

.classic .piece.bk {
    background-image: url(../assets/theme/classic/pieces/bk.webp);
}


/* ======================================= */
/* =============== walnut =============== */
/* ======================================= */
#board.walnut .coordinate-light {
    fill: #835f42;
}
#board.walnut .highlight {
    background-color: #d1a52d;
}
#board.walnut .coordinate-dark {
    fill: #c0a684;
}

#board.walnut {
    background: url('../assets/theme/walnut/board.webp') no-repeat;
    background-size: contain;
}


.walnut .piece.wp {
    background-image: url(../assets/theme/walnut/pieces/wp.webp);
}

.walnut .piece.wr {
    background-image: url(../assets/theme/walnut/pieces/wr.webp);
}

.walnut .piece.wn {
    background-image: url(../assets/theme/walnut/pieces/wn.webp);
}

.walnut .piece.wb {
    background-image: url(../assets/theme/walnut/pieces/wb.webp);
}

.walnut .piece.wq {
    background-image: url(../assets/theme/walnut/pieces/wq.webp);
}

.walnut .piece.wk {
    background-image: url(../assets/theme/walnut/pieces/wk.webp);
}

.walnut .piece.bp {
    background-image: url(../assets/theme/walnut/pieces/bp.webp);
}

.walnut .piece.br {
    background-image: url(../assets/theme/walnut/pieces/br.webp);
}

.walnut .piece.bn {
    background-image: url(../assets/theme/walnut/pieces/bn.webp);
}

.walnut .piece.bb {
    background-image: url(../assets/theme/walnut/pieces/bb.webp);
}

.walnut .piece.bq {
    background-image: url(../assets/theme/walnut/pieces/bq.webp);
}

.walnut .piece.bk {
    background-image: url(../assets/theme/walnut/pieces/bk.webp);
}


/* ======================================= */
/* =============== newspaper =============== */
/* ======================================= */
#board.newspaper .coordinate-light {
    fill: #5a5956;
}
#board.newspaper .highlight {
    background-color: #99976e;
}
#board.newspaper .coordinate-dark {
    fill: #5a5956;
}
#board.newspaper{
    background: url('../assets/theme/newspaper/board.webp') no-repeat;
    background-size: contain;
}
.newspaper .piece.wp {
    background-image: url(../assets/theme/newspaper/pieces/wp.webp);
}

.newspaper .piece.wr {
    background-image: url(../assets/theme/newspaper/pieces/wr.webp);
}

.newspaper .piece.wn {
    background-image: url(../assets/theme/newspaper/pieces/wn.webp);
}

.newspaper .piece.wb {
    background-image: url(../assets/theme/newspaper/pieces/wb.webp);
}

.newspaper .piece.wq {
    background-image: url(../assets/theme/newspaper/pieces/wq.webp);
}

.newspaper .piece.wk {
    background-image: url(../assets/theme/newspaper/pieces/wk.webp);
}

.newspaper .piece.bp {
    background-image: url(../assets/theme/newspaper/pieces/bp.webp);
}

.newspaper .piece.br {
    background-image: url(../assets/theme/newspaper/pieces/br.webp);
}

.newspaper .piece.bn {
    background-image: url(../assets/theme/newspaper/pieces/bn.webp);
}

.newspaper .piece.bb {
    background-image: url(../assets/theme/newspaper/pieces/bb.webp);
}

.newspaper .piece.bq {
    background-image: url(../assets/theme/newspaper/pieces/bq.webp);
}

.newspaper .piece.bk {
    background-image: url(../assets/theme/newspaper/pieces/bk.webp);
}