/* 液態玻璃感的 15x15 棋盤：外框與棋盤本體都改成半透明毛玻璃，讓底下環境光透出來 */
.board-container {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.03) 35%, transparent 60%),
        linear-gradient(160deg, rgba(198,168,116,0.42), rgba(120,96,58,0.24));
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    padding: 9px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
    width: 100%;
}

.board.gomoku {
    position: relative;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    width: 100%;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -8px 20px rgba(0,0,0,0.06);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    transition: background-color 0.4s ease;
}

/* 玻璃光澤：一道斜向柔光掃過棋盤表面，加強液態玻璃的高光質感（棋子 z-index 更高，不受影響） */
.board.gomoku::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.08) 26%, transparent 52%);
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* 【情況 A：我的回合】底色木質暖淡色、半透明玻璃質感，並提高一點亮度/飽和度，讓棋盤「亮起來」 */
.board.gomoku.my-turn {
    background-color: rgba(241, 223, 178, 0.58);
    filter: brightness(1.04) saturate(1.08);
}
.board.gomoku.my-turn .cell {
    background-image:
        linear-gradient(to right, transparent 48%, #8a764d 48%, #8a764d 52%, transparent 52%),
        linear-gradient(to bottom, transparent 48%, #8a764d 48%, #8a764d 52%, transparent 52%);
    background-size: 100% 100%;
    transition: background-image 0.4s ease;
}

/* 【情況 B：對方回合】底色與格線放淡，並疊上一層半透明暗色遮罩讓「棋盤背景」變暗。
   遮罩的 z-index 比棋子(z-index 3)低，所以已經下好的棋子仍然完全清晰、不受影響。 */
.board.gomoku.opponent-turn {
    background-color: rgba(244, 238, 223, 0.4);
}
.board.gomoku.opponent-turn .cell {
    background-image:
        linear-gradient(to right, transparent 48%, rgba(138, 118, 77, 0.35) 48%, rgba(138, 118, 77, 0.35) 52%, transparent 52%),
        linear-gradient(to bottom, transparent 48%, rgba(138, 118, 77, 0.35) 48%, rgba(138, 118, 77, 0.35) 52%, transparent 52%);
    background-size: 100% 100%;
    transition: background-image 0.4s ease;
}
.board.gomoku.opponent-turn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(24, 16, 6, 0.4);
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

/* 回合呼吸燈光暈特效（改用 iOS 系統藍）：只有輪到自己時才會出現，加強「亮起來」的感覺 */
@keyframes boardPulse {
    0% { box-shadow: 0 0 4px rgba(10, 132, 255, 0.2); }
    50% { box-shadow: 0 0 28px rgba(10, 132, 255, 0.6); }
    100% { box-shadow: 0 0 4px rgba(10, 132, 255, 0.2); }
}
.board.gomoku.my-turn {
    animation: boardPulse 2.2s infinite ease-in-out;
}

.board.gomoku .cell {
    position: relative;
}

/* 渲染立體擬真棋子 */
.board.gomoku .cell::after {
    content: ""; position: absolute; width: 85%; height: 85%; border-radius: 50%;
    top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0);
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 3;
}
/* 黑棋 */
.board.gomoku .cell.X::after {
    background: radial-gradient(circle at 30% 30%, #4b5563, #111827 80%);
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
/* 白棋 */
.board.gomoku .cell.O::after {
    background: radial-gradient(circle at 30% 30%, #ffffff, #d1d5db 80%);
    border: 1px solid #ccc;
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 最後落子提示：中央指示點放大且放淡 */
.board.gomoku .cell.last-move::after {
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.board.gomoku .cell.last-move::before {
    content: "";
    position: absolute;
    width: 32%;
    height: 32%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}
/* 黑子中央放半透明淡白點 */
.board.gomoku .cell.last-move.X::before {
    background: rgba(255, 255, 255, 0.45);
}
/* 白子中央放半透明淡黑點 */
.board.gomoku .cell.last-move.O::before {
    background: rgba(0, 0, 0, 0.25);
}

/* 手機選取預選提示圈圈：純透明白色 */
.board.gomoku .cell.pre-select-marker::before {
    content: ""; position: absolute; width: 90%; height: 90%;
    background: rgba(255, 255, 255, 0.5); border-radius: 50%;
    top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
    animation: pulse 0.5s infinite alternate;
}
@keyframes pulse { from { opacity: 0.5; } to { opacity: 0.9; } }