.ascii-globe-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	padding: 0;
	position: relative;
	isolation: isolate;
	overflow: visible;
}

.ascii-stars {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.ascii-globe {
	margin: 0;
	white-space: pre;
	font-family: Consolas, Monaco, "Courier New", monospace;
	font-size: clamp(8px, 0.95vw, 18px);
	line-height: 1;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.9);
	user-select: none;
	pointer-events: none;
	display: block;
	transform: scaleX(0.92);
	transform-origin: center center;
	position: relative;
	z-index: 1;
}

.ascii-star {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, var(--req-star-opacity, 0.7));
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.18);
	opacity: 0.2;
	transform: scale(1);
	animation: reqStarTwinkle var(--req-star-duration, 5s) ease-in-out var(--req-star-delay, 0s) infinite;
	animation-fill-mode: both;
}

.ascii-falling-star {
	position: absolute;
	width: var(--req-falling-star-length, 120px);
	height: 1px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.45) 48%,
		rgba(255, 255, 255, 0.95) 82%,
		rgba(209, 253, 14, 0.95) 100%
	);
	box-shadow:
		0 0 8px rgba(209, 253, 14, 0.2),
		0 0 12px rgba(255, 255, 255, 0.22),
		0 0 16px rgba(255, 255, 255, 0.15);
	opacity: 0;
	transform: translate3d(0, 0, 0) rotate(var(--req-falling-star-angle, 155deg)) scaleX(0.35);
	transform-origin: left center;
	animation: reqFallingStar var(--req-falling-star-duration, 1.2s) ease-out forwards;
}

@keyframes reqStarTwinkle {
	0%,
	100% {
		opacity: 0.2;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.35);
	}
}

@keyframes reqFallingStar {
	0% {
		opacity: 0;
		transform:
			translate3d(0, 0, 0)
			rotate(var(--req-falling-star-angle, 155deg))
			scaleX(0.35);
	}

	12% {
		opacity: 0.95;
	}

	100% {
		opacity: 0;
		transform:
			translate3d(var(--req-falling-star-travel-x, -520px), var(--req-falling-star-travel-y, 320px), 0)
			rotate(var(--req-falling-star-angle, 155deg))
			scaleX(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ascii-star,
	.ascii-falling-star {
		animation: none;
	}
}