.game.mono-game {
	padding: 0;
	background: none;
}

.mono-game .hud {
	position: absolute;
	top: 16px;
	left: 32px;
	right: 32px;
	z-index: 3;
	width: auto;
}

.mono-scene {
	position: absolute;
	inset: 0;
	isolation: isolate;
	overflow: hidden;
	container-type: inline-size;
	cursor: pointer;

	background:
		url("../img/mono/bg.png") center / cover no-repeat,
		radial-gradient(circle at 50% 6%, #ffd99a 0 7%, transparent 7.5%),
		linear-gradient(180deg, #3f2d63 0%, #6a5494 60%, #8a74b0 60.5%, #9c88c0 100%);
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.mono-scene.is-hidden {
	visibility: hidden;
}

.mono-placeholders {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mono-placeholder {
	position: absolute;
	display: grid;
	place-items: center;
	font-size: 3.4cqw;
	line-height: 1;
}

.mono-list {
	position: absolute;
	left: 50%;
	bottom: 5.5%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 1.4cqw;
	margin: 0;
	padding: .7cqw 2.1cqw;
	list-style: none;
	border-radius: 999px;
	background: rgba(106, 84, 148, .92);
	border: .3cqw solid #fff;
	cursor: default;
}

.mono-list li {
	position: relative;
	display: grid;
	place-items: center;
	width: 4.4cqw;
	height: 4.4cqw;
}

.mono-list img {
	max-width: 100%;
	max-height: 100%;
}

.mono-list .mono-emoji {
	font-size: 3.2cqw;
	line-height: 1;
}

.mono-list li.is-found::after {
	content: "";
	position: absolute;
	right: -.4cqw;
	bottom: -.15cqw;
	width: 2.1cqw;
	height: 2.1cqw;
	background: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 13l5 5L20 6' fill='none' stroke='%23ffe27a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mono-hit {
	position: absolute;
	z-index: 1;
	aspect-ratio: 1;
	translate: -50% -50%;
	border: .35cqw solid #ffe27a;
	border-radius: 50%;
	pointer-events: none;
	animation: mono-hit .6s ease-out forwards;
}

@keyframes mono-hit {
	from { opacity: 1; transform: scale(.8); }
	to { opacity: 0; transform: scale(1.2); }
}

.mono-hint {
	position: absolute;
	top: 22px;
	left: 32px;
	z-index: 3;
	margin: 0;
	padding: 4px 20px;
	border-radius: 999px;
	background: rgba(30, 20, 50, .55);
	font-size: 24px;
	color: var(--lavender-pale);
	pointer-events: none;
}

.mono-found {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 12px;
	width: 440px;
}

.mono-found > * {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 1;
}

.mono-found img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	filter: none;
}

.mono-found .mono-emoji {
	font-size: 96px;
}

@media (prefers-reduced-motion: reduce) {
	.mono-hit {
		animation: none;
		opacity: 0;
	}
}