AshDevFr · AshDevFr · Mar 16, 2026 · Mar 16, 2026 · Mar 16, 2026 · Mar 16, 2026
diff --git a/index.html b/index.html
@@ -5,6 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="data:,">
     <title>GLORP</title>
+    <script>
+      // Apply high-contrast attribute before first paint to avoid flash of
+      // un-styled content. Reads from the same localStorage key used by
+      // Zustand persist ("glorp-settings").
+      var stored, parsed;
+      try {
+        stored = localStorage.getItem("glorp-settings");
+        if (stored) {
+          parsed = JSON.parse(stored);
+          if (parsed && parsed.state && parsed.state.highContrast === true) {
+            document.documentElement.setAttribute("data-high-contrast", "true");
+          }
+        }
+      } catch (e) {
+        // Ignore storage / parse errors — graceful degradation.
+      }
+    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/CrtOverlay.tsx b/src/components/CrtOverlay.tsx
@@ -1,9 +1,11 @@
+import { useReducedMotion } from "../hooks/useReducedMotion";
 import { useSettingsStore } from "../store/settingsStore";
 
 export function CrtOverlay() {
   const crtEnabled = useSettingsStore((s) => s.crtEnabled);
+  const reduced = useReducedMotion();
 
-  if (!crtEnabled) return null;
+  if (!crtEnabled || reduced) return null;
 
   return (
     <div

diff --git a/src/components/GameLayout.tsx b/src/components/GameLayout.tsx
@@ -11,6 +11,7 @@ import type { OfflineProgressResult } from "../engine/offlineEngine";
 import { computeOfflineProgress } from "../engine/offlineEngine";
 import { useDailyObjectiveTracking } from "../hooks/useDailyObjectiveTracking";
 import { useGameLoop } from "../hooks/useGameLoop";
+import { useHighContrast } from "../hooks/useHighContrast";
 import { useKonamiCode } from "../hooks/useKonamiCode";
 import { useOfflineNotification } from "../hooks/useOfflineNotification";
 import { useReducedMotion } from "../hooks/useReducedMotion";
@@ -26,13 +27,13 @@ import { SettingsPanel } from "./SettingsPanel";
 import { StatsBar } from "./StatsBar";
 import { StatsPanel } from "./StatsPanel";
 import { StorageBanner } from "./StorageBanner";
-import { TutorialOverlay } from "./TutorialOverlay";
 import { UpgradesSidebar } from "./UpgradesSidebar";
 
 export function GameLayout() {
   useGameLoop();
   useDailyObjectiveTracking();
   useOfflineNotification();
+  useHighContrast();
 
   const [offlineResult, setOfflineResult] =
     useState<OfflineProgressResult | null>(null);
@@ -156,7 +157,6 @@ export function GameLayout() {
         opened={settingsOpen}
         onClose={() => setSettingsOpen(false)}
       />
-      <TutorialOverlay />
       <CrtOverlay />
       <StorageBanner />
 

diff --git a/src/components/SettingsPanel.tsx b/src/components/SettingsPanel.tsx
@@ -31,11 +31,15 @@ export function SettingsPanel({
 }) {
   const crtEnabled = useSettingsStore((s) => s.crtEnabled);
   const animationsDisabled = useSettingsStore((s) => s.animationsDisabled);
+  const reducedMotion = useSettingsStore((s) => s.reducedMotion);
+  const highContrast = useSettingsStore((s) => s.highContrast);
   const numberFormat = useSettingsStore((s) => s.numberFormat);
   const setCrtEnabled = useSettingsStore((s) => s.setCrtEnabled);
   const setAnimationsDisabled = useSettingsStore(
     (s) => s.setAnimationsDisabled,
   );
+  const setReducedMotion = useSettingsStore((s) => s.setReducedMotion);
+  const setHighContrast = useSettingsStore((s) => s.setHighContrast);
   const setNumberFormat = useSettingsStore((s) => s.setNumberFormat);
   const soundEnabled = useSettingsStore((s) => s.soundEnabled);
   const setSoundEnabled = useSettingsStore((s) => s.setSoundEnabled);
@@ -178,6 +182,29 @@ export function SettingsPanel({
         position="right"
       >
         <Stack gap="md">
+          <Text size="xs" c="dimmed" ff="monospace" fw={700}>
+            ACCESSIBILITY
+          </Text>
+          <Switch
+            label="Reduced Motion"
+            description="Disable animations, particles, screen shake and counter interpolation"
+            checked={reducedMotion}
+            onChange={(e) => setReducedMotion(e.currentTarget.checked)}
+            styles={{ label: { fontFamily: "monospace" } }}
+          />
+          <Switch
+            label="High Contrast"
+            description="Pure black background, white text, yellow interactive elements"
+            checked={highContrast}
+            onChange={(e) => setHighContrast(e.currentTarget.checked)}
+            styles={{ label: { fontFamily: "monospace" } }}
+          />
+
+          <Divider />
+
+          <Text size="xs" c="dimmed" ff="monospace" fw={700}>
+            DISPLAY
+          </Text>
           <Switch
             label="CRT Scanlines"
             description="Apply a retro CRT scanline overlay"
@@ -201,6 +228,12 @@ export function SettingsPanel({
             }
             styles={{ label: { fontFamily: "monospace" } }}
           />
+
+          <Divider />
+
+          <Text size="xs" c="dimmed" ff="monospace" fw={700}>
+            AUDIO & NOTIFICATIONS
+          </Text>
           <Switch
             label="Sound Effects"
             description="Play synthesised audio feedback for clicks, purchases and events"

diff --git a/src/global.css b/src/global.css
@@ -177,22 +177,6 @@ body {
   }
 }
 
-/* -- Tutorial highlight ring: green glow pulse (1.5 s infinite) ---------- */
-
-@keyframes tutorial-pulse {
-  0%,
-  100% {
-    box-shadow: 0 0 4px rgba(64, 192, 87, 0.4);
-    opacity: 1;
-  }
-  50% {
-    box-shadow:
-      0 0 14px rgba(64, 192, 87, 0.8),
-      0 0 28px rgba(64, 192, 87, 0.4);
-    opacity: 0.85;
-  }
-}
-
 /* ── ASCII art color classes ─────────────────────────────── */
 
 .ascii-eyes {
@@ -336,3 +320,49 @@ body {
     animation: none;
   }
 }
+
+/* ── High Contrast mode ─────────────────────────────────────────────────── */
+/* Applied via data-high-contrast="true" on <html>, set by useHighContrast   */
+/* hook. An inline script in index.html sets this attribute before React      */
+/* hydrates to avoid flash of un-styled content.                              */
+
+[data-high-contrast="true"] body {
+  background-color: #000;
+  color: #fff;
+}
+
+[data-high-contrast="true"] {
+  --mantine-color-body: #000;
+  --mantine-color-text: #fff;
+  --neon-green: #39ff14;
+}
+
+/* Interactive elements: bright yellow */
+[data-high-contrast="true"] button,
+[data-high-contrast="true"] [role="button"],
+[data-high-contrast="true"] a {
+  color: #ffff00 !important;
+}
+
+/* ASCII art color spans: revert to terminal green in high contrast */
+[data-high-contrast="true"] .ascii-eyes,
+[data-high-contrast="true"] .ascii-electric,
+[data-high-contrast="true"] .ascii-warm,
+[data-high-contrast="true"] .ascii-glow,
+[data-high-contrast="true"] .ascii-dim {
+  color: #39ff14;
+  text-shadow: none;
+}
+
+/* Mantine dark panel backgrounds → pure black */
+[data-high-contrast="true"] .mantine-AppShell-root,
+[data-high-contrast="true"] .mantine-AppShell-header,
+[data-high-contrast="true"] .mantine-AppShell-main {
+  background-color: #000;
+}
+
+/* Reduce motion: also disable animations in high-contrast mode */
+[data-high-contrast="true"] .float-particle {
+  animation: none;
+  opacity: 0;
+}
diff --git a/src/hooks/useHighContrast.test.ts b/src/hooks/useHighContrast.test.ts
@@ -0,0 +1,61 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { initialSettings, useSettingsStore } from "../store/settingsStore";
+import { useHighContrast } from "./useHighContrast";
+
+const HC_ATTR = "data-high-contrast";
+
+beforeEach(() => {
+  useSettingsStore.setState(initialSettings);
+  document.documentElement.removeAttribute(HC_ATTR);
+});
+
+afterEach(() => {
+  document.documentElement.removeAttribute(HC_ATTR);
+});
+
+describe("useHighContrast", () => {
+  it("returns false when highContrast is off", () => {
+    const { result } = renderHook(() => useHighContrast());
+    expect(result.current).toBe(false);
+  });
+
+  it("sets data-high-contrast=false on <html> when off", () => {
+    renderHook(() => useHighContrast());
+    expect(document.documentElement.getAttribute(HC_ATTR)).toBe("false");
+  });
+
+  it("returns true when highContrast is on", () => {
+    useSettingsStore.setState({ highContrast: true });
+    const { result } = renderHook(() => useHighContrast());
+    expect(result.current).toBe(true);
+  });
+
+  it("sets data-high-contrast=true on <html> when enabled", () => {
+    useSettingsStore.setState({ highContrast: true });
+    renderHook(() => useHighContrast());
+    expect(document.documentElement.getAttribute(HC_ATTR)).toBe("true");
+  });
+
+  it("updates data-high-contrast when store is toggled on", () => {
+    const { result } = renderHook(() => useHighContrast());
+    expect(result.current).toBe(false);
+    act(() => {
+      useSettingsStore.setState({ highContrast: true });
+    });
+    expect(result.current).toBe(true);
+    expect(document.documentElement.getAttribute(HC_ATTR)).toBe("true");
+  });
+
+  it("updates data-high-contrast back to false when disabled", () => {
+    useSettingsStore.setState({ highContrast: true });
+    const { result } = renderHook(() => useHighContrast());
+    expect(result.current).toBe(true);
+    act(() => {
+      useSettingsStore.setState({ highContrast: false });
+    });
+    expect(result.current).toBe(false);
+    expect(document.documentElement.getAttribute(HC_ATTR)).toBe("false");
+  });
+});
diff --git a/src/hooks/useHighContrast.ts b/src/hooks/useHighContrast.ts
@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+import { useSettingsStore } from "../store/settingsStore";
+
+const HC_ATTR = "data-high-contrast";
+
+/**
+ * Reads the highContrast setting from the settings store and syncs it as a
+ * `data-high-contrast` attribute on <html>. CSS in global.css uses this
+ * attribute to apply high-contrast overrides.
+ *
+ * Call this hook once near the root of the component tree (GameLayout).
+ */
+export function useHighContrast(): boolean {
+  const highContrast = useSettingsStore((s) => s.highContrast);
+
+  useEffect(() => {
+    document.documentElement.setAttribute(
+      HC_ATTR,
+      highContrast ? "true" : "false",
+    );
+  }, [highContrast]);
+
+  return highContrast;
+}
diff --git a/src/hooks/useInterpolatedTd.ts b/src/hooks/useInterpolatedTd.ts
@@ -5,6 +5,7 @@ import { UPGRADES } from "../data/upgrades";
 import { getTotalTdPerSecond } from "../engine/upgradeEngine";
 import { useGameStore } from "../store";
 import { Decimal } from "../utils/decimal";
+import { useReducedMotion } from "./useReducedMotion";
 
 /**
  * Pure interpolation logic — exported for unit testing.
@@ -42,17 +43,31 @@ export function interpolateTd(
  * Returns a smoothly-interpolated Training Data value that updates at ~60 fps
  * via requestAnimationFrame, instead of snapping once per engine tick.
  *
+ * When reduced motion is enabled, skips interpolation entirely and snaps to
+ * the authoritative store value once per second instead.
+ *
  * The authoritative value (from Zustand) remains the source of truth; this
  * hook only affects the *display*.
  */
 export function useInterpolatedTd(): Decimal {
+  const reduced = useReducedMotion();
   const [displayTd, setDisplayTd] = useState<Decimal>(
     () => useGameStore.getState().trainingData,
   );
   const rafRef = useRef<number>(0);
   const lastTimeRef = useRef<number>(performance.now());
 
   useEffect(() => {
+    if (reduced) {
+      cancelAnimationFrame(rafRef.current);
+      // Snap immediately to the current value, then update once per second.
+      setDisplayTd(useGameStore.getState().trainingData);
+      const id = setInterval(() => {
+        setDisplayTd(useGameStore.getState().trainingData);
+      }, 1000);
+      return () => clearInterval(id);
+    }
+
     const frame = (now: number) => {
       // Cap elapsed to 100 ms to avoid huge jumps after tab becomes active.
       const elapsed = Math.min((now - lastTimeRef.current) / 1000, 0.1);
@@ -78,7 +93,7 @@ export function useInterpolatedTd(): Decimal {
 
     rafRef.current = requestAnimationFrame(frame);
     return () => cancelAnimationFrame(rafRef.current);
-  }, []); // Runs once; reads latest store state every frame via getState().
+  }, [reduced]);
 
   return displayTd;
 }
diff --git a/src/hooks/useReducedMotion.test.ts b/src/hooks/useReducedMotion.test.ts
@@ -67,4 +67,21 @@ describe("useReducedMotion", () => {
     const { result } = renderHook(() => useReducedMotion());
     expect(result.current).toBe(true);
   });
+
+  it("returns true when reducedMotion store setting is enabled", () => {
+    mockMatchMedia(false);
+    useSettingsStore.setState({ reducedMotion: true });
+    const { result } = renderHook(() => useReducedMotion());
+    expect(result.current).toBe(true);
+  });
+
+  it("returns false when reducedMotion is false and OS preference is off", () => {
+    mockMatchMedia(false);
+    useSettingsStore.setState({
+      reducedMotion: false,
+      animationsDisabled: false,
+    });
+    const { result } = renderHook(() => useReducedMotion());
+    expect(result.current).toBe(false);
+  });
 });
diff --git a/src/hooks/useReducedMotion.ts b/src/hooks/useReducedMotion.ts
@@ -8,6 +8,7 @@ export function useReducedMotion(): boolean {
   });
 
   const animationsDisabled = useSettingsStore((s) => s.animationsDisabled);
+  const reducedMotion = useSettingsStore((s) => s.reducedMotion);
 
   useEffect(() => {
     const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
@@ -16,5 +17,5 @@ export function useReducedMotion(): boolean {
     return () => mql.removeEventListener("change", handler);
   }, []);
 
-  return osPrefersReduced || animationsDisabled;
+  return osPrefersReduced || animationsDisabled || reducedMotion;
 }