.checkerboard{
    position: relative;
}
@media screen and (max-width: 414px) {
    html {
        font-size: 10px;
    }
}
.black{
    background-image: url('/src/assets/point.png');
    background-position: 0.08rem -1.5rem;
    background-size: 200%;
    background-repeat: no-repeat;
}

.white{
    background-image: url('/src/assets/point.png');
    background-position: -1.9999rem -1.53rem;
    background-size: 200%;
    background-repeat: no-repeat;
}

.board-grid{
    display: grid;
    height: 2rem;
    grid-template-columns: repeat(14, 1fr);
    grid-template-rows: 2rem;
}

.bj-grid{
    display: grid;
    height: 2rem;
    grid-template-columns: repeat(15, 1fr);
    grid-template-rows: 1rem;
}

.board-item{
    border: 0.01rem solid rgba(0, 0, 0, 0);
    width: 2rem;
    height: 2rem;
    /* border: 1px solid red; */
}
.bj-item{
    border: 0.01rem solid black;
    border-bottom: none;
    border-right: none;
    width: 2rem;
    height: 2rem;
}
.bj-bottom{
    border-bottom: 0.01rem solid black;
}
.bj-right{
    border-right: 0.01rem solid black;
}
.bj{
    position: absolute;
    z-index: -1;
}
.board{
    position: absolute;
    left: 1rem;
    top: 1rem;
}

.xline{
    position: relative;
    top: -1.6rem;
    left: -0.3rem;
}

.yline{
    position: relative;
    top: -0.9rem;
    left: -2.3rem;
    width: 2rem;
    display: inline-block;
    text-align: right;
}