.sw-balloon-game {
	max-width: 700px;
	margin: 0 auto;
}

.sw-balloon-hud {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin: 0 0 1.25rem;
}

.sw-balloon-hud__stat {
	background: #FFFFFF;
	border-radius: 999px;
	padding: .5rem 1.25rem;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
	font-size: .95rem;
	font-weight: 700;
	color: #2E2419;
}

.sw-balloon-hud__stat strong {
	color: #E8663D;
}

.sw-balloon-restart {
	display: inline-block;
	border: 2px solid #2E2419;
	background: transparent;
	color: #2E2419;
	border-radius: 999px;
	padding: .5rem 1.25rem;
	font-weight: 700;
	font-size: .95rem;
	cursor: pointer;
	font-family: inherit;
}

.sw-balloon-restart:hover {
	background: #2E2419;
	color: #fff;
}

.sw-balloon-equation-wrap {
	text-align: center;
	margin-bottom: 1rem;
}

.sw-balloon-equation {
	display: inline-block;
	background: #2E2419;
	color: #FFF9F2;
	font-size: 1.6rem;
	font-weight: 800;
	padding: .6rem 1.75rem;
	border-radius: 16px;
	letter-spacing: .02em;
	transition: transform .15s ease;
}

.sw-balloon-equation.is-happy {
	animation: sw-balloon-happy .5s ease;
}

.sw-balloon-equation.is-shake {
	animation: sw-balloon-shake .4s ease;
}

@keyframes sw-balloon-happy {
	0% { transform: scale(1); }
	40% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

@keyframes sw-balloon-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

.sw-balloon-sky {
	position: relative;
	height: 460px;
	background: linear-gradient(180deg, #CDEBF6 0%, #E8F6F0 100%);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: inset 0 2px 10px rgba(0,0,0,.06);
}

.sw-balloon {
	position: absolute;
	bottom: -140px;
	width: 78px;
	height: 92px;
	border: none;
	border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
	box-shadow: inset -10px -10px 18px rgba(0,0,0,.15), 0 4px 10px rgba(0,0,0,.2);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	animation-name: sw-balloon-float;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.sw-balloon__number {
	font-size: 1.5rem;
	font-weight: 800;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,.25);
	pointer-events: none;
}

.sw-balloon__knot {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid currentColor;
	color: inherit;
	opacity: .85;
	pointer-events: none;
}

@keyframes sw-balloon-float {
	0% { transform: translateY(0) translateX(0) rotate(-2deg); }
	25% { transform: translateY(-140px) translateX(10px) rotate(2deg); }
	50% { transform: translateY(-280px) translateX(-8px) rotate(-2deg); }
	75% { transform: translateY(-420px) translateX(8px) rotate(2deg); }
	100% { transform: translateY(-600px) translateX(0) rotate(-2deg); }
}

.sw-balloon.is-popping {
	pointer-events: none;
	animation: none !important;
}

.sw-balloon.is-correct {
	animation: sw-balloon-pop-correct .5s ease forwards !important;
}

.sw-balloon.is-wrong {
	animation: sw-balloon-pop-wrong .35s ease forwards !important;
}

@keyframes sw-balloon-pop-correct {
	0% { transform: scale(1); opacity: 1; }
	60% { transform: scale(1.35); opacity: 1; }
	100% { transform: scale(0); opacity: 0; }
}

@keyframes sw-balloon-pop-wrong {
	0% { transform: scale(1); opacity: 1; }
	100% { transform: scale(.4); opacity: 0; }
}

@media (max-width: 600px) {
	.sw-balloon-sky { height: 380px; }
	.sw-balloon { width: 62px; height: 74px; }
	.sw-balloon__number { font-size: 1.2rem; }
	.sw-balloon-equation { font-size: 1.3rem; padding: .5rem 1.25rem; }
	.sw-balloon-hud { gap: .75rem; }
	.sw-balloon-hud__stat { padding: .4rem .9rem; font-size: .85rem; }
	@keyframes sw-balloon-float {
		0% { transform: translateY(0) translateX(0) rotate(-2deg); }
		25% { transform: translateY(-110px) translateX(8px) rotate(2deg); }
		50% { transform: translateY(-220px) translateX(-6px) rotate(-2deg); }
		75% { transform: translateY(-330px) translateX(6px) rotate(2deg); }
		100% { transform: translateY(-480px) translateX(0) rotate(-2deg); }
	}
}

@media (min-width: 700px) {
	.sw-balloon-game { max-width: 860px; }
}

@media (prefers-reduced-motion: reduce) {
	.sw-balloon { animation-duration: 20s !important; }
	.sw-balloon-equation.is-happy,
	.sw-balloon-equation.is-shake { animation: none; }
}