:root {
	--bg-color: #ffffff;
	--text-color: #333333;
	--text1-color: #0642f3;
	--cell-bg: #f9f9f9;
	--cell-border: #cccccc;
	--cell-highlight: #e3b282;
	--button-bg: #4a90e2;
	--button-text: #ffffff;
	--button-hover: #357abd;
	--error-color: #ff4d4f;
	--fixed-color: #2c3e50;
	--region-color-1: #f0f8ff;
	--region-color-2: #f5f5f5;
	--region-color-3: #fafafa;
	--region-color-4: #f0fff9;
	--region-color-5: #fff8f0;
	--region-color-6: #f8f8ff;
	--region-color-7: #fff0f5;
	--region-color-8: #f0f0f0;
	--region-color-9: #f5fffa;
}
[data-theme="dark"] {
	--bg-color: #1a1a1a;
	--text-color: #ffffff;
	--text1-color: #e1dc08;
	--cell-bg: #2d2d2d;
	--cell-border: #81807c;
	--cell-highlight: #e3b282;
	--button-bg: #5a9de2;
	--button-text: #ffffff;
	--button-hover: #4a8dd2;
	--error-color: #ff6b6b;
	--fixed-color: #7f8c8d;
	--region-color-1: #2a2a3a;
	--region-color-2: #2d2d2d;
	--region-color-3: #323232;
	--region-color-4: #2a3a2a;
	--region-color-5: #3a2a2a;
	--region-color-6: #2a2a3a;
	--region-color-7: #3a2a3a;
	--region-color-8: #2d2d2d;
	--region-color-9: #2a3a3a;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	transition: background-color 0.3s, color 0.3s;
}
body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	background-color: var(--bg-color);
	color: var(--text-color);
	line-height: 1.6;
	padding: 20px;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.container {
	max-width: 1440px;
	width: 95%;
	margin: 0 auto;
}
header {
	text-align: center;
	margin-bottom: 20px;
}
h1 {
	margin-bottom: 10px;
	color: var(--text-color);
}
.game-info {
	display: flex;
	#justify-content: space-between;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}
.difficulty-selector, .game-controls {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
button {
	background-color: var(--button-bg);
	color: var(--button-text);
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}
button:hover {
	background-color: var(--button-hover);
}
select {
	padding: 8px;
	border-radius: 4px;
	border: 1px solid var(--cell-border);
	background-color: var(--bg-color);
	color: var(--text-color);
	height: auto;
}
.sudoku-container {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}
.sudoku-grid {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	grid-template-rows: repeat(9, 1fr);
	gap: 1px;
	background-color: var(--cell-border);
	border: 2px solid var(--cell-border);
	max-width: 600px;
	width: 100%;
	aspect-ratio: 1 / 1;
}
.cell {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
	position: relative;
}
.cell.fixed {
	color: var(--fixed-color);
}
.cell.user-input {
	color: var(--text1-color);
}
.cell.error {
	color: var(--error-color);
}
.cell.highlighted {
	background-color: var(--cell-highlight) !important;
}
/* 为不同的3x3区域设置不同背景色 */
.cell[data-region="1"] { background-color: var(--region-color-1); }
.cell[data-region="2"] { background-color: var(--region-color-2); }
.cell[data-region="3"] { background-color: var(--region-color-3); }
.cell[data-region="4"] { background-color: var(--region-color-4); }
.cell[data-region="5"] { background-color: var(--region-color-5); }
.cell[data-region="6"] { background-color: var(--region-color-6); }
.cell[data-region="7"] { background-color: var(--region-color-7); }
.cell[data-region="8"] { background-color: var(--region-color-8); }
.cell[data-region="9"] { background-color: var(--region-color-9); }
/* 添加粗边框以区分3x3区域 */
.cell:nth-child(3n) {
	border-right: 2px solid var(--cell-border);
}
.cell:nth-child(9n) {
	border-right: none;
}
.sudoku-grid .cell:nth-child(n+19):nth-child(-n+27),
.sudoku-grid .cell:nth-child(n+46):nth-child(-n+54) {
	border-bottom: 2px solid var(--cell-border);
}
.number-pad {
	display: grid;
	#grid-template-columns: repeat(6, 1fr);
	grid-template-columns: repeat(11, 1fr);
	gap: 8px;
	#max-width: 300px;
	margin: 0 auto 20px;
}
.number-btn {
	aspect-ratio: 1 / 1;
	font-size: 32px;
	font-weight: bold;
}
.number-btn.clear {
	grid-column: span 2;
	aspect-ratio: unset;
}
.status {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	max-width: 400px;
	padding: 15px 20px;
	background-color: #2ecc71;
	border-radius: 2px;
	box-shadow: 0 1px 2px #f0f0f0;
	z-index: 100;
	margin: 0 auto 10px;
}
.completed {
	color: #0b3bcb;
	font-weight: bold;
}

@media (max-width: 600px) {
	.game-info {
		flex-direction: column;
		align-items: center;
	}
	.sudoku-grid {
		max-width: 100%;
	}
	.cell {
		font-size: 24px;
	}
	.number-pad {
		max-width: 100%;
		grid-template-columns: repeat(6, 1fr);
	}
	.number-btn {
		font-size: 24px;
	}
	.status {
		background-color: #2ecc71;
	}
}