.hoppy-quest-page {
	background: #111;
	color: #f4ead8;
	min-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-text-size-adjust: 100%;
}

.hoppy-quest-page,
.hoppy-quest-page * {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

.hoppy-game,
.hoppy-game * {
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
}

.hoppy-quest {
	margin: 0 auto;
	max-width: 920px;
	padding: 14px 14px 36px;
}

.hoppy-quest__brand {
	align-items: center;
	display: flex;
	gap: 10px;
	margin: 0 auto 10px;
	max-width: 780px;
}

.hoppy-quest__brand span,
.hoppy-quest__eyebrow,
.hoppy-game__label,
.hoppy-btn {
	font-family: "Courier New", Courier, monospace;
	letter-spacing: 0;
}

.hoppy-quest__brand > span:not(.hoppy-quest__snowdrop-mark) {
	font-size: 0.9rem;
	font-weight: 900;
}

.hoppy-quest__snowdrop-mark {
	display: block;
	font-size: 4px;
	height: 11em;
	position: relative;
	width: 11em;
}

.hoppy-quest__snowdrop-mark::before,
.hoppy-quest__snowdrop-mark::after {
	content: "";
	display: block;
	height: 1em;
	left: 0;
	position: absolute;
	top: 0;
	width: 1em;
}

.hoppy-quest__snowdrop-mark::before {
	background: transparent;
	box-shadow:
		3em 0 #6aa657, 4em 0 #6aa657,
		3em 1em #4f7a37, 5em 1em #6aa657,
		3em 2em #4f7a37, 6em 2em #4f7a37,
		3em 3em #4f7a37,
		2em 4em #6aa657, 3em 4em #4f7a37,
		1em 5em #6aa657, 3em 5em #4f7a37,
		0 6em #4f7a37, 3em 6em #4f7a37;
}

.hoppy-quest__snowdrop-mark::after {
	background: transparent;
	box-shadow:
		6em 2em #f4ead8, 8em 2em #f4ead8,
		5em 3em #f4ead8, 7em 3em #111, 9em 3em #f4ead8,
		5em 4em #fff7e8, 7em 4em #f4ead8, 9em 4em #fff7e8,
		6em 5em #f4ead8, 7em 5em #111, 8em 5em #f4ead8,
		6em 6em #eef4e8, 8em 6em #eef4e8;
}

.hoppy-quest__shell {
	background: #171717;
	border: 4px solid #f4ead8;
	box-shadow: 0 0 0 4px #111, 0 0 0 8px #5b3f2d;
	margin: 0 auto;
	max-width: 780px;
	min-height: 0;
	overflow: visible;
}

.hoppy-quest__intro {
	align-items: center;
	display: grid;
	gap: 18px;
	grid-template-columns: minmax(0, 1fr) 220px;
	min-height: min(70vh, 520px);
	padding: clamp(18px, 4vw, 34px);
}

.hoppy-quest__story {
	max-width: 480px;
}

.hoppy-quest__eyebrow {
	color: #d8b85a;
	font-size: 0.8rem;
	font-weight: 900;
	margin: 0 0 8px;
	text-transform: uppercase;
}

.hoppy-quest h1,
.hoppy-result h2 {
	color: #f4ead8;
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(2.1rem, 7vw, 4.5rem);
	font-weight: 900;
	line-height: 0.92;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.hoppy-quest #hoppy-quest-title {
	color: #f4ead8 !important;
}

.hoppy-result [data-hoppy-result-title] {
	color: #f4ead8 !important;
}

.hoppy-quest p {
	font-size: clamp(1rem, 2vw, 1.14rem);
	font-weight: 800;
	line-height: 1.42;
	margin: 0 0 12px;
}

.hoppy-quest__note {
	background: #111;
	border: 2px solid #d8b85a;
	color: #f4ead8;
	display: inline-block;
	font-family: "Courier New", Courier, monospace;
	font-size: 0.95rem;
	font-weight: 900;
	padding: 10px;
}

.hoppy-quest__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.hoppy-quest__hero {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 230px;
}

.hoppy-btn {
	appearance: none;
	background: #111;
	border: 3px solid #f4ead8;
	border-radius: 0;
	color: #f4ead8;
	cursor: pointer;
	display: inline-flex;
	font-size: 0.95rem;
	font-weight: 900;
	justify-content: center;
	line-height: 1;
	min-height: 44px;
	padding: 12px 18px;
	text-decoration: none;
	touch-action: manipulation;
	text-transform: uppercase;
}

.hoppy-btn:hover,
.hoppy-btn:focus-visible {
	background: #d8b85a;
	color: #111;
	outline: 0;
}

.hoppy-btn--primary {
	background: #d8b85a;
	color: #111;
}

.hoppy-btn--sound {
	background: #171717;
	border-color: #f4ead8;
	color: #f4ead8;
	font-size: 0.82rem;
	min-height: 40px;
	padding: 10px 14px;
}

.hoppy-btn--sound.is-on {
	background: #4f7a37;
	color: #f4ead8;
}

.hoppy-game,
.hoppy-result {
	padding: 12px;
}

.hoppy-game__topbar {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 5px;
}

.hoppy-game__topbar > div {
	--hoppy-reward-color: #7c2f24;
	--hoppy-reward-progress: 0%;
	background: #111;
	border: 2px solid #f4ead8;
	padding: 4px 6px;
	position: relative;
}

.hoppy-game__topbar > div:nth-child(4) {
	padding-bottom: 22px;
}

.hoppy-game__topbar > div:nth-child(4)::after {
	background:
		linear-gradient(90deg, var(--hoppy-reward-color) var(--hoppy-reward-progress), #2f2f2f var(--hoppy-reward-progress));
	border: 2px solid #f4ead8;
	bottom: 4px;
	box-shadow: 0 0 0 2px #111, 0 0 8px var(--hoppy-reward-color);
	content: "";
	display: block;
	height: 12px;
	left: 6px;
	position: absolute;
	right: 6px;
}

.hoppy-game__topbar > div:nth-child(4).has-discount {
	--hoppy-reward-color: #d8b85a;
}

.hoppy-game__topbar > div:nth-child(4).has-strong-discount {
	--hoppy-reward-color: #63b46d;
}

.hoppy-game__label {
	display: block;
	font-size: 0.58rem;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}

.hoppy-game__topbar strong {
	color: #d8b85a;
	display: block;
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(1.02rem, 2.1vw, 1.28rem);
	line-height: 1;
	margin-top: 1px;
}

.hoppy-game__topbar [data-hoppy-reward-meter] {
	font-size: clamp(0.72rem, 1.55vw, 0.95rem);
	white-space: nowrap;
}

.hoppy-game__topbar small {
	color: #f4ead8;
	display: inline-block;
	font-family: "Courier New", Courier, monospace;
	font-size: 0.72em;
	min-width: 2.2em;
	vertical-align: baseline;
}

.hoppy-game__topbar small.is-bad {
	color: #f0a090;
}

.hoppy-game__stage {
	background:
		linear-gradient(90deg, transparent 32.8%, #2f2f2f 33%, transparent 33.2%, transparent 66.4%, #2f2f2f 66.6%, transparent 66.8%),
		#070707;
	border: 4px solid #f4ead8;
	height: clamp(430px, calc(100vh - 250px), 620px);
	margin: 0 auto;
	max-width: 540px;
	overflow: hidden;
	position: relative;
	touch-action: none;
}

.hoppy-game__scene-title {
	background: #111;
	border: 2px solid #f4ead8;
	left: 10px;
	max-width: calc(100% - 20px);
	opacity: 0;
	padding: 7px 9px;
	pointer-events: none;
	position: absolute;
	top: 10px;
	transform: translateY(-10px);
	transition: opacity 220ms ease, transform 220ms ease;
	z-index: 20;
}

.hoppy-game__scene-title.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.hoppy-game__scene-title strong,
.hoppy-game__scene-title span {
	display: block;
	font-family: "Courier New", Courier, monospace;
	font-weight: 900;
	line-height: 1.16;
}

.hoppy-game__scene-title strong {
	color: #d8b85a;
}

.hoppy-game__scene-title span {
	font-size: 0.8rem;
	margin-top: 2px;
}

.hoppy-game__adjust {
	display: none;
}

.hoppy-game__objects {
	inset: 0;
	position: absolute;
}

.hoppy-game__cameo {
	align-items: flex-end;
	bottom: 104px;
	display: flex;
	gap: 8px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(-24px) scale(0.96);
	transition: opacity 320ms ease, transform 320ms ease;
	z-index: 14;
}

.hoppy-game__cameo::before {
	content: none;
}

.hoppy-game__cameo.is-visible {
	opacity: 1;
	transform: translateX(0) scale(1);
}

.hoppy-game__cameo--left {
	left: 10px;
}

.hoppy-game__cameo--right {
	flex-direction: row-reverse;
	right: 10px;
	transform: translateX(24px) scale(0.96);
}

.hoppy-game__cameo--right::before {
	left: auto;
	right: 0;
}

.hoppy-game__cameo--right.is-visible {
	transform: translateX(0) scale(1);
}

.hoppy-cameo__sprite {
	--p: 5px;
	display: block;
	font-size: var(--p);
	height: 16em;
	position: relative;
	width: 13em;
}

.hoppy-cameo__sprite::before,
.hoppy-cameo__sprite::after {
	content: "";
	display: none;
	height: 1em;
	left: 0;
	position: absolute;
	top: 0;
	width: 1em;
}

.hoppy-cameo__body,
.hoppy-cameo__scarf,
.hoppy-cameo__detail {
	display: block;
	height: 1em;
	left: 0;
	position: absolute;
	top: 0;
	width: 1em;
}

.hoppy-cameo__detail {
	height: 0.55em;
	width: 0.55em;
}

.hoppy-cameo__sprite--mrrrcat .hoppy-cameo__body {
	background: transparent;
	box-shadow:
		2em 1em #4c4843, 9em 1em #4c4843,
		1em 2em #4c4843, 2em 2em #d99a9e, 3em 2em #4c4843, 8em 2em #4c4843, 9em 2em #d99a9e, 10em 2em #4c4843,
		1em 3em #4c4843, 2em 3em #4c4843, 3em 3em #4c4843, 4em 3em #fff5e7, 5em 3em #fff5e7, 6em 3em #fff5e7, 7em 3em #fff5e7, 8em 3em #4c4843, 9em 3em #4c4843, 10em 3em #4c4843,
		1em 4em #4c4843, 2em 4em #4c4843, 3em 4em #fff5e7, 4em 4em #fff5e7, 5em 4em #fff5e7, 6em 4em #fff5e7, 7em 4em #fff5e7, 8em 4em #fff5e7, 9em 4em #4c4843, 10em 4em #4c4843,
		2em 5em #4c4843, 3em 5em #fff5e7, 4em 5em #fff5e7, 5em 5em #fff5e7, 6em 5em #fff5e7, 7em 5em #fff5e7, 8em 5em #fff5e7, 9em 5em #4c4843,
		2em 6em #4c4843, 3em 6em #fff5e7, 4em 6em #fff5e7, 5em 6em #fff5e7, 6em 6em #fff5e7, 7em 6em #fff5e7, 8em 6em #fff5e7, 9em 6em #4c4843,
		3em 7em #fff5e7, 4em 7em #fff5e7, 5em 7em #fff5e7, 6em 7em #fff5e7, 7em 7em #fff5e7, 8em 7em #fff5e7,
		3em 8em #4c4843, 4em 8em #4c4843, 5em 8em #4c4843, 6em 8em #4c4843, 7em 8em #4c4843, 8em 8em #4c4843,
		3em 9em #4c4843, 4em 9em #4c4843, 5em 9em #4c4843, 6em 9em #4c4843, 7em 9em #4c4843, 8em 9em #4c4843,
		4em 10em #4c4843, 5em 10em #4c4843, 6em 10em #4c4843, 7em 10em #4c4843,
		4em 11em #4c4843, 5em 11em #4c4843, 6em 11em #4c4843, 7em 11em #4c4843,
		5em 12em #4c4843, 6em 12em #4c4843;
}

.hoppy-cameo__sprite--mrrrcat .hoppy-cameo__scarf {
	background: transparent;
	box-shadow:
		3em 8em #a8d5c2, 4em 8em #a8d5c2, 5em 8em #a8d5c2, 6em 8em #a8d5c2, 7em 8em #a8d5c2, 8em 8em #a8d5c2,
		2em 9em #a8d5c2, 3em 9em #a8d5c2, 8em 9em #a8d5c2, 9em 9em #a8d5c2,
		5em 9em #91c6b0, 6em 9em #91c6b0,
		6em 10em #a8d5c2, 7em 10em #a8d5c2,
		7em 11em #a8d5c2;
	animation: hoppyCameoScarf 820ms steps(2, end) infinite;
}

.hoppy-cameo__sprite--mrrrcat .hoppy-cameo__detail {
	background: #2e6b9e;
	box-shadow:
		4.25em 0 #2e6b9e,
		0.18em 0.16em #9ed3ff, 4.43em 0.16em #9ed3ff,
		2.1em 1.5em #dc8e98,
		1.2em 1.9em #f6ddd5, 1.65em 1.9em #f6ddd5, 2.55em 1.9em #f6ddd5, 3em 1.9em #f6ddd5,
		1.45em 2.35em #f6ddd5, 2.1em 2.65em #111, 2.75em 2.35em #f6ddd5,
		1.55em 3.15em #111, 2.1em 3.4em #111, 2.65em 3.15em #111,
		-2.9em 1.15em #111, -1.75em 1.48em #111, -0.55em 1.82em #111,
		-2.75em 2.1em #111, -1.55em 2.22em #111, -0.35em 2.34em #111,
		5.15em 1.82em #111, 6.35em 1.48em #111, 7.5em 1.15em #111,
		4.95em 2.34em #111, 6.15em 2.22em #111, 7.35em 2.1em #111;
	animation: hoppyCameoWave 760ms steps(2, end) infinite;
	left: 3.6em;
	top: 4.45em;
}

.hoppy-cameo__sprite--mrrrcat .hoppy-cameo__detail::before {
	background: #111;
	box-shadow:
		4.25em 0 #111,
		2.1em 1.92em #b96f7b,
		2.1em 2.24em #111;
	content: "";
	display: block;
	height: 0.24em;
	left: 0.17em;
	position: absolute;
	top: 0.18em;
	width: 0.24em;
}

.hoppy-cameo__sprite--oliver .hoppy-cameo__body {
	background: transparent;
	box-shadow:
		1em 2em #d6cab8, 2em 2em #d6cab8, 9em 2em #d6cab8, 10em 2em #d6cab8,
		0em 3em #d6cab8, 1em 3em #d6cab8, 2em 3em #d6cab8, 3em 3em #f3eada, 4em 3em #f3eada, 5em 3em #f3eada, 6em 3em #f3eada, 7em 3em #f3eada, 8em 3em #f3eada, 9em 3em #d6cab8, 10em 3em #d6cab8, 11em 3em #d6cab8,
		0em 4em #d6cab8, 1em 4em #d6cab8, 2em 4em #d6cab8, 3em 4em #f3eada, 4em 4em #f3eada, 5em 4em #f3eada, 6em 4em #f3eada, 7em 4em #f3eada, 8em 4em #f3eada, 9em 4em #d6cab8, 10em 4em #d6cab8, 11em 4em #d6cab8,
		0em 5em #d6cab8, 1em 5em #d6cab8, 2em 5em #d6cab8, 3em 5em #f3eada, 4em 5em #f3eada, 5em 5em #f3eada, 6em 5em #f3eada, 7em 5em #f3eada, 8em 5em #f3eada, 9em 5em #d6cab8, 10em 5em #d6cab8, 11em 5em #d6cab8,
		1em 6em #cdbfae, 2em 6em #d6cab8, 3em 6em #f3eada, 4em 6em #f3eada, 5em 6em #f3eada, 6em 6em #f3eada, 7em 6em #f3eada, 8em 6em #f3eada, 9em 6em #d6cab8, 10em 6em #cdbfae,
		1em 7em #cdbfae, 2em 7em #d6cab8, 3em 7em #f3eada, 4em 7em #f3eada, 5em 7em #f3eada, 6em 7em #f3eada, 7em 7em #f3eada, 8em 7em #f3eada, 9em 7em #d6cab8, 10em 7em #cdbfae,
		3em 8em #f3eada, 4em 8em #f3eada, 5em 8em #f3eada, 6em 8em #f3eada, 7em 8em #f3eada, 8em 8em #f3eada,
		2em 9em #f3eada, 3em 9em #f3eada, 4em 9em #f3eada, 7em 9em #f3eada, 8em 9em #f3eada, 9em 9em #f3eada,
		2em 10em #f3eada, 3em 10em #f3eada, 8em 10em #f3eada, 9em 10em #f3eada,
		3em 11em #f3eada, 4em 11em #f3eada, 7em 11em #f3eada, 8em 11em #f3eada;
}

.hoppy-cameo__sprite--oliver .hoppy-cameo__scarf {
	background: transparent;
	box-shadow:
		4em 8em #b7d8e2, 5em 8em #b7d8e2, 6em 8em #b7d8e2, 7em 8em #b7d8e2,
		3em 9em #b7d8e2, 4em 9em #b7d8e2, 7em 9em #b7d8e2, 8em 9em #b7d8e2,
		5em 9em #9fc8d3, 6em 9em #9fc8d3,
		6em 10em #b7d8e2,
		6em 11em #b7d8e2;
	animation: hoppyCameoScarf 820ms steps(2, end) infinite;
}

.hoppy-cameo__sprite--oliver .hoppy-cameo__detail {
	background: #111;
	box-shadow:
		4.2em 0 #111,
		0.18em 0.16em #fff, 4.38em 0.16em #fff,
		1.25em 1.05em #fff7ea, 1.8em 1.05em #fff7ea, 2.35em 1.05em #fff7ea, 2.9em 1.05em #fff7ea,
		1em 1.55em #fff7ea, 1.55em 1.55em #fff7ea, 2.1em 1.55em #fff7ea, 2.65em 1.55em #fff7ea, 3.2em 1.55em #fff7ea,
		0.95em 2.05em #fff7ea, 1.5em 2.05em #fff7ea, 2.05em 2.05em #fff7ea, 2.6em 2.05em #fff7ea, 3.15em 2.05em #fff7ea,
		1.2em 2.55em #f0dfc9, 1.75em 2.55em #fff7ea, 2.3em 2.55em #fff7ea, 2.85em 2.55em #f0dfc9,
		1.55em 3.05em #ead8bf, 2.1em 3.05em #fff7ea, 2.65em 3.05em #ead8bf,
		-1.1em 4.2em #9fc8d3, 5.25em 4.2em #9fc8d3;
	animation: hoppyCameoWave 760ms steps(2, end) infinite;
	left: 3.95em;
	top: 4.4em;
}

.hoppy-cameo__sprite--oliver .hoppy-cameo__detail::before {
	background: #111;
	box-shadow:
		4.2em 0 #111,
		1.82em 1.18em #111,
		2.08em 1.18em #111,
		2.34em 1.18em #111,
		1.96em 1.44em #111,
		2.22em 1.44em #111,
		2.08em 1.78em #111,
		1.7em 2.28em #111,
		2.08em 2.5em #111,
		2.46em 2.28em #111;
	content: "";
	display: block;
	height: 0.24em;
	left: 0.17em;
	position: absolute;
	top: 0.18em;
	width: 0.24em;
}

.hoppy-cameo__sprite--oliver .hoppy-cameo__detail::after {
	background: #d9c7b1;
	box-shadow:
		3.25em 0 #d9c7b1,
		1.28em 0.42em #f8ead8,
		1.68em 0.58em #f8ead8,
		2.08em 0.64em #f8ead8,
		2.48em 0.58em #f8ead8,
		2.88em 0.42em #f8ead8,
		1.06em 1.26em #d9c7b1,
		1.46em 1.52em #f8ead8,
		2.08em 1.72em #d9c7b1,
		2.7em 1.52em #f8ead8,
		3.1em 1.26em #d9c7b1;
	content: "";
	display: block;
	height: 0.22em;
	left: 0.27em;
	position: absolute;
	top: 0.48em;
	width: 0.22em;
}

.hoppy-cameo__sprite--mrrrcat::before {
	background: #4f4a45;
	box-shadow:
		2em 1em #4f4a45, 9em 1em #4f4a45,
		1em 2em #4f4a45, 2em 2em #d79a9a, 3em 2em #4f4a45, 8em 2em #4f4a45, 9em 2em #d79a9a, 10em 2em #4f4a45,
		1em 3em #4f4a45, 2em 3em #4f4a45, 3em 3em #4f4a45, 4em 3em #f4ead8, 5em 3em #f4ead8, 6em 3em #f4ead8, 7em 3em #f4ead8, 8em 3em #4f4a45, 9em 3em #4f4a45, 10em 3em #4f4a45,
		1em 4em #4f4a45, 2em 4em #4f4a45, 3em 4em #f4ead8, 4em 4em #f4ead8, 5em 4em #f4ead8, 6em 4em #f4ead8, 7em 4em #f4ead8, 8em 4em #f4ead8, 9em 4em #4f4a45, 10em 4em #4f4a45,
		2em 5em #4f4a45, 3em 5em #f4ead8, 4em 5em #f4ead8, 5em 5em #f4ead8, 6em 5em #f4ead8, 7em 5em #f4ead8, 8em 5em #f4ead8, 9em 5em #4f4a45,
		3em 6em #f4ead8, 4em 6em #f4ead8, 5em 6em #f4ead8, 6em 6em #f4ead8, 7em 6em #f4ead8, 8em 6em #f4ead8,
		4em 7em #a8d5c2, 5em 7em #a8d5c2, 6em 7em #a8d5c2, 7em 7em #a8d5c2,
		4em 8em #4f4a45, 5em 8em #4f4a45, 6em 8em #a8d5c2, 7em 8em #4f4a45,
		4em 9em #4f4a45, 5em 9em #4f4a45, 6em 9em #a8d5c2, 7em 9em #4f4a45,
		4em 10em #4f4a45, 5em 10em #4f4a45, 6em 10em #4f4a45, 7em 10em #4f4a45,
		5em 11em #4f4a45, 6em 11em #4f4a45;
}

.hoppy-cameo__sprite--mrrrcat::after {
	background: #2e6b9e;
	box-shadow:
		3em 4em #2e6b9e, 8em 4em #2e6b9e,
		5.6em 5.35em #d98995,
		4.5em 6.45em #111, 5.3em 6.8em #111, 6.1em 6.8em #111, 7em 6.45em #111,
		0.5em 5.5em #111, 1.5em 5.9em #111, 2.5em 6.3em #111,
		9.5em 6.3em #111, 10.5em 5.9em #111, 11.5em 5.5em #111,
		2em 8em #a8d5c2, 3em 8em #a8d5c2, 8em 8em #a8d5c2, 9em 8em #a8d5c2,
		7em 9em #a8d5c2, 7em 10em #a8d5c2;
	animation: hoppyCameoWave 760ms steps(2, end) infinite;
}

.hoppy-cameo__sprite--oliver::before {
	background: #e8dcc8;
	box-shadow:
		1em 2em #d6cab8, 2em 2em #d6cab8, 9em 2em #d6cab8, 10em 2em #d6cab8,
		1em 3em #d6cab8, 2em 3em #d6cab8, 3em 3em #e8dcc8, 4em 3em #e8dcc8, 5em 3em #e8dcc8, 6em 3em #e8dcc8, 7em 3em #e8dcc8, 8em 3em #e8dcc8, 9em 3em #d6cab8, 10em 3em #d6cab8,
		2em 4em #d6cab8, 3em 4em #e8dcc8, 4em 4em #e8dcc8, 5em 4em #e8dcc8, 6em 4em #e8dcc8, 7em 4em #e8dcc8, 8em 4em #e8dcc8, 9em 4em #d6cab8,
		3em 5em #e8dcc8, 4em 5em #e8dcc8, 5em 5em #e8dcc8, 6em 5em #e8dcc8, 7em 5em #e8dcc8, 8em 5em #e8dcc8,
		3em 6em #e8dcc8, 4em 6em #e8dcc8, 5em 6em #e8dcc8, 6em 6em #e8dcc8, 7em 6em #e8dcc8, 8em 6em #e8dcc8,
		4em 7em #b7d8e2, 5em 7em #b7d8e2, 6em 7em #b7d8e2, 7em 7em #b7d8e2,
		3em 8em #e8dcc8, 4em 8em #e8dcc8, 5em 8em #b7d8e2, 6em 8em #b7d8e2, 7em 8em #e8dcc8, 8em 8em #e8dcc8,
		2em 9em #e8dcc8, 3em 9em #e8dcc8, 4em 9em #e8dcc8, 7em 9em #e8dcc8, 8em 9em #e8dcc8, 9em 9em #e8dcc8,
		2em 10em #e8dcc8, 3em 10em #e8dcc8, 8em 10em #e8dcc8, 9em 10em #e8dcc8;
}

.hoppy-cameo__sprite--oliver::after {
	background: #111;
	box-shadow:
		4em 4.4em #111, 8em 4.4em #111,
		5.8em 5.6em #111, 6.2em 5.6em #111,
		5.6em 6.5em #111, 6.2em 6.9em #111, 6.8em 6.5em #111,
		3em 7.8em #b7d8e2, 8em 7.8em #b7d8e2,
		6em 9em #b7d8e2, 6em 10em #b7d8e2;
	animation: hoppyCameoWave 760ms steps(2, end) infinite;
}

.hoppy-cameo__text {
	background: #111;
	border: 2px solid #f4ead8;
	color: #f4ead8;
	display: block;
	font-family: "Courier New", Courier, monospace;
	font-size: 0.68rem;
	font-weight: 900;
	line-height: 1.1;
	max-width: 118px;
	padding: 6px;
	text-transform: uppercase;
}

.hoppy-pixel-bunny {
	--p: 8px;
	font-size: var(--p);
	height: 16em;
	position: relative;
	width: 14em;
}

.hoppy-pixel-bunny::before,
.hoppy-pixel-bunny::after {
	background: transparent;
	content: "";
	display: block;
	height: 1em;
	left: 0;
	position: absolute;
	top: 0;
	width: 1em;
	z-index: 1;
}

.hoppy-pixel-bunny::before {
	animation: hoppyLeftArmIdle 4.8s steps(2, end) infinite;
	box-shadow:
		3em 9em #c9b89d,
		2em 10em #c9b89d, 3em 10em #e3d4bb,
		2em 11em #c9b89d,
		3em 12em #c9b89d;
}

.hoppy-pixel-bunny::after {
	animation: hoppyRightArmIdle 4.8s steps(2, end) infinite;
	box-shadow:
		10em 9em #c9b89d,
		10em 10em #e3d4bb, 11em 10em #c9b89d,
		11em 11em #c9b89d,
		10em 12em #c9b89d;
}

.hoppy-pixel-bunny--hero {
	--p: 13px;
}

.hoppy-pixel-bunny--player {
	--p: 5px;
	bottom: 14px;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	transition: left 95ms linear;
	z-index: 15;
}

.hoppy-pixel-bunny--player.is-hit {
	filter: brightness(0.8);
}

.hoppy-pixel-bunny--player.is-hopping {
	animation: hoppyHop 260ms steps(2, end) 1;
}

.hoppy-pixel-bunny--player.is-dizzy {
	animation: hoppyDizzy 360ms steps(2, end) 1;
}

.hoppy-pixel-bunny--player.is-spinning {
	animation: hoppySpin 560ms steps(4, end) 1;
	transform-origin: 50% 62%;
}

.hoppy-pixel-bunny__ear,
.hoppy-pixel-bunny__fur,
.hoppy-pixel-bunny__bow,
.hoppy-pixel-bunny__face,
.hoppy-pixel-bunny__detail {
	display: block;
	height: 1em;
	left: 0;
	position: absolute;
	top: 0;
	width: 1em;
	z-index: 2;
}

.hoppy-pixel-bunny__ear {
	background: transparent;
	transform-origin: 50% 100%;
}

.hoppy-pixel-bunny__ear--left {
	box-shadow:
		3em 4em #c9b89d, 4em 4em #c9b89d,
		2em 5em #c9b89d, 3em 5em #e3d4bb,
		2em 6em #c9b89d, 3em 6em #e3d4bb,
		1em 7em #c9b89d, 2em 7em #e3d4bb,
		1em 8em #c9b89d, 2em 8em #e3d4bb,
		1em 9em #c9b89d, 2em 9em #e3d4bb,
		1em 10em #c9b89d, 2em 10em #c9b89d,
		2em 11em #c9b89d;
}

.hoppy-pixel-bunny__ear--right {
	box-shadow:
		9em 4em #c9b89d, 10em 4em #c9b89d,
		10em 5em #e3d4bb, 11em 5em #c9b89d,
		10em 6em #e3d4bb, 11em 6em #c9b89d,
		11em 7em #e3d4bb, 12em 7em #c9b89d,
		11em 8em #e3d4bb, 12em 8em #c9b89d,
		11em 9em #e3d4bb, 12em 9em #c9b89d,
		11em 10em #c9b89d, 12em 10em #c9b89d,
		11em 11em #c9b89d;
}

.hoppy-pixel-bunny__fur {
	background: transparent;
	box-shadow:
		5em 4em #e3d4bb, 6em 4em #c9b89d, 7em 4em #c9b89d, 8em 4em #e3d4bb,
		4em 5em #c9b89d, 5em 5em #e3d4bb, 6em 5em #c9b89d, 7em 5em #c9b89d, 8em 5em #e3d4bb, 9em 5em #c9b89d,
		4em 6em #c9b89d, 5em 6em #c9b89d, 6em 6em #e3d4bb, 7em 6em #e3d4bb, 8em 6em #c9b89d, 9em 6em #c9b89d,
		4em 7em #c9b89d, 5em 7em #e3d4bb, 6em 7em #c9b89d, 7em 7em #c9b89d, 8em 7em #e3d4bb, 9em 7em #c9b89d,
		5em 8em #c9b89d, 6em 8em #c9b89d, 7em 8em #c9b89d, 8em 8em #c9b89d,
		4em 9em #c9b89d, 5em 9em #e3d4bb, 6em 9em #c9b89d, 7em 9em #c9b89d, 8em 9em #e3d4bb, 9em 9em #c9b89d,
		4em 10em #c9b89d, 5em 10em #c9b89d, 6em 10em #e3d4bb, 7em 10em #e3d4bb, 8em 10em #c9b89d, 9em 10em #c9b89d,
		4em 11em #c9b89d, 5em 11em #c9b89d, 6em 11em #c9b89d, 7em 11em #c9b89d, 8em 11em #c9b89d, 9em 11em #c9b89d,
		3em 12em #c9b89d, 4em 12em #c9b89d, 5em 12em #c9b89d, 8em 12em #c9b89d, 9em 12em #c9b89d, 10em 12em #c9b89d,
		3em 13em #c9b89d, 4em 13em #c9b89d, 9em 13em #c9b89d, 10em 13em #c9b89d;
}

.hoppy-pixel-bunny__bow {
	background: transparent;
	box-shadow:
		5em 3em #7c2f24, 8em 3em #7c2f24,
		4em 4em #7c2f24, 5em 4em #7c2f24, 6em 4em #7c2f24, 7em 4em #7c2f24, 8em 4em #7c2f24, 9em 4em #7c2f24;
}

.hoppy-pixel-bunny.has-ribbon-shield .hoppy-pixel-bunny__bow {
	animation: hoppyRibbonShield 700ms steps(1, end) infinite;
}

.hoppy-pixel-bunny.has-ribbon-shield .hoppy-pixel-bunny__detail {
	animation: hoppyShieldSparkle 700ms steps(2, end) infinite;
}

.hoppy-pixel-bunny.has-rainbow-sparkle {
	filter: brightness(1.18) saturate(1.25);
}

.hoppy-pixel-bunny.has-rainbow-sparkle .hoppy-pixel-bunny__bow {
	animation: hoppyRibbonShield 520ms steps(1, end) infinite;
}

.hoppy-pixel-bunny.has-rainbow-sparkle .hoppy-pixel-bunny__detail {
	animation: hoppyRainbowSparkle 520ms steps(3, end) infinite;
}

.hoppy-pixel-bunny__face {
	background: transparent;
	box-shadow:
		5em 6em #111, 8em 6em #111,
		4em 7em #d99494, 6em 7em #f4ead8, 7em 7em #f4ead8, 9em 7em #d99494,
		5em 8em #f4ead8, 6em 8em #f4ead8, 7em 8em #f4ead8, 8em 8em #f4ead8,
		5em 10em #f4ead8, 8em 10em #f4ead8;
}

.hoppy-pixel-bunny.is-happy .hoppy-pixel-bunny__face {
	box-shadow:
		5em 6em #111, 8em 6em #111,
		4em 7em #d99494, 6em 7em #f4ead8, 7em 7em #f4ead8, 9em 7em #d99494,
		5em 8em #f4ead8, 6em 8em #f4ead8, 7em 8em #f4ead8, 8em 8em #f4ead8,
		5em 10em #f4ead8, 8em 10em #f4ead8;
}

.hoppy-pixel-bunny.is-worried .hoppy-pixel-bunny__face,
.hoppy-pixel-bunny.is-sad .hoppy-pixel-bunny__face {
	box-shadow:
		5em 6em #111, 8em 6em #111,
		4em 7em #d99494, 6em 7em #f4ead8, 7em 7em #f4ead8, 9em 7em #d99494,
		5em 8em #f4ead8, 6em 8em #f4ead8, 7em 8em #f4ead8, 8em 8em #f4ead8,
		5em 10em #f4ead8, 8em 10em #f4ead8;
}

.hoppy-pixel-bunny__detail {
	height: 0.4em;
	width: 0.4em;
	background: #f4ead8;
	box-shadow:
		5.18em 6.12em #f4ead8,
		8.18em 6.12em #f4ead8,
		5.58em 6.52em #111,
		8.58em 6.52em #111,
		6.85em 7.12em #7c2f24,
		6.85em 7.92em #111,
		6.55em 8.32em #111,
		7.18em 8.32em #111,
		5.28em 7.28em #f0b4aa,
		8.98em 7.28em #f0b4aa;
}

.hoppy-pixel-bunny.is-happy .hoppy-pixel-bunny__detail {
	box-shadow:
		5.18em 6.12em #f4ead8,
		8.18em 6.12em #f4ead8,
		5.58em 6.52em #111,
		8.58em 6.52em #111,
		6.85em 7.12em #7c2f24,
		6.28em 7.82em #111,
		6.55em 8.32em #111,
		6.85em 8.52em #111,
		7.18em 8.32em #111,
		7.48em 7.82em #111,
		5.28em 7.28em #f0b4aa,
		8.98em 7.28em #f0b4aa;
}

.hoppy-pixel-bunny.is-worried .hoppy-pixel-bunny__detail {
	box-shadow:
		5.18em 6.12em #f4ead8,
		8.18em 6.12em #f4ead8,
		5.18em 6.58em #111,
		5.58em 6.68em #111,
		8.58em 6.68em #111,
		8.98em 6.58em #111,
		6.85em 7.12em #7c2f24,
		6.55em 8.25em #111,
		6.85em 8.25em #111,
		7.18em 8.25em #111,
		5.28em 7.28em #f0b4aa,
		8.98em 7.28em #f0b4aa;
}

.hoppy-pixel-bunny.is-sad .hoppy-pixel-bunny__detail {
	box-shadow:
		5.18em 6.12em #f4ead8,
		8.18em 6.12em #f4ead8,
		5.58em 6.82em #111,
		8.58em 6.82em #111,
		6.85em 7.12em #7c2f24,
		6.55em 8.55em #111,
		6.85em 8.15em #111,
		7.18em 8.55em #111,
		5.28em 7.28em #f0b4aa,
		8.98em 7.28em #f0b4aa;
}

.hoppy-pixel-bunny.is-hit .hoppy-pixel-bunny__detail,
.hoppy-pixel-bunny.is-dizzy .hoppy-pixel-bunny__detail {
	box-shadow:
		5.1em 6.08em #111,
		5.55em 6.48em #111,
		5.95em 6.08em #111,
		8.1em 6.08em #111,
		8.55em 6.48em #111,
		8.95em 6.08em #111,
		6.85em 7.12em #7c2f24,
		6.55em 8.32em #111,
		6.85em 8.15em #111,
		7.18em 8.32em #111,
		5.28em 7.28em #f0b4aa,
		8.98em 7.28em #f0b4aa;
}

.hoppy-pixel-bunny.is-rare-catch .hoppy-pixel-bunny__detail {
	box-shadow:
		5.02em 6.02em #d8b85a,
		5.58em 6.52em #111,
		5.98em 6.02em #d8b85a,
		8.02em 6.02em #d8b85a,
		8.58em 6.52em #111,
		8.98em 6.02em #d8b85a,
		6.85em 7.12em #7c2f24,
		6.28em 7.82em #111,
		6.55em 8.32em #111,
		6.85em 8.52em #111,
		7.18em 8.32em #111,
		7.48em 7.82em #111,
		5.28em 7.28em #f0b4aa,
		8.98em 7.28em #f0b4aa;
}

.hoppy-pixel-bunny.is-alert .hoppy-pixel-bunny__detail {
	box-shadow:
		5.08em 6.08em #f4ead8,
		8.08em 6.08em #f4ead8,
		5.48em 6.48em #111,
		8.48em 6.48em #111,
		6.85em 7.12em #7c2f24,
		6.55em 8.22em #111,
		6.85em 8.02em #111,
		7.18em 8.22em #111,
		5.28em 7.28em #f0b4aa,
		8.98em 7.28em #f0b4aa;
}

.hoppy-pixel-bunny.is-tired .hoppy-pixel-bunny__detail {
	box-shadow:
		5.18em 6.32em #f4ead8,
		8.18em 6.32em #f4ead8,
		5.58em 6.72em #111,
		8.58em 6.72em #111,
		6.85em 7.12em #7c2f24,
		6.55em 8.32em #111,
		6.85em 8.15em #111,
		7.18em 8.32em #111,
		5.28em 7.28em #f0b4aa,
		8.98em 7.28em #f0b4aa;
}

.hoppy-pixel-bunny--hero .hoppy-pixel-bunny__ear--left,
.hoppy-pixel-bunny--player .hoppy-pixel-bunny__ear--left {
	animation: hoppyLeftEarIdle 4.2s steps(2, end) infinite;
}

.hoppy-pixel-bunny--hero .hoppy-pixel-bunny__ear--right,
.hoppy-pixel-bunny--player .hoppy-pixel-bunny__ear--right {
	animation: hoppyRightEarIdle 4.2s steps(2, end) infinite;
}

.hoppy-pixel-bunny--player.is-moving .hoppy-pixel-bunny__ear--left,
.hoppy-pixel-bunny.is-happy .hoppy-pixel-bunny__ear--left {
	animation: hoppyLeftEarMove 320ms steps(2, end) infinite;
}

.hoppy-pixel-bunny--player.is-moving .hoppy-pixel-bunny__ear--right,
.hoppy-pixel-bunny.is-happy .hoppy-pixel-bunny__ear--right {
	animation: hoppyRightEarMove 320ms steps(2, end) infinite;
}

.hoppy-pixel-bunny--player.is-alert .hoppy-pixel-bunny__ear--left {
	animation: hoppyLeftEarAlert 300ms steps(2, end) 2;
}

.hoppy-pixel-bunny--player.is-alert .hoppy-pixel-bunny__ear--right {
	animation: hoppyRightEarAlert 300ms steps(2, end) 2;
}

.hoppy-pixel-bunny--player.is-moving::before,
.hoppy-pixel-bunny.is-happy::before {
	animation: hoppyLeftArmOpen 420ms steps(2, end) infinite;
}

.hoppy-pixel-bunny--player.is-moving::after,
.hoppy-pixel-bunny.is-happy::after {
	animation: hoppyRightArmOpen 420ms steps(2, end) infinite;
}

.hoppy-pixel-bunny--player.is-rare-catch::before,
.hoppy-pixel-bunny--player.is-rare-catch::after {
	animation-duration: 180ms;
}

.hoppy-pixel-bunny--player.is-rare-catch {
	filter: brightness(1.18);
}

.hoppy-pixel-bunny--player.is-tired {
	filter: saturate(0.85);
}

.hoppy-object {
	--p: 6px;
	font-size: var(--p);
	height: 8em;
	margin-left: -4em;
	position: absolute;
	width: 8em;
	z-index: 10;
}

.hoppy-object::before,
.hoppy-object::after {
	content: "";
	display: block;
	height: 1em;
	left: 0;
	position: absolute;
	top: 0;
	width: 1em;
}

.hoppy-object--gift {
	transform: translateX(-2px) translateY(2px) scale(0.78);
	transform-origin: 50% 50%;
}

.hoppy-object--carrot {
	transform: translateY(2px) scale(0.92);
	transform-origin: 50% 50%;
}

.hoppy-object--block {
	transform: translateY(5px) scale(0.9);
	transform-origin: 50% 50%;
}

.hoppy-object--snowdrop {
	transform: translateY(4px) scale(0.88);
	transform-origin: 50% 50%;
}

.hoppy-object--goldRibbon,
.hoppy-object--rainbowSparkle,
.hoppy-object--clock,
.hoppy-object--marshyellow {
	transform: translateY(3px) scale(0.88);
	transform-origin: 50% 50%;
}

.hoppy-object--mallow::before {
	background: #f4ead8;
	box-shadow:
		2em 1em #f4ead8, 3em 1em #f4ead8, 4em 1em #f4ead8, 5em 1em #f4ead8,
		1em 2em #f4ead8, 2em 2em #f4ead8, 3em 2em #f4ead8, 4em 2em #f4ead8, 5em 2em #f4ead8, 6em 2em #f4ead8,
		1em 3em #f4ead8, 2em 3em #f4ead8, 3em 3em #f4ead8, 4em 3em #f4ead8, 5em 3em #f4ead8, 6em 3em #f4ead8,
		2em 4em #f4ead8, 3em 4em #f4ead8, 4em 4em #f4ead8, 5em 4em #f4ead8;
}

.hoppy-object--mallow::after {
	background: #111;
	box-shadow: 3em 3em #111, 5em 3em #111, 4em 4em #7c2f24;
}

.hoppy-object--gift::before {
	background: transparent;
	box-shadow:
		2em 0 #7c2f24, 3em 0 #7c2f24, 5em 0 #7c2f24, 6em 0 #7c2f24,
		1em 1em #7c2f24, 2em 1em #7c2f24, 3em 1em #7c2f24, 4em 1em #7c2f24, 5em 1em #7c2f24, 6em 1em #7c2f24, 7em 1em #7c2f24,
		0 2em #d8b85a, 1em 2em #f2c85b, 2em 2em #d8b85a, 3em 2em #7c2f24, 4em 2em #7c2f24, 5em 2em #d8b85a, 6em 2em #f2c85b, 7em 2em #d8b85a,
		0 3em #d8b85a, 1em 3em #d8b85a, 2em 3em #f2c85b, 3em 3em #7c2f24, 4em 3em #7c2f24, 5em 3em #f2c85b, 6em 3em #d8b85a, 7em 3em #d8b85a,
		0 4em #7c2f24, 1em 4em #7c2f24, 2em 4em #7c2f24, 3em 4em #7c2f24, 4em 4em #7c2f24, 5em 4em #7c2f24, 6em 4em #7c2f24, 7em 4em #7c2f24,
		0 5em #d8b85a, 1em 5em #f2c85b, 2em 5em #d8b85a, 3em 5em #7c2f24, 4em 5em #7c2f24, 5em 5em #d8b85a, 6em 5em #f2c85b, 7em 5em #d8b85a,
		0 6em #d8b85a, 1em 6em #d8b85a, 2em 6em #f2c85b, 3em 6em #7c2f24, 4em 6em #7c2f24, 5em 6em #f2c85b, 6em 6em #d8b85a, 7em 6em #d8b85a,
		0 7em #d8b85a, 1em 7em #d8b85a, 2em 7em #d8b85a, 3em 7em #d8b85a, 4em 7em #d8b85a, 5em 7em #d8b85a, 6em 7em #d8b85a, 7em 7em #d8b85a;
}

.hoppy-object--gift::after {
	background: transparent;
	box-shadow:
		3em 1em #f0a090, 4em 1em #f0a090,
		1em 2em #f7d978,
		6em 2em #f7d978,
		1em 5em #f7d978,
		6em 5em #f7d978;
}

.hoppy-object--goldRibbon::before {
	background: transparent;
	box-shadow:
		2em 1em #d8b85a, 3em 1em #f4ead8, 5em 1em #f4ead8, 6em 1em #d8b85a,
		1em 2em #d8b85a, 2em 2em #d8b85a, 3em 2em #d8b85a, 4em 2em #f4ead8, 5em 2em #d8b85a, 6em 2em #d8b85a, 7em 2em #d8b85a,
		0 3em #d8b85a, 1em 3em #d8b85a, 2em 3em #f4ead8, 3em 3em #d8b85a, 4em 3em #d8b85a, 5em 3em #d8b85a, 6em 3em #f4ead8, 7em 3em #d8b85a, 8em 3em #d8b85a,
		1em 4em #d8b85a, 2em 4em #d8b85a, 3em 4em #d8b85a, 4em 4em #f4ead8, 5em 4em #d8b85a, 6em 4em #d8b85a, 7em 4em #d8b85a,
		2em 5em #d8b85a, 3em 5em #f4ead8, 5em 5em #f4ead8, 6em 5em #d8b85a;
}

.hoppy-object--rainbowSparkle::before {
	background: transparent;
	box-shadow:
		1em 2em #d64d4d, 2em 1em #d64d4d, 3em 1em #f06ea9, 4em 2em #f06ea9, 5em 3em #d8b85a, 6em 4em #63b46d,
		1em 3em #d8792f, 2em 2em #d8792f, 3em 2em #d8b85a, 4em 3em #d8b85a, 5em 4em #63b46d, 6em 5em #5f9df7,
		1em 4em #d8b85a, 2em 3em #63b46d, 3em 3em #63b46d, 4em 4em #5f9df7, 5em 5em #7d4ac7;
	animation: hoppyRainbowFloat 640ms steps(2, end) infinite;
}

.hoppy-object--rainbowSparkle::after {
	background: transparent;
	box-shadow:
		3em 0 #f4ead8,
		0 3em #f4ead8,
		7em 3em #f4ead8,
		4em 7em #f4ead8;
	animation: hoppyRareTwinkle 680ms steps(2, end) infinite;
}

.hoppy-object--carrot::before {
	background: transparent;
	box-shadow:
		4em 0 #4f7a37,
		3em 1em #4f7a37, 4em 1em #6aa657, 5em 1em #4f7a37,
		3em 2em #d8792f, 4em 2em #e88b3e, 5em 2em #d8792f,
		3em 3em #d8792f, 4em 3em #e88b3e, 5em 3em #d8792f,
		3em 4em #d8792f, 4em 4em #e88b3e, 5em 4em #d8792f,
		4em 5em #d8792f, 5em 5em #e88b3e,
		4em 6em #d8792f,
		4em 7em #d8792f;
}

.hoppy-object--clock::before {
	background: #f4ead8;
	box-shadow:
		2em 0 #d8b85a, 3em 0 #d8b85a, 4em 0 #d8b85a, 5em 0 #d8b85a,
		1em 1em #d8b85a, 2em 1em #f4ead8, 3em 1em #f4ead8, 4em 1em #f4ead8, 5em 1em #f4ead8, 6em 1em #d8b85a,
		1em 2em #d8b85a, 2em 2em #f4ead8, 3em 2em #111, 4em 2em #f4ead8, 5em 2em #f4ead8, 6em 2em #d8b85a,
		1em 3em #d8b85a, 2em 3em #f4ead8, 3em 3em #111, 4em 3em #111, 5em 3em #f4ead8, 6em 3em #d8b85a,
		1em 4em #d8b85a, 2em 4em #f4ead8, 3em 4em #f4ead8, 4em 4em #f4ead8, 5em 4em #f4ead8, 6em 4em #d8b85a,
		2em 5em #d8b85a, 3em 5em #d8b85a, 4em 5em #d8b85a, 5em 5em #d8b85a;
}

.hoppy-object--heart::before {
	background: #b7485d;
	box-shadow:
		2em 1em #b7485d, 3em 1em #b7485d, 5em 1em #b7485d, 6em 1em #b7485d,
		1em 2em #b7485d, 2em 2em #d87386, 3em 2em #b7485d, 4em 2em #b7485d, 5em 2em #d87386, 6em 2em #b7485d, 7em 2em #b7485d,
		1em 3em #b7485d, 2em 3em #b7485d, 3em 3em #d87386, 4em 3em #b7485d, 5em 3em #b7485d, 6em 3em #b7485d, 7em 3em #b7485d,
		2em 4em #b7485d, 3em 4em #b7485d, 4em 4em #d87386, 5em 4em #b7485d, 6em 4em #b7485d,
		3em 5em #b7485d, 4em 5em #b7485d, 5em 5em #b7485d,
		4em 6em #b7485d;
}

.hoppy-object--block::before {
	background: transparent;
	box-shadow:
		1em 1em #7b5fa3, 2em 1em #aa8ed0, 3em 1em #7b5fa3, 4em 1em #4d3b67, 5em 1em #7b5fa3,
		1em 2em #4d3b67, 2em 2em #7b5fa3, 3em 2em #c95f5f, 4em 2em #aa8ed0, 5em 2em #4d3b67,
		1em 3em #aa8ed0, 2em 3em #c95f5f, 3em 3em #7b5fa3, 4em 3em #4d3b67, 5em 3em #aa8ed0,
		1em 4em #4d3b67, 2em 4em #7b5fa3, 3em 4em #aa8ed0, 4em 4em #7b5fa3, 5em 4em #c95f5f,
		1em 5em #7b5fa3, 2em 5em #4d3b67, 3em 5em #7b5fa3, 4em 5em #aa8ed0, 5em 5em #7b5fa3;
}

.hoppy-object--snowdrop::before {
	background: transparent;
	box-shadow:
		2em 0 #6aa657, 3em 0 #6aa657,
		2em 1em #4f7a37, 4em 1em #6aa657,
		2em 2em #4f7a37, 5em 2em #6aa657,
		2em 3em #4f7a37, 5em 3em #4f7a37,
		1em 4em #6aa657, 2em 4em #4f7a37,
		1em 5em #6aa657, 2em 5em #4f7a37,
		0 6em #4f7a37, 2em 6em #4f7a37,
		2em 7em #4f7a37,
		5em 4em #4f7a37, 6em 4em #6aa657;
	animation: hoppySoftBounce 760ms steps(2, end) infinite;
	transform-origin: 50% 6em;
}

.hoppy-object--snowdrop::after {
	background: transparent;
	box-shadow:
		5em 3em #6aa657, 6em 3em #4f7a37,
		5em 4em #f4ead8, 7em 4em #f4ead8,
		4em 5em #f4ead8, 6em 5em #111, 8em 5em #f4ead8,
		4em 6em #fff7e8, 6em 6em #f4ead8, 8em 6em #fff7e8,
		5em 7em #eef4e8, 6em 7em #111, 7em 7em #eef4e8,
		6em 8em #f4ead8;
	left: 0;
	top: 0;
}

.hoppy-object--marshyellow::before {
	background: transparent;
	box-shadow:
		2em 0 #111, 3em 0 #111, 4em 0 #111, 5em 0 #111,
		1em 1em #111, 2em 1em #f4ead8, 3em 1em #f4ead8, 4em 1em #f4ead8, 5em 1em #f4ead8, 6em 1em #111,
		1em 2em #111, 2em 2em #f4ead8, 3em 2em #f4ead8, 4em 2em #f4ead8, 5em 2em #f4ead8, 6em 2em #111,
		1em 3em #111, 2em 3em #f4ead8, 3em 3em #111, 4em 3em #f4ead8, 5em 3em #111, 6em 3em #111,
		1em 4em #111, 2em 4em #f4ead8, 3em 4em #f4ead8, 4em 4em #7d4ac7, 5em 4em #f4ead8, 6em 4em #111,
		1em 5em #111, 2em 5em #f4ead8, 3em 5em #111, 4em 5em #111, 5em 5em #f4ead8, 6em 5em #111,
		2em 6em #111, 3em 6em #111, 4em 6em #111, 5em 6em #111,
		5em 7em #d8b85a;
	animation: hoppyMarshSmile 980ms steps(2, end) infinite;
	transform-origin: 50% 70%;
}

.hoppy-object--marshyellow::after {
	background: transparent;
	box-shadow:
		1em 0 #7d4ac7,
		0 1em #111,
		1em 1em #7d4ac7;
	left: 3.7em;
	top: 4.1em;
	animation: hoppyTonguePop 520ms steps(2, end) infinite;
}

.hoppy-object--rare {
	filter: drop-shadow(0 0 6px #d8b85a);
}

.hoppy-object.is-good {
	animation: hoppyCatchAbsorb 180ms steps(3, end) 1 forwards;
	filter: brightness(1.5);
	z-index: 24;
}

.hoppy-object--rare.is-good {
	animation: hoppyRareCelebrate 480ms steps(3, end) 1;
	filter: drop-shadow(0 0 10px #d8b85a) brightness(1.5);
	z-index: 24;
}

.hoppy-object.is-bad {
	filter: invert(1);
}

.hoppy-object.is-missed {
	animation: hoppyMissedDissolve 220ms steps(3, end) 1 forwards;
	filter: brightness(0.7);
}

.hoppy-flash {
	background: #111;
	border: 2px solid #f4ead8;
	color: #f4ead8;
	font-family: "Courier New", Courier, monospace;
	font-size: 1rem;
	font-weight: 900;
	left: 50%;
	padding: 8px 10px;
	position: absolute;
	text-transform: uppercase;
	top: 64%;
	transform: translateX(-50%);
	z-index: 30;
}

.hoppy-start-sign {
	background: #111;
	border: 3px solid #f4ead8;
	box-shadow: 0 0 0 3px #5b3f2d;
	color: #f4ead8;
	font-family: "Courier New", Courier, monospace;
	font-weight: 900;
	left: 50%;
	line-height: 1.1;
	padding: 10px 14px;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: -90px;
	transform: translateX(-50%);
	width: min(82%, 360px);
	z-index: 28;
	animation: hoppyStartSignDrop 5.2s steps(12, end) 1 forwards;
}

.hoppy-start-sign strong,
.hoppy-start-sign span,
.hoppy-start-sign small {
	display: block;
}

.hoppy-start-sign strong {
	color: #d8b85a;
	font-size: 1rem;
}

.hoppy-start-sign span {
	font-size: 0.86rem;
	margin-top: 4px;
}

.hoppy-start-sign small {
	color: #f0a090;
	font-size: 0.68rem;
	margin-top: 4px;
}

.hoppy-countdown {
	align-items: center;
	background: #111;
	border: 3px solid #d8b85a;
	box-shadow: 0 0 0 3px #111;
	color: #f4ead8;
	display: flex;
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(1.8rem, 7vw, 3rem);
	font-weight: 900;
	height: 1.25em;
	justify-content: center;
	right: 12px;
	line-height: 1;
	position: absolute;
	top: 72px;
	transform: none;
	width: 1.45em;
	z-index: 32;
	animation: hoppyCountdownPulse 1s steps(2, end) infinite;
}

.hoppy-flash--good {
	color: #d8b85a;
}

.hoppy-flash--milestone {
	background: #d8b85a;
	border-color: #f4ead8;
	color: #111;
	top: 30%;
	transform: translate(-50%, -50%) scale(1.08);
}

.hoppy-flash--time {
	background: #f4ead8;
	border-color: #d8b85a;
	color: #111;
	top: 42%;
}

.hoppy-flash--speed {
	background: #7c2f24;
	border-color: #f4ead8;
	color: #f4ead8;
	top: 17%;
}

.hoppy-flash--bad {
	border-color: #7c2f24;
	color: #f0a090;
	top: 54%;
}

.hoppy-game__controls {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 8px auto 0;
	max-width: 380px;
	position: relative;
	touch-action: none;
	width: min(100%, 380px);
}

.hoppy-game__controls .hoppy-btn {
	align-items: center;
	display: flex;
	font-size: 1rem;
	min-height: 52px;
	padding: 0 14px;
	position: relative;
	touch-action: none;
	width: 100%;
	z-index: 2;
	-webkit-user-select: none;
}

.hoppy-result {
	align-items: center;
	color: #f4ead8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(70vh, 520px);
	overflow: hidden;
	position: relative;
	text-align: center;
}

.hoppy-result h2,
.hoppy-result p {
	color: #f4ead8;
	max-width: 580px;
}

.hoppy-result [data-hoppy-result-copy].is-reward-copy {
	background: #111;
	border: 3px solid #d8b85a;
	color: #f4ead8;
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	font-weight: 900;
	padding: 12px;
	text-transform: uppercase;
}

.hoppy-result__reward {
	background: #111;
	border: 3px solid #f4ead8;
	color: #f4ead8;
	font-family: "Courier New", Courier, monospace;
	font-size: clamp(1rem, 3vw, 1.55rem);
	font-weight: 900;
	margin: 10px 0 18px;
	max-width: 560px;
	padding: 16px;
	width: 100%;
}

.hoppy-result__reward.is-winner {
	background: #d8b85a;
	color: #111;
}

.hoppy-result__reward.is-jackpot {
	animation: hoppyRewardPulse 760ms steps(2, end) 3;
	background: #f4ead8;
	border-color: #d8b85a;
	box-shadow: 0 0 0 4px #7c2f24, 0 0 0 8px #111;
	color: #111;
}

.hoppy-result__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.hoppy-result__fireworks {
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.hoppy-result > :not(.hoppy-result__fireworks) {
	position: relative;
	z-index: 1;
}

.hoppy-firework {
	background: var(--c);
	display: block;
	height: 7px;
	left: var(--x);
	position: absolute;
	top: var(--y);
	width: 7px;
	animation: hoppyFirework 980ms steps(5, end) var(--delay) forwards;
	box-shadow:
		10px 0 var(--c),
		-10px 0 var(--c),
		0 10px var(--c),
		0 -10px var(--c);
}

.is-hidden {
	display: none !important;
}

@keyframes hoppyLeftEarIdle {
	0%,
	74%,
	100% {
		transform: translate(0, 0);
	}

	80% {
		transform: translate(-0.28em, 0.22em);
	}

	86% {
		transform: translate(0.12em, -0.12em);
	}
}

@keyframes hoppyRightEarIdle {
	0%,
	74%,
	100% {
		transform: translate(0, 0);
	}

	80% {
		transform: translate(0.28em, 0.22em);
	}

	86% {
		transform: translate(-0.12em, -0.12em);
	}
}

@keyframes hoppyLeftEarMove {
	50% {
		transform: translate(-0.55em, 0.3em);
	}
}

@keyframes hoppyRightEarMove {
	50% {
		transform: translate(0.55em, 0.3em);
	}
}

@keyframes hoppyLeftArmIdle {
	0%,
	78%,
	100% {
		transform: translate(0, 0);
	}

	84% {
		transform: translate(-0.3em, -0.15em);
	}
}

@keyframes hoppyRightArmIdle {
	0%,
	78%,
	100% {
		transform: translate(0, 0);
	}

	84% {
		transform: translate(0.3em, -0.15em);
	}
}

@keyframes hoppyLeftArmOpen {
	50% {
		transform: translate(-0.55em, -0.25em);
	}
}

@keyframes hoppyRightArmOpen {
	50% {
		transform: translate(0.55em, -0.25em);
	}
}

@keyframes hoppyHop {
	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}

	50% {
		transform: translateX(-50%) translateY(-7px);
	}
}

@keyframes hoppyDizzy {
	0%,
	100% {
		transform: translateX(-50%) rotate(0deg);
	}

	33% {
		transform: translateX(-50%) rotate(-8deg);
	}

	66% {
		transform: translateX(-50%) rotate(8deg);
	}
}

@keyframes hoppySpin {
	0% {
		transform: translateX(-50%) rotateY(0deg) scale(1);
	}

	50% {
		transform: translateX(-50%) rotateY(180deg) scale(1.08);
	}

	100% {
		transform: translateX(-50%) rotateY(360deg) scale(1);
	}
}

@keyframes hoppyLeftEarAlert {
	50% {
		transform: translate(-0.7em, -0.22em);
	}
}

@keyframes hoppyRightEarAlert {
	50% {
		transform: translate(0.7em, -0.22em);
	}
}

@keyframes hoppyShieldSparkle {
	0%,
	100% {
		filter: drop-shadow(0 0 0 transparent);
	}

	50% {
		filter: drop-shadow(0 0 5px #d8b85a);
	}
}

@keyframes hoppyRainbowSparkle {
	0%,
	100% {
		filter: drop-shadow(0 0 0 transparent);
		transform: translate(0, 0);
	}

	50% {
		filter: drop-shadow(0 0 6px #f06ea9);
		transform: translate(0.2em, -0.1em);
	}
}

@keyframes hoppyCameoWave {
	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(0.35em, -0.2em);
	}
}

@keyframes hoppyCameoScarf {
	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(0, -0.18em);
	}
}

@keyframes hoppyRainbowFloat {
	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(0, -0.35em);
	}
}

@keyframes hoppyMarshSmile {
	0%,
	100% {
		transform: translateY(0) scale(1);
	}

	50% {
		transform: translateY(-0.25em) scale(1.06, 0.94);
	}
}

@keyframes hoppyTonguePop {
	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(0.25em, 0.18em);
	}
}

@keyframes hoppySoftBounce {
	0%,
	100% {
		transform: translate(0, 0);
	}

	50% {
		transform: translate(0, -0.18em);
	}
}

@keyframes hoppySignSwing {
	0%,
	100% {
		transform: rotate(0deg);
	}

	33% {
		transform: rotate(-5deg);
	}

	66% {
		transform: rotate(5deg);
	}
}

@keyframes hoppyRareTwinkle {
	0%,
	100% {
		opacity: 0.55;
		transform: scale(0.8);
	}

	50% {
		opacity: 1;
		transform: scale(1.15);
	}
}

@keyframes hoppyRareCelebrate {
	0% {
		transform: translateY(0) scale(1);
	}

	45% {
		transform: translateY(-12px) scale(1.18) rotate(-8deg);
	}

	100% {
		transform: translateY(-20px) scale(0.7) rotate(8deg);
		opacity: 0;
	}
}

@keyframes hoppyMissedDissolve {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	60% {
		opacity: 0.65;
		transform: translateY(8px) scale(0.9);
	}

	100% {
		opacity: 0;
		transform: translateY(16px) scale(0.55);
	}
}

@keyframes hoppyFirework {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0.7);
	}

	18% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		transform: translate(var(--dx), var(--dy)) scale(0.25);
	}
}

@keyframes hoppyRewardPulse {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.04);
	}
}

@keyframes hoppyCatchAbsorb {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	50% {
		opacity: 0.95;
		transform: translateY(-12px) scale(0.75);
	}

	100% {
		opacity: 0;
		transform: translateY(-26px) scale(0.28);
	}
}

@keyframes hoppyStartSignDrop {
	0% {
		opacity: 0;
		top: -90px;
	}

	12% {
		opacity: 1;
		top: 54px;
	}

	78% {
		opacity: 1;
		top: 54px;
	}

	100% {
		opacity: 0;
		top: 180px;
	}
}

@keyframes hoppyCountdownPulse {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.08);
	}
}

@keyframes hoppyRibbonShield {
	0% {
		box-shadow:
			5em 3em #f06ea9, 8em 3em #f06ea9,
			4em 4em #f06ea9, 5em 4em #f06ea9, 6em 4em #f06ea9, 7em 4em #f06ea9, 8em 4em #f06ea9, 9em 4em #f06ea9;
	}

	17% {
		box-shadow:
			5em 3em #5f9df7, 8em 3em #5f9df7,
			4em 4em #5f9df7, 5em 4em #5f9df7, 6em 4em #5f9df7, 7em 4em #5f9df7, 8em 4em #5f9df7, 9em 4em #5f9df7;
	}

	34% {
		box-shadow:
			5em 3em #f4ead8, 8em 3em #f4ead8,
			4em 4em #f4ead8, 5em 4em #f4ead8, 6em 4em #f4ead8, 7em 4em #f4ead8, 8em 4em #f4ead8, 9em 4em #f4ead8;
	}

	51% {
		box-shadow:
			5em 3em #d64d4d, 8em 3em #d64d4d,
			4em 4em #d64d4d, 5em 4em #d64d4d, 6em 4em #d64d4d, 7em 4em #d64d4d, 8em 4em #d64d4d, 9em 4em #d64d4d;
	}

	68% {
		box-shadow:
			5em 3em #d8b85a, 8em 3em #d8b85a,
			4em 4em #d8b85a, 5em 4em #d8b85a, 6em 4em #d8b85a, 7em 4em #d8b85a, 8em 4em #d8b85a, 9em 4em #d8b85a;
	}

	85% {
		box-shadow:
			5em 3em #63b46d, 8em 3em #63b46d,
			4em 4em #63b46d, 5em 4em #63b46d, 6em 4em #63b46d, 7em 4em #63b46d, 8em 4em #63b46d, 9em 4em #63b46d;
	}
}

@media (max-width: 760px) {
	.hoppy-quest-page {
		min-height: 100svh;
	}

	.hoppy-quest {
		padding: 8px;
	}

	.hoppy-quest__intro {
		grid-template-columns: 1fr;
		min-height: 0;
		padding: 18px;
	}

	.hoppy-quest__hero {
		min-height: 190px;
		order: -1;
	}

	.hoppy-pixel-bunny--hero {
		--p: 10px;
	}

	.hoppy-game {
		padding: 6px 8px var(--hoppy-mobile-bottom-space, max(58px, calc(env(safe-area-inset-bottom) + 48px)));
	}

	.hoppy-game__topbar {
		gap: 4px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-bottom: 6px;
	}

	.hoppy-game__topbar > div {
		min-height: 38px;
		padding: 4px 5px;
	}

	.hoppy-game__topbar > div:nth-child(4) {
		grid-column: 1 / -1;
		min-height: 54px;
		padding-bottom: 18px;
	}

	.hoppy-game__label {
		font-size: 0.52rem;
	}

	.hoppy-game__topbar strong {
		font-size: 0.98rem;
	}

	.hoppy-game__topbar [data-hoppy-reward-meter] {
		font-size: 1.15rem;
	}

	.hoppy-game__stage {
		height: var(--hoppy-stage-height, clamp(300px, calc(100svh - 300px), 520px));
		min-height: 0;
	}

	.hoppy-pixel-bunny--player {
		--p: 5px;
	}

	.hoppy-object {
		--p: 6px;
	}

	.hoppy-game__cameo {
		bottom: 92px;
		gap: 6px;
	}

	.hoppy-cameo__sprite {
		--p: 4px;
	}

	.hoppy-cameo__text {
		font-size: 0.58rem;
		max-width: 96px;
		padding: 5px;
	}

	.hoppy-game__controls {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		margin-top: 8px;
		max-width: none;
		width: 100%;
	}

	.hoppy-game__controls .hoppy-btn {
		font-size: 1.02rem;
		min-height: 68px;
		padding: 0 12px;
	}

	.hoppy-game__controls .hoppy-btn--sound {
		height: 1px;
		padding: 0;
		width: 1px;
	}
}