/* Minimal, focused styles. Tailwind covers layout/typography. */

html, body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.no-select {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* Subtle decorative ground */
.ground {
	background: linear-gradient(
		to top,
		rgba(134, 239, 172, 0.95),   /* green-300ish */
		rgba(187, 247, 208, 0.6)     /* green-200ish */
	);
	box-shadow:
		inset 0 10px 14px -10px rgba(0, 0, 0, 0.25),
		0 -4px 12px rgba(16, 185, 129, 0.25); /* soft grass glow */
	border-top: 2px solid rgba(16, 185, 129, 0.6); /* emerald-500 tint */
	z-index: 0;
}

/* Letter visuals */
.letter {
	display: inline-block;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
	will-change: transform;
	transition: color 220ms ease-out, text-shadow 250ms ease-out;
}

/* Active falling letter glow (sky/cyan) */
.glow-active {
	text-shadow:
		0 0 6px rgba(56, 189, 248, 0.65),   /* cyan-400 */
		0 0 14px rgba(56, 189, 248, 0.45),
		0 1px 0 rgba(255, 255, 255, 0.85);
	filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.8));
}

/* Active wobble cue to draw attention */
@keyframes wobble {
	0% { transform: translateX(-6px) rotate(-2.5deg) scale(1); }
	25% { transform: translateX(6px) rotate(2.5deg) scale(1.02); }
	50% { transform: translateX(-4px) rotate(-1.8deg) scale(1); }
	75% { transform: translateX(4px) rotate(1.8deg) scale(1.02); }
	100% { transform: translateX(-6px) rotate(-2.5deg) scale(1); }
}

.wobble {
	animation: wobble 1s ease-in-out infinite;
}

/* Success glow */
.success {
	color: #22c55e; /* Tailwind emerald-500 */
	text-shadow:
		0 0 6px rgba(16, 185, 129, 0.65),
		0 0 16px rgba(16, 185, 129, 0.45),
		0 1px 0 rgba(255, 255, 255, 0.9);
	filter: drop-shadow(0 2px 0 rgba(255,255,255,0.8));
}

/* Particles for juicing */
.particle {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--size, 8px);
	height: var(--size, 8px);
	border-radius: 9999px;
	background: hsl(var(--h, 200) var(--s, 70%) var(--l, 62%));
	opacity: 0.95;
	pointer-events: none;
	animation: particle-pop var(--duration, 800ms) cubic-bezier(0.445, 0.05, 0.55, 0.95) var(--delay, 0ms) forwards;
	will-change: transform, opacity;
}

@keyframes particle-pop {
	0% {
		transform: translate(0px, 0px) rotate(0deg) scale(1);
		opacity: 1;
	}
	50% {
		transform: translate(calc(var(--dx, 0px) * 0.7), var(--apexY, -100px)) rotate(var(--rot, 0deg)) scale(1);
		opacity: 0.8;
	}
	100% {
		transform: translate(var(--dx, 0px), var(--fallY, 60px)) rotate(calc(var(--rot, 0deg) * 1.2)) scale(1);
		opacity: 0;
	}
}

/* Soft drop shadow for letters while falling */
.soft-shadow {
	filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.08));
}