/* =========================================================
   棋盘样式系统 · 4 主题
   classic 经典木纹（图片，向后兼容）
   light   素雅清风
   jade    青瓷水墨
   ink     暗夜模式
   ========================================================= */

/* ---------- 棋盘容器（公共几何） ---------- */
.board_main {
	width: 400px;
	height: 400px;
	margin-top: 0;
	padding-top: 0;
	box-sizing: content-box;
}

.board-row {
	width: 400px;
	height: 25px;
	margin-left: 1px;
}

.board-row div {
	float: left;
	width: 25px;
	height: 25px;
	text-align: center;
	line-height: 25px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

/* 控制条 */
.controlbar {
	width: 400px;
	clear: both;
}
.controlbar input {
	margin-left: 3px;
	width: 51px;
	height: 27px;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	cursor: pointer;
	border-radius: 6px;
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.controlbar input:hover { transform: translateY(-1px); }
.controlbar input:active { transform: translateY(0); }

/* =========================================================
   主题一：classic 经典木纹（图片）
   ========================================================= */
.board-theme-classic.board_main,
.board_main.board-theme-classic {
	background: url("img/back.png") no-repeat center center;
}
.board-theme-classic .blank,
.board_main.board-theme-classic .blank {
	background: transparent;
}
.board-theme-classic .black,
.board_main.board-theme-classic .black {
	background: url("img/b.png") no-repeat center center;
	background-size: 100% 100%;
	color: #fff;
}
.board-theme-classic .white,
.board_main.board-theme-classic .white {
	background: url("img/w.png") no-repeat center center;
	background-size: 100% 100%;
	color: #000;
}
/* 默认控制按钮（经典主题） */
.controlbar.board-theme-classic input {
	background-color: #fff;
	border: 1px solid #888;
	color: #333;
}
.controlbar.board-theme-classic input:hover { box-shadow: 0 2px 6px rgba(0,0,0,.25); }

/* =========================================================
   主题二：light 素雅清风
   ========================================================= */
/* 纯 CSS 主题无图片边框：网格 375px，容器内缩 12px 使视觉居中（content-box 保持总宽 400） */
.board_main.board-theme-light,
.board_main.board-theme-jade,
.board_main.board-theme-ink {
	width: 388px;
	height: 388px;
	padding: 12px 0 0 12px;
}
.board_main.board-theme-light {
	background: linear-gradient(135deg, #f8f7f2 0%, #efeee8 100%);
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba(120,130,145,.18), 0 8px 24px rgba(60,70,90,.12);
}
.board-theme-light .blank {
	--line: #a8b2bd;
	background-image:
		linear-gradient(var(--line), var(--line)),
		linear-gradient(90deg, var(--line), var(--line));
	background-size: 1px 100%, 100% 1px;
	background-position: center center;
	background-repeat: no-repeat;
}
/* 星位（仅空格） */
.board-theme-light .blank.c44,
.board-theme-light .blank.c4c,
.board-theme-light .blank.cc4,
.board-theme-light .blank.ccc,
.board-theme-light .blank.c88 {
	background-image:
		radial-gradient(circle, #7e8a97 0 3px, transparent 3.6px),
		linear-gradient(var(--line), var(--line)),
		linear-gradient(90deg, var(--line), var(--line));
	background-size: 100% 100%, 1px 100%, 100% 1px;
}
.board-theme-light .black {
	background: radial-gradient(circle at 33% 28%, #6b7280 0%, #2b313a 45%, #11151b 100%);
	border-radius: 50%;
	color: #f2f4f7;
	box-shadow: 0 2px 4px rgba(20,28,40,.45);
}
.board-theme-light .white {
	background: radial-gradient(circle at 33% 28%, #ffffff 0%, #f0f1ee 55%, #d8dad6 100%);
	border-radius: 50%;
	color: #39404a;
	box-shadow: 0 2px 4px rgba(20,28,40,.3), inset 0 0 0 1px rgba(120,130,145,.35);
}
.controlbar.board-theme-light input {
	background: #fff;
	border: 1px solid #c7cdd6;
	color: #465060;
}
.controlbar.board-theme-light input:hover {
	background: #f1f4f8;
	box-shadow: 0 2px 8px rgba(80,100,130,.2);
}

/* =========================================================
   主题三：jade 青瓷水墨
   ========================================================= */
.board_main.board-theme-jade {
	background: radial-gradient(circle at 50% 38%, #e3eee6 0%, #d3e3d9 60%, #c2d6c9 100%);
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba(70,110,90,.22), 0 8px 24px rgba(50,90,70,.16);
}
.board-theme-jade .blank {
	--line: #567d6b;
	background-image:
		linear-gradient(var(--line), var(--line)),
		linear-gradient(90deg, var(--line), var(--line));
	background-size: 1px 100%, 100% 1px;
	background-position: center center;
	background-repeat: no-repeat;
}
.board-theme-jade .blank.c44,
.board-theme-jade .blank.c4c,
.board-theme-jade .blank.cc4,
.board-theme-jade .blank.ccc,
.board-theme-jade .blank.c88 {
	background-image:
		radial-gradient(circle, #31523f 0 3px, transparent 3.6px),
		linear-gradient(var(--line), var(--line)),
		linear-gradient(90deg, var(--line), var(--line));
	background-size: 100% 100%, 1px 100%, 100% 1px;
}
.board-theme-jade .black {
	background: radial-gradient(circle at 33% 28%, #4a5a4f 0%, #1d2a22 50%, #0e1712 100%);
	border-radius: 50%;
	color: #e8f1ea;
	box-shadow: 0 2px 4px rgba(20,40,28,.5);
}
.board-theme-jade .white {
	background: radial-gradient(circle at 33% 28%, #fdfdf8 0%, #f0f1e6 55%, #d9dccb 100%);
	border-radius: 50%;
	color: #2f473a;
	box-shadow: 0 2px 4px rgba(20,40,28,.32), inset 0 0 0 1px rgba(90,120,100,.3);
}
.controlbar.board-theme-jade input {
	background: #eef5ef;
	border: 1px solid #9cbca9;
	color: #2f473a;
}
.controlbar.board-theme-jade input:hover {
	background: #dfeee3;
	box-shadow: 0 2px 8px rgba(60,100,75,.25);
}

/* =========================================================
   主题四：ink 暗夜模式
   ========================================================= */
.board_main.board-theme-ink {
	background: radial-gradient(circle at 50% 35%, #161b23 0%, #0f131a 65%, #0a0d12 100%);
	border-radius: 6px;
	box-shadow: inset 0 0 0 1px rgba(120,140,170,.14), 0 8px 28px rgba(0,0,0,.5);
}
.board-theme-ink .blank {
	--line: #414c5c;
	background-image:
		linear-gradient(var(--line), var(--line)),
		linear-gradient(90deg, var(--line), var(--line));
	background-size: 1px 100%, 100% 1px;
	background-position: center center;
	background-repeat: no-repeat;
}
.board-theme-ink .blank.c44,
.board-theme-ink .blank.c4c,
.board-theme-ink .blank.cc4,
.board-theme-ink .blank.ccc,
.board-theme-ink .blank.c88 {
	background-image:
		radial-gradient(circle, #8fa3bd 0 3px, transparent 3.6px),
		linear-gradient(var(--line), var(--line)),
		linear-gradient(90deg, var(--line), var(--line));
	background-size: 100% 100%, 1px 100%, 100% 1px;
}
.board-theme-ink .black {
	background: radial-gradient(circle at 33% 28%, #4d5564 0%, #222833 50%, #10141b 100%);
	border-radius: 50%;
	color: #e8edf5;
	box-shadow: 0 2px 5px rgba(0,0,0,.6), inset 0 0 0 1px rgba(140,160,190,.18);
}
.board-theme-ink .white {
	background: radial-gradient(circle at 33% 28%, #ffffff 0%, #eceef2 55%, #cfd4dc 100%);
	border-radius: 50%;
	color: #1c2430;
	box-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.controlbar.board-theme-ink input {
	background: #1b222d;
	border: 1px solid #39445a;
	color: #c6d0de;
}
.controlbar.board-theme-ink input:hover {
	background: #25303f;
	box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

/* ---------- 小屏缩放 ---------- */
@media (max-width: 440px) {
	.board_main,
	.controlbar { zoom: 0.85; }
}