@layer cm {
	.cm-myth-face__frame {
		pointer-events: none;
		position: absolute;
		inset: 6px;
		border-radius: 14px;
		border-style: solid;
		border-width: 1px;
		border-color: #f99c0040;
	}

	@media (min-width: 640px) {
		.cm-myth-face__frame {
			inset: 8px;
			border-radius: 16px;
		}
	}

	.cm-card__corner {
		position: relative;
		z-index: 10;
		display: flex;
		width: 1.5rem;
		flex-shrink: 0;
		flex-direction: column;
		align-items: center;
		align-self: flex-start;
		line-height: 1;
	}

	.cm-myth-face__letter {
		font-family: FactorA,sans-serif;
		font-size: 15px;
		font-weight: 900;
		color: oklch(63.7% .237 25.331);
		filter: drop-shadow(0 1px 2px #00000026);
	}

	@media (min-width: 640px) {
		.cm-myth-face__letter {
			font-size: 18px;
		}
	}

	.cm-myth-face__suit {
		margin-top: 1px;
		font-size: 11px;
		color: #fb2c36e6;
	}

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

	.cm-card__center {
		position: relative;
		z-index: 10;
		margin-block: auto;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-inline: 0.375rem;
		text-align: center;
	}

	@media (min-width: 640px) {
		.cm-card__center {
			padding-inline: 0.75rem;
		}
	}

	.cm-myth-face__text {
		font-family: FactorA,sans-serif;
		font-weight: 500;
		color: #fff;
		filter: drop-shadow(0 2px 4px #000000b3);
		font-size: 11.5px;
		line-height: 1.32;
	}

	@media (min-width: 480px) {
		.cm-myth-face__text {
			font-size: 13px;
			line-height: 1.34;
		}
	}

	@media (min-width: 768px) {
		.cm-myth-face__text {
			font-size: 16px;
			line-height: 1.36;
		}
	}

	.cm-card__corner-flip {
		position: relative;
		z-index: 10;
		display: flex;
		width: 1.5rem;
		flex-shrink: 0;
		rotate: 180deg;
		flex-direction: column;
		align-items: center;
		align-self: flex-end;
		line-height: 1;
	}

	.cm-myth-half {
		position: relative;
		display: flex;
		height: 100%;
		width: 100%;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		border-radius: 18px;
		border-style: solid;
		border-width: 2px;
		border-color: #dd740099;
		background-color: #121620;
		background-image: linear-gradient(to bottom right in oklab, #1e1a26, #151c26, #0c1117);
		padding: 0.625rem;
		opacity: 1;
	}

	@media (min-width: 640px) {
		.cm-myth-half {
			border-radius: 22px;
			padding: 0.875rem;
		}
	}

	@media (min-width: 768px) {
		.cm-myth-half {
			padding: 1.125rem;
		}
	}

	.cm-card__gloss {
		pointer-events: none;
		position: absolute;
		inset-inline: -3rem;
		top: -4rem;
		height: 9rem;
		rotate: 12deg;
		background-image: linear-gradient(to bottom in oklab, #ffffffb3, transparent);
	}

	.cm-cap-face__frame {
		pointer-events: none;
		position: absolute;
		inset: 6px;
		border-radius: 14px;
		border-style: solid;
		border-width: 1px;
		border-color: #90a1b94d;
	}

	@media (min-width: 640px) {
		.cm-cap-face__frame {
			inset: 8px;
			border-radius: 16px;
		}
	}

	.cm-cap-face__letter {
		font-family: FactorA,sans-serif;
		font-size: 15px;
		font-weight: 900;
		color: oklch(37.2% .044 257.287);
		filter: drop-shadow(0 1px 2px #00000026);
	}

	@media (min-width: 640px) {
		.cm-cap-face__letter {
			font-size: 18px;
		}
	}

	.cm-cap-face__suit {
		margin-top: 1px;
		font-size: 11px;
		color: oklch(55.4% .046 257.417);
	}

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

	.cm-cap-face__tag {
		margin-bottom: 0.375rem;
		flex-shrink: 0;
		font-family: FactorA,sans-serif;
		font-size: 9px;
		font-weight: 800;
		letter-spacing: .22em;
		color: oklch(55.4% .046 257.417);
		text-transform: uppercase;
	}

	@media (min-width: 640px) {
		.cm-cap-face__tag {
			margin-bottom: 0.5rem;
			font-size: 11px;
		}
	}

	.cm-cap-face__text {
		font-family: FactorA,sans-serif;
		font-weight: 500;
		color: #14261c;
		font-size: 11.5px;
		line-height: 1.32;
	}

	@media (min-width: 480px) {
		.cm-cap-face__text {
			font-size: 13px;
			line-height: 1.34;
		}
	}

	@media (min-width: 768px) {
		.cm-cap-face__text {
			font-size: 16px;
			line-height: 1.36;
		}
	}

	.cm-cap-half {
		position: relative;
		display: flex;
		height: 100%;
		width: 100%;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		border-radius: 18px;
		border-style: solid;
		border-width: 2px;
		border-color: oklch(86.9% .022 252.894);
		background-image: linear-gradient(to bottom right in oklab, #fff, #f7f9fc, #e8edf4);
		padding: 0.625rem;
		box-shadow: 0 16px 36px #0000008c, 0 4px 10px #0000004d;
	}

	@media (min-width: 640px) {
		.cm-cap-half {
			border-radius: 22px;
			padding: 0.875rem;
		}
	}

	@media (min-width: 768px) {
		.cm-cap-half {
			padding: 1.125rem;
		}
	}

	.cm-arena {
		pointer-events: none;
		position: relative;
		z-index: 25;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		-webkit-user-select: none;
		user-select: none;
	}

	.cm-arena__slot {
		position: relative;
		display: flex;
		height: 316px;
		width: 216px;
		align-items: center;
		justify-content: center;
	}

	@media (min-width: 640px) {
		.cm-arena__slot {
			height: 330px;
			width: 230px;
		}
	}

	@media (min-width: 768px) {
		.cm-arena__slot {
			--cm-slot-h: 360px;
			height: var(--cm-slot-h);
			width: calc(var(--cm-slot-h) * 0.6923);
		}
	}

	@media (min-width: 1024px) {
		.cm-arena__slot {
			--cm-slot-h: clamp(330px, calc(var(--cm-screen-h) * 0.47), 400px);
		}
	}

	.cm-myth-card {
		position: absolute;
		inset: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		border-radius: 18px;
		border-style: solid;
		border-width: 2px;
		border-color: #dd740099;
		background-color: #121620;
		background-image: linear-gradient(to bottom right in oklab, #1e1a26, #151c26, #0c1117);
		padding: 0.625rem;
		opacity: 1;
		box-shadow: 0 16px 36px #000000bf, 0 4px 12px #00000080;
		transition-property: all;
		transition-duration: .7s;
		transition-timing-function: cubic-bezier(0, 0, .2, 1);
	}

	@media (min-width: 640px) {
		.cm-myth-card {
			border-radius: 22px;
			padding: 0.875rem;
		}
	}

	@media (min-width: 768px) {
		.cm-myth-card {
			padding: 1.125rem;
		}
	}

	.cm-myth-card--covered {
		will-change: transform;
		animation: 1.2s ease-out forwards myth-cover-quick;
		z-index: 30;
	}

	.cm-myth-card--beaten {
		z-index: 10;
		translate: -1.5rem;
		scale: .98;
		rotate: -30deg;
		transform: none;
		opacity: 1;
	}

	@media (min-width: 640px) {
		.cm-myth-card--beaten {
			translate: -2rem;
		}
	}

	.cm-myth-card--idle {
		will-change: transform;
		z-index: 10;
		rotate: -1deg;
		transform: none;
		opacity: 1;
	}

	.cm-myth-card.cm-myth-card--covered {
		z-index: 30;
	}

	.cm-myth-card__gloss {
		pointer-events: none;
		position: absolute;
		inset-inline: -3rem;
		top: -4rem;
		height: 9rem;
		rotate: 12deg;
		background-image: linear-gradient(to bottom in oklab, #ffffff1a, transparent);
	}

	.cm-myth-torn {
		pointer-events: none;
		position: absolute;
		inset: 0;
		z-index: 30;
		rotate: -1deg;
		transform: none;
	}

	.cm-myth-torn__left {
		will-change: transform, opacity;
		animation: 1.1s cubic-bezier(.22,1,.36,1) forwards myth-inplace-tear-left;
		position: absolute;
		inset: 0;
		overflow: hidden;
		border-radius: 18px;
		filter: drop-shadow(0 16px 36px #000000a6);
	}

	@media (min-width: 640px) {
		.cm-myth-torn__left {
			border-radius: 22px;
		}
	}

	.cm-myth-torn__right {
		will-change: transform, opacity;
		animation: 1.1s cubic-bezier(.22,1,.36,1) forwards myth-inplace-tear-right;
		position: absolute;
		inset: 0;
		overflow: hidden;
		border-radius: 18px;
		filter: drop-shadow(0 16px 36px #000000a6);
	}

	@media (min-width: 640px) {
		.cm-myth-torn__right {
			border-radius: 22px;
		}
	}

	.cm-fact-card {
		will-change: transform, opacity, box-shadow;
		animation: 1.3s cubic-bezier(.16,1,.3,1) forwards fact-flying-land-on-myth;
		position: absolute;
		inset: 0;
		z-index: 20;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		border-radius: 18px;
		border-style: solid;
		border-width: 2px;
		border-color: #00bb7fe6;
		background-image: linear-gradient(to bottom right in oklab, #fff, #f7fbf9, #edf7f1);
		padding: 0.625rem;
	}

	@media (min-width: 640px) {
		.cm-fact-card {
			border-radius: 22px;
			padding: 0.875rem;
		}
	}

	@media (min-width: 768px) {
		.cm-fact-card {
			padding: 1.125rem;
		}
	}

	.cm-fact-card__frame {
		pointer-events: none;
		position: absolute;
		inset: 6px;
		border-radius: 14px;
		border-style: solid;
		border-width: 1px;
		border-color: #0097674d;
	}

	@media (min-width: 640px) {
		.cm-fact-card__frame {
			inset: 8px;
			border-radius: 16px;
		}
	}

	.cm-fact-card__letter {
		font-family: FactorA,sans-serif;
		font-size: 15px;
		font-weight: 900;
		color: oklch(50.8% .118 165.612);
		filter: drop-shadow(0 1px 2px #00000026);
	}

	@media (min-width: 640px) {
		.cm-fact-card__letter {
			font-size: 18px;
		}
	}

	.cm-fact-card__suit {
		margin-top: 1px;
		font-size: 11px;
		color: oklch(59.6% .145 163.225);
	}

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

	.cm-fact-card__center {
		position: relative;
		z-index: 10;
		margin-block: auto;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-inline: 0.375rem;
		text-align: center;
	}

	@media (min-width: 640px) {
		.cm-fact-card__center {
			padding-inline: 0.5rem;
		}
	}

	@media (min-width: 768px) {
		.cm-fact-card__center {
			padding-inline: 0.625rem;
		}
	}

	.cm-fact-card__tag {
		margin-bottom: .25rem;
		flex-shrink: 0;
		font-family: FactorA,sans-serif;
		font-size: 9px;
		font-weight: 800;
		letter-spacing: .22em;
		color: #007956d9;
		text-transform: uppercase;
	}

	@media (min-width: 640px) {
		.cm-fact-card__tag {
			margin-bottom: 0.375rem;
			font-size: 11px;
		}
	}

	.cm-fact-card__text {
		font-family: FactorA,sans-serif;
		font-weight: 500;
		color: #14261c;
	}

	.cm-card-text {
		font-size: 11.5px;
		line-height: 1.32;
	}

	@media (min-width: 480px) {
		.cm-card-text {
			font-size: 13px;
			line-height: 1.34;
		}
	}

	@media (min-width: 768px) {
		.cm-card-text {
			font-size: 16px;
			line-height: 1.36;
		}
	}

	.cm-cap-card {
		will-change: transform, opacity;
		animation: 1.2s cubic-bezier(.16,1,.3,1) forwards capitulation-card-enter;
		pointer-events: none;
		position: absolute;
		inset: 0;
		z-index: 40;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
		border-radius: 18px;
		border-style: solid;
		border-width: 2px;
		border-color: oklch(86.9% .022 252.894);
		background-image: linear-gradient(to bottom right in oklab, #fff, #f7f9fc, #e8edf4);
		padding: 0.625rem;
		box-shadow: 0 16px 36px #0000008c, 0 4px 10px #0000004d;
	}

	@media (min-width: 640px) {
		.cm-cap-card {
			border-radius: 22px;
			padding: 0.875rem;
		}
	}

	@media (min-width: 768px) {
		.cm-cap-card {
			padding: 1.125rem;
		}
	}

	.cm-cap-torn {
		pointer-events: none;
		position: absolute;
		inset: 0;
		z-index: 20;
	}

	.cm-cap-torn__left {
		will-change: transform, opacity;
		animation: .7s cubic-bezier(.25,1,.4,1) forwards quick-tear-left;
		position: absolute;
		inset: 0;
	}

	.cm-cap-torn__right {
		will-change: transform, opacity;
		animation: .7s cubic-bezier(.25,1,.4,1) forwards quick-tear-right;
		position: absolute;
		inset: 0;
	}
}