/* 棋盘样式 */
.board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: repeat(11, 1fr);
    width: 505px;
    height: 560px;
    border: 60px solid rgb(242, 237, 231);
    margin: auto;
    /* Add this line to center the board */
    margin-top: 50px;
    /* Adjust the margin-top as needed */
}


/* 棋子样式 */
.piece {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: bold;
    border: none; /* Remove the outer border */
    width: 55px;
    height: 55px;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    font-family: "楷体", "KaiTi", serif;
}

.piece::before,
.piece::after {
    content: "";
    position: absolute;
    top: 55%;
    left: -60%;
    width: 220%;
    height: 2px;
    background-color: rgb(150, 117, 64); /* Color of the cross */
    z-index: -3; 
}

.piece::before {
    transform: translateY(-50%);
}

.piece::after {
    transform: translateY(-50%) rotate(90deg);
}


/* .river {
    grid-column: 1 / span 9;
    grid-row: 6 / span 1;
    background-color: lightblue;
    text-align: center;
    font-size: 40px;
    height: 30px;
    font-family: "隶书", "LiSu", serif;
    -webkit-user-select: none;
    user-select: none;
    z-index: -2;
} */

.river {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    border: none; /* Remove the outer border */
    width: 55px;
    height: 10px;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    font-family: "隶书", "LiSu", serif;
}

.river::before {
    content: "";
    position: absolute;
    top: -230%;
    left: -61%;
    width: 220%;
    height: 30px;
    background-color: lightblue; /* Color of the cross */
    z-index: -2; 
}

.river::after {
    content: "";
    position: absolute;
    top: 63%;
    left: -60%;
    width: 220%;
    height: 32px;
    background-color: lightblue; /* Color of the cross */
    z-index: -2; 
}

/* X棋子样式 */
.x_piece {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: bold;
    border: none; /* Remove the outer border */
    width: 55px;
    height: 55px;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    font-family: "楷体", "KaiTi", serif;
}

.x_piece::before,
.x_piece::after {
    content: "";
    position: absolute;
    top: 56%;
    left: -91%;
    width: 281%;
    height: 1px;
    border-top: 2px dashed rgb(150, 117, 64); /* 使用虛線，可以調整虛線顏色和樣式 */
    z-index: -1; 
}

.x_piece::before {
    transform: translateY(-50%) rotate(44deg);
}

.x_piece::after {
    transform: translateY(-50%) rotate(-44deg);
}



.showwin {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: bold;
    color: red;
}

.center-container {
    text-align: center;
}

.reset {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    color: black;
    margin-top: 25px;
}

.circle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-weight: bold;
    color: black;
    margin-top: 25px;
}