feat: desert dusk theme with animated mule and pixel-art scenery

Replaces the cool-grey neutral theme with a warm desert dusk palette
pulled from a new pixel-art TopBar: a tiled, right-to-left scrolling
desert under a sky gradient, a 6-frame walking mule sprite where the
logo used to sit, and an ASCII block-character title on a black plate.
The active heap card now uses a cactus/dune scene as its stack
backdrop, and the "Built with hubris" mark moves into the TopBar's
bottom-right corner (AppFooter component removed).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/AppFooter.tsx

@@ -1,43 +0,0 @@
-/**
- * Tiny corner footer pinned to the bottom-right of the main column.
- * Renders "Built with hubris • <year in roman numerals>", refreshed
- * once per page load.
- */
-
-const ROMAN_PAIRS: [number, string][] = [
-  [1000, 'M'],
-  [900, 'CM'],
-  [500, 'D'],
-  [400, 'CD'],
-  [100, 'C'],
-  [90, 'XC'],
-  [50, 'L'],
-  [40, 'XL'],
-  [10, 'X'],
-  [9, 'IX'],
-  [5, 'V'],
-  [4, 'IV'],
-  [1, 'I'],
-]
-
-function toRoman(n: number): string {
-  let result = ''
-  for (const [value, symbol] of ROMAN_PAIRS) {
-    while (n >= value) {
-      result += symbol
-      n -= value
-    }
-  }
-  return result
-}
-
-export function AppFooter() {
-  const year = new Date().getFullYear()
-  return (
-    <div className="pointer-events-none absolute bottom-2 right-3 z-10 text-[10px] text-text-faint">
-      <span className="pointer-events-auto">
-        Built with hubris • {toRoman(year)}
-      </span>
-    </div>
-  )
-}

frontend/src/components/heaps/ActiveHeapCard.tsx

@@ -4,6 +4,7 @@ import { ShoppingBasket } from 'lucide-react'
 import { useActiveHeapMembers } from '../../hooks/useActiveHeapMembersQuery'
 import { useFilterStore } from '../../store/filterStore'
 import { photos as photosApi, heaps as heapsApi } from '../../services/api'
+import cardBg from '../../assets/card.png'
 
 /** How many thumbnails fan out across the stack at once. The newest is
  *  drawn last (top), older ones fan back-left and back-right. */
@@ -75,10 +76,19 @@ export function ActiveHeapCard() {
 
       {/* Stack row. Re-keyed on activeHeap.id so switching heaps tears
        *  the animation context down cleanly instead of trying to
-       *  crossfade unrelated photos. */}
+       *  crossfade unrelated photos. The desert scene sits behind the
+       *  fanned thumbnails — `cover` + `bottom` keeps the dunes anchored
+       *  so the cacti frame the photos rather than the (transparent) sky. */}
       <div
         key={activeHeap.id}
-        className="relative h-24 overflow-hidden px-3 pb-3"
+        className="relative h-24 overflow-hidden rounded-b-lg px-3 pb-3"
+        style={{
+          backgroundImage: `url(${cardBg})`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center bottom',
+          backgroundRepeat: 'no-repeat',
+          imageRendering: 'pixelated',
+        }}
       >
         {visible.length === 0 ? (
           <div className="flex h-full items-center justify-center px-2 text-center text-[11px] text-text-faint">

frontend/src/components/layout/TopBar.tsx

@@ -1,5 +1,6 @@
 import { PanelLeftOpen, PanelRightOpen } from 'lucide-react'
-import muliLogo from '../../assets/muli-logo.png'
+import desertBg from '../../assets/desert.png'
+import muleSprites from '../../assets/mule-sprites.png'
 
 interface TopBarProps {
   leftSidebarOpen: boolean
@@ -8,10 +9,34 @@ interface TopBarProps {
   onExpandRight: () => void
 }
 
+// Block-character ASCII rendering of "Mulimago" — sits on a black plate
+// in place of the old text title.
+const MULIMAGO_ASCII = `▖  ▖  ▜ ▘
+▛▖▞▌▌▌▐ ▌▛▛▌▀▌▛▌█▌
+▌▝ ▌▙▌▐▖▌▌▌▌█▌▙▌▙▖`
+
+const ROMAN_PAIRS: [number, string][] = [
+  [1000, 'M'], [900, 'CM'], [500, 'D'], [400, 'CD'],
+  [100, 'C'], [90, 'XC'], [50, 'L'], [40, 'XL'],
+  [10, 'X'], [9, 'IX'], [5, 'V'], [4, 'IV'], [1, 'I'],
+]
+
+function toRoman(n: number): string {
+  let result = ''
+  for (const [value, symbol] of ROMAN_PAIRS) {
+    while (n >= value) {
+      result += symbol
+      n -= value
+    }
+  }
+  return result
+}
+
 /**
- * Slim top bar — logo on the left, settings gear on the right. The
- * active heap badge moved into the Heaps panel in the left sidebar
- * (where it actually relates to the heap rows the user navigates to).
+ * Slim top bar — animated walking mule on the left over a tiled desert
+ * backdrop, settings gear on the right. The active heap badge moved into
+ * the Heaps panel in the left sidebar (where it actually relates to the
+ * heap rows the user navigates to).
  *
  * Also hosts the "expand sidebar" affordances: when a side panel is
  * collapsed, a small panel-open icon appears on the corresponding edge
@@ -26,32 +51,68 @@ export function TopBar({
   onExpandRight,
 }: TopBarProps) {
   return (
-    <header className="flex h-12 items-center justify-between border-b border-border bg-surface px-4">
-      <div className="flex items-center gap-2">
+    <header
+      className="relative flex h-16 items-center justify-between overflow-hidden border-b border-border px-4"
+      style={{
+        // Two layers: desert tile on top (scrolls right→left), dusk-sky
+        // gradient underneath (static). Tile width is fixed at 200px so
+        // the `desert-scroll` keyframe can move by exactly one tile and
+        // loop seamlessly.
+        backgroundImage: `url(${desertBg}), linear-gradient(to bottom, #2b3a5c 0%, #6b6b8a 35%, #d68a5c 75%, #f0c188 100%)`,
+        backgroundRepeat: 'repeat-x, no-repeat',
+        backgroundSize: '200px 100%, 100% 100%',
+        backgroundPosition: '0 bottom, 0 0',
+        imageRendering: 'pixelated',
+        animation: 'desert-scroll 24s linear infinite',
+      }}
+    >
+      <div className="relative flex items-center gap-3">
         {!leftSidebarOpen && (
           <button
             onClick={onExpandLeft}
-            className="rounded p-1.5 text-text-muted transition-colors hover:bg-surface-2 hover:text-text"
+            className="rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
             title="Expand panel (Tab)"
             aria-label="Expand left panel"
           >
             <PanelLeftOpen className="h-4 w-4" />
           </button>
         )}
-        <img src={muliLogo} alt="Mulimago" className="h-7 w-7 object-contain" />
-        <h1 className="text-lg font-semibold text-text">Mulimago</h1>
+        <div
+          aria-label="Mulimago"
+          className="h-12 w-14"
+          style={{
+            backgroundImage: `url(${muleSprites})`,
+            backgroundSize: '300% 200%',
+            backgroundRepeat: 'no-repeat',
+            imageRendering: 'pixelated',
+            animation: 'mule-walk 0.6s steps(1) infinite',
+          }}
+        />
+        <pre
+          aria-label="Mulimago"
+          className="rounded bg-black px-2 py-1 font-mono text-[8px] leading-[1.05] text-text"
+          style={{ letterSpacing: 0 }}
+        >
+          {MULIMAGO_ASCII}
+        </pre>
       </div>
-      <div className="flex items-center gap-2">
+      <div className="flex h-full items-end gap-2 self-stretch pb-1">
         {!rightSidebarOpen && (
           <button
             onClick={onExpandRight}
-            className="rounded p-1.5 text-text-muted transition-colors hover:bg-surface-2 hover:text-text"
+            className="self-center rounded bg-black/30 p-1.5 text-text-muted backdrop-blur-sm transition-colors hover:bg-black/50 hover:text-text"
             title="Expand panel (I)"
             aria-label="Expand right panel"
           >
             <PanelRightOpen className="h-4 w-4" />
           </button>
         )}
+        <span
+          className="text-[10px] text-foreground-muted"
+          style={{ textShadow: '0 1px 2px rgba(0,0,0,0.7)' }}
+        >
+          Built with hubris • {toRoman(new Date().getFullYear())}
+        </span>
       </div>
     </header>
   )