more background

project-context.md

@@ -48,7 +48,7 @@ Havenllo (Haven + Trello) is a lightweight, single-user, no-authentication kanba
 - `web/src/components/CardDetailModal.tsx`: accessible card dialog with title editing, current-list status, native move-to-list selector, CommonMark Write/Preview description editor, timestamps, and delete confirmation.
 - `web/src/components/ConfirmDialog.tsx`: accessible destructive-action confirmation.
 - `web/src/components/Toast.tsx`: auto-dismissing non-blocking feedback.
-- `web/src/styles.css`: dark night-shift control-room theme with graphite surfaces, acid-lime/aurora accents, layered iridescent canvas wash, geometric grid/orbit decoration, stage-specific columns, centered short rails, horizontal mobile scrolling, pointer drop feedback, Markdown typography, focus states, 44px touch targets, and reduced-motion support.
+- `web/src/styles.css`: dark night-shift control-room theme with graphite surfaces, acid-lime/aurora accents, layered iridescent canvas wash, rayburst and starfield texture, geometric grid/orbit decoration, stage-specific columns, centered short rails, horizontal mobile scrolling, pointer drop feedback, Markdown typography, focus states, 44px touch targets, and reduced-motion support.
 
 ### Embedding bridge
 

web/src/styles.css

@@ -621,7 +621,7 @@ textarea { min-height: 96px; resize: vertical; }
   font-family: "Avenir Next", Avenir, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   background: #07090e;
   color: #f1f5ed;
-  --canvas: #090810;
+  --canvas: #08070f;
   --canvas-glow: #121b1c;
   --surface: #10151d;
   --surface-raised: #171e28;
@@ -645,18 +645,37 @@ textarea { min-height: 96px; resize: vertical; }
 body {
   background-color: var(--canvas);
   background-image:
-    radial-gradient(ellipse at 50% -18%, rgba(255, 125, 178, 0.22), transparent 36rem),
-    radial-gradient(circle at 104% 24%, rgba(169, 146, 255, 0.23), transparent 31rem),
-    radial-gradient(circle at -8% 94%, rgba(109, 247, 208, 0.16), transparent 32rem),
-    conic-gradient(from 215deg at 50% 45%, rgba(215, 255, 99, 0.045), transparent 17%, rgba(169, 146, 255, 0.065) 37%, transparent 54%, rgba(109, 247, 208, 0.045) 75%, transparent 88%),
-    linear-gradient(rgba(215, 255, 99, 0.035) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(215, 255, 99, 0.035) 1px, transparent 1px),
+    radial-gradient(ellipse at 50% -18%, rgba(255, 76, 157, 0.3), transparent 36rem),
+    radial-gradient(circle at 104% 24%, rgba(134, 93, 255, 0.3), transparent 31rem),
+    radial-gradient(circle at -8% 94%, rgba(65, 246, 211, 0.22), transparent 32rem),
+    radial-gradient(ellipse at 50% 58%, rgba(215, 255, 99, 0.07), transparent 44rem),
+    repeating-conic-gradient(from 18deg at 50% 34%, rgba(215, 255, 99, 0.04) 0deg 1deg, transparent 1deg 12deg),
+    linear-gradient(rgba(215, 255, 99, 0.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(215, 255, 99, 0.04) 1px, transparent 1px),
     var(--canvas);
-  background-size: auto, auto, auto, auto, 72px 72px, 72px 72px, auto;
+  background-size: auto, auto, auto, auto, auto, 72px 72px, 72px 72px, auto;
   background-attachment: fixed;
 }
 
 .app-shell { position: relative; min-height: 100vh; overflow: hidden; }
+.app-shell::after {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  background-image:
+    radial-gradient(circle at 8% 20%, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.6px),
+    radial-gradient(circle at 72% 58%, rgba(215, 255, 99, 0.95) 0 1px, transparent 1.7px),
+    radial-gradient(circle at 42% 84%, rgba(109, 247, 208, 0.8) 0 1px, transparent 1.6px);
+  background-size: 177px 163px, 233px 211px, 311px 277px;
+  content: "";
+  opacity: 0.2;
+  pointer-events: none;
+  mix-blend-mode: screen;
+  animation: starfield-drift 42s linear infinite;
+}
+
+.topbar, .board-area, .empty-board, .loading-card, .fatal-state { position: relative; z-index: 1; }
+
 .app-shell::before {
   position: absolute;
   top: 112px;
@@ -673,6 +692,7 @@ body {
 }
 
 @keyframes orbit-drift { from { transform: translate3d(0, 0, 0) rotate(14deg); } to { transform: translate3d(-34px, 24px, 0) rotate(28deg); } }
+@keyframes starfield-drift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 177px 163px, -233px 211px, 311px -277px; } }
 
 button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex="-1"]:focus-visible {
   outline: 2px solid var(--signal);
@@ -853,7 +873,7 @@ input:focus, textarea:focus, select:focus { border-color: var(--signal); backgro
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .app-shell::before { display: none; }
+  .app-shell::before, .app-shell::after { display: none; }
   .card-open { opacity: 1; transform: none; }
   *, *::before, *::after { transition: none !important; animation: none !important; }
 }