.bubbles-popup-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(ellipse at center, rgba(0, 30, 60, 0.45) 0%, rgba(0, 15, 30, 0.65) 100%);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s ease;
}

.bubbles-popup-overlay.is-shown {
	opacity: 1;
	pointer-events: auto;
}

.bubbles-popup-bubble {
	position: relative;
	width: min(420px, 82vw);
	height: min(420px, 82vw);
	border-radius: 50%;
	border: none;
	cursor: pointer;
	background:
		radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 22%),
		radial-gradient(circle at 70% 78%, rgba(220, 245, 255, 0.55) 0%, rgba(220, 245, 255, 0) 18%),
		radial-gradient(circle at 50% 50%,
			rgba(186, 230, 253, 0.35) 0%,
			rgba(56, 189, 248, 0.30) 55%,
			rgba(14, 108, 196, 0.45) 90%,
			rgba(255, 255, 255, 0.85) 100%);
	box-shadow:
		inset -18px -28px 60px rgba(14, 108, 196, 0.45),
		inset 24px 24px 50px rgba(255, 255, 255, 0.35),
		0 24px 60px rgba(0, 0, 30, 0.4);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 6%;
	box-sizing: border-box;
	transform: scale(0.4) translateY(40px);
	opacity: 0;
	transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.4s ease;
}

.bubbles-popup-overlay.is-shown .bubbles-popup-bubble {
	transform: scale(1) translateY(0);
	opacity: 1;
	animation: bubbles-popup-float 4s ease-in-out 0.6s infinite;
}

@keyframes bubbles-popup-float {
	0%, 100% { transform: translateY(0) scale(1); }
	50%      { transform: translateY(-10px) scale(1.015); }
}

.bubbles-popup-bubble.is-popping {
	animation: bubbles-popup-pop 0.45s cubic-bezier(0.5, 0, 0.75, 0) forwards !important;
}

@keyframes bubbles-popup-pop {
	0%   { transform: scale(1); opacity: 1; }
	40%  { transform: scale(1.25); opacity: 0.85; }
	100% { transform: scale(2.1); opacity: 0; }
}

.bubbles-popup-text {
	color: #fff;
	font-weight: 700;
	font-size: clamp(22px, 5vw, 36px);
	text-align: center;
	text-shadow: 0 2px 12px rgba(0, 30, 60, 0.5);
	line-height: 1.15;
	margin: 0;
}

.bubbles-popup-hint {
	color: rgba(255, 255, 255, 0.92);
	font-size: clamp(13px, 2.4vw, 16px);
	text-align: center;
	text-shadow: 0 1px 6px rgba(0, 30, 60, 0.5);
	line-height: 1.35;
	max-width: 80%;
	margin: 0;
}

.bubbles-popup-button {
	margin-top: 4px;
	padding: 10px 26px;
	background: rgba(255, 255, 255, 0.95);
	color: #0a3d62;
	border: none;
	border-radius: 999px;
	font-size: clamp(14px, 2.6vw, 17px);
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 30, 60, 0.3);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	pointer-events: none; /* whole bubble is the click target */
}

.bubbles-popup-bubble:hover .bubbles-popup-button,
.bubbles-popup-bubble:focus-visible .bubbles-popup-button {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 30, 60, 0.45);
}

.bubbles-popup-splash {
	position: fixed;
	pointer-events: none;
	z-index: 1000000;
	width: 0;
	height: 0;
}

.bubbles-popup-splash > span {
	position: absolute;
	left: 0;
	top: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 6px rgba(186, 230, 253, 0.8);
	transform: translate(-50%, -50%);
	animation: bubbles-popup-splash-anim 0.7s ease-out forwards;
}

@keyframes bubbles-popup-splash-anim {
	from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	to   { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.2); opacity: 0; }
}