feat: add night mode theme with moon and twinkling stars

src/App.css

@@ -138,9 +138,94 @@ main {
   z-index: 10;
 }
 
+.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;
+}
+
+.night-sky {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.moon {
+  position: fixed;
+  top: 6vh;
+  right: 8vw;
+  font-size: 56px;
+  line-height: 1;
+  filter: drop-shadow(0 0 12px rgba(255, 240, 200, 0.35));
+  animation: moon-glow 4s ease-in-out infinite;
+}
+
+.star {
+  position: fixed;
+  font-size: 14px;
+  color: #f4f1d8;
+  opacity: 0.85;
+  text-shadow: 0 0 6px rgba(244, 241, 216, 0.6);
+  animation: twinkle 3s ease-in-out infinite;
+}
+
+.star:nth-of-type(2n) { animation-duration: 4.2s; animation-delay: 0.6s; }
+.star:nth-of-type(3n) { animation-duration: 5s;   animation-delay: 1.2s; }
+.star:nth-of-type(4n) { animation-duration: 3.6s; animation-delay: 1.8s; }
+
+@keyframes twinkle {
+  0%, 100% { opacity: 0.3; transform: scale(0.9); }
+  50%      { opacity: 1;   transform: scale(1.1); }
+}
+
+@keyframes moon-glow {
+  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 240, 200, 0.3)); }
+  50%      { filter: drop-shadow(0 0 18px rgba(255, 240, 200, 0.55)); }
+}
+
+body.night .tagline { color: #8d96b3; }
+body.night .counter { color: #6a7596; }
+body.night .steam   { color: #d8def0; }
+
+body.night .mute-toggle,
+body.night .night-toggle {
+  border-color: #2a3450;
+  color: #b8c0db;
+}
+
+body.night .mute-toggle:hover,
+body.night .night-toggle:hover {
+  border-color: #4a5778;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .train-emoji:hover { animation: none; }
   .steam { display: none; }
+  .star, .moon { animation: none; }
 
   .train.ltr,
   .train.rtl {

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(() => {
+    localStorage.setItem('wtc:night', night ? '1' : '0')
+    document.body.classList.toggle('night', night)
+  }, [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,20 @@ function App() {
 
   return (
     <main onClick={dispatch}>
+      {night && (
+        <div className="night-sky" aria-hidden="true">
+          <span className="moon">🌙</span>
+          <span className="star" style={{ top: '8vh', left: '12vw' }}>✦</span>
+          <span className="star" style={{ top: '14vh', left: '78vw' }}>✧</span>
+          <span className="star" style={{ top: '5vh', left: '42vw' }}>·</span>
+          <span className="star" style={{ top: '22vh', left: '28vw' }}>✦</span>
+          <span className="star" style={{ top: '4vh', left: '64vw' }}>✧</span>
+          <span className="star" style={{ top: '18vh', left: '88vw' }}>·</span>
+          <span className="star" style={{ top: '11vh', left: '55vw' }}>✦</span>
+          <span className="star" style={{ top: '25vh', left: '8vw' }}>·</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>
@@ -184,6 +209,18 @@ function App() {
         {muted ? '🔇' : '🔊'}
       </button>
 
+      <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>
+
       <div className="counter" aria-live="polite">
         {count} {count === 1 ? 'train' : 'trains'} dispatched
       </div>

src/index.css

@@ -1,6 +1,11 @@
 body {
   margin: 0;
   background: #fff;
+  transition: background 600ms ease;
+}
+
+body.night {
+  background: radial-gradient(ellipse at top, #1a2238 0%, #0a0e1a 70%);
 }
 
 #root {