feat(frontend): tema monokrom + sidebar animasi game-menu + gate ringan mobile

services/frontend/src/components/ambient/ambient-canvas.tsx

@@ -67,6 +67,19 @@ export function AmbientCanvas({
     const mount = mountRef.current;
     if (!mount) return;
 
+    // Lightness gate: skip the WebGL layer entirely on small/coarse/data-saver
+    // devices — the static CSS fallback below stays. Desktop keeps the haze.
+    const nav = navigator as Navigator & {
+      connection?: { saveData?: boolean; deviceMemory?: number };
+      deviceMemory?: number;
+    };
+    const lightDevice =
+      window.matchMedia("(max-width: 767px)").matches ||
+      window.matchMedia("(pointer: coarse)").matches ||
+      nav.connection?.saveData === true ||
+      (nav.deviceMemory ?? 8) <= 4;
+    if (lightDevice) return;
+
     let renderer: THREE.WebGLRenderer;
     try {
       renderer = new THREE.WebGLRenderer({

services/frontend/src/components/ambient/ambient-context.tsx

@@ -12,11 +12,14 @@ import { AmbientCanvas } from "./ambient-canvas";
 
 export type SignalTone = "signal" | "amber" | "vermilion";
 
-/** sRGB triplets for the three semantic signals (matches globals.css). */
+/**
+ * sRGB triplets for the three semantic signals — MONOCHROME build:
+ * tone is expressed as luminance/intensity, not hue (black & white theme).
+ */
 export const SIGNAL_RGB: Record<SignalTone, [number, number, number]> = {
-  signal: [0.42, 1.0, 0.52],
-  amber: [1.0, 0.76, 0.28],
-  vermilion: [1.0, 0.34, 0.28],
+  signal: [0.92, 0.94, 0.96], // nominal — near-white
+  amber: [0.62, 0.64, 0.68], // warn — mid grey
+  vermilion: [0.78, 0.8, 0.84], // danger — bright flash grey
 };
 
 export interface AmbientState {

services/frontend/src/components/shell/mobile-nav.tsx

@@ -24,16 +24,25 @@ export function MobileNav() {
             aria-label={item.label}
             aria-current={active ? "page" : undefined}
             className={cn(
-              "relative flex flex-1 flex-col items-center justify-center rounded-[12px] rounded-t-[20px] px-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] pt-2 md:hidden",
+              "game-nav-item relative flex min-h-[44px] flex-1 flex-col items-center justify-center rounded-t-[20px] px-2 pt-2 pb-[calc(0.4rem+env(safe-area-inset-bottom))] md:hidden",
               active
-                ? "bg-signal/15 text-signal"
-                : "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
+                ? "is-active text-white"
+                : "text-ink-faint hover:text-ink-soft",
             )}
           >
             {active && (
-              <span className="absolute -top-2 h-8 w-8 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
+              <span
+                aria-hidden="true"
+                className="absolute inset-x-4 top-0 h-[2px] bg-white shadow-[0_0_8px_var(--color-signal-glow)]"
+              />
             )}
-            <item.icon className="size-[20px]" strokeWidth={active ? 2.4 : 2} />
+            <span className="game-sweep" aria-hidden="true">
+              <i />
+            </span>
+            <item.icon
+              className="relative z-10 size-[20px]"
+              strokeWidth={active ? 2.4 : 2}
+            />
             {item.label}
           </Link>
         );

services/frontend/src/components/shell/nav-rail.tsx

@@ -9,30 +9,37 @@ function NavItem({
   label,
   active,
   Icon,
+  index,
 }: {
   href: string;
   label: string;
   active: boolean;
   Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  index: number;
 }) {
   return (
     <a
       href={href}
       aria-label={label}
       aria-current={active ? "page" : undefined}
+      style={{ "--i": index } as React.CSSProperties}
       className={cn(
-        "group relative flex size-11 items-center justify-center rounded-[13px] transition-all",
+        "game-nav-item group flex size-11 items-center justify-center rounded-[13px] transition-colors",
         active
-          ? "bg-signal/15 text-signal"
+          ? "is-active bg-white/10 text-white"
           : "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
       )}
     >
-      {active && (
-        <span className="absolute -left-3 h-6 w-1 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
-      )}
-      <Icon className="size-[18px]" strokeWidth={active ? 2.4 : 2} />
+      {active && <span className="game-marker -left-3.5" />}
+      <span className="game-sweep" aria-hidden="true">
+        <i />
+      </span>
+      <Icon
+        className="relative z-10 size-[18px]"
+        strokeWidth={active ? 2.4 : 2}
+      />
       {/* hover tooltip — labels are hidden in the rail, so surface on hover */}
-      <span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
+      <span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 font-mono text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
         {label}
       </span>
     </a>
@@ -46,11 +53,12 @@ export function NavRail() {
   return (
     <nav className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[68px] flex-col items-center gap-1 rounded-[18px] py-4 md:flex">
       <div className="flex flex-1 flex-col gap-1">
-        {navItems.map((item) => (
+        {navItems.map((item, i) => (
           <NavItem
             key={item.href}
             href={item.href}
             label={item.label}
+            index={i}
             active={isActivePath(path, item.matchPrefix)}
             Icon={item.icon}
           />