.hito-stage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	width: 1248px;
}

.hito-stage.is-hidden {
	visibility: hidden;
}

.hito-panel {
	position: relative;
	isolation: isolate;
	aspect-ratio: 618 / 560;
	max-width: 100%;
	overflow: hidden;
	border-radius: 16px;
	border: 3px solid var(--outline);

	background:
		url("../img/hito/bg.png") center / cover no-repeat,
		linear-gradient(180deg, #5b438a 0%, #8a6fb6 38%, #b6a2d8 38.5%, #cbbde6 100%);
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.hito-panel.is-target {
	cursor: pointer;
}

.person {
	position: absolute;
	transform: translate(-50%, -100%);
	width: auto;
	pointer-events: none;
	-webkit-user-drag: none;
}

.hito-round {
	padding: 8px 20px;
	border-radius: 999px;
	background: var(--outline);
	font-size: 30px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.person.is-found {
	filter: drop-shadow(0 0 6px #ffcf7d) drop-shadow(0 0 2px #fff);
}

.result-hero.is-multi {
	gap: 8px;
}

.result-hero.is-multi img {
	height: 320px;
	max-width: 32%;
}