Add ambient visual reactivity and location visit variety

- #app's filter (hue-rotate/saturate) now tracks dread continuously,
  and a fixed vignette bleeds red as hemlighet drops below 40 — no
  new assets, just CSS driven by existing state.
- A kaos log entry now triggers a brief screen-glitch shake.
- Location visits pick from 3 flavor-text variants per site instead
  of a single fixed line, so repeat visits don't repeat verbatim.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/ui.ts

@@ -121,6 +121,8 @@ export function initUI(app: HTMLElement, onUpgrade: (id: string) => void, onRest
       <button class="overlay-btn" id="overlay-btn">Börja om</button>
     </div>
 
+    <div id="danger-vignette"></div>
+
     <div id="event-modal" class="help-modal">
       <div class="help-modal-inner" id="event-modal-inner">
         <div class="help-modal-body">
@@ -172,6 +174,11 @@ export function renderState(state: State): void {
   setBar('bar-hemlighet', state.hemlighet);
   setBar('bar-kaos', state.kaos);
 
+  // Ambient visual reactivity — the deeper the dread, the more the world tilts; low hemlighet bleeds red at the edges.
+  const root = document.documentElement.style;
+  root.setProperty('--dread-intensity', Math.min(1, state.dread / 150).toFixed(3));
+  root.setProperty('--hemlighet-danger', (state.hemlighet < 40 ? (1 - state.hemlighet / 40) * 0.35 : 0).toFixed(3));
+
   const ritualSection = document.getElementById('ritual-section')!;
   if (state.ritualUnlocked) {
     ritualSection.style.display = '';
@@ -287,6 +294,13 @@ function renderLog(state: State): void {
     `<div class="log-entry ${e.kind}">${e.text}</div>`
   ).join('');
   log.scrollTop = 0;
+
+  if (state.log[0]?.kind === 'kaos') {
+    const app = document.getElementById('app')!;
+    app.classList.remove('kaos-glitch');
+    void app.offsetWidth; // restart animation
+    app.classList.add('kaos-glitch');
+  }
 }
 
 function showOverlay(state: State): void {