/* Word Pop — bubbles. The word is the most important thing on screen. */
.dxg .dxg-field {
	background:
		radial-gradient(circle at 12% 18%, rgba(157, 211, 218, .22) 0 60px, transparent 61px),
		radial-gradient(circle at 88% 70%, rgba(246, 216, 120, .20) 0 80px, transparent 81px),
		var(--g-light);
}
.dxg-bubble {
	position: absolute; left: 0; top: 0; padding: 0; border: 0; background: none; cursor: pointer;
	will-change: transform; -webkit-tap-highlight-color: transparent;
}
.dxg-bubble__inner {
	display: flex; align-items: center; justify-content: center; height: 78px; padding: 0 14px;
	border-radius: 999px; border: 3px solid var(--b-edge); background: var(--b-fill);
	box-shadow: inset 0 -6px 0 rgba(28, 43, 61, .06), 0 4px 10px rgba(28, 43, 61, .10);
	font-family: var(--g-head); font-weight: 500; font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.15rem);
	color: var(--g-navy); letter-spacing: 0.02em; line-height: 1;
	position: relative; animation: dxg-sway 3.4s ease-in-out infinite alternate;
}
/* small shine, kept away from the letters */
.dxg-bubble__inner::before {
	content: ""; position: absolute; top: 9px; left: 16px; width: 16px; height: 8px; border-radius: 50%;
	background: rgba(255, 255, 255, .85); transform: rotate(-20deg);
}
.dxg-bubble--c0 { --b-fill: #E2F5F3; --b-edge: #7CCBC4; }
.dxg-bubble--c1 { --b-fill: #FCE8E3; --b-edge: #F2A08F; }
.dxg-bubble--c2 { --b-fill: #FFF6D6; --b-edge: #E9C85A; }
.dxg-bubble--c3 { --b-fill: #E6F4EA; --b-edge: #8FCBA2; }
.dxg-bubble--c4 { --b-fill: #E2F3F5; --b-edge: #86C4CD; }
.dxg-bubble:nth-child(odd) .dxg-bubble__inner { animation-delay: -1.7s; }
@keyframes dxg-sway { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
.dxg-bubble:hover .dxg-bubble__inner { border-width: 4px; box-shadow: inset 0 -6px 0 rgba(28, 43, 61, .06), 0 6px 16px rgba(28, 43, 61, .16); }
.dxg-bubble:focus-visible { outline: none; }
.dxg-bubble:focus-visible .dxg-bubble__inner { outline: 4px solid var(--g-blue); outline-offset: 3px; }
.dxg-field.is-paused .dxg-bubble__inner { animation-play-state: paused; }

/* Correct: quick pop */
.dxg-bubble.is-popped { pointer-events: none; }
.dxg-bubble.is-popped .dxg-bubble__inner { animation: dxg-pop .2s ease-out forwards; }
@keyframes dxg-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.dxg-spark {
	position: absolute; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 3;
	margin: -5px 0 0 -5px; animation: dxg-spark .5s ease-out forwards;
}
.dxg-spark--0 { background: #F2A08F; } .dxg-spark--1 { background: #E9C85A; } .dxg-spark--2 { background: #8FCBA2; } .dxg-spark--3 { background: #86C4CD; }
@keyframes dxg-spark { to { transform: translate(var(--tx), var(--ty)) scale(.3); opacity: 0; } }

/* Not a match: gentle wiggle, then marked (dashed edge + ✕), word stays readable */
.dxg-bubble.is-wrong { cursor: default; }
.dxg-bubble.is-wrong .dxg-bubble__inner {
	border-style: dashed; border-color: var(--g-coral); background: #fff; color: #5b6878;
	animation: dxg-wiggle .38s ease-in-out;
}
.dxg-bubble.is-wrong .dxg-bubble__inner::before { display: none; }
.dxg-bubble.is-wrong .dxg-bubble__inner::after {
	content: "✕"; position: absolute; top: -10px; right: -6px; width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center; font-size: 14px; font-family: var(--g-body); font-weight: 700;
	background: var(--g-coral-dark); color: #fff;
}

/* Still words: a calm grid that refills */
.dxg--calm .dxg-field {
	display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 18px; padding: 24px; align-content: center;
}
.dxg-bubble.is-still { position: relative; animation: dxg-in .22s ease-out; }
.dxg-bubble.is-still .dxg-bubble__inner { animation: none; height: 92px; }
.dxg-bubble.is-still.is-popped .dxg-bubble__inner { animation: dxg-pop .2s ease-out forwards; }
.dxg-bubble.is-still.is-wrong .dxg-bubble__inner { animation: dxg-wiggle .38s ease-in-out; }
@media (max-width: 639px) { .dxg--calm .dxg-field { grid-template-columns: repeat(2, 1fr); padding: 14px; gap: 12px; } }