.sudoku-board { max-width: 540px; }
.sudoku-table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.sudoku-table td { border: 1px solid #ccc; width: 11.11%; }
.sudoku-table tr:nth-child(3) td, .sudoku-table tr:nth-child(6) td { border-bottom: 2px solid #333; }
.sudoku-table td:nth-child(3), .sudoku-table td:nth-child(6) { border-right: 2px solid #333; }
.sudoku-cell { height: 48px; font-size: 18px; }
.sudoku-cell.clue { background: #e9ecef; font-weight: 600; }
.sudoku-cell.is-invalid { background: #f8d7da; }

.cell-wrapper { position: relative; }
.notes { position: absolute; inset: 4px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); font-size: 10px; color: #333; pointer-events: none; }
.note { display:flex; align-items:center; justify-content:center; opacity:0.9; }
.clue + .notes .note { color:#555; }
.sudoku-table td.selected { outline: 2px solid #0d6efd; }

/* Keypad styling */
#keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: linear-gradient(180deg,#ffffff,#f1f5fb);
	border: 1px solid #d0d7e6;
	box-shadow: 0 3px 6px rgba(14,30,60,0.08);
	font-weight: 600;
	color: #0d6efd;
	cursor: pointer;
	transition: transform .08s ease, box-shadow .12s ease;
}
.keypad-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(14,30,60,0.12); }
.keypad-btn:active { transform: translateY(0); box-shadow: 0 3px 6px rgba(14,30,60,0.08); }

/* Control buttons appearance */
.control-btn {
	margin-right: 8px;
	padding: 8px 12px;
	border-radius: 10px;
	font-weight: 600;
	box-shadow: 0 4px 10px rgba(14,30,60,0.06);
	transition: transform .08s ease, box-shadow .12s ease;
}
.control-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(14,30,60,0.12); }
.control-btn:active { transform: translateY(0); }

/* Small responsive tweaks */
@media (max-width: 576px) {
	.keypad-btn { width: 44px; height: 44px; border-radius: 10px; }
	.sudoku-cell { height: 40px; font-size: 16px; }
}