.cr-sudoku-game {
	text-align: center;
}

.cr-sudoku-game .cr-content {
	padding: 15px;
}

.cr-sudoku-levels,
.cr-sudoku-mode-tabs {
	display: flex;
	width: 472px;
	max-width: 100%;
	margin-right: auto;
	margin-left: auto;
	padding: 4px;
	gap: 4px;
	border-radius: 12px;
	background: #edf5f3;
}

.cr-sudoku-levels .nav-item,
.cr-sudoku-mode-tabs .nav-item {
	flex: 1 1 0;
}

.cr-sudoku-levels .nav-link,
.cr-sudoku-mode-tabs .nav-link {
	width: 100%;
	margin-right: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #1f2937;
}

.cr-sudoku-levels .nav-link.active,
.cr-sudoku-mode-tabs .nav-link.active {
	background: #fff;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
	color: var(--Primary-Color);
}

.cr-sudoku-levels .nav-link:not(.active):hover,
.cr-sudoku-mode-tabs .nav-link:not(.active):hover {
	background: rgba(255, 255, 255, 0.55);
	color: var(--Primary-Color);
}

.cr-sudoku-levels {
	margin-bottom: 16px;
}

.cr-sudoku-mode-tabs {
	margin-top: 16px;
	margin-bottom: 0;
}

.cr-sudoku-boards {
	overflow-x: auto;
	padding-bottom: 4px;
}

.cr-sudoku-board-wrap {
	display: none;
}

.cr-sudoku-board-wrap.active {
	display: block;
}

.cr-sudoku-board {
	display: grid;
	position: relative;
	grid-template-columns: repeat(9, 52px);
	grid-template-rows: repeat(9, 52px);
	width: fit-content;
	margin: 0 auto;
	border: 2px solid var(--Primary-Color);
	background: #fff;
}

.cr-sudoku-cell {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	border-right: 1px solid #cbd5e1;
	border-bottom: 1px solid #cbd5e1;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.cr-sudoku-cell:nth-child(3n) {
	border-right: 2px solid var(--Primary-Color);
}

.cr-sudoku-cell:nth-child(9n) {
	border-right: 0;
}

.cr-sudoku-cell:nth-child(n + 19):nth-child(-n + 27),
.cr-sudoku-cell:nth-child(n + 46):nth-child(-n + 54) {
	border-bottom: 2px solid var(--Primary-Color);
}

.cr-sudoku-cell:nth-child(n + 73):nth-child(-n + 81) {
	border-bottom: 0;
}

.cr-sudoku-cell.fixed {
	background: rgba(0, 115, 115, 0.06);
	color: var(--Primary-Color);
}

.cr-sudoku-cell.empty {
	cursor: pointer;
	color: transparent;
}

.cr-sudoku-cell.empty.revealed {
	color: var(--Primary-Color);
}

.cr-sudoku-cell.highlight,
.cr-sudoku-cell.highlight.fixed {
	background: rgba(215, 80, 5, 0.15);
}

.cr-sudoku-cell.clicked {
	background: rgba(215, 80, 5, 0.45);
}

.cr-sudoku-cell.box-highlight,
.cr-sudoku-cell.box-highlight.fixed {
	background: rgba(215, 80, 5, 0.15);
}

.cr-sudoku-cell.box-highlight.clicked {
	background: rgba(215, 80, 5, 0.45);
}

.cr-sudoku-cell.candidates-shown::after {
	content: '?';
	position: absolute;
	color: var(--Primary-Color);
	z-index: 2;
}

.cr-sudoku-candidates {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 3;
	width: max-content;
	max-width: 210px;
	padding: 9px 14px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	background: #1f2937;
	box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
	color: #f9fafb;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
	transform: translate(-50%, 8px);
}

.cr-sudoku-candidates::before {
	content: '';
	position: absolute;
	top: -7px;
	left: 50%;
	width: 0;
	height: 0;
	border-right: 7px solid transparent;
	border-bottom: 7px solid #1f2937;
	border-left: 7px solid transparent;
	transform: translateX(-50%);
}

.cr-sudoku-candidates-popover {
	--bs-popover-max-width: 210px;
	--bs-popover-bg: #1f2937;
	--bs-popover-border-color: rgba(255, 255, 255, 0.12);
	--bs-popover-border-radius: 999px;
	--bs-popover-border-width: 1px;
	--bs-popover-box-shadow: 0 10px 22px rgba(15, 23, 42, 0.22);
	--bs-popover-body-color: #f9fafb;
	--bs-popover-body-padding-x: 14px;
	--bs-popover-body-padding-y: 9px;
	--bs-popover-font-size: 13px;
}

.cr-sudoku-candidates-popover.bs-popover-bottom > .popover-arrow::before,
.cr-sudoku-candidates-popover.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::before {
	border-bottom-color: rgba(255, 255, 255, 0.12);
}

.cr-sudoku-candidates-popover.bs-popover-bottom > .popover-arrow::after,
.cr-sudoku-candidates-popover.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::after {
	border-bottom-color: #1f2937;
}

.cr-sudoku-candidates-popover .popover-body {
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	white-space: nowrap;
}

.cr-sudoku-candidates-label {
	color: #9de7df;
	font-weight: 700;
}

.cr-sudoku-controls button {
	height: 55px;
	border-radius: 10px;
}

@media (max-width: 767px) {
	.cr-sudoku-game .cr-content {
		padding: 0 !important;
	}

	.cr-sudoku-board {
		grid-template-columns: repeat(9, 36px);
		grid-template-rows: repeat(9, 36px);
	}

	.cr-sudoku-cell {
		font-size: 18px;
	}

	.cr-sudoku-candidates-popover {
		--bs-popover-max-width: 160px;
	}

	.cr-sudoku-levels,
	.cr-sudoku-mode-tabs {
		width: 328px;
	}

	.cr-sudoku-mode-tabs .nav-link {
		padding: 8px 6px;
		font-size: 12px;
	}
}