/* 自訂棋盤和棋子樣式 */
  :root {
    --board-bg: #f0d9b5; /* 棋盤背景色 */
    --line-color: #8b4513; /* 線條顏色 */
    --palace-line-color: #a0522d; /* 九宮線條顏色 */
    --river-color: #add8e6; /* 楚河漢界背景色 */
    --red-piece-color: #e53e3e; /* 紅方棋子顏色 */
    --black-piece-color: #2d3748; /* 黑方棋子顏色 */
    --selected-bg: rgba(0, 255, 0, 0.3); /* 選中棋子背景 */
    --valid-move-bg: rgba(0, 255, 0, 0.15); /* 可走位置背景 */
    --check-bg: rgba(255, 0, 0, 0.4); /* 將軍提示背景 */
}

body {
    font-family: 'Inter', 'Microsoft JhengHei', sans-serif; /* 字體 */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f7fafc; /* 頁面背景色 */
}

.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.board-container {
    position: relative;
    width: 480px; /* 棋盤寬度 (格子寬度 * 8 + 邊距) */
    height: 540px; /* 棋盤高度 (格子高度 * 9 + 邊距) */
    background-color: var(--board-bg);
    border: 2px solid var(--line-color);
    border-radius: 8px; /* 圓角 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 陰影 */
    margin-bottom: 3rem; /* 與下方元素的間距 */
}

.grid {
    position: absolute;
    top: -30px; /* 棋盤上邊距 */
    left: -30px; /* 棋盤左邊距 */
    width: calc(100% - 60px); /* 棋盤格線區域寬度 */
    height: calc(100% - 60px); /* 棋盤格線區域高度 */
    display: grid;
    grid-template-columns: repeat(9, 1fr); /* 9 列 */
    grid-template-rows: repeat(10, 1fr); /* 10 行 */
}

.square {
    position: relative;
    width: 60px; /* 格子寬度 */
    height: 60px; /* 格子高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer; /* 滑鼠指標 */
    border-radius: 50%; /* 讓背景高亮顯示為圓形 */
}

/* 繪製棋盤線條 */
.square::before, .square::after {
    content: '';
    position: absolute;
    background-color: var(--line-color);
    z-index: 0; /* 確保線條在棋子下方 */
}
/* 繪製垂直線 */
.square::before {
    width: 1px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}
/* 繪製水平線 */
.square::after {
    height: 1px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

/* 移除邊界線條 */
.col-0::before { display: none; } /* 第一列無左線 */
.col-8::before { display: none; } /* 最後一列無右線 (由下一列的左線代替) */
.row-0::after { display: none; } /* 第一行無上線 */
.row-9::after { display: none; } /* 最後一行無下線 (由上一行的上線代替) */

/* 特殊處理邊界線條，使其完整 */
.col-0::after { left: 50%; width: 50%; } /* 第一列水平線從中間開始 */
.col-8::after { right: 50%; width: 50%; } /* 最後一列水平線從中間開始 */
.row-0::before { top: 50%; height: 50%; } /* 第一行垂直線從中間開始 */
.row-9::before { bottom: 50%; height: 50%; } /* 最後一行垂直線從中間開始 */

/* 移除角落多餘線條 */
.row-0.col-0::before, .row-0.col-0::after { display: none; }
.row-0.col-8::before, .row-0.col-8::after { display: none; }
.row-9.col-0::before, .row-9.col-0::after { display: none; }
.row-9.col-8::before, .row-9.col-8::after { display: none; }

/* 繪製九宮格斜線 */
.palace-line {
    position: absolute;
    width: 1px;
    height: 169.7px; /* sqrt(120^2 + 120^2) */
    background-color: var(--palace-line-color);
    z-index: 0;
}
.palace-line-1 { top: 0px; left: 300px; transform: rotate(45deg); transform-origin: top left; } /* 黑宮左上到右下 */
.palace-line-2 { top: 0px; left: 180px; transform: rotate(-45deg); transform-origin: top right; } /* 黑宮右上到左下 */
.palace-line-3 { bottom: 0px; left: 300px; transform: rotate(-45deg); transform-origin: bottom left; } /* 紅宮左下到右上 */
.palace-line-4 { bottom: 0px; left: 180px; transform: rotate(45deg); transform-origin: bottom right; } /* 紅宮右下到左上 */

/* 繪製楚河漢界 */
.river {
    position: absolute;
    top: 270px; /* (格子高度 * 4 + 上邊距) */
    left: 30px; /* 左邊距 */
    width: calc(100% - 10px); /* 棋盤格線區域寬度 */
    height: 60px; /* 格子高度 */
    /* background-color: var(--river-color); */ /* 可選：給河流上色 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem; /* 字體大小 */
    font-weight: bold; /* 粗體 */
    color: var(--line-color); /* 文字顏色 */
    letter-spacing: 1.5em; /* 字間距 */
    z-index: 0;
    pointer-events: none; /* 不阻擋滑鼠事件 */
}

.piece {
    position: relative; /* 相對定位，使 z-index 生效 */
    width: 50px; /* 棋子寬度 */
    height: 50px; /* 棋子高度 */
    border-radius: 50%; /* 圓形 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px; /* 棋子文字大小 */
    font-weight: bold;
    cursor: pointer;
    border: 2px solid #555; /* 棋子邊框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 棋子陰影 */
    z-index: 1; /* 確保棋子在線條上方 */
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; /* 過渡效果 */
}
.piece:hover {
    transform: scale(1.05); /* 懸停放大 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 懸停陰影 */
}

.red {
    background-color: #fef2f2; /* 紅方棋子背景 */
    color: var(--red-piece-color); /* 紅方文字顏色 */
    border-color: var(--red-piece-color);
}

.black {
    background-color: #e2e8f0; /* 黑方棋子背景 */
    color: var(--black-piece-color); /* 黑方文字顏色 */
    border-color: var(--black-piece-color);
}

.selected {
    box-shadow: 0 0 15px 5px var(--selected-bg); /* 選中效果 */
    transform: scale(1.1);
}

.valid-move::after {
    content: '';
    position: absolute;
    width: 20px; /* 可走位置標記大小 */
    height: 20px;
    background-color: var(--valid-move-bg);
    border: 1px solid rgba(0, 128, 0, 0.5);
    border-radius: 50%;
    z-index: 2; /* 在棋子之上 */
}
.capture-move::after { /* 標記可吃子的位置 */
     background-color: rgba(255, 165, 0, 0.3); /* 橘色提示 */
     border: 1px solid rgba(255, 165, 0, 0.6);
}

.check {
    background-color: var(--check-bg); /* 將軍提示 */
}

.status-bar {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 2rem; /* 與按鈕的間距 */
    padding: 0.5rem 1rem;
    background-color: #e2e8f0;
    border-radius: 6px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.reset-button {
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    background: linear-gradient(to bottom, #4a5568, #2d3748); /* 漸層背景 */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.1s ease;
}
.reset-button:hover {
    background: linear-gradient(to bottom, #2d3748, #1a202c); /* 懸停漸層 */
    transform: translateY(-1px); /* 懸停上移 */
}
.reset-button:active {
    transform: translateY(0px); /* 按下效果 */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* 讓棋盤在小螢幕上縮小 */
@media (max-width: 600px) {
    .board-container {
        width: 90vw;
        height: calc(90vw * 10 / 9); /* 維持比例 */
        min-width: 300px; /* 最小寬度 */
        min-height: calc(300px * 10 / 9); /* 最小高度 */
    }
    .square {
        width: 10vw;
        height: 10vw;
        min-width: 33.33px;
        min-height: 33.33px;
    }
     .piece {
        width: 8vw;
        height: 8vw;
        min-width: 28px;
        min-height: 28px;
        font-size: 4vw; /* 相對字體大小 */
        border-width: 1px;
     }
     .river {
        font-size: 3vw;
        letter-spacing: 1em;
        top: calc(10vw * 4.5); /* 調整河流位置 */
        height: 10vw;
        left: 0;
        width: 100%;
        padding: 0 5%; /* 內縮 */
        box-sizing: border-box;
     }
    /* 需要重新計算九宮線條位置和旋轉 */
    .palace-line { display: none; } /* 簡化處理：小螢幕暫不顯示斜線 */

    .status-bar { font-size: 1rem; }
    .reset-button { padding: 0.5rem 1rem; font-size: 0.9rem;}
}