feat(03-04): add reward module with pre-generation and reward screen

- Create src/forest/reward.ts with startPreGeneration() and initRewardScreen()
- Image pre-generation starts at lesson begin, placeholder shows while loading
- Fallback to static SVGs when rate-limited or API unavailable
- Reward screen HTML with image area, companion comment, action buttons
- CSS for reward screen with animated leaves placeholder and image appear animation

src/styles/main.css

@@ -441,6 +441,128 @@ h3 {
 	}
 }
 
+/* Reward Screen */
+.reward {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 2rem;
+	max-width: 600px;
+	margin: 0 auto;
+	text-align: center;
+}
+
+.reward__title {
+	font-family: var(--font-heading);
+	color: var(--accent-gold);
+	font-size: 1.8rem;
+	margin-bottom: 1.5rem;
+}
+
+.reward__image-area {
+	width: 280px;
+	height: 280px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-bottom: 1.5rem;
+	border-radius: 16px;
+	background: var(--bg-forest);
+	overflow: hidden;
+}
+
+.reward__image-area img {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+	animation: reward-image-appear 0.8s ease-out;
+}
+
+@keyframes reward-image-appear {
+	from {
+		opacity: 0;
+		transform: scale(0.5);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+.reward__placeholder {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0.5rem;
+	color: var(--text-warm);
+	font-family: var(--font-heading);
+}
+
+.reward__leaf {
+	font-size: 1.5rem;
+	animation: leaf-float 2s ease-in-out infinite;
+}
+
+.reward__leaf--1 {
+	animation-delay: 0s;
+}
+.reward__leaf--2 {
+	animation-delay: 0.5s;
+}
+.reward__leaf--3 {
+	animation-delay: 1s;
+}
+
+@keyframes leaf-float {
+	0%,
+	100% {
+		transform: translateY(0) rotate(0deg);
+	}
+	50% {
+		transform: translateY(-10px) rotate(15deg);
+	}
+}
+
+.reward__companion {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	margin-bottom: 1.5rem;
+	padding: 1rem;
+	background: rgba(255, 255, 255, 0.7);
+	border-radius: 12px;
+}
+
+.reward__actions {
+	display: flex;
+	gap: 1rem;
+}
+
+.reward__btn {
+	font-family: var(--font-heading);
+	font-size: 1.1rem;
+	padding: 0.75rem 1.5rem;
+	border: none;
+	border-radius: 12px;
+	cursor: pointer;
+	transition: transform 0.2s;
+}
+
+.reward__btn:hover {
+	transform: scale(1.05);
+}
+
+.reward__btn--continue {
+	background: var(--accent-green);
+	color: white;
+}
+
+.reward__btn--back {
+	background: var(--bg-cream);
+	color: var(--text-warm);
+	border: 2px solid var(--accent-green);
+}
+
 /* Parent Area */
 .parent {
 	max-width: 600px;