/* 将棋盤の基本的なスタイル */
:root {
    --sel-b-color: #ff9800; /* 先手の選択色 (アンバー) */
    --sel-w-color: #7e57c2; /* 後手の選択色 (パープル) */
    --valid-color: rgba(33,150,243,0.9); /* 有効手リング(青) */
    --capture-color: rgba(244,67,54,0.95); /* 取り手リング(赤) */
}
#gemini-shogi-game {
    font-family: sans-serif;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.board-container {
    display: grid;
    grid-template-columns: repeat(9, 40px);
    grid-template-rows: repeat(9, 40px);
    border: 2px solid #333;
    width: 360px;
    height: 360px;
}

.square {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    cursor: pointer;
    background-color: #f0d9b5; /* 木目調の色 */
    position: relative; /* overlay indicators */
    transition: background-color .2s ease, box-shadow .1s ease, outline-color .2s ease, transform .06s ease;
}

.square:hover {
    background-color: #f6e3bf;
}

.square.selected {
    background-color: #fff3cd; /* フォールバック */
    outline: 2px solid var(--sel-b-color);
    box-shadow: 0 0 0 3px rgba(255,152,0,0.25);
    z-index: 2;
}
.square.selected-b { outline-color: var(--sel-b-color); }
.square.selected-w { outline-color: var(--sel-w-color); box-shadow: 0 0 0 3px rgba(126,87,194,0.25); background-color: #f5e8ff; }

.square.valid-move {
    background-color: #e3f2fd; /* 移動可能マスの淡色 */
}

/* 有効手のビジュアルインジケータ（リング） */
.square.valid-move::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--valid-color); /* 青リング */
    pointer-events: none;
}

/* 取り手（キャプチャ）の強調: 赤リング */
.square.valid-move-capture {
    background-color: #ffebee; /* わずかに赤みを帯びた下地 */
}
.square.valid-move-capture::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--capture-color); /* 赤リング */
    pointer-events: none;
}

/* キーボードフォーカスの視覚表示 */
.square.kb-focus {
    outline: 2px dashed #1976d2;
    outline-offset: -2px;
}

/* 直前の指し手ハイライト */
.square.last-move {
    outline: 2px solid #4caf50;
    box-shadow: 0 0 0 3px rgba(76,175,80,0.22);
}

/* 駒のスタイル */
.piece {
    width: 90%;
    height: 90%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* プレイヤーごとの駒の向き */
.piece.w {
    transform: rotate(180deg);
}

.piece-captured.w {
    transform: rotate(180deg);
}

.piece-captured {
    width: 36px; /* 40px * 0.9 */
    height: 36px; /* 40px * 0.9 */
    cursor: pointer;
    border-radius: 6px;
    transition: transform .06s ease, box-shadow .12s ease, background-color .2s ease, outline-color .2s ease;
}

.piece-captured:hover {
    transform: translateY(-1px);
}

.piece-captured.selected {
    background-color: #fff8e1;
    outline: 2px solid var(--sel-b-color);
    box-shadow: 0 0 0 3px rgba(255,152,0,0.25);
    transform: scale(1.05);
}
.piece-captured.selected-b { outline-color: var(--sel-b-color); }
.piece-captured.selected-w { outline-color: var(--sel-w-color); box-shadow: 0 0 0 3px rgba(126,87,194,0.25); background-color: #f5e8ff; }

/* 情報表示エリア */
.info-container {
    width: 200px;
}

.captured-pieces {
    border: 1px solid #666;
    padding: 10px;
    min-height: 100px;
    margin-bottom: 10px;
}

.captured-pieces h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
}

.captured-pieces .pieces {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ゲームコントロール */
.game-controls {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

#new-game-button, #difficulty-selector {
    padding: 5px 10px;
    font-size: 14px;
    margin: 0 5px;
}

/* モデル表示・状態とステータス */
.current-models-display {
    width: 100%;
    text-align: center;
    font-weight: 600;
}

.status-message {
    background: #f7f7f7;
    border-left: 3px solid #9e9e9e;
    padding: 6px 8px;
    margin-bottom: 8px;
}

.retry-ai-btn {
    padding: 6px 10px;
    font-size: 14px;
    margin-bottom: 8px;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.retry-ai-btn:disabled {
    opacity: 0.7;
    cursor: default;
}

/* 高コントラスト環境用の強調 */
@media (prefers-contrast: more) {
    .square.selected, .square.last-move, .square.kb-focus,
    .square.valid-move::after, .square.valid-move-capture::after,
    .piece-captured.selected {
        outline-width: 3px;
        box-shadow: 0 0 0 4px rgba(0,0,0,0.12);
    }
}