@layer cm {
	.cm-game {
		position: relative;
		display: flex;
		min-height: var(--cm-screen-h);
		width: 100%;
		flex-direction: column;
		background-color: #131f29;
		-webkit-user-select: none;
		user-select: none;
	}

	@media (min-width: 768px) {
		.cm-game {
			height: var(--cm-screen-h);
			min-height: 600px;
			flex-direction: row;
			overflow: hidden;
		}
	}

	.cm-game__stage {
		pointer-events: none;
		position: relative;
		z-index: 20;
		order: 1;
		display: flex;
		min-height: 460px;
		width: 100%;
		flex-direction: column;
		justify-content: flex-start;
		overflow: hidden;
		padding: 0.75rem;
		padding-right: 0.75rem;
		padding-bottom: 2.25rem;
	}

	@media (min-width: 640px) {
		.cm-game__stage {
			min-height: 490px;
			padding: 1.25rem;
			padding-right: 1.25rem;
			padding-bottom: 2.5rem;
		}
	}

	@media (min-width: 768px) {
		.cm-game__stage {
			order: 1;
			height: 100%;
			min-height: 0;
			flex: 1;
			justify-content: space-between;
			padding: 1.5rem;
			padding-right: 3.5rem;
			padding-bottom: 1.75rem;
		}
	}

	.cm-game__hud {
		pointer-events: auto;
		z-index: 30;
		order: 1;
		margin-top: 0;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		padding-inline: 0.5rem;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}

	@media (min-width: 640px) {
		.cm-game__hud {
			padding-inline: 1rem;
			padding-top: 0.75rem;
			padding-bottom: 0.75rem;
		}
	}

	@media (min-width: 768px) {
		.cm-game__hud {
			order: 2;
			margin-top: 0;
			justify-content: flex-start;
			padding-inline: 0;
			padding-top: 0;
			padding-bottom: 1rem;
			padding-left: 0.5rem;
		}
	}

	.cm-game__hud-inner {
		width: 100%;
		max-width: 36rem;
	}

	.cm-game__topbar {
		display: none;
	}

	@media (max-width: 767px) {
		.cm-game__hud .cm-game__hud-inner {
			display: none;
		}

		.cm-game__topbar {
			display: flex;
		}
	}

	.cm-topbar {
		width: 100%;
		max-width: 36rem;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem;
		-webkit-user-select: none;
		user-select: none;
	}

	.cm-topbar__hearts,
	.cm-topbar__score {
		display: flex;
		height: 2.25rem;
		min-width: 5.25rem;
		flex-shrink: 0;
		align-items: center;
		gap: 0.25rem;
		border: 2px solid #3d3957;
		border-radius: 12px;
		background-color: #1b1928e6;
		padding-inline: 0.5rem;
		box-shadow: 0 4px 12px #0006;
	}

	.cm-topbar__score {
		justify-content: center;
		gap: 0.375rem;
	}

	.cm-topbar__heart {
		height: 1.25rem;
		width: 1.25rem;
		fill: oklch(63.7% .237 25.331);
		color: oklch(63.7% .237 25.331);
		filter: drop-shadow(0 0 6px #ef4444a6);
		transition: scale .3s ease, opacity .3s ease;
	}

	.cm-topbar__heart--lost {
		scale: 90%;
		fill: transparent;
		color: #ffffff4d;
		filter: none;
	}

	.cm-topbar__round {
		display: flex;
		min-width: 0;
		flex-direction: column;
		align-items: center;
		gap: 0.25rem;
		text-align: center;
	}

	.cm-topbar__logo {
		height: 18px;
		max-width: 6rem;
		object-fit: contain;
		filter: drop-shadow(0 2px 6px #0009);
	}

	.cm-topbar__label {
		font-family: FactorA,sans-serif;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.2;
		color: #fff;
		text-wrap: balance;
		text-shadow: 0 1px 6px #000c;
	}

	.cm-topbar__star {
		height: 1.25rem;
		width: 1.25rem;
		fill: #ffc83d;
		color: #ffc83d;
	}

	.cm-topbar__score-value {
		font-family: FactorA,sans-serif;
		font-size: 15px;
		font-weight: 700;
		color: #fff;
	}

	@media (min-width: 768px) {
		.cm-game__hud-inner {
			width: auto;
			max-width: none;
		}
	}

	.cm-game__arena {
		pointer-events: auto;
		order: 2;
		margin-block: auto;
		display: flex;
		width: 100%;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding-top: 0.5rem;
		padding-bottom: 1rem;
	}

	@media (min-width: 640px) {
		.cm-game__arena {
			gap: 0.75rem;
			padding-top: 0.75rem;
			padding-bottom: 1.5rem;
		}
	}

	@media (min-width: 768px) {
		.cm-game__arena {
			order: 1;
			margin-block: 0;
			flex-direction: row;
			align-items: flex-end;
			justify-content: flex-start;
			gap: 0;
			padding-top: 0;
			padding-bottom: 0.5rem;
		}
	}

	.cm-game__monster {
		pointer-events: auto;
		display: none;
		flex-shrink: 0;
		flex-direction: column;
		justify-content: flex-end;
	}

	@media (min-width: 768px) {
		.cm-game__monster {
			order: 1;
			display: flex;
			width: auto;
			translate: -1.5rem;
			align-items: center;
		}
	}

	@media (min-width: 1024px) {
		@media (min-width: 768px) {
			.cm-game__monster {
				translate: -2rem;
			}
		}
	}

	.cm-game__myth {
		pointer-events: auto;
		margin-block: auto;
		display: flex;
		width: 100%;
		transform: none;
		align-items: center;
		justify-content: center;
	}

	@media (min-width: 768px) {
		.cm-game__myth {
			order: 2;
			margin-bottom: 2.5rem;
			flex: 1;
			translate: -2rem;
			transform: none;
		}
	}

	@media (min-width: 1024px) {
		.cm-game__myth {
			translate: -2.5rem;
		}
	}

	.cm-game__panel {
		position: relative;
		z-index: 30;
		order: 2;
		width: 100%;
		flex-shrink: 0;
	}

	@media (min-width: 768px) {
		.cm-game__panel {
			order: 2;
			margin-left: -3rem;
			height: 100%;
			width: 42%;
		}
	}

	@media (min-width: 1024px) {
		.cm-game__panel {
			width: 40%;
		}
	}

	@media (min-width: 1280px) {
		.cm-game__panel {
			width: 38%;
		}
	}

	.cm-building {
		pointer-events: none;
		position: absolute;
		inset: 0;
		z-index: 0;
		height: 100%;
		width: 100%;
		overflow: hidden;
		-webkit-user-select: none;
		user-select: none;
	}

	.cm-building__sky {
		position: absolute;
		inset: 0;
		background-color: #8fa9bd;
	}

	.cm-building__frame {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		overflow: hidden;
	}

	@media (min-width: 768px) {
		.cm-building__frame {
			width: 115%;
		}
	}

	.cm-building__photo-desktop {
		pointer-events: none;
		position: absolute;
		inset: 0;
		display: none;
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: 30% center;
		transition-property: opacity;
		transition-duration: 1.8s;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		-webkit-user-select: none;
		user-select: none;
	}

	@media (min-width: 768px) {
		.cm-building__photo-desktop {
			display: block;
		}
	}

	.cm-building__photo--shown {
		z-index: 10;
		opacity: 1;
	}

	.cm-building__photo--hidden {
		z-index: 0;
		opacity: 0;
	}

	.cm-building__photo-mobile {
		pointer-events: none;
		position: absolute;
		inset: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: center top;
		transition-property: opacity;
		transition-duration: 1.8s;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		-webkit-user-select: none;
		user-select: none;
	}

	@media (min-width: 768px) {
		.cm-building__photo-mobile {
			display: none;
		}
	}

	@media (max-width: 767px) {
		.cm-building {
			container-type: size;
		}

		.cm-building__photo-mobile {
			--cm-bg-w: max(calc(100cqw * var(--cm-bg-scale)), calc(100cqh / var(--cm-bg-ratio) * var(--cm-bg-scale)));
			--cm-bg-h: calc(var(--cm-bg-w) * var(--cm-bg-ratio));
			inset: auto;
			top: clamp(calc(100cqh - var(--cm-bg-h)), calc(var(--cm-screen-h) * 0.18 - var(--cm-bg-h) * var(--cm-bg-anchor)), 0px);
			left: calc((100cqw - var(--cm-bg-w)) / 2);
			width: var(--cm-bg-w);
			height: var(--cm-bg-h);
			max-width: none;
			object-fit: cover;
		}
	}

	.cm-building__edge {
		pointer-events: none;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		display: none;
		width: 8rem;
		background-image: linear-gradient(to right in oklab, transparent, oklab(23.3003% -.0111565 -.0232448/.3));
	}

	@media (min-width: 768px) {
		.cm-building__edge {
			display: block;
		}
	}

	@media (max-width: 767px) {
		.cm-game {
			height: var(--cm-screen-h);
			min-height: 0;
			overflow: hidden;
		}

		.cm-game__stage {
			flex: 1 0 auto;
			min-height: 0;
			padding-inline: 1rem;
			padding-top: calc(0.5rem + env(safe-area-inset-top));
			padding-bottom: 2.125rem;
		}

		.cm-game__hud {
			flex-shrink: 0;
			padding-inline: 0;
			padding-top: 0.25rem;
			padding-bottom: 0.25rem;
		}

		.cm-game__arena {
			position: relative;
			min-height: 0;
			margin-block: 0;
			justify-content: flex-start;
			gap: 0.375rem;
			padding-top: max(0.25rem, calc(var(--cm-screen-h) * 0.23));
			padding-bottom: 0.75rem;
		}

		.cm-game__monster {
			position: relative;
			z-index: 30;
			display: flex;
			width: 100%;
			max-width: 36rem;
			flex-direction: row;
			align-items: flex-start;
			justify-content: flex-start;
		}

		.cm-game__myth {
			display: none;
		}

		.cm-game__panel {
			display: flex;
			min-height: 0;
			flex-shrink: 1;
			flex-direction: column;
			margin-top: -1.75rem;
		}
	}

	@media (max-width: 767px) and (max-height: 699px) {
		.cm-game__stage {
			padding-bottom: 1.5rem;
		}

		.cm-game__arena {
			gap: 0.25rem;
		}

		.cm-game__panel {
			margin-top: -1.25rem;
		}
	}

	@media (min-width: 640px) and (max-width: 767px) {
		.cm-game__panel {
			margin-top: -2rem;
		}
	}
}