feat: add night mode theme with moon and twinkling stars

src/App.css

@@ -97,6 +97,35 @@ main {
   100% { opacity: 0;   transform: translate(0, -40px) scale(1.4); }
 }
 
+.night-toggle {
+  position: fixed;
+  top: 16px;
+  right: 60px;
+  background: transparent;
+  border: 1px solid #eee;
+  border-radius: 999px;
+  width: 36px;
+  height: 36px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  cursor: pointer;
+  color: #888;
+  z-index: 10;
+  transition: border-color 150ms ease, transform 150ms ease;
+}
+
+.night-toggle:hover {
+  border-color: #ccc;
+  transform: scale(1.05);
+}
+
+.night-toggle:focus-visible {
+  outline: 2px solid #888;
+  outline-offset: 2px;
+}
+
 .mute-toggle {
   position: fixed;
   top: 16px;
@@ -138,7 +167,68 @@ main {
   z-index: 10;
 }
 
+.night-sky {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.moon {
+  position: absolute;
+  top: 8vh;
+  left: 8vw;
+  font-size: 64px;
+  line-height: 1;
+  filter: drop-shadow(0 0 18px rgba(255, 240, 180, 0.55));
+  animation: moon-glow 5s ease-in-out infinite;
+}
+
+@keyframes moon-glow {
+  0%, 100% { filter: drop-shadow(0 0 14px rgba(255, 240, 180, 0.45)); }
+  50%      { filter: drop-shadow(0 0 22px rgba(255, 240, 180, 0.7)); }
+}
+
+.star {
+  position: absolute;
+  color: #fff8d6;
+  font-size: 12px;
+  opacity: 0.85;
+  text-shadow: 0 0 6px rgba(255, 248, 214, 0.7);
+  animation: twinkle 2.4s ease-in-out infinite;
+}
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.25; transform: scale(0.85); }
+  50%      { opacity: 1;    transform: scale(1.1); }
+}
+
+.star-0 { top: 14vh; left: 22vw; animation-delay: 0s;   font-size: 10px; }
+.star-1 { top:  6vh; left: 38vw; animation-delay: 0.4s; font-size: 14px; }
+.star-2 { top: 24vh; left: 55vw; animation-delay: 0.8s; font-size: 11px; }
+.star-3 { top:  9vh; left: 72vw; animation-delay: 1.2s; font-size: 13px; }
+.star-4 { top: 30vh; left: 86vw; animation-delay: 1.6s; font-size: 10px; }
+.star-5 { top: 46vh; left: 12vw; animation-delay: 2.0s; font-size: 12px; }
+.star-6 { top: 38vh; left: 33vw; animation-delay: 0.6s; font-size: 9px;  }
+.star-7 { top: 18vh; left: 92vw; animation-delay: 1.4s; font-size: 11px; }
+
+body.night .tagline { color: #b8c0e0; }
+body.night .counter { color: #8088a8; }
+body.night .steam   { color: #c8d0f0; }
+body.night .mute-toggle,
+body.night .night-toggle {
+  border-color: #2a3360;
+  color: #c8d0f0;
+}
+body.night .mute-toggle:hover,
+body.night .night-toggle:hover {
+  border-color: #4a5588;
+}
+
 @media (prefers-reduced-motion: reduce) {
+  .moon, .star { animation: none; }
+  body { transition: none; }
+
   .train-emoji:hover { animation: none; }
   .steam { display: none; }
 

src/App.tsx

@@ -39,6 +39,10 @@ function App() {
     if (typeof localStorage === 'undefined') return false
     return localStorage.getItem('wtc:muted') === '1'
   })
+  const [night, setNight] = useState<boolean>(() => {
+    if (typeof localStorage === 'undefined') return false
+    return localStorage.getItem('wtc:night') === '1'
+  })
   const [hasDispatched, setHasDispatched] = useState(false)
 
   const nextIdRef = useRef(1)
@@ -53,6 +57,11 @@ function App() {
     localStorage.setItem('wtc:muted', muted ? '1' : '0')
   }, [muted])
 
+  useEffect(() => {
+    document.body.classList.toggle('night', night)
+    localStorage.setItem('wtc:night', night ? '1' : '0')
+  }, [night])
+
   useEffect(() => {
     if (chooRef.current) return
     const choo = new Audio('/choo-choo.mp3')
@@ -134,6 +143,8 @@ function App() {
         dispatch()
       } else if (e.key === 'm' || e.key === 'M') {
         setMuted((m) => !m)
+      } else if (e.key === 'n' || e.key === 'N') {
+        setNight((n) => !n)
       }
     }
     window.addEventListener('keydown', onKey)
@@ -142,6 +153,15 @@ function App() {
 
   return (
     <main onClick={dispatch}>
+      {night && (
+        <div className="night-sky" aria-hidden="true">
+          <span className="moon" role="img" aria-label="moon">🌙</span>
+          {Array.from({ length: 8 }).map((_, i) => (
+            <span key={i} className={`star star-${i}`}>✦</span>
+          ))}
+        </div>
+      )}
+
       <div className={`hero${hasDispatched ? ' dispatched' : ''}`} aria-hidden={hasDispatched}>
         <span className="train-emoji" role="img" aria-label="train">🚂</span>
         <span className="tagline">click anywhere to dispatch a train</span>
@@ -172,6 +192,18 @@ function App() {
         </span>
       ))}
 
+      <button
+        className="night-toggle"
+        onClick={(e) => {
+          e.stopPropagation()
+          setNight((n) => !n)
+        }}
+        aria-label={night ? 'Switch to day mode' : 'Switch to night mode'}
+        aria-pressed={night}
+      >
+        {night ? '☀️' : '🌙'}
+      </button>
+
       <button
         className="mute-toggle"
         onClick={(e) => {

src/index.css

@@ -1,6 +1,11 @@
 body {
   margin: 0;
   background: #fff;
+  transition: background 600ms ease;
+}
+
+body.night {
+  background: radial-gradient(ellipse at 70% 20%, #1b2347 0%, #0a0e24 60%, #05071a 100%);
 }
 
 #root {