.sp-wrap {
	max-width: 360px;
	margin: 0 auto;
}

.sp-meta {
	display: flex;
	justify-content: space-between;
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	margin-bottom: 12px;
	color: #333;
}

.sp-board {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	background: #4a6fa5;
	padding: 10px;
	border-radius: 14px;
}

.sp-tile {
	aspect-ratio: 1;
	border: 0;
	border-radius: 10px;
	background: #e8f1ff;
	color: #1b3a5f;
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: clamp(20px, 6vw, 28px);
	cursor: pointer;
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}

.sp-tile.empty {
	background: transparent;
	box-shadow: none;
	cursor: default;
}

.sp-tile:not(.empty):active {
	transform: scale(0.96);
}

.sp-win {
	text-align: center;
	margin-top: 14px;
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	color: #1b3a5f;
	font-size: 18px;
}