.bf-recipe-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 18px;
	padding: 25px;
}

bf-recipe {
	background: rgba(255,255,255,.04);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: transform var(--transition), background var(--transition);
}

bf-recipe:hover {
	transform: translateY(-4px);
	background: rgba(255,255,255,.08);
}

bf-smelt {
	position: relative;
	display: grid;
	grid-template-rows: repeat(2, 34px);
	gap: 34px;
	flex-shrink: 0;
}

bf-smelt img {
	width: 34px;
	height: 34px;
	background: #373737;
	border-radius: 4px;
	box-shadow:
		inset 2px 2px 0 rgba(0,0,0,.35),
		inset -2px -2px 0 rgba(255,255,255,.12);
	object-fit: contain;
	image-rendering: pixelated;
}

bf-smelt img:not([src]) {
	box-shadow: none;
}

bf-smelt::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1px;
	height: 1px;
	color: var(--text-secondary);
	z-index: 1;
	box-shadow:
		-12.5px -15.0px 0 0 currentColor,
		-11.5px -15.0px 0 0 currentColor,
		11.5px -15.0px 0 0 currentColor,
		-12.5px -14.0px 0 0 currentColor,
		-11.5px -14.0px 0 0 currentColor,
		10.5px -14.0px 0 0 currentColor,
		11.5px -14.0px 0 0 currentColor,
		12.5px -14.0px 0 0 currentColor,
		-12.5px -13.0px 0 0 currentColor,
		-11.5px -13.0px 0 0 currentColor,
		10.5px -13.0px 0 0 currentColor,
		11.5px -13.0px 0 0 currentColor,
		12.5px -13.0px 0 0 currentColor,
		-12.5px -12.0px 0 0 currentColor,
		-11.5px -12.0px 0 0 currentColor,
		10.5px -12.0px 0 0 currentColor,
		11.5px -12.0px 0 0 currentColor,
		12.5px -12.0px 0 0 currentColor,
		-12.5px -11.0px 0 0 currentColor,
		-11.5px -11.0px 0 0 currentColor,
		10.5px -11.0px 0 0 currentColor,
		11.5px -11.0px 0 0 currentColor,
		12.5px -11.0px 0 0 currentColor,
		-10.5px -10.0px 0 0 currentColor,
		-9.5px -10.0px 0 0 currentColor,
		-0.5px -10.0px 0 0 currentColor,
		0.5px -10.0px 0 0 currentColor,
		8.5px -10.0px 0 0 currentColor,
		9.5px -10.0px 0 0 currentColor,
		-10.5px -9.0px 0 0 currentColor,
		-9.5px -9.0px 0 0 currentColor,
		-0.5px -9.0px 0 0 currentColor,
		0.5px -9.0px 0 0 currentColor,
		8.5px -9.0px 0 0 currentColor,
		9.5px -9.0px 0 0 currentColor,
		-10.5px -8.0px 0 0 currentColor,
		-9.5px -8.0px 0 0 currentColor,
		-0.5px -8.0px 0 0 currentColor,
		0.5px -8.0px 0 0 currentColor,
		8.5px -8.0px 0 0 currentColor,
		9.5px -8.0px 0 0 currentColor,
		-10.5px -7.0px 0 0 currentColor,
		-9.5px -7.0px 0 0 currentColor,
		-0.5px -7.0px 0 0 currentColor,
		0.5px -7.0px 0 0 currentColor,
		8.5px -7.0px 0 0 currentColor,
		9.5px -7.0px 0 0 currentColor,
		-10.5px -6.0px 0 0 currentColor,
		-9.5px -6.0px 0 0 currentColor,
		-0.5px -6.0px 0 0 currentColor,
		0.5px -6.0px 0 0 currentColor,
		8.5px -6.0px 0 0 currentColor,
		9.5px -6.0px 0 0 currentColor,
		10.5px -6.0px 0 0 currentColor,
		-12.5px -5.0px 0 0 currentColor,
		-11.5px -5.0px 0 0 currentColor,
		-10.5px -5.0px 0 0 currentColor,
		-9.5px -5.0px 0 0 currentColor,
		1.5px -5.0px 0 0 currentColor,
		2.5px -5.0px 0 0 currentColor,
		8.5px -5.0px 0 0 currentColor,
		9.5px -5.0px 0 0 currentColor,
		10.5px -5.0px 0 0 currentColor,
		11.5px -5.0px 0 0 currentColor,
		12.5px -5.0px 0 0 currentColor,
		-12.5px -4.0px 0 0 currentColor,
		-11.5px -4.0px 0 0 currentColor,
		-10.5px -4.0px 0 0 currentColor,
		-9.5px -4.0px 0 0 currentColor,
		1.5px -4.0px 0 0 currentColor,
		2.5px -4.0px 0 0 currentColor,
		8.5px -4.0px 0 0 currentColor,
		9.5px -4.0px 0 0 currentColor,
		10.5px -4.0px 0 0 currentColor,
		11.5px -4.0px 0 0 currentColor,
		12.5px -4.0px 0 0 currentColor,
		-12.5px -3.0px 0 0 currentColor,
		-11.5px -3.0px 0 0 currentColor,
		-10.5px -3.0px 0 0 currentColor,
		-9.5px -3.0px 0 0 currentColor,
		1.5px -3.0px 0 0 currentColor,
		2.5px -3.0px 0 0 currentColor,
		8.5px -3.0px 0 0 currentColor,
		9.5px -3.0px 0 0 currentColor,
		10.5px -3.0px 0 0 currentColor,
		11.5px -3.0px 0 0 currentColor,
		12.5px -3.0px 0 0 currentColor,
		-12.5px -2.0px 0 0 currentColor,
		-11.5px -2.0px 0 0 currentColor,
		-10.5px -2.0px 0 0 currentColor,
		-9.5px -2.0px 0 0 currentColor,
		1.5px -2.0px 0 0 currentColor,
		2.5px -2.0px 0 0 currentColor,
		8.5px -2.0px 0 0 currentColor,
		9.5px -2.0px 0 0 currentColor,
		10.5px -2.0px 0 0 currentColor,
		11.5px -2.0px 0 0 currentColor,
		12.5px -2.0px 0 0 currentColor,
		-13.5px -1.0px 0 0 currentColor,
		-12.5px -1.0px 0 0 currentColor,
		-11.5px -1.0px 0 0 currentColor,
		-10.5px -1.0px 0 0 currentColor,
		-9.5px -1.0px 0 0 currentColor,
		0.5px -1.0px 0 0 currentColor,
		1.5px -1.0px 0 0 currentColor,
		2.5px -1.0px 0 0 currentColor,
		8.5px -1.0px 0 0 currentColor,
		9.5px -1.0px 0 0 currentColor,
		10.5px -1.0px 0 0 currentColor,
		11.5px -1.0px 0 0 currentColor,
		12.5px -1.0px 0 0 currentColor,
		-15.5px 0.0px 0 0 currentColor,
		-14.5px 0.0px 0 0 currentColor,
		-13.5px 0.0px 0 0 currentColor,
		-12.5px 0.0px 0 0 currentColor,
		-11.5px 0.0px 0 0 currentColor,
		-10.5px 0.0px 0 0 currentColor,
		-9.5px 0.0px 0 0 currentColor,
		-0.5px 0.0px 0 0 currentColor,
		0.5px 0.0px 0 0 currentColor,
		1.5px 0.0px 0 0 currentColor,
		2.5px 0.0px 0 0 currentColor,
		8.5px 0.0px 0 0 currentColor,
		9.5px 0.0px 0 0 currentColor,
		10.5px 0.0px 0 0 currentColor,
		11.5px 0.0px 0 0 currentColor,
		12.5px 0.0px 0 0 currentColor,
		13.5px 0.0px 0 0 currentColor,
		14.5px 0.0px 0 0 currentColor,
		-15.5px 1.0px 0 0 currentColor,
		-14.5px 1.0px 0 0 currentColor,
		-13.5px 1.0px 0 0 currentColor,
		-12.5px 1.0px 0 0 currentColor,
		-11.5px 1.0px 0 0 currentColor,
		-10.5px 1.0px 0 0 currentColor,
		-9.5px 1.0px 0 0 currentColor,
		-0.5px 1.0px 0 0 currentColor,
		0.5px 1.0px 0 0 currentColor,
		1.5px 1.0px 0 0 currentColor,
		2.5px 1.0px 0 0 currentColor,
		8.5px 1.0px 0 0 currentColor,
		9.5px 1.0px 0 0 currentColor,
		10.5px 1.0px 0 0 currentColor,
		11.5px 1.0px 0 0 currentColor,
		12.5px 1.0px 0 0 currentColor,
		13.5px 1.0px 0 0 currentColor,
		14.5px 1.0px 0 0 currentColor,
		-15.5px 2.0px 0 0 currentColor,
		-14.5px 2.0px 0 0 currentColor,
		-13.5px 2.0px 0 0 currentColor,
		-12.5px 2.0px 0 0 currentColor,
		-11.5px 2.0px 0 0 currentColor,
		-0.5px 2.0px 0 0 currentColor,
		0.5px 2.0px 0 0 currentColor,
		1.5px 2.0px 0 0 currentColor,
		2.5px 2.0px 0 0 currentColor,
		10.5px 2.0px 0 0 currentColor,
		11.5px 2.0px 0 0 currentColor,
		12.5px 2.0px 0 0 currentColor,
		13.5px 2.0px 0 0 currentColor,
		14.5px 2.0px 0 0 currentColor,
		-15.5px 3.0px 0 0 currentColor,
		-14.5px 3.0px 0 0 currentColor,
		-13.5px 3.0px 0 0 currentColor,
		-12.5px 3.0px 0 0 currentColor,
		-11.5px 3.0px 0 0 currentColor,
		-0.5px 3.0px 0 0 currentColor,
		0.5px 3.0px 0 0 currentColor,
		1.5px 3.0px 0 0 currentColor,
		2.5px 3.0px 0 0 currentColor,
		10.5px 3.0px 0 0 currentColor,
		11.5px 3.0px 0 0 currentColor,
		12.5px 3.0px 0 0 currentColor,
		13.5px 3.0px 0 0 currentColor,
		14.5px 3.0px 0 0 currentColor,
		-15.5px 4.0px 0 0 currentColor,
		-14.5px 4.0px 0 0 currentColor,
		-13.5px 4.0px 0 0 currentColor,
		-12.5px 4.0px 0 0 currentColor,
		-11.5px 4.0px 0 0 currentColor,
		-3.5px 4.0px 0 0 currentColor,
		-2.5px 4.0px 0 0 currentColor,
		-1.5px 4.0px 0 0 currentColor,
		-0.5px 4.0px 0 0 currentColor,
		0.5px 4.0px 0 0 currentColor,
		1.5px 4.0px 0 0 currentColor,
		2.5px 4.0px 0 0 currentColor,
		10.5px 4.0px 0 0 currentColor,
		11.5px 4.0px 0 0 currentColor,
		12.5px 4.0px 0 0 currentColor,
		13.5px 4.0px 0 0 currentColor,
		14.5px 4.0px 0 0 currentColor,
		-15.5px 5.0px 0 0 currentColor,
		-14.5px 5.0px 0 0 currentColor,
		-13.5px 5.0px 0 0 currentColor,
		-12.5px 5.0px 0 0 currentColor,
		-11.5px 5.0px 0 0 currentColor,
		-3.5px 5.0px 0 0 currentColor,
		-2.5px 5.0px 0 0 currentColor,
		-1.5px 5.0px 0 0 currentColor,
		-0.5px 5.0px 0 0 currentColor,
		0.5px 5.0px 0 0 currentColor,
		1.5px 5.0px 0 0 currentColor,
		2.5px 5.0px 0 0 currentColor,
		10.5px 5.0px 0 0 currentColor,
		11.5px 5.0px 0 0 currentColor,
		12.5px 5.0px 0 0 currentColor,
		13.5px 5.0px 0 0 currentColor,
		14.5px 5.0px 0 0 currentColor,
		-15.5px 6.0px 0 0 currentColor,
		-14.5px 6.0px 0 0 currentColor,
		-13.5px 6.0px 0 0 currentColor,
		-12.5px 6.0px 0 0 currentColor,
		-11.5px 6.0px 0 0 currentColor,
		-10.5px 6.0px 0 0 currentColor,
		-3.5px 6.0px 0 0 currentColor,
		-2.5px 6.0px 0 0 currentColor,
		-1.5px 6.0px 0 0 currentColor,
		-0.5px 6.0px 0 0 currentColor,
		0.5px 6.0px 0 0 currentColor,
		1.5px 6.0px 0 0 currentColor,
		2.5px 6.0px 0 0 currentColor,
		10.5px 6.0px 0 0 currentColor,
		11.5px 6.0px 0 0 currentColor,
		12.5px 6.0px 0 0 currentColor,
		13.5px 6.0px 0 0 currentColor,
		14.5px 6.0px 0 0 currentColor,
		-15.5px 7.0px 0 0 currentColor,
		-14.5px 7.0px 0 0 currentColor,
		-13.5px 7.0px 0 0 currentColor,
		-12.5px 7.0px 0 0 currentColor,
		-11.5px 7.0px 0 0 currentColor,
		-10.5px 7.0px 0 0 currentColor,
		-9.5px 7.0px 0 0 currentColor,
		-3.5px 7.0px 0 0 currentColor,
		-2.5px 7.0px 0 0 currentColor,
		-1.5px 7.0px 0 0 currentColor,
		-0.5px 7.0px 0 0 currentColor,
		0.5px 7.0px 0 0 currentColor,
		8.5px 7.0px 0 0 currentColor,
		9.5px 7.0px 0 0 currentColor,
		10.5px 7.0px 0 0 currentColor,
		11.5px 7.0px 0 0 currentColor,
		12.5px 7.0px 0 0 currentColor,
		13.5px 7.0px 0 0 currentColor,
		14.5px 7.0px 0 0 currentColor,
		-15.5px 8.0px 0 0 currentColor,
		-14.5px 8.0px 0 0 currentColor,
		-13.5px 8.0px 0 0 currentColor,
		-12.5px 8.0px 0 0 currentColor,
		-11.5px 8.0px 0 0 currentColor,
		-10.5px 8.0px 0 0 currentColor,
		-9.5px 8.0px 0 0 currentColor,
		-3.5px 8.0px 0 0 currentColor,
		-2.5px 8.0px 0 0 currentColor,
		-1.5px 8.0px 0 0 currentColor,
		-0.5px 8.0px 0 0 currentColor,
		0.5px 8.0px 0 0 currentColor,
		8.5px 8.0px 0 0 currentColor,
		9.5px 8.0px 0 0 currentColor,
		10.5px 8.0px 0 0 currentColor,
		11.5px 8.0px 0 0 currentColor,
		12.5px 8.0px 0 0 currentColor,
		13.5px 8.0px 0 0 currentColor,
		14.5px 8.0px 0 0 currentColor,
		-12.5px 9.0px 0 0 currentColor,
		-11.5px 9.0px 0 0 currentColor,
		-10.5px 9.0px 0 0 currentColor,
		-9.5px 9.0px 0 0 currentColor,
		-3.5px 9.0px 0 0 currentColor,
		-2.5px 9.0px 0 0 currentColor,
		-1.5px 9.0px 0 0 currentColor,
		-0.5px 9.0px 0 0 currentColor,
		0.5px 9.0px 0 0 currentColor,
		8.5px 9.0px 0 0 currentColor,
		9.5px 9.0px 0 0 currentColor,
		10.5px 9.0px 0 0 currentColor,
		11.5px 9.0px 0 0 currentColor,
		12.5px 9.0px 0 0 currentColor,
		-12.5px 10.0px 0 0 currentColor,
		-11.5px 10.0px 0 0 currentColor,
		-10.5px 10.0px 0 0 currentColor,
		-9.5px 10.0px 0 0 currentColor,
		-3.5px 10.0px 0 0 currentColor,
		-2.5px 10.0px 0 0 currentColor,
		-1.5px 10.0px 0 0 currentColor,
		-0.5px 10.0px 0 0 currentColor,
		0.5px 10.0px 0 0 currentColor,
		8.5px 10.0px 0 0 currentColor,
		9.5px 10.0px 0 0 currentColor,
		10.5px 10.0px 0 0 currentColor,
		11.5px 10.0px 0 0 currentColor,
		12.5px 10.0px 0 0 currentColor,
		-12.5px 11.0px 0 0 currentColor,
		-11.5px 11.0px 0 0 currentColor,
		-10.5px 11.0px 0 0 currentColor,
		-9.5px 11.0px 0 0 currentColor,
		-3.5px 11.0px 0 0 currentColor,
		-2.5px 11.0px 0 0 currentColor,
		-1.5px 11.0px 0 0 currentColor,
		-0.5px 11.0px 0 0 currentColor,
		0.5px 11.0px 0 0 currentColor,
		1.5px 11.0px 0 0 currentColor,
		2.5px 11.0px 0 0 currentColor,
		8.5px 11.0px 0 0 currentColor,
		9.5px 11.0px 0 0 currentColor,
		10.5px 11.0px 0 0 currentColor,
		11.5px 11.0px 0 0 currentColor,
		12.5px 11.0px 0 0 currentColor,
		-12.5px 12.0px 0 0 currentColor,
		-11.5px 12.0px 0 0 currentColor,
		-10.5px 12.0px 0 0 currentColor,
		-9.5px 12.0px 0 0 currentColor,
		-3.5px 12.0px 0 0 currentColor,
		-2.5px 12.0px 0 0 currentColor,
		-1.5px 12.0px 0 0 currentColor,
		-0.5px 12.0px 0 0 currentColor,
		0.5px 12.0px 0 0 currentColor,
		1.5px 12.0px 0 0 currentColor,
		2.5px 12.0px 0 0 currentColor,
		8.5px 12.0px 0 0 currentColor,
		9.5px 12.0px 0 0 currentColor,
		10.5px 12.0px 0 0 currentColor,
		11.5px 12.0px 0 0 currentColor,
		12.5px 12.0px 0 0 currentColor,
		-13.5px 13.0px 0 0 currentColor,
		-12.5px 13.0px 0 0 currentColor,
		-11.5px 13.0px 0 0 currentColor,
		-10.5px 13.0px 0 0 currentColor,
		-9.5px 13.0px 0 0 currentColor,
		-3.5px 13.0px 0 0 currentColor,
		-2.5px 13.0px 0 0 currentColor,
		-1.5px 13.0px 0 0 currentColor,
		-0.5px 13.0px 0 0 currentColor,
		0.5px 13.0px 0 0 currentColor,
		1.5px 13.0px 0 0 currentColor,
		2.5px 13.0px 0 0 currentColor,
		8.5px 13.0px 0 0 currentColor,
		9.5px 13.0px 0 0 currentColor,
		10.5px 13.0px 0 0 currentColor,
		11.5px 13.0px 0 0 currentColor,
		12.5px 13.0px 0 0 currentColor,
		-15.5px 14.0px 0 0 currentColor,
		-14.5px 14.0px 0 0 currentColor,
		-13.5px 14.0px 0 0 currentColor,
		-12.5px 14.0px 0 0 currentColor,
		-11.5px 14.0px 0 0 currentColor,
		-10.5px 14.0px 0 0 currentColor,
		-9.5px 14.0px 0 0 currentColor,
		-3.5px 14.0px 0 0 currentColor,
		-2.5px 14.0px 0 0 currentColor,
		-1.5px 14.0px 0 0 currentColor,
		-0.5px 14.0px 0 0 currentColor,
		0.5px 14.0px 0 0 currentColor,
		1.5px 14.0px 0 0 currentColor,
		2.5px 14.0px 0 0 currentColor,
		8.5px 14.0px 0 0 currentColor,
		9.5px 14.0px 0 0 currentColor,
		10.5px 14.0px 0 0 currentColor,
		11.5px 14.0px 0 0 currentColor,
		12.5px 14.0px 0 0 currentColor,
		13.5px 14.0px 0 0 currentColor,
		14.5px 14.0px 0 0 currentColor;
}

bf-smelt::after {
	content: "\25B6";
	position: absolute;
	left: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-secondary);
	font-size: 1.3rem;
}

bf-result {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: 44px;
	background: #373737;
	border-radius: 4px;
	box-shadow:
		inset 2px 2px 0 rgba(0,0,0,.35),
		inset -2px -2px 0 rgba(255,255,255,.12);
	flex-shrink: 0;
}

bf-result img {
	width: 30px;
	height: 30px;
	object-fit: contain;
	image-rendering: pixelated;
}

bf-result[count]::after {
	content: "x" attr(count);
	position: absolute;
	bottom: -4px;
	right: -6px;
	background: rgba(0,0,0,.75);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,.2);
}

@media (max-width: 700px) {
	.bf-recipe-list {
		grid-template-columns: 1fr;
	}
}

.bf-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 25px;
}

.bf-toolbar-buttons {
	display: flex;
	gap: 10px;
}

.bf-toolbar-buttons button {
	padding: 10px 16px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: rgba(255,255,255,.05);
	color: var(--text-secondary);
	cursor: pointer;
	font-size: .85rem;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.bf-toolbar-buttons button:hover {
	background: rgba(255,255,255,.09);
	color: var(--text);
	border-color: rgba(27,217,106,.4);
}

.bf-count {
	margin-left: 10px;
	font-size: .75rem;
	font-weight: 600;
	color: var(--text-secondary);
	background: rgba(255,255,255,.08);
	border-radius: 999px;
	padding: 3px 10px;
	vertical-align: middle;
}