:root {
    --bg-color: #1a1a1b; --container-bg: #403e3a; --board-light: #b59f7e; --board-dark: #7a5a41;
    --hl-move: rgba(63, 81, 181, 0.4); --hl-selected: rgba(251, 192, 45, 0.5);
    --btn-blue: #3f51b5; --btn-undo: #607d8b; --btn-gold: #900606;
}
body { font-family: -apple-system, sans-serif; background-color: var(--bg-color); color: #fff; margin: 0; display: flex; flex-direction: column; align-items: center; padding: 20px 10px; -webkit-tap-highlight-color: transparent; }

/* 统计栏 */
.stats { margin-bottom: 20px; font-size: 18px; text-align: center; line-height: 1.6; }
.stats b { color: #fff; margin: 0 4px; }

/* 棋盘容器 */
#game-outer-container { background-color: var(--container-bg); padding: 15px; border-radius: 16px; width: 95vw; max-width: 900px; box-sizing: border-box; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
#chessboard { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; aspect-ratio: 1/1; border-radius: 4px; overflow: hidden; background-color: var(--board-dark); border: 2px solid #333; }

.square { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; }
.light { background-color: var(--board-light); }
.dark { background-color: var(--board-dark); }
.selected { background-color: var(--hl-selected) !important; } /* 选中高亮改为黄色 */
.hint::after { content: ''; width: 30%; height: 30%; background: var(--hl-move); border-radius: 50%; } /* 走子提示蓝色 */

.piece-img { width: 94%; height: 94%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }
.pvp-mode .piece-black { transform: rotate(180deg); }

/* 控制区 */
.controls { margin-top: 25px; display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 600px; }
.btn-row { display: flex; gap: 10px; justify-content: center; }
button { flex: 1; padding: 12px; border-radius: 30px; border: none; color: #fff; font-weight: bold; cursor: pointer; font-size: 14px; transition: 0.2s; }
.btn-blue { background-color: var(--btn-blue); }
.btn-undo { background-color: var(--btn-undo); }
.btn-dark { background-color: #2d2d2d; color: #777; }
.btn-dark.active { background-color: #444; color: #fff; border: 1.5px solid #fff; }
.btn-diff { background-color: #2d2d2d; color: #777; }
.btn-diff.active { background-color: var(--btn-gold); color: #000; }

/* 核心优化：操作说明区 */
.instruction-section {
    margin-top: 30px; margin-bottom: 20px; padding: 20px; width: 95vw; max-width: 860px;
    background: rgba(255, 255, 255, 0.05); border-radius: 12px; border-left: 4px solid var(--btn-gold);
    font-size: 14px; line-height: 1.8; box-sizing: border-box;
}
.ins-title { color: var(--btn-gold); font-weight: bold; font-size: 16px; margin-bottom: 10px; display: block; }
.rule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 10px; }
.rule-item { }
.rule-item span { color: var(--btn-gold); margin-right: 5px; }

/* 弹窗与覆盖层 */
#promotion-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 200; flex-direction: column; justify-content: center; align-items: center; }
.promotion-box { background: #fff; padding: 30px; border-radius: 20px; text-align: center; color: #333; }
.promotion-options { display: flex; gap: 20px; margin-top: 20px; }
.promo-choice { width: 70px; height: 70px; cursor: pointer; border-radius: 10px; display: flex; justify-content: center; align-items: center; border: 2px solid #ddd; }
#modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; color: #000; padding: 40px; border-radius: 24px; z-index: 100; text-align: center; width: 300px; }
.overlay { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:99; }