@layer cm {
	.cm-boss {
		pointer-events: none;
		position: relative;
		z-index: 20;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		-webkit-user-select: none;
		user-select: none;
	}

	@media (min-width: 768px) {
		.cm-boss {
			--cm-boss-w: 410px;
			--cm-head-x: calc(var(--cm-boss-w) * 0.4922);
			--cm-head-top: calc(var(--cm-boss-w) * 0.8835);
			--cm-bubble-w: min(440px, calc(var(--cm-boss-w) * 0.98));
			--cm-bubble-x: max(1.25rem, calc(var(--cm-head-x) - var(--cm-bubble-w) / 2));
		}
	}

	@media (min-width: 1024px) {
		.cm-boss {
			--cm-boss-w: min(470px, calc(var(--cm-screen-h) * 0.76 * 0.7647));
		}
	}

	@media (min-width: 1280px) {
		.cm-boss {
			--cm-boss-w: min(520px, calc(var(--cm-screen-h) * 0.76 * 0.7647));
		}
	}

	.cm-boss__body {
		position: relative;
		display: flex;
		height: 270px;
		max-height: 70vh;
		width: 220px;
		align-items: flex-end;
		justify-content: center;
	}

	@media (min-width: 640px) {
		.cm-boss__body {
			height: 340px;
			width: 280px;
		}
	}

	@media (min-width: 768px) {
		.cm-boss__body {
			height: 550px;
			max-height: 76vh;
			width: 410px;
		}
	}

	@media (min-width: 1024px) {
		.cm-boss__body {
			height: calc(var(--cm-boss-w) * 1.3077);
			max-height: none;
			width: var(--cm-boss-w);
		}
	}

	.cm-boss__shadow {
		position: absolute;
		bottom: .25rem;
		z-index: calc(10 * -1);
		height: 2.25rem;
		width: 80%;
		border-radius: 9999px;
		background-color: #00000080;
		filter: blur(16px);
	}

	.cm-boss__bubble-wrap {
		pointer-events: none;
		position: absolute;
		top: -24px;
		right: 72%;
		z-index: 40;
		width: 165px;
		filter: drop-shadow(0 8px 22px #00000052);
		transition-property: all;
		transition-duration: .3s;
		transition-timing-function: cubic-bezier(0, 0, .2, 1);
		-webkit-user-select: none;
		user-select: none;
	}

	@media (min-width: 640px) {
		.cm-boss__bubble-wrap {
			top: -22px;
			right: 76%;
			width: 210px;
		}
	}

	@media (min-width: 768px) {
		.cm-boss__bubble-wrap {
			top: auto;
			right: auto;
			bottom: calc(var(--cm-head-top) + 32px);
			display: flex;
			justify-content: center;
			left: var(--cm-bubble-x);
			width: var(--cm-bubble-w);
			transform-origin: calc(var(--cm-head-x) - var(--cm-bubble-x)) 100%;
		}
	}

	.cm-boss__bubble-wrap--visible {
		translate: 0 0px;
		scale: 100%;
		opacity: 1;
	}

	.cm-boss__bubble-wrap--hidden {
		pointer-events: none;
		translate: 0 -0.5rem;
		scale: 95%;
		opacity: 0;
	}

	.cm-boss__bubble {
		position: relative;
		display: flex;
		align-items: center;
		border-radius: 1rem;
		background-color: #fff;
		padding-inline: 0.875rem;
		padding-block: 0.625rem;
		color: #131f29;
		box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
	}

	@media (min-width: 640px) {
		.cm-boss__bubble {
			border-radius: 20px;
			padding-inline: 1rem;
			padding-block: 0.75rem;
		}
	}

	@media (min-width: 768px) {
		.cm-boss__bubble {
			padding-inline: 1.25rem;
			padding-block: 0.875rem;
		}
	}

	@media (min-width: 1024px) {
		.cm-boss__bubble {
			padding-inline: 1.5rem;
		}
	}

	.cm-boss__tail-desktop {
		pointer-events: none;
		position: absolute;
		bottom: -0.625rem;
		display: none;
		height: 0.875rem;
		width: 1rem;
		translate: calc(calc(1 / 2 * 100%) * -1);
		fill: #fff;
	}

	@media (min-width: 768px) {
		.cm-boss__tail-desktop {
			left: calc(50% + var(--cm-head-x) - var(--cm-bubble-x) - var(--cm-bubble-w) / 2);
			display: block;
		}
	}

	.cm-boss__quote-desktop {
		display: none;
		text-align: left;
	}

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

	.cm-boss__quote-text {
		font-family: FactorA,sans-serif;
		font-size: 13.5px;
		line-height: 135%;
		font-weight: 400;
		overflow-wrap: break-word;
		white-space: normal;
		color: #14261c;
	}

	@media (min-width: 640px) {
		.cm-boss__quote-text {
			font-size: 14px;
		}
	}

	@media (min-width: 1024px) {
		.cm-boss__quote-text {
			font-size: clamp(14px, calc(var(--cm-boss-w) * 0.031), 15.5px);
		}
	}

	.cm-boss__quote-mobile {
		display: flex;
		flex-direction: column;
		text-align: left;
	}

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

	.cm-boss__quote-text-mobile {
		overflow-wrap: break-word;
		white-space: normal;
		font-family: FactorA,sans-serif;
		font-weight: 400;
	}

	.cm-boss__figure {
		position: relative;
		display: flex;
		height: 100%;
		width: 100%;
		align-items: flex-end;
		justify-content: center;
	}

	.cm-boss__figure .cm-toks {
		filter: drop-shadow(0 16px 32px #0009);
	}

	.cm-boss__avatar {
		display: none;
	}

	.cm-boss__name {
		display: none;
	}

	@media (max-width: 767px) {
		.cm-boss {
			--cm-boss-tone: #54a2ff;
			--cm-boss-glow: #3b82f666;
			position: relative;
			display: block;
			width: 100%;
			padding-top: 1.25rem;
		}

		.cm-boss:has(.cm-boss__bubble--wrong) {
			--cm-boss-tone: #ff5c5e;
			--cm-boss-glow: #ff4d4f66;
		}

		.cm-boss:has(.cm-boss__bubble--won) {
			--cm-boss-tone: #3ddc84;
			--cm-boss-glow: #22c55e66;
		}

		.cm-boss__body {
			display: contents;
		}

		.cm-boss__shadow {
			display: none;
		}

		.cm-boss__avatar {
			position: absolute;
			top: 0;
			left: -0.25rem;
			z-index: 3;
			display: block;
			height: 4.25rem;
			width: 4.25rem;
			overflow: hidden;
			border-radius: 9999px;
			border: 2px solid var(--cm-boss-tone);
			background-image: linear-gradient(to bottom in oklab, #3a3754, #232138, #141324);
			box-shadow: 0 6px 16px #0009;
			transition: border-color .3s ease;
		}

		.cm-boss__bubble-wrap {
			position: relative;
			z-index: 1;
			top: auto;
			right: auto;
			width: 100%;
			min-width: 0;
			max-width: none;
		}

		.cm-boss__bubble {
			border: 2px solid var(--cm-boss-tone);
			border-radius: 18px;
			background-color: #1b1928;
			padding: 0.875rem 0.875rem 0.875rem 4.5rem;
			min-height: 4.5rem;
			color: #fff;
			box-shadow: inset 0 0 0 1px #ffffff1a, 0 2px 10px var(--cm-boss-glow), 0 8px 20px #00000080;
			transition: border-color .3s ease, box-shadow .3s ease;
		}

		.cm-boss__name {
			position: absolute;
			top: -0.75rem;
			right: 0.875rem;
			display: block;
			border-radius: 6px;
			background-color: var(--cm-boss-tone);
			padding: 0.125rem 0.625rem;
			font-family: FactorA,sans-serif;
			font-size: 12px;
			font-weight: 800;
			line-height: 1.3;
			letter-spacing: .04em;
			color: #10121a;
			transition: background-color .3s ease;
		}

		.cm-boss__tail-desktop {
			display: none;
		}

		.cm-boss__quote-mobile {
			width: 100%;
		}

		.cm-boss__quote-text-mobile {
			font-size: 14px;
			line-height: 135%;
			color: #fff;
			animation: .3s ease-out both boss-quote-in;
		}

		.cm-boss__hl {
			font-weight: 400;
			color: #ff6b6d;
		}

		.cm-boss__bubble--won .cm-boss__hl {
			color: #3ddc84;
		}

		.cm-boss__figure {
			display: none;
		}
	}

	@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
		.cm-boss__quote-text-mobile {
			animation: none;
		}
	}
}