/* ───────────────────────────────────────────────────────────────
   gomoku.css : 五目並べ（碁盤風）
   scope: .game-gomoku
   碁盤の格子は 15x15 cell。各 cell の中心が交点。
   端の cell では線を中央で止め、星(hoshi)は nth-child で5箇所に置く。
   ─────────────────────────────────────────────────────────────── */

.game-gomoku {
    --gm-board: #d6a85d;
    --gm-board-2: #b88a4a;
    --gm-line: rgba(40, 25, 10, 0.65);
    --gm-hoshi: rgba(40, 25, 10, 0.9);
    --gm-stone-black: #1a1a1a;
    --gm-stone-white: #f5f5f5;
}

.game-gomoku .board.board-gomoku {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-auto-rows: 1fr;
    width: var(--board-max-wide);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    gap: 0;
    padding: 12px;
    background:
        radial-gradient(
            circle at 30% 22%,
            rgba(255, 220, 160, 0.25),
            transparent 60%
        ),
        linear-gradient(135deg, var(--gm-board), var(--gm-board-2));
    border-radius: var(--r-lg);
    box-shadow:
        var(--sh-md),
        inset 0 2px 6px rgba(0, 0, 0, 0.18);
    align-self: center;
}

.game-gomoku .cell.cell-gomoku {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
}

/* ─── 格子線（疑似要素） ─── */

.game-gomoku .cell.cell-gomoku::before,
.game-gomoku .cell.cell-gomoku::after {
    content: "";
    position: absolute;
    background: var(--gm-line);
}

/* 横線：cell の中央高さに、左右いっぱい */
.game-gomoku .cell.cell-gomoku::before {
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
}

/* 縦線：cell の中央幅に、上下いっぱい */
.game-gomoku .cell.cell-gomoku::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
}

/* ─── 端の cell では線を交点（中央）で止める ─── */

/* 左端列（col 0） : 横線は中央〜右半分のみ */
.game-gomoku .cell.cell-gomoku:nth-child(15n + 1)::before {
    left: 50%;
    right: 0;
}

/* 右端列（col 14） : 横線は左〜中央まで */
.game-gomoku .cell.cell-gomoku:nth-child(15n)::before {
    left: 0;
    right: 50%;
}

/* 上端行（row 0） : 縦線は中央〜下半分のみ */
.game-gomoku .cell.cell-gomoku:nth-child(-n + 15)::after {
    top: 50%;
    bottom: 0;
}

/* 下端行（row 14, child index 211〜225） : 縦線は上〜中央まで */
.game-gomoku .cell.cell-gomoku:nth-child(n + 211)::after {
    top: 0;
    bottom: 50%;
}

/* ─── 星（天元 + 4 隅）─────────────────────────────────────────
   15x15 の伝統的な星位置: (3,3) (3,11) (7,7) (11,3) (11,11)
   nth-child = row * 15 + col + 1 → 49 / 57 / 113 / 169 / 177
   ──────────────────────────────────────────────────────────── */

.game-gomoku .cell.cell-gomoku:nth-child(49),
.game-gomoku .cell.cell-gomoku:nth-child(57),
.game-gomoku .cell.cell-gomoku:nth-child(113),
.game-gomoku .cell.cell-gomoku:nth-child(169),
.game-gomoku .cell.cell-gomoku:nth-child(177) {
    background-image: radial-gradient(
        circle at center,
        var(--gm-hoshi) 0,
        var(--gm-hoshi) 3.2px,
        transparent 3.6px
    );
}

/* ─── ホバー（クリック可能なマス） ─── */

.game-gomoku .cell.cell-gomoku.clickable {
    cursor: pointer;
}

.game-gomoku .cell.cell-gomoku.clickable:hover {
    /* shorthand を使うと star の background-image が消えるので longhand */
    background-color: rgba(255, 255, 255, 0.18);
}

/* ─── 石 ─── */

.game-gomoku .stone {
    width: 86%;
    height: 86%;
    border-radius: 50%;
    z-index: 1;
    animation: gomoku-place 0.24s var(--ease-pop);
    box-shadow:
        inset 0 -2px 4px rgba(0, 0, 0, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.32);
}

.game-gomoku .cell.cell-gomoku.black .stone {
    background: radial-gradient(
        circle at 35% 30%,
        #4b4b4b,
        var(--gm-stone-black) 60%,
        #050505 100%
    );
}

.game-gomoku .cell.cell-gomoku.white .stone {
    background: radial-gradient(
        circle at 35% 30%,
        #ffffff,
        var(--gm-stone-white) 60%,
        #c8c8c8 100%
    );
}

@keyframes gomoku-place {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}