@layer cm {
	.cm-hp {
		position: relative;
		display: flex;
		width: 100%;
		align-items: center;
		-webkit-user-select: none;
		user-select: none;
	}

	@media (min-width: 768px) {
		.cm-hp {
			width: auto;
		}
	}

	.cm-hp__badge {
		position: relative;
		z-index: 20;
		display: flex;
		height: 3.25rem;
		width: 3.25rem;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		filter: drop-shadow(0 6px 14px #0009);
	}

	@media (min-width: 640px) {
		.cm-hp__badge {
			height: 3.75rem;
			width: 3.75rem;
		}
	}

	@media (min-width: 768px) {
		.cm-hp__badge {
			height: 4rem;
			width: 4rem;
		}
	}

	.cm-hp__ring {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 9999px;
		border-style: solid;
		border-width: 2px;
		border-color: #544f77;
		background-image: linear-gradient(to bottom in oklab, #3a3754, #232138, #141324);
		box-shadow: inset 0 2px 4px 0 #0000000d;
	}

	.cm-hp__core {
		position: relative;
		display: flex;
		height: 84%;
		width: 84%;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		border-radius: 9999px;
		border-style: solid;
		border-width: 1px;
		border-color: #ffffff1a;
		background-color: #12111d;
	}

	.cm-player-hp__heart {
		height: 1.75rem;
		width: 1.75rem;
		transition-property: transform,translate,scale,rotate;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		transition-duration: .3s;
	}

	@media (min-width: 640px) {
		.cm-player-hp__heart {
			height: 2rem;
			width: 2rem;
		}
	}

	.cm-player-hp__heart--alive {
		scale: 100%;
		fill: oklch(63.7% .237 25.331);
		color: oklch(63.7% .237 25.331);
		filter: drop-shadow(0 0 10px #ef4444bf);
	}

	.cm-player-hp__heart--lost {
		scale: 90%;
		fill: #46080933;
		color: #46080966;
		opacity: .4;
	}

	.cm-player-hp__glare {
		pointer-events: none;
		position: absolute;
		top: .25rem;
		left: 0.5rem;
		height: 0.5rem;
		width: 1rem;
		rotate: -25deg;
		border-radius: 9999px;
		background-color: #ffffff4d;
	}

	.cm-hp__bar {
		position: relative;
		z-index: 10;
		margin-left: -0.75rem;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: stretch;
	}

	@media (min-width: 640px) {
		.cm-hp__bar {
			margin-left: -0.875rem;
		}
	}

	@media (min-width: 768px) {
		.cm-hp__bar {
			flex: 0 auto;
			align-items: center;
		}
	}

	.cm-hp__track {
		display: flex;
		width: 100%;
		align-items: center;
		gap: 0.375rem;
		border-top-left-radius: .375rem;
		border-bottom-left-radius: .375rem;
		border-top-right-radius: .75rem;
		border-bottom-right-radius: .75rem;
		border-style: solid;
		border-width: 2px;
		border-color: #3d3957;
		background-color: #1b1928;
		padding-inline: 0.5rem;
		padding-block: 0.375rem;
		padding-left: 1rem;
		box-shadow: 0 8px 20px #00000080;
	}

	@media (min-width: 640px) {
		.cm-hp__track {
			gap: 0.5rem;
			padding-inline: 0.625rem;
			padding-block: 0.5rem;
			padding-left: 1.125rem;
		}
	}

	@media (min-width: 768px) {
		.cm-hp__track {
			width: auto;
		}
	}

	.cm-player-hp__cell {
		position: relative;
		height: 1.125rem;
		flex: 1;
		overflow: hidden;
		border-radius: 5px;
		transition-property: all;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		transition-duration: .4s;
	}

	@media (min-width: 640px) {
		.cm-player-hp__cell {
			height: 1.375rem;
			border-radius: 6px;
		}
	}

	@media (min-width: 768px) {
		.cm-player-hp__cell {
			height: 1.5rem;
			width: 2.25rem;
			flex: 0 auto;
		}
	}

	.cm-hp__cell--full {
		scale: 100%;
		border-style: solid;
		border-width: 1px;
		border-color: oklab(88.2343% -.0156043 -.0548818/.5);
		background-image: linear-gradient(to bottom in oklab, #93c5fd, #3b82f6, #1e3a8a);
		box-shadow: 0 2px 8px #3b82f666;
	}

	.cm-hp__cell--empty {
		scale: 95%;
		border-style: solid;
		border-width: 1px;
		border-color: #ffffff1a;
		background-color: #0e0d18;
		opacity: .25;
		box-shadow: inset 0 2px 4px 0 #0000000d;
	}

	.cm-hp__cell-shine {
		pointer-events: none;
		position: absolute;
		inset-inline: .25rem;
		top: 1.5px;
		height: 4px;
		border-radius: 9999px;
		background-color: #fff9;
	}

	.cm-hp__cell-shade {
		pointer-events: none;
		position: absolute;
		inset-inline: .25rem;
		bottom: 1px;
		height: 2px;
		border-radius: 9999px;
		background-color: #0000004d;
	}

	.cm-boss-hp__ring {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 9999px;
		border-style: solid;
		border-width: 2px;
		background-image: linear-gradient(to bottom in oklab, #3a3754, #232138, #141324);
		box-shadow: inset 0 2px 4px 0 #0000000d;
		transition-property: all;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		transition-duration: .3s;
	}

	.cm-boss-hp__ring--idle {
		border-color: #544f77;
	}

	.cm-boss-hp__ring--hit {
		border-color: #54a2ffe6;
	}

	.cm-boss-hp__icon {
		height: 2rem;
		width: 2rem;
		transition-property: transform,translate,scale,rotate;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		transition-duration: .3s;
	}

	@media (min-width: 640px) {
		.cm-boss-hp__icon {
			height: 2.25rem;
			width: 2.25rem;
		}
	}

	@media (min-width: 768px) {
		.cm-boss-hp__icon {
			height: 2.5rem;
			width: 2.5rem;
		}
	}

	.cm-boss-hp__icon--broken {
		scale: 90%;
		rotate: 6deg;
		opacity: .35;
	}

	.cm-boss-hp__icon--whole {
		scale: 100%;
	}

	.cm-boss-hp__cell {
		position: relative;
		height: 1.125rem;
		flex: 1;
		overflow: hidden;
		border-radius: 5px;
		transition-property: all;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
		transition-duration: .4s;
	}

	@media (min-width: 640px) {
		.cm-boss-hp__cell {
			height: 1.375rem;
			border-radius: 6px;
		}
	}

	@media (min-width: 768px) {
		.cm-boss-hp__cell {
			height: 1.5rem;
			width: 2rem;
			flex: 0 auto;
		}
	}
}