.chess-piece {

    position: relative;

    z-index: 5;

    width: 100%;
    height: 100%;

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

    font-size:
        clamp(38px, 7vw, 68px);

    line-height: 1;

    font-family:
        "Segoe UI Symbol",
        "Noto Sans Symbols",
        serif;

    cursor: pointer;
    user-select: none;

    transition:
        transform .15s ease,
        filter .15s ease;
}



.white-piece {

    color: var(--piece-white);

    text-shadow:
        0 2px 2px #000,
        0 0 8px var(--piece-white-glow);
}



.black-piece {

    color: var(--piece-black);

    text-shadow:
        0 1px 2px #777,
        0 0 10px var(--piece-black-glow);
}



.chess-piece:hover {

    transform: scale(1.1);

    filter:
        drop-shadow(
            0 0 10px
            var(--glow)
        );
}



.chess-piece.just-moved {

    animation: pieceDrop .28s ease;
}



.chess-piece.captured-flash {

    animation: captureFlash .35s ease;
}