/* 基本排版 */
:root {
	--chrome: 180px; /* 保留給標題/按鈕/邊距的高度，避免小螢幕溢出 */
	--square-size: min(
		calc((100vh - var(--chrome)) / 8),
		calc((100vw - 32px) / 8),
		96px
	);
	--cap-width: 72px; /* 左側長條面板寬度 */
	--light: #f0d9b5;
	--dark: #b58863;
	--accent: #3fa7ff80;
	--select: #2ecc7080;
	--danger: #e74c3c99;
	--text: #222;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans TC", Arial, sans-serif; color: var(--text); background: #fafafa; display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 8px; }

.app { max-width: 1200px; margin: 0 auto; padding: 0 8px; }

/* 讓文字 UI 與棋盤左側對齊：寬度=吃子寬+棋盤寬，並用 padding-left 推齊 */
h1 { margin: 8px auto 8px; font-size: 22px; width: calc(var(--square-size) * 8 + var(--cap-width)); padding-left: calc(var(--cap-width) + 10px); text-align: left; }
.status-bar { display: flex; align-items: center; gap: 8px; margin: 0 auto 8px; flex-wrap: wrap; width: calc(var(--square-size) * 8 + var(--cap-width)); padding-left: calc(var(--cap-width) + 10px); justify-content: flex-start; }
.status-bar button { padding: 6px 10px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; }
.status-bar button:hover { background: #f2f2f2; }

/* 行排列：左側吃子長條＋棋盤 */
.board-row { display: grid; grid-template-columns: var(--cap-width) calc(var(--square-size) * 8); gap: 10px; align-items: start; width: calc(var(--square-size) * 8 + var(--cap-width)); margin: 0 auto; }

/* 左側吃子長條面板：黑方在上、白方在下 */
.captures { width: var(--cap-width); height: calc(var(--square-size) * 8); background: transparent; border: none; border-radius: 8px; box-shadow: none; padding: 6px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.cap-section { width: 100%; display: flex; flex-direction: column; align-items: center; }
.cap-title { display: none; }
.cap-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 4px; justify-content: flex-start; align-items: center; min-height: 24px; padding: 2px 0; }
.cap-piece { font-size: 18px; line-height: 1; }
.cap-score { margin-top: 4px; font-size: 12px; color: #333; min-height: 16px; }

/* 棋盤 */
.board { width: calc(var(--square-size) * 8); height: calc(var(--square-size) * 8); display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border: 2px solid #333; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.08); background: #0001; margin-left: auto; margin-right: auto; }
.square { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; user-select: none; }
.square.light { background: var(--light); }
.square.dark { background: var(--dark); }

/* 高亮 */
.square.highlight-move::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #0002 inset; }
.square.highlight-capture { box-shadow: inset 0 0 0 4px var(--danger); }
.square.selected { box-shadow: inset 0 0 0 4px var(--select); }

/* 棋子：使用文字符號（Unicode Chess Symbols） */
.piece { font-size: calc(var(--square-size) * 0.7); line-height: 1; cursor: pointer; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.piece.white { color: #fff; text-shadow: 0 0 2px #0008, 0 0 6px #0008; }
.piece.black { color: #111; text-shadow: 0 0 2px #fff8, 0 0 6px #fff8; }

/* Helpers 與棋盤左側對齊 */
.helpers { margin: 8px auto 0; width: calc(var(--square-size) * 8 + var(--cap-width)); padding-left: calc(var(--cap-width) + 10px); text-align: left; }

/* Overlay/Modal */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: grid; place-items: center; padding: 16px; }
.overlay[hidden] { display: none !important; }
.modal { width: min(420px, 90vw); background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.25); padding: 20px; text-align: center; }
#result-text { font-size: 20px; margin-bottom: 12px; }
.modal-actions { display: flex; justify-content: center; gap: 12px; }
.modal-actions button { padding: 8px 12px; border: 1px solid #ddd; background: #fff; border-radius: 8px; cursor: pointer; }
.modal-actions button:hover { background: #f2f2f2; }

/* 小尺寸調整 */
@media (max-width: 480px) {
	:root { --chrome: 140px; --cap-width: 56px; }
	.cap-piece { font-size: 16px; }
	h1 { font-size: 18px; margin: 6px auto; }
	.status-bar { gap: 6px; margin-bottom: 6px; }
}