/* The generated plate is used during entrance; the source image takes over when settled. */
.elementor-2829 .elementor-element-5d3221c {
	display: none !important;
}

.col-battle-cta {
	position: relative;
	width: 100%;
	margin: 0;
	overflow: hidden;
	background: #090a11;
	isolation: isolate;
}

.col-battle-cta__stage {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: #10111b;
}

.col-battle-cta__art {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 2172 / 724;
	overflow: hidden;
	background: #10111b;
}

.col-battle-cta__background,
.col-battle-cta__final-frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.col-battle-cta__background {
	z-index: 0;
}

.col-battle-cta__final-frame {
	z-index: 2;
	opacity: 1;
	transition: opacity 850ms ease;
}

.col-battle-cta__troop-pieces {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	max-height: 100%;
	aspect-ratio: 2172 / 724;
	z-index: 1;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.col-battle-cta__piece {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 260ms linear, transform 1650ms cubic-bezier(.16,.76,.22,1);
	transform: translate(var(--enter-x, 0), var(--enter-y, 0)) scale(.97);
}

.col-battle-cta__piece img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.col-battle-cta__energy {
	position: absolute;
	inset: 0;
	z-index: 3;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transition: opacity 600ms ease;
}

.col-battle-cta__energy::before,
.col-battle-cta__energy::after {
	position: absolute;
	left: 50%;
	bottom: -30%;
	width: min(56vw, 780px);
	 aspect-ratio: 1;
	content: "";
	border: 1px solid rgb(202 132 255 / 68%);
	border-radius: 50%;
	box-shadow: 0 0 24px rgb(177 71 255 / 42%), inset 0 0 25px rgb(177 71 255 / 22%);
	transform: translate(-50%, 50%) scale(.45);
}

.col-battle-cta__energy::before {
	background: repeating-conic-gradient(from 8deg, rgb(216 165 255 / 0%) 0 9deg, rgb(216 165 255 / 56%) 9.3deg 9.7deg, rgb(216 165 255 / 0%) 10deg 24deg);
	mask: radial-gradient(circle, transparent 57%, #000 58% 59%, transparent 60%);
}

.col-battle-cta__energy::after {
	width: min(42vw, 600px);
	border-color: rgb(255 189 103 / 76%);
	box-shadow: 0 0 20px rgb(255 149 70 / 42%), inset 0 0 20px rgb(255 149 70 / 20%);
}

.col-battle-cta__energy span {
	position: absolute;
	left: 50%;
	bottom: 3%;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #f5d9ff;
	box-shadow: 0 0 15px 5px rgb(202 132 255 / 85%);
	opacity: 0;
}

.col-battle-cta__energy span:nth-child(1) { left: 19%; bottom: 24%; }
.col-battle-cta__energy span:nth-child(2) { left: 77%; bottom: 17%; background: #ffe5a7; box-shadow: 0 0 15px 5px rgb(255 177 83 / 85%); }
.col-battle-cta__energy span:nth-child(3) { left: 46%; bottom: 37%; }

.col-battle-cta__action-effects {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	max-height: 100%;
	aspect-ratio: 2172 / 724;
	z-index: 4;
	transform: translate(-50%, -50%);
	overflow: visible;
	pointer-events: none;
}

.col-battle-cta__fx {
	position: absolute;
	display: block;
	opacity: 0;
	pointer-events: none;
}

.col-battle-cta__fx--pistol {
	top: 31%;
	left: 15.8%;
	width: 2.4%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, #fff8cf 0 12%, #fff0a1 22%, #ff9b35 50%, rgb(255 88 28 / 0%) 74%);
	filter: blur(1px);
}

.col-battle-cta__fx--dragon-fire {
	top: 20%;
	left: 41%;
	width: 12%;
	height: 5%;
	border-radius: 50%;
	background: linear-gradient(90deg, rgb(255 52 18 / 0%) 0%, rgb(255 79 24 / 45%) 18%, #ff9b37 56%, #fff0b4 78%, rgb(255 255 229 / 0%) 100%);
	filter: blur(3px) drop-shadow(0 0 9px rgb(255 97 24 / 72%));
	transform: rotate(-34deg) scaleX(.15);
	transform-origin: 100% 50%;
}

.col-battle-cta__fx--staff {
	top: 1%;
	left: 22.6%;
	width: 2.2%;
	aspect-ratio: 1;
	border: 1px solid rgb(233 190 255 / 88%);
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 7%, #e0a7ff 18%, rgb(168 56 255 / 62%) 47%, rgb(168 56 255 / 0%) 74%);
	box-shadow: 0 0 12px 5px rgb(187 91 255 / 65%);
}

.col-battle-cta__fx--mage-spark {
	top: 8%;
	left: 28.7%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #f2dcff;
	box-shadow: 0 0 9px 4px rgb(185 105 255 / 85%), 12px 14px 0 -2px rgb(226 187 255 / 80%), -9px 20px 0 -2px rgb(171 94 255 / 78%);
}

.col-battle-cta__fx--sword {
	top: 29%;
	width: 5.2%;
	height: 3px;
	border-radius: 50%;
	background: linear-gradient(90deg, rgb(255 255 255 / 0%), #fff 42%, #ffe8a6 58%, rgb(255 226 151 / 0%));
	filter: drop-shadow(0 0 4px rgb(255 238 185 / 90%));
	transform: rotate(var(--fx-angle)) scaleX(.05);
}

.col-battle-cta__fx--sword-left { left: 15.5%; --fx-angle: -72deg; }
.col-battle-cta__fx--sword-center { left: 39%; top: 31%; --fx-angle: 63deg; }
.col-battle-cta__fx--sword-right { left: 91%; top: 28%; --fx-angle: -64deg; }

.col-battle-cta__fx--sand {
	width: 4.5%;
	height: 2.6%;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgb(255 211 154 / 54%) 0, rgb(218 161 116 / 24%) 43%, rgb(180 125 94 / 0%) 75%);
	filter: blur(2px);
}

.col-battle-cta__fx--sand-left { top: 84%; left: 32%; }
.col-battle-cta__fx--sand-center { top: 88%; left: 57%; width: 5.5%; }
.col-battle-cta__fx--sand-right { top: 82%; left: 78%; width: 3.8%; }

html.col-battle-cta-js .col-battle-cta.is-active .col-battle-cta__piece {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	transition-delay: var(--arrival-delay, 0ms);
}

html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--pistol {
	animation: col-battle-muzzle-flash 620ms ease-out 80ms 1 both;
}

html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--dragon-fire {
	animation: col-battle-dragon-breath 900ms ease-out 260ms 1 both;
}

html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--staff {
	animation: col-battle-magic-pulse 1.5s ease-out 140ms 1 both;
}

html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--mage-spark {
	animation: col-battle-magic-rise 1.25s ease-out 260ms 1 both;
}

html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--sword {
	animation: col-battle-sword-glint 820ms ease-out 1 both;
}

html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--sword-left { animation-delay: 180ms; }
html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--sword-center { animation-delay: 430ms; }
html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--sword-right { animation-delay: 660ms; }

html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--sand {
	animation: col-battle-sand-drift 1.25s ease-out 1 both;
}

html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--sand-left { animation-delay: 130ms; }
html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--sand-center { animation-delay: 390ms; }
html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__fx--sand-right { animation-delay: 600ms; }

.col-battle-cta__play {
	position: absolute;
	left: 50%;
	bottom: clamp(18px, 3.5vw, 50px);
	z-index: 5;
	display: inline-flex;
	min-width: 228px;
	min-height: 64px;
	align-items: center;
	justify-content: center;
	gap: 13px;
	padding: 13px 25px;
	border: 1px solid rgb(255 236 196 / 92%);
	border-radius: 999px;
	background: linear-gradient(115deg, #6126c4 0%, #a52ee7 48%, #f09342 100%);
	background-size: 220% 220%;
	box-shadow: 0 0 16px rgb(173 65 255 / 78%), 0 0 44px rgb(145 61 255 / 48%), inset 0 1px 0 rgb(255 255 255 / 52%);
	color: #fff;
	font-size: clamp(16px, 1.05vw, 20px);
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
	transition: opacity 450ms ease, transform 550ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease, filter 300ms ease;
	animation: col-battle-button-gradient 4.6s ease-in-out infinite;
}

.col-battle-cta__play::before,
.col-battle-cta__play::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: "";
	border: 1px solid rgb(215 161 255 / 78%);
	border-radius: 50%;
	pointer-events: none;
}

.col-battle-cta__play::before {
	width: 110px;
	height: 110px;
	margin: -55px;
	background: repeating-conic-gradient(from 8deg, rgb(216 165 255 / 0%) 0 13deg, rgb(216 165 255 / 52%) 13.3deg 13.8deg, rgb(216 165 255 / 0%) 14deg 28deg);
	mask: radial-gradient(circle, transparent 59%, #000 60% 61%, transparent 62%);
	box-shadow: 0 0 18px rgb(183 94 255 / 68%), inset 0 0 13px rgb(203 135 255 / 24%);
	transition: transform 420ms ease, box-shadow 420ms ease, border-color 420ms ease;
}

.col-battle-cta__play::after {
	width: 148px;
	height: 148px;
	margin: -74px;
	border-color: rgb(255 201 117 / 66%);
	box-shadow: 0 0 20px rgb(255 156 74 / 42%);
	transition: transform 480ms ease, box-shadow 480ms ease, border-color 480ms ease;
}

.col-battle-cta__play:hover {
	box-shadow: 0 0 28px rgb(230 165 255 / 98%), 0 0 78px rgb(145 61 255 / 76%), 0 0 118px rgb(255 141 63 / 36%), inset 0 1px 0 rgb(255 255 255 / 76%);
	color: #fff;
	filter: brightness(1.12) saturate(1.18);
	transform: translate(-50%, -5px) scale(1.075);
}

html.col-battle-cta-js .col-battle-cta.is-ready .col-battle-cta__play:hover {
	transform: translate(-50%, -5px) scale(1.075);
}

.col-battle-cta__play:hover::before {
	transform: scale(1.18);
	border-color: rgb(241 209 255 / 96%);
	box-shadow: 0 0 34px rgb(210 117 255 / 94%), inset 0 0 22px rgb(203 135 255 / 48%);
}

.col-battle-cta__play:hover::after {
	transform: scale(1.15);
	border-color: rgb(255 218 158 / 92%);
	box-shadow: 0 0 34px rgb(255 156 74 / 68%);
}

.col-battle-cta__play:active,
html.col-battle-cta-js .col-battle-cta.is-ready .col-battle-cta__play:active {
	filter: brightness(1.18) saturate(1.2);
	transform: translate(-50%, -1px) scale(1.015);
}

.col-battle-cta__play:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 9px;
}

.col-battle-cta__play-icon {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	filter: drop-shadow(0 0 5px rgb(255 255 255 / 45%));
	transition: transform 320ms ease, filter 320ms ease;
}

.col-battle-cta__play:hover .col-battle-cta__play-icon {
	filter: drop-shadow(0 0 10px rgb(255 255 255 / 88%));
	transform: scale(1.15) rotate(-8deg);
}

.col-battle-cta__play-arrow {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}

.col-battle-cta__play:hover .col-battle-cta__play-arrow {
	transform: translateX(5px);
}

html.col-battle-cta-js .col-battle-cta__final-frame {
	opacity: 0;
}

html.col-battle-cta-js .col-battle-cta__piece {
	opacity: 0;
}

html.col-battle-cta-js .col-battle-cta__play {
	opacity: 0;
	transform: translate(-50%, 22px) scale(.82);
	visibility: hidden;
}

html.col-battle-cta-js .col-battle-cta__energy::before,
html.col-battle-cta-js .col-battle-cta__energy::after {
	animation: col-battle-ring-spin 14s linear infinite;
}

html.col-battle-cta-js .col-battle-cta.is-active .col-battle-cta__piece {
	opacity: 1;
}

html.col-battle-cta-js .col-battle-cta.is-active .col-battle-cta__energy {
	opacity: .82;
}

html.col-battle-cta-js .col-battle-cta.is-active .col-battle-cta__energy::before,
html.col-battle-cta-js .col-battle-cta.is-active .col-battle-cta__energy::after {
	animation-name: col-battle-ring-pulse, col-battle-ring-spin;
	animation-duration: 1.8s, 14s;
	animation-timing-function: ease-out, linear;
	animation-iteration-count: 1, infinite;
	animation-fill-mode: forwards, none;
}

html.col-battle-cta-js .col-battle-cta.is-active .col-battle-cta__energy span {
	animation: col-battle-spark-rise 1.5s ease-out both;
}

html.col-battle-cta-js .col-battle-cta.is-active .col-battle-cta__energy span:nth-child(2) { animation-delay: 280ms; }
html.col-battle-cta-js .col-battle-cta.is-active .col-battle-cta__energy span:nth-child(3) { animation-delay: 520ms; }

html.col-battle-cta-js .col-battle-cta.is-settled .col-battle-cta__final-frame {
	opacity: 1;
}

html.col-battle-cta-js .col-battle-cta.is-ready .col-battle-cta__play {
	opacity: 1;
	transform: translate(-50%, 0) scale(1);
	visibility: visible;
}

html.col-battle-cta-js .col-battle-cta.is-ready .col-battle-cta__play::before {
	animation: col-battle-orbit 8s linear infinite;
}

html.col-battle-cta-js .col-battle-cta.is-ready .col-battle-cta__play::after {
	animation: col-battle-orbit 12s linear infinite reverse;
}

@keyframes col-battle-ring-pulse {
	0% { opacity: 0; transform: translate(-50%, 50%) scale(.12); }
	48% { opacity: 1; }
	100% { opacity: .25; transform: translate(-50%, 50%) scale(1); }
}

@keyframes col-battle-ring-spin {
	to { rotate: 360deg; }
}

@keyframes col-battle-orbit {
	to { rotate: 360deg; }
}

@keyframes col-battle-button-gradient {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes col-battle-muzzle-flash {
	0% { opacity: 0; transform: scale(.25); }
	22% { opacity: 1; transform: scale(1.25); }
	100% { opacity: 0; transform: scale(1.9); }
}

@keyframes col-battle-dragon-breath {
	0% { opacity: 0; transform: rotate(-34deg) scaleX(.12); }
	28% { opacity: .9; transform: rotate(-34deg) scaleX(1.08); }
	100% { opacity: 0; transform: rotate(-34deg) scaleX(.78); }
}

@keyframes col-battle-magic-pulse {
	0% { opacity: 0; transform: scale(.45); }
	34% { opacity: .95; transform: scale(1.15); }
	100% { opacity: 0; transform: scale(1.8); }
}

@keyframes col-battle-magic-rise {
	0% { opacity: 0; transform: translateY(12px) scale(.55); }
	24% { opacity: 1; }
	100% { opacity: 0; transform: translateY(-28px) scale(1.05); }
}

@keyframes col-battle-sword-glint {
	0% { opacity: 0; transform: rotate(var(--fx-angle)) scaleX(.04); }
	34% { opacity: 1; transform: rotate(var(--fx-angle)) scaleX(1.12); }
	100% { opacity: 0; transform: rotate(var(--fx-angle)) scaleX(.24); }
}

@keyframes col-battle-sand-drift {
	0% { opacity: 0; transform: translate(0, 5px) scale(.65); }
	32% { opacity: .8; }
	100% { opacity: 0; transform: translate(9px, -15px) scale(1.18); }
}

@keyframes col-battle-spark-rise {
	0% { opacity: 0; transform: translate(-50%, 18px) scale(.3); }
	20% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -80px) scale(1.15); }
}

@media (max-width: 767px) {
	.col-battle-cta__art {
		height: auto;
		aspect-ratio: 2172 / 724;
		overflow: visible;
		margin-bottom: 80px;
	}

	.col-battle-cta__background {
		filter: none;
		transform: none;
	}

	.col-battle-cta__piece img,
	.col-battle-cta__background,
	.col-battle-cta__final-frame {
		object-fit: cover;
		object-position: center;
	}

	.col-battle-cta__energy {
		bottom: 0;
	}

	.col-battle-cta__energy::before,
	.col-battle-cta__energy::after {
		bottom: -64%;
		width: min(76vw, 390px);
	}

	.col-battle-cta__energy::after {
		width: min(60vw, 310px);
	}

	.col-battle-cta__play {
		left: 50%;
		top: calc(100% + 12px);
		bottom: auto;
		min-width: 172px;
		min-height: 46px;
		gap: 8px;
		padding: 9px 16px;
		font-size: 13px;
		transform: translate(-50%, 0) scale(1);
	}

	.col-battle-cta__play::before {
		width: 82px;
		height: 82px;
		margin: -41px;
	}

	.col-battle-cta__play::after {
		width: 104px;
		height: 104px;
		margin: -52px;
	}

	.col-battle-cta__play:hover {
		transform: translate(-50%, -3px) scale(1.045);
	}

	html.col-battle-cta-js .col-battle-cta.is-ready .col-battle-cta__play:hover {
		transform: translate(-50%, -3px) scale(1.045);
	}

	.col-battle-cta__play:active,
	html.col-battle-cta-js .col-battle-cta.is-ready .col-battle-cta__play:active {
		transform: translate(-50%, -1px) scale(1.015);
	}

	html.col-battle-cta-js .col-battle-cta__play {
		transform: translate(-50%, 16px) scale(.86);
	}

	html.col-battle-cta-js .col-battle-cta.is-ready .col-battle-cta__play {
		transform: translate(-50%, 0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.col-battle-cta__piece,
	.col-battle-cta__final-frame,
	.col-battle-cta__fx,
	.col-battle-cta__energy,
	.col-battle-cta__play {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}