.cosmic-overlay.svelte-8rq240 {
		position: relative;
		width: 100%;
		min-height: 100dvh;
		display: flex;
		flex-direction: column;
		align-items: center;
		--anime-top: var(--anime-top-mobile, 50%);
	}

	@media (min-width: 768px) {
		.cosmic-overlay.svelte-8rq240 {
			--anime-top: var(--anime-top-desktop, 50%);
		}
	}

	.cosmic-slot1.svelte-8rq240 {
		position: relative;
		z-index: 5;
	}

	.cosmic-title.svelte-8rq240 {
		position: relative;
		z-index: 5;
		text-align: center;
		color: rgb(var(--color-primary));
		text-shadow: 0 0 30px rgba(var(--color-glow), 0.5), 0 0 60px rgba(var(--color-glow), 0.2);
	}

	.cosmic-slot2.svelte-8rq240 {
		position: relative;
		z-index: 5;
		width: 100%;
	}

	/* ===== SPINNING CIRCLES ===== */

	.circle1.svelte-8rq240,
	.circle2.svelte-8rq240,
	.circle3.svelte-8rq240 {
		position: absolute;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		background: transparent;
	}

	.circle1.svelte-8rq240 {
		width: 140px;
		height: 140px;
		top: 50%;
		left: 50%;
		border: 3px solid transparent;
		background:
			transparent padding-box,
			linear-gradient(
					90deg,
					rgba(var(--color-primary), 1) 0%,
					rgba(var(--color-secondary), 1) 25%,
					rgba(var(--color-tertiary), 1) 50%,
					rgba(var(--color-secondary), 1) 75%,
					rgba(var(--color-primary), 1) 100%
				)
				border-box;
		animation:
			svelte-8rq240-rotateClockwise var(--circle1-duration) infinite linear,
			svelte-8rq240-glowPulse calc(var(--ball-duration) / 2) ease-in-out infinite;
		box-shadow:
			0 0 20px rgba(var(--color-primary), 0.8),
			0 0 40px rgba(var(--color-secondary), 0.6),
			0 0 60px rgba(var(--color-primary), 0.4),
			inset 0 0 20px rgba(var(--color-primary), 0.3),
			inset 0 0 40px rgba(var(--color-secondary), 0.2);
		filter: brightness(1.2);
	}

	.circle2.svelte-8rq240 {
		width: 220px;
		height: 220px;
		top: 50%;
		left: 50%;
		border: 4px solid transparent;
		background:
			transparent padding-box,
			linear-gradient(
					-45deg,
					rgba(var(--color-secondary), 1) 0%,
					rgba(var(--color-primary), 1) 20%,
					rgba(var(--color-tertiary), 1) 40%,
					rgba(255, 255, 255, 0.9) 50%,
					rgba(var(--color-tertiary), 1) 60%,
					rgba(var(--color-primary), 1) 80%,
					rgba(var(--color-secondary), 1) 100%
				)
				border-box;
		animation:
			svelte-8rq240-rotateCounterClockwise var(--circle2-duration) infinite linear,
			svelte-8rq240-glowPulse calc(var(--ball-duration) / 1.5) ease-in-out infinite reverse;
		box-shadow:
			0 0 30px rgba(var(--color-primary), 1),
			0 0 60px rgba(var(--color-secondary), 0.8),
			0 0 90px rgba(var(--color-tertiary), 0.6),
			0 0 120px rgba(var(--color-primary), 0.4),
			inset 0 0 30px rgba(255, 255, 255, 0.4),
			inset 0 0 60px rgba(var(--color-primary), 0.3);
		filter: brightness(1.3);
	}

	.circle3.svelte-8rq240 {
		width: 300px;
		height: 300px;
		top: 50%;
		left: 50%;
		border: 5px solid transparent;
		background:
			transparent padding-box,
			linear-gradient(
					135deg,
					rgba(var(--color-primary), 1) 0%,
					rgba(255, 255, 255, 1) 10%,
					rgba(var(--color-secondary), 1) 30%,
					rgba(var(--color-tertiary), 1) 50%,
					rgba(var(--color-secondary), 1) 70%,
					rgba(255, 255, 255, 1) 90%,
					rgba(var(--color-primary), 1) 100%
				)
				border-box;
		animation:
			svelte-8rq240-rotateClockwiseSlow calc(var(--circle2-duration) * 1.5) infinite linear,
			svelte-8rq240-glowPulse var(--ball-duration) ease-in-out infinite;
		box-shadow:
			0 0 40px rgba(var(--color-primary), 1),
			0 0 80px rgba(var(--color-secondary), 0.9),
			0 0 120px rgba(var(--color-tertiary), 0.7),
			0 0 160px rgba(var(--color-primary), 0.5),
			0 0 200px rgba(var(--color-secondary), 0.3),
			inset 0 0 40px rgba(255, 255, 255, 0.5),
			inset 0 0 80px rgba(var(--color-primary), 0.4);
		filter: brightness(1.4);
	}

	/* Rune symbols */
	.show-runes.svelte-8rq240 .circle3:where(.svelte-8rq240)::before {
		content: '';
		position: absolute;
		inset: -10px;
		border-radius: 50%;
		background: repeating-conic-gradient(
			from 0deg,
			transparent 0deg,
			transparent 8deg,
			rgba(var(--color-primary), 0.6) 8deg,
			rgba(var(--color-primary), 0.6) 10deg,
			transparent 10deg,
			transparent 18deg
		);
		animation: svelte-8rq240-spinCounterClockwise calc(var(--circle1-duration) * 0.8) infinite linear;
		filter: blur(1px);
	}

	.show-runes.svelte-8rq240 .circle2:where(.svelte-8rq240)::before {
		content: '';
		position: absolute;
		inset: -8px;
		border-radius: 50%;
		background: repeating-conic-gradient(
			from 0deg,
			transparent 0deg,
			transparent 12deg,
			rgba(var(--color-tertiary), 0.5) 12deg,
			rgba(var(--color-tertiary), 0.5) 15deg,
			transparent 15deg,
			transparent 27deg
		);
		animation: svelte-8rq240-spinClockwise calc(var(--circle2-duration) * 0.6) infinite linear;
		filter: blur(0.5px);
	}

	@keyframes svelte-8rq240-rotateClockwise {
		0% { transform: translate(-50%, -50%) rotateZ(0deg) rotateY(60deg) rotateX(60deg); }
		100% { transform: translate(-50%, -50%) rotateZ(360deg) rotateY(60deg) rotateX(60deg); }
	}

	@keyframes svelte-8rq240-rotateCounterClockwise {
		0% { transform: translate(-50%, -50%) rotateZ(360deg) rotateY(65deg) rotateX(65deg); }
		100% { transform: translate(-50%, -50%) rotateZ(0deg) rotateY(65deg) rotateX(65deg); }
	}

	@keyframes svelte-8rq240-rotateClockwiseSlow {
		0% { transform: translate(-50%, -50%) rotateZ(0deg) rotateY(70deg) rotateX(70deg); }
		100% { transform: translate(-50%, -50%) rotateZ(360deg) rotateY(70deg) rotateX(70deg); }
	}

	@keyframes svelte-8rq240-spinClockwise {
		0% { transform: rotateZ(0deg); }
		100% { transform: rotateZ(360deg); }
	}

	@keyframes svelte-8rq240-spinCounterClockwise {
		0% { transform: rotateZ(360deg); }
		100% { transform: rotateZ(0deg); }
	}

	@keyframes svelte-8rq240-glowPulse {
		0%, 100% { filter: brightness(1.2) drop-shadow(0 0 10px rgba(var(--color-glow), 0.8)); }
		50% { filter: brightness(1.6) drop-shadow(0 0 30px rgba(var(--color-glow), 1)); }
	}

	.anime.svelte-8rq240 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 300px;
		height: 300px;
		position: relative;
		top: var(--anime-top, 0);
		z-index: 4;
		flex-shrink: 0;
	}

	.ball.svelte-8rq240 {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		box-shadow:
			0 0 13px #fff,
			-13px 0 53px rgba(var(--color-tertiary), 1),
			13px 0 53px rgba(var(--color-primary), 1),
			inset 0 0 33px #fff,
			inset 33px 0 53px rgba(var(--color-tertiary), 1),
			inset -33px 0 53px rgba(var(--color-primary), 1),
			inset 33px 0 200px rgba(var(--color-tertiary), 1),
			inset -33px 0 200px rgba(var(--color-primary), 1);
		animation: svelte-8rq240-pulsate var(--ball-duration) linear infinite;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	@keyframes svelte-8rq240-pulsate {
		50% {
			box-shadow:
				0 0 13px #fff,
				13px 0 53px rgba(var(--color-secondary), 1),
				-13px 0 53px rgba(var(--color-primary), 1),
				inset 0 0 33px #fff,
				inset -33px 0 53px rgba(var(--color-secondary), 1),
				inset 33px 0 53px rgba(var(--color-primary), 1),
				inset -33px 0 200px rgba(var(--color-secondary), 1),
				inset 33px 0 200px rgba(var(--color-secondary), 1);
		}
	}