-
diff --git a/src/components/StonesCounter.svelte b/src/components/StonesCounter.svelte
index 697466e..3120e8f 100644
--- a/src/components/StonesCounter.svelte
+++ b/src/components/StonesCounter.svelte
@@ -1,10 +1,8 @@
+ 
+
+ 
+ {#if !isRunComplete}
+ 
+ {/if}
{title}
{desc}
@@ -29,6 +34,25 @@
justify-content: center; align-items: center;
gap: 24px;
background: var(--bg-dark);
+ position: relative;
+ overflow: hidden;
+ }
+ .gameover-bg {
+ position: absolute;
+ inset: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ opacity: 0.28;
+ image-rendering: pixelated;
+ }
+ .princess {
+ width: 108px;
+ height: 108px;
+ object-fit: contain;
+ image-rendering: pixelated;
+ filter: drop-shadow(0 0 18px rgba(255, 234, 0, 0.55));
+ z-index: 1;
}
h1 { font: bold 48px Arial, sans-serif; }
h1.accent { color: var(--text-accent); }
@@ -39,6 +63,8 @@
text-align: center;
max-width: 70%;
white-space: pre-line;
+ z-index: 1;
}
- .buttons { display: flex; flex-direction: column; gap: 12px; }
+ h1 { z-index: 1; }
+ .buttons { display: flex; flex-direction: column; gap: 12px; z-index: 1; }
diff --git a/src/scenes/LevelIntro.svelte b/src/scenes/LevelIntro.svelte
index 4c28dc1..b8030db 100644
--- a/src/scenes/LevelIntro.svelte
+++ b/src/scenes/LevelIntro.svelte
@@ -3,14 +3,13 @@
import { LEVELS } from '../lib/levels/levels.js';
import Button from '../components/Button.svelte';
import AffordanceBanner from '../components/AffordanceBanner.svelte';
- import Pixel from '../lib/pixel/Pixel.svelte';
- import { sceneForLevel } from '../lib/pixel/art-scenes.js';
+ import { generatedSceneForLevel } from '../lib/generated-assets.js';
let { navigate, level = 1 } = $props();
let levelData = $derived(LEVELS[level - 1]);
let levelName = $derived(levelData?.name || `Level ${level}`);
let storyText = $derived(levelData?.storyKey ? getText(levelData.storyKey) : '');
- let scene = $derived(sceneForLevel(level));
+ let scene = $derived(generatedSceneForLevel(level));
// Affordance gates — default both enabled until phase 04 populates levels.js
let affordances = $derived(levelData?.affordances ?? { undo: true, preview: true });
@@ -18,7 +17,7 @@
- 
{getText('level')}{level}
@@ -47,6 +46,12 @@
align-items: center;
justify-content: center;
}
+ .backdrop img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ image-rendering: pixelated;
+ }
.foreground {
position: relative;
width: 100%; height: 100%;
diff --git a/src/scenes/MainMenu.svelte b/src/scenes/MainMenu.svelte
index 30a9fca..3035d9d 100644
--- a/src/scenes/MainMenu.svelte
+++ b/src/scenes/MainMenu.svelte
@@ -3,7 +3,7 @@
import Button from '../components/Button.svelte';
import Pixel from '../lib/pixel/Pixel.svelte';
import { MOON_ART, MOON_PAL } from '../lib/pixel/art-ui.js';
- import { RABBIT_ART, RABBIT_PAL } from '../lib/pixel/art-characters.js';
+ import { GENERATED_CHARACTERS } from '../lib/generated-assets.js';
let { navigate } = $props();
const stars = Array.from({ length: 40 }, () => ({
@@ -28,7 +28,7 @@
{getText('gameTitle')}
-