diff --git a/public/stroopy.webp b/public/stroopy.webp
deleted file mode 100644
index 5b68ddf8..00000000
Binary files a/public/stroopy.webp and /dev/null differ
diff --git a/src/components/awards/awards-ballot.tsx b/src/components/awards/awards-ballot.tsx
index dbe579f1..bad626ad 100644
--- a/src/components/awards/awards-ballot.tsx
+++ b/src/components/awards/awards-ballot.tsx
@@ -281,19 +281,7 @@ function ConnectedWallet({
 						className="absolute right-0 mt-2 w-64 rounded-2xl border border-[#2f2f2f] bg-[#1c1c1c] p-2 shadow-[0_12px_40px_rgba(0,0,0,0.5)] z-50"
 					>
 						<div className="flex items-center gap-3 px-2.5 pb-2.5 pt-2">
-							{wallet ? (
-								<Image
-									src={wallet.icon}
-									alt=""
-									width={38}
-									height={38}
-									className="h-[38px] w-[38px] flex-shrink-0 rounded-full ring-1 ring-[#3a3a3a]"
-								/>
-							) : (
-								<span className="flex h-[38px] w-[38px] flex-shrink-0 items-center justify-center rounded-full bg-[#242424] ring-1 ring-[#3a3a3a]">
-									<Wallet className="h-4 w-4 text-neutral-400" />
-								</span>
-							)}
+							<Stroopy size={44} badge={wallet?.icon} />
 							<div className="min-w-0">
 								<p className="text-sm font-medium text-neutral-100">
 									{wallet?.name ?? "Connected wallet"}
@@ -454,7 +442,18 @@ function BallotArt({ step }: { step: number }) {
 					</span>
 					<span className="sm-clickring" />
 					<span className="sm-cursor">
-						<i />
+						<i>
+							<svg viewBox="-2 -2 19 25" role="presentation">
+								<path
+									d="M0 0 0 15.96 3.75 12.18 6.75 21 9.9 18.9 7.05 10.5 11.7 10.08Z"
+									fill="#fafafa"
+									stroke="#171327"
+									strokeWidth="2.6"
+									strokeLinejoin="round"
+									paintOrder="stroke"
+								/>
+							</svg>
+						</i>
 					</span>
 				</div>
 			)}
@@ -1757,21 +1756,135 @@ function AwardsToast({
 	);
 }
 
-/** Stroopy, the Stellar mascot — the wallet picker's greeter. */
-function Stroopy({ size }: { size: number }) {
+/**
+ * Stroopy, drawn in vector so he can move. An interpretation in the Stellar
+ * mascot's spirit — visor face, pixel eyes, antenna — not the official art.
+ * Sized by the caller; the badge is the connected wallet's own mark.
+ */
+function Stroopy({ size, badge }: { size: number; badge?: string }) {
 	return (
 		<span
 			className="sm-stroopy"
 			style={{ width: size, height: size }}
 			aria-hidden="true"
 		>
-			<Image src="/stroopy.webp" alt="" width={size * 2} height={size * 2} />
+			{[0, 1, 2, 3].map((n) => (
+				<span
+					key={n}
+					className="sm-spark"
+					style={{
+						["--sr-rot" as string]: `${n * 78 - 40}deg`,
+						["--sr-d" as string]: `${n * 70}ms`,
+					}}
+				/>
+			))}
+			<span className="sm-sr-window">
+				<svg className="sm-sr-rise" viewBox="0 0 64 64" role="presentation">
+					<g className="sm-sr-bob">
+						{/* shoulders first, so the head sits over them */}
+						<path
+							d="M13 64v-13a19 13 0 0 1 38 0v13z"
+							fill="#F5C518"
+							stroke="#2A2140"
+							strokeWidth="2"
+						/>
+						<g className="sm-sr-ant">
+							<path
+								d="M32 15V9"
+								stroke="#2A2140"
+								strokeWidth="2.6"
+								strokeLinecap="round"
+							/>
+							<circle
+								cx="32"
+								cy="5.8"
+								r="4"
+								fill="#F5C518"
+								stroke="#2A2140"
+								strokeWidth="1.8"
+							/>
+						</g>
+						{/* head, with a lighter cap over the crown */}
+						<rect
+							x="10"
+							y="13"
+							width="44"
+							height="39"
+							rx="19"
+							fill="#C6B6F0"
+							stroke="#2A2140"
+							strokeWidth="2"
+						/>
+						<path
+							d="M13.5 26a18.5 12 0 0 1 37 0z"
+							fill="#E6DEFA"
+							stroke="#2A2140"
+							strokeWidth="1.6"
+						/>
+						{/* the visor, wider than the head the way the real one is */}
+						<rect x="7" y="25" width="50" height="22" rx="11" fill="#15111F" />
+						<rect
+							className="sm-sr-eye"
+							x="19"
+							y="29.5"
+							width="7.6"
+							height="8.8"
+							rx="3.5"
+							fill="#F5C518"
+						/>
+						<rect
+							className="sm-sr-eye"
+							x="37.4"
+							y="29.5"
+							width="7.6"
+							height="8.8"
+							rx="3.5"
+							fill="#F5C518"
+						/>
+						{/* a glint in each eye, and pixel blush on the cheeks */}
+						<circle cx="21.5" cy="32.1" r="1.4" fill="#FFF6D6" />
+						<circle cx="39.9" cy="32.1" r="1.4" fill="#FFF6D6" />
+						<rect
+							x="14.4"
+							y="39.4"
+							width="5.6"
+							height="3.4"
+							rx="1.7"
+							fill="#FF8FB4"
+							opacity="0.85"
+						/>
+						<rect
+							x="44"
+							y="39.4"
+							width="5.6"
+							height="3.4"
+							rx="1.7"
+							fill="#FF8FB4"
+							opacity="0.85"
+						/>
+						{/* pixel smile */}
+						<rect x="27" y="40.6" width="3.3" height="3.3" fill="#F5C518" />
+						<rect x="30.35" y="42.4" width="3.3" height="3.3" fill="#F5C518" />
+						<rect x="33.7" y="40.6" width="3.3" height="3.3" fill="#F5C518" />
+					</g>
+				</svg>
+				<span className="sm-sr-gloss" />
+				<span className="sm-sr-shutter sm-sr-shutter-l" />
+				<span className="sm-sr-shutter sm-sr-shutter-r" />
+			</span>
+			{badge && (
+				<Image
+					src={badge}
+					alt=""
+					width={Math.round(size * 0.42)}
+					height={Math.round(size * 0.42)}
+					className="sm-stroopy-badge"
+				/>
+			)}
 		</span>
 	);
 }
 
-// ── Wallet picker (RainbowKit pattern: modal on desktop, drawer on mobile) ──
-
 function WalletList({
 	connecting,
 	onPick,
@@ -1847,9 +1960,6 @@ function WalletPicker({
 			<Drawer open={open} onOpenChange={onOpenChange}>
 				<DrawerContent>
 					<DrawerHeader className="text-center sm:text-center">
-						<span className="mx-auto mb-3 block">
-							<Stroopy size={76} />
-						</span>
 						<DrawerTitle className="text-xl font-semibold">
 							Connect a wallet
 						</DrawerTitle>
@@ -1897,16 +2007,13 @@ function WalletPicker({
 						className="relative w-full max-w-sm rounded-2xl border border-[#2f2f2f] bg-[#1c1c1c] p-6 shadow-[0_20px_60px_rgba(0,0,0,0.5)]"
 					>
 						<div className="flex items-start justify-between gap-4 mb-6">
-							<div className="flex items-start gap-3.5">
-								<Stroopy size={54} />
-								<div>
-									<h2 className="text-lg font-semibold tracking-tight text-neutral-100">
-										Connect a wallet
-									</h2>
-									<p className="mt-1.5 text-sm leading-relaxed text-neutral-400">
-										You'll sign a Stellar testnet transaction — no real funds.
-									</p>
-								</div>
+							<div>
+								<h2 className="text-lg font-semibold tracking-tight text-neutral-100">
+									Connect a wallet
+								</h2>
+								<p className="mt-1.5 text-sm leading-relaxed text-neutral-400">
+									You'll sign a Stellar testnet transaction — no real funds.
+								</p>
 							</div>
 							<button
 								type="button"
diff --git a/src/components/awards/awards.css b/src/components/awards/awards.css
index 11e5a3ef..4d21959b 100644
--- a/src/components/awards/awards.css
+++ b/src/components/awards/awards.css
@@ -717,13 +717,16 @@
 }
 .awards-sm .sm-cursor i {
 	display: block;
-	width: 15px;
-	height: 21px;
-	background: #fafafa;
-	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
-	clip-path: polygon(0 0, 0 76%, 25% 58%, 45% 100%, 66% 90%, 47% 50%, 78% 48%);
+	width: 18px;
+	height: 24px;
+	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
 	animation: sm-cursor-press 0.34s cubic-bezier(0.34, 1.5, 0.64, 1) 0.95s both;
 }
+.awards-sm .sm-cursor svg {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
 @keyframes sm-cursor-in {
 	from {
 		transform: translate(54px, 46px);
@@ -1286,51 +1289,232 @@
 }
 
 /* ── Stroopy ────────────────────────────────────────────────────────────
-   The Stellar mascot, greeting a Pilot at the one screen where a friendly
-   face earns its place: the wallet picker, which is where somebody who has
-   never held a Stellar wallet lands.
+   The Stellar mascot, drawn in vector so he can actually move — a cropped
+   raster with a bob bolted on is a photo that wobbles, not a character.
+   This is an interpretation in his spirit, not the official artwork.
+
+   He lives in ONE place: the connected-wallet menu, wearing the wallet's own
+   badge, the way an account avatar does.
 
-   He is framed in a round tile the way an app avatar is, so his own purple
-   ground reads as deliberate rather than as colour leaking into a monochrome
-   page. object-position pulls the crop up to his head and shoulders — the
-   artwork is a full figure mid-stride and a centred square crop lands on his
-   knees. He breathes; he does not bounce. */
+   The circle does NOT animate in — it is just the avatar ground, there from
+   the first frame. What moves is inside it: two shutters that swing open
+   like a window (yui540's window motion — each pane hinged on its OUTER
+   edge, perspective(600px) rotateY(0 → ∓140 → ∓130), the overshoot doing
+   the work), and Stroopy rising up into the opening behind them. Then a
+   few stars twinkle off on their own angles, each carrying its own
+   --sr-rot and --sr-d. */
 .awards-sm .sm-stroopy {
+	display: block;
 	position: relative;
 	flex-shrink: 0;
 	border-radius: 999px;
-	overflow: hidden;
-	background: #b3a3e6;
+	background: radial-gradient(circle at 50% 30%, #8471c4, #55468c);
 	box-shadow:
-		inset 0 0 0 1px rgba(255, 255, 255, 0.16),
-		0 6px 18px rgba(0, 0, 0, 0.4);
-	animation: sm-stroopy-bob 3.6s ease-in-out infinite;
-}
-/* Zoomed to his head and shoulders. object-fit:cover cannot do this: the
-   art is 874x1004, so cover on a square tile shows nearly the whole figure
-   and at 54px he is an unreadable speck. The numbers below place the head
-   (centred at about 60% x, 30% y of the source) in the middle of the tile. */
-.awards-sm .sm-stroopy img {
+		inset 0 0 0 1px rgba(255, 255, 255, 0.22),
+		0 6px 18px rgba(0, 0, 0, 0.45);
+	/* stays visible so the stars can leave the circle */
+	overflow: visible;
+}
+/* everything that happens INSIDE the porthole is clipped to it */
+.awards-sm .sm-sr-window {
+	position: absolute;
+	inset: 0;
+	border-radius: 999px;
+	overflow: hidden;
+}
+.awards-sm .sm-stroopy svg {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+/* he rises into the opening rather than being there already */
+.awards-sm .sm-sr-rise {
+	animation: sm-sr-rise 0.62s cubic-bezier(0.22, 1.05, 0.36, 1) 0.34s both;
+}
+@keyframes sm-sr-rise {
+	0% {
+		transform: translateY(66%);
+	}
+	62% {
+		transform: translateY(-4%);
+	}
+	100% {
+		transform: translateY(0);
+	}
+}
+/* the two panes. Closed they are the circle; hinged on the outer edge they
+   swing right out of it, so the clip takes them away as they finish. */
+.awards-sm .sm-sr-shutter {
+	position: absolute;
+	top: 0;
+	z-index: 4;
+	width: 50%;
+	height: 100%;
+	box-shadow: 0 0 16px rgba(20, 14, 38, 0.45);
+}
+.awards-sm .sm-sr-shutter-l {
+	left: 0;
+	transform-origin: left center;
+	background: linear-gradient(90deg, #cdc0f5, #a08cd9);
+	animation: sm-sr-door-l 0.62s ease-in-out 0.18s both;
+}
+.awards-sm .sm-sr-shutter-r {
+	right: 0;
+	transform-origin: right center;
+	background: linear-gradient(270deg, #cdc0f5, #a08cd9);
+	animation: sm-sr-door-r 0.62s ease-in-out 0.18s both;
+}
+@keyframes sm-sr-door-l {
+	0% {
+		transform: perspective(600px) rotateY(0deg);
+	}
+	60% {
+		transform: perspective(600px) rotateY(-140deg);
+	}
+	100% {
+		transform: perspective(600px) rotateY(-130deg);
+	}
+}
+@keyframes sm-sr-door-r {
+	0% {
+		transform: perspective(600px) rotateY(0deg);
+	}
+	60% {
+		transform: perspective(600px) rotateY(140deg);
+	}
+	100% {
+		transform: perspective(600px) rotateY(130deg);
+	}
+}
+/* the highlight raked across the portrait once he has landed */
+.awards-sm .sm-sr-gloss {
 	position: absolute;
-	height: 246%;
-	width: auto;
-	max-width: none;
-	top: -23.5%;
-	left: -78.5%;
+	inset: -20%;
+	z-index: 3;
+	pointer-events: none;
+	background: linear-gradient(
+		90deg,
+		transparent 38%,
+		rgba(255, 255, 255, 0.45) 50%,
+		transparent 62%
+	);
+	transform: translateX(-110%) skewX(-30deg);
+	animation: sm-sr-shine 0.8s ease-in-out 0.95s both;
+}
+@keyframes sm-sr-shine {
+	to {
+		transform: translateX(160%) skewX(-30deg);
+	}
+}
+/* four-point stars, not dots */
+.awards-sm .sm-spark {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	z-index: 5;
+	width: 9px;
+	height: 9px;
+	margin: -4.5px 0 0 -4.5px;
+	background: #ffe27a;
+	clip-path: polygon(
+		50% 0%,
+		60% 40%,
+		100% 50%,
+		60% 60%,
+		50% 100%,
+		40% 60%,
+		0% 50%,
+		40% 40%
+	);
+	opacity: 0;
+	animation: sm-sr-spark 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) both;
+	animation-delay: calc(0.92s + var(--sr-d, 0ms));
+}
+@keyframes sm-sr-spark {
+	0% {
+		opacity: 0;
+		transform: rotate(var(--sr-rot, 0deg)) translateY(-8px) scale(0.2);
+	}
+	40% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+		transform: rotate(var(--sr-rot, 0deg)) translateY(-28px) scale(1)
+			rotate(75deg);
+	}
+}
+/* he breathes, and his antenna is never quite still */
+.awards-sm .sm-sr-bob {
+	transform-origin: 32px 52px;
+	animation: sm-sr-bob 3.4s ease-in-out 1.1s infinite;
 }
-@keyframes sm-stroopy-bob {
+@keyframes sm-sr-bob {
 	0%,
 	100% {
-		transform: translateY(0) rotate(-1.5deg);
+		transform: translateY(0) rotate(-1.2deg);
 	}
 	50% {
-		transform: translateY(-5px) rotate(1.5deg);
+		transform: translateY(-1.6px) rotate(1.2deg);
 	}
 }
+.awards-sm .sm-sr-ant {
+	transform-origin: 32px 16px;
+	animation: sm-sr-ant 2.6s ease-in-out 1.2s infinite;
+}
+@keyframes sm-sr-ant {
+	0%,
+	100% {
+		transform: rotate(-9deg);
+	}
+	50% {
+		transform: rotate(9deg);
+	}
+}
+.awards-sm .sm-sr-eye {
+	transform-origin: center;
+	animation: sm-sr-blink 5.2s ease-in-out 1.7s infinite;
+}
+@keyframes sm-sr-blink {
+	0%,
+	92%,
+	100% {
+		transform: scaleY(1);
+	}
+	95% {
+		transform: scaleY(0.12);
+	}
+}
+/* the wallet's own mark, badged on the corner */
+.awards-sm .sm-stroopy-badge {
+	position: absolute;
+	right: -2px;
+	bottom: -2px;
+	z-index: 6;
+	border-radius: 999px;
+	box-shadow: 0 0 0 2px #1c1c1c;
+}
 
 @media (prefers-reduced-motion: reduce) {
-	.awards-sm .sm-stroopy {
+	.awards-sm .sm-sr-rise,
+	.awards-sm .sm-sr-shutter,
+	.awards-sm .sm-sr-gloss,
+	.awards-sm .sm-spark,
+	.awards-sm .sm-sr-bob,
+	.awards-sm .sm-sr-ant,
+	.awards-sm .sm-sr-eye {
 		animation: none !important;
+	}
+	.awards-sm .sm-sr-rise {
 		transform: none;
 	}
+	/* no motion means the shutters never open, so take them out entirely */
+	.awards-sm .sm-sr-shutter,
+	.awards-sm .sm-sr-gloss,
+	.awards-sm .sm-spark {
+		display: none;
+	}
 }