/* ====== Emoji Deszcz — style ====== */

/* ---------- Przyciski ---------- */
.ed-buttons {
	display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ed-btn {
	position: relative; font-size: 34px; line-height: 1; padding: 14px 18px;
	background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-radius: 18px; cursor: pointer;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .12); transition: transform .08s, box-shadow .15s;
	-webkit-tap-highlight-color: transparent;
}
.ed-btn:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .18); }
.ed-btn:active { transform: translateY(1px); }
.ed-btn--tap { animation: ed-tap .32s ease; }
@keyframes ed-tap { 0% { transform: scale(1); } 30% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* „Strzał" emoji przy kliknięciu (informacja zwrotna) */
.ed-pop {
	position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
	font-size: 26px; pointer-events: none; animation: ed-pop .9s ease-out forwards;
}
@keyframes ed-pop {
	0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
	20% { opacity: 1; }
	100% { opacity: 0; transform: translate( calc( -50% + var(--dx, 0px) ), -72px ) scale(1.1); }
}

/* ---------- Nakładka z lecącymi emoji ---------- */
.ed-rain-wrap { position: relative; width: 100%; height: 100%; }
.ed-obs.ed-rain-wrap { position: fixed; inset: 0; }
.ed-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ed-obs-body { background: transparent; }

.ed-drop {
	position: absolute; bottom: -54px; line-height: 1; will-change: transform, opacity;
	animation-timing-function: cubic-bezier(.42, .0, .58, 1); animation-fill-mode: forwards;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}
.ed-var-1 { animation-name: ed-rise1; }
.ed-var-2 { animation-name: ed-rise2; }
.ed-var-3 { animation-name: ed-rise3; }

@keyframes ed-rise1 {
	0%   { transform: translateY(0) translateX(0) rotate(0); opacity: 0; }
	8%   { opacity: 1; }
	25%  { transform: translateY( calc( var(--rise) * -.25 ) ) translateX( var(--drift) ) rotate(10deg); }
	50%  { transform: translateY( calc( var(--rise) * -.5 ) )  translateX( calc( var(--drift) * -1 ) ) rotate(-10deg); }
	75%  { transform: translateY( calc( var(--rise) * -.75 ) ) translateX( var(--drift) ) rotate(8deg); }
	90%  { opacity: 1; }
	100% { transform: translateY( calc( var(--rise) * -1 ) ) translateX(0) rotate(0); opacity: 0; }
}
@keyframes ed-rise2 {
	0%   { transform: translateY(0) translateX(0) rotate(0); opacity: 0; }
	10%  { opacity: 1; }
	33%  { transform: translateY( calc( var(--rise) * -.33 ) ) translateX( calc( var(--drift) * -1 ) ) rotate(-12deg); }
	66%  { transform: translateY( calc( var(--rise) * -.66 ) ) translateX( var(--drift) ) rotate(12deg); }
	90%  { opacity: 1; }
	100% { transform: translateY( calc( var(--rise) * -1 ) ) translateX(0) rotate(0); opacity: 0; }
}
@keyframes ed-rise3 {
	0%   { transform: translateY(0) translateX(0) rotate(0); opacity: 0; }
	8%   { opacity: 1; }
	20%  { transform: translateY( calc( var(--rise) * -.2 ) ) translateX( calc( var(--drift) * .6 ) ) rotate(6deg); }
	45%  { transform: translateY( calc( var(--rise) * -.45 ) ) translateX( calc( var(--drift) * -.8 ) ) rotate(-7deg); }
	70%  { transform: translateY( calc( var(--rise) * -.7 ) ) translateX( calc( var(--drift) * .9 ) ) rotate(7deg); }
	90%  { opacity: 1; }
	100% { transform: translateY( calc( var(--rise) * -1 ) ) translateX(0) rotate(0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ed-drop { animation-name: ed-rise-simple; }
	@keyframes ed-rise-simple {
		0% { transform: translateY(0); opacity: 0; }
		10% { opacity: 1; }
		90% { opacity: 1; }
		100% { transform: translateY( calc( var(--rise) * -1 ) ); opacity: 0; }
	}
}