feat: ship the redesigned pixel UI wired to the real engine (+ crisis/soul/distance API fields)

app/crisis_view.py

@@ -0,0 +1,40 @@
+"""Surface the engine's continuous crisis gradient (0.0-1.0) for the API.
+
+The engine computes concern via engine.crisis.CrisisTracker, which blends the
+message's VADUGWI read, running state, trajectory and detected structures into a
+single 0.0-1.0 float. For a stateless per-request read we feed the current read
+as both the message score and the running state, with the structures the engine
+already detected for this text.
+"""
+from __future__ import annotations
+
+from engine.crisis import CrisisTracker
+from engine.shared import VADUG
+
+
+def _to_vadug(read: list[int]) -> VADUG:
+    return VADUG(v=read[0], a=read[1], d=read[2], u=read[3],
+                 g=read[4], w=read[5], i=read[6])
+
+
+def crisis_value(read: list[int], structures: list[str] | None = None) -> float:
+    """Single-message concern 0.0-1.0 from a raw VADUGWI read + detected structures."""
+    score = _to_vadug(read)
+    tracker = CrisisTracker()
+    reading = tracker.read(score, score, list(structures or []))
+    return round(float(reading.concern), 3)
+
+
+def crisis_label(value: float) -> str:
+    if value < 0.15:
+        return "calm"
+    if value < 0.4:
+        return "watch"
+    if value < 0.7:
+        return "concern"
+    return "high concern"
+
+
+def crisis_block(read: list[int], structures: list[str] | None = None) -> dict:
+    v = crisis_value(read, structures)
+    return {"value": v, "label": crisis_label(v)}

app/main.py

@@ -12,6 +12,7 @@ from app.scorer import score_with_trace
 from app.soul_bridge import SoulBridge
 from app.appearance import mood_to_appearance
 from app.trace_view import shape_trace
+from app.crisis_view import crisis_block
 from app.vocab import mood_word
 from app.voice import emoticon, simlish, voice_params
 from app.audit import AuditLog, build_row
@@ -81,11 +82,17 @@ class ToyIn(BaseModel):
 
 def _state() -> dict:
     mood = _bridge.mood()
+    soul = _bridge.soul_baseline()
     return {
         "appearance": mood_to_appearance(mood),
         "mood_word": mood_word(mood),
         "emoticon": emoticon(mood),
         "needs": _care.needs(_traffic()),
+        "soul": soul,
+        "distance": _bridge.soul_distance(),
+        # default: no text-derived crisis (physical/idle states are calm). The
+        # /say handler overrides this with the real read+structures concern.
+        "crisis": {"value": 0.0, "label": "calm"},
     }
 
 
@@ -184,6 +191,7 @@ def say(body: SayIn, request: Request):
     state["read"] = raw
     state["deltas"] = _bridge.deltas()
     state["trace"] = shape_trace(trace)
+    state["crisis"] = crisis_block(raw, state["trace"].get("structures"))
     state["why"] = _why(raw, state["deltas"])
     state["simlish"] = simlish(mood)
     state["voice"] = voice_params(mood)

app/soul_bridge.py

@@ -128,6 +128,23 @@ class SoulBridge:
         m = self._plugin.snapshot().get("mood")
         return [int(x) for x in m] if m else list(NEUTRAL)
 
+    def soul_baseline(self) -> list[int]:
+        """Persistent baseline mood (the soul) as a 7-int [v,a,d,u,g,w,i] array."""
+        s = self._plugin.snapshot().get("soul") or {}
+        dims = ("v", "a", "d", "u", "g", "w", "i")
+        if all(k in s for k in dims):
+            return [int(s[k]) for k in dims]
+        return list(BABY_SOUL.to_list()) if hasattr(BABY_SOUL, "to_list") else [
+            BABY_SOUL.v, BABY_SOUL.a, BABY_SOUL.d, BABY_SOUL.u,
+            BABY_SOUL.g, BABY_SOUL.w, BABY_SOUL.i,
+        ]
+
+    def soul_distance(self) -> int:
+        """Drift between live mood and soul baseline: round(mean |diff|) over 7 dims."""
+        mood = self.mood()
+        soul = self.soul_baseline()
+        return round(sum(abs(a - b) for a, b in zip(mood, soul)) / 7.0)
+
     def previous_mood(self) -> list[int]:
         return list(self._prev)
 

static/app.js

@@ -1,837 +1,850 @@
 'use strict';
-
-const $ = (s) => document.querySelector(s);
-const DIMS = ["V","A","D","U","G","W","I"];
-const DIM_LABELS = ["valence","arousal","dominance","urgency","gravity","self-worth","intent"];
-const DIM_COLORS = ["#ff9f5a","#ffd44a","#8ec5ff","#c79bff","#9fd0c9","#ff7d9c","#86e0a0"];
-
-let _ap = null;                 // latest appearance (updated by render)
-const _spring = { pos: 1, vel: 0 };   // squish scale spring (1 = rest)
-let _phase = 0, _lastT = 0;
-// ── locomotion state (the creature lives on the floor and wanders) ──
-let _posX = 200;        // creature CENTER x in scene coords (viewBox 0..400)
-let _facing = 1;        // 1 = facing right, -1 = facing left
-let _vel = 0;           // current x speed (scene px/s) — drives the walk bob
-let _target = null;     // {x, action:{kind,name}} set when you tap an object
-let _wanderX = 200;     // current idle wander destination
-let _pause = 0.8;       // seconds to linger before wandering again
-let _hold = null;       // {item, floorEl, until} while holding/playing with an item
-let _float = null;      // {parts, until, startT} Sims-style +/- that floats up on any VADUGWI change
-const ROAM_MIN = 74, ROAM_MAX = 326;
-
-// item registry: display size (so a held item is the SAME size as on the floor),
-// sprite, the floor element to hide while held, and which VADUGWI it raises.
-const ASSET = (s) => '/static/assets/' + s + '?v=16';
-const ITEM = {
-  balloon:  { sprite: 'toy-balloon.png',  w: 42, h: 52, raises: '▲V ▲A ▲D', floor: '[data-toy="balloon"]' },
-  musicbox: { sprite: 'toy-musicbox.png', w: 34, h: 32, raises: '▲V ▾A',     floor: '[data-toy="musicbox"]' },
-  mirror:   { sprite: 'toy-mirror.png',   w: 32, h: 36, raises: '▲V ▲W ▲D', floor: '[data-toy="mirror"]' },
-  teddy:    { sprite: 'toy-teddy.png',    w: 42, h: 42, raises: '▲V ▲W ▾A', floor: '[data-toy="teddy"]' },
-  rattle:   { sprite: 'toy-rattle.png',   w: 32, h: 34, raises: '▲A ▲U',     floor: '[data-toy="rattle"]' },
-  ball:     { sprite: 'obj-ball.png',     w: 30, h: 30, raises: '▲V ▲A ▲D', floor: '[data-care="play"]' },
-};
-function _rand(a, b) { return a + Math.random() * (b - a); }
-
-// ── METERS ──────────────────────────────────────────────────────────────────
-
-function renderMeters(mood, deltas, read) {
-  // "this message read:" line
-  if (read && read.length === 7) {
-    $('#read-row').textContent = 'this message read: ' + DIMS.map((d,i) => `${d}=${read[i]}`).join('  ');
-  }
-
-  const container = $('#meter-rows');
-  container.innerHTML = '';
-  for (let i = 0; i < 7; i++) {
-    const val = mood[i] ?? 128;
-    const delta = (deltas && deltas[i] != null) ? deltas[i] : null;
-    const pct = Math.round((val / 255) * 100);
-
-    let deltaHtml = '';
-    if (delta != null && delta !== 0) {
-      const cls = delta > 0 ? 'up' : 'dn';
-      const arrow = delta > 0 ? '▲' : '▼';
-      deltaHtml = `<span class="meter-delta ${cls}">${arrow}${Math.abs(delta)}</span>`;
+/* Clanker pet — vanilla controller (no React, no dc-runtime).
+   Ports the redesign's DCLogic class to a plain object. The on-device fake VADUGWI
+   engine is GONE; data comes from the real FastAPI backend (/snapshot /say /care /toy
+   /moments). Animation loop, simlish, WebAudio blips, bowls, toy-play, behavior FSM
+   and tooltips are ported from the redesign verbatim. self_soothe + recognition
+   "welcome back" are preserved from the prior production app. */
+
+const App = {
+  // ---------- state ----------
+  root: null, stageEl: null, inputEl: null, tipEl: null,
+  name: 'Huggy',
+  soundOn: true,
+  // mood model: backend appearance.mood -> mood; disp lerps toward mood (redesign)
+  soul: {v:152,a:118,d:142,u:14,g:142,w:160,i:150},
+  mood: {v:152,a:118,d:142,u:14,g:142,w:160,i:150},
+  disp: {v:152,a:118,d:142,u:14,g:142,w:160,i:150},
+  haveSoul: false,           // backend soul[] present?
+  backendDistance: null,     // backend distance (NEW field; may be absent)
+  needsObj: {hunger:74, energy:80, attention:66, thirst:78},
+  lastDelta: {},
+  crisis: 0,
+  haveCrisis: false,
+  diary: [],
+  t0: performance.now(), lastTs: 0,
+  nextBlink: 1.2, blinkUntil: 0,
+  nextDart: 3, dart: 0, _dartEnd: 0,
+  itemEls: {},
+  dragId: null, dragWrap: null,
+  food: 0, water: 0,
+  action: null, actPos:{x:50,y:52,rot:0,sc:1}, _actEnd: null,
+  eating: 0, drinking: 0,
+  behavior: 'idle', shake: 0,
+  lastSpeak: 0,
+  uiAcc: 0,
+  ac: null, _raf: null, _warned: false,
+  items: [],
+  readPhrase: 'waiting…',
+  moodWord: 'calm',
+
+  // ====================================================================
+  // ITEM DEFS (icons + defaults) — backend toy/care names mapped per HOOKUP_SPEC
+  // ====================================================================
+  ICONS(kind){
+    const I = {
+      balloon:'<svg viewBox="0 0 40 56" width="100%"><path d="M20 2 C30 2 34 14 32 24 C30 34 24 40 20 40 C16 40 10 34 8 24 C6 14 10 2 20 2Z" fill="#ff7aa8"/><path d="M16 10 q4 -4 9 0" stroke="#fff" stroke-width="2" fill="none" opacity=".6"/><path d="M20 40 l-2 6 4 0 z" fill="#ff7aa8"/><path d="M20 46 q-5 6 0 10" stroke="#caa" stroke-width="1.4" fill="none"/></svg>',
+      ball:'<svg viewBox="0 0 40 40" width="100%"><circle cx="20" cy="20" r="17" fill="#4db5e8"/><path d="M3 20 h34 M20 3 v34" stroke="#fff" stroke-width="2.4" opacity=".85"/><path d="M7 9 q13 11 26 0 M7 31 q13 -11 26 0" stroke="#fff" stroke-width="2" fill="none" opacity=".6"/></svg>',
+      teddy:'<svg viewBox="0 0 44 44" width="100%"><circle cx="12" cy="9" r="6" fill="#b07a44"/><circle cx="32" cy="9" r="6" fill="#b07a44"/><circle cx="22" cy="24" r="17" fill="#c98c50"/><circle cx="16" cy="21" r="2.3" fill="#3a2410"/><circle cx="28" cy="21" r="2.3" fill="#3a2410"/><ellipse cx="22" cy="28" rx="6" ry="5" fill="#e3bf90"/><circle cx="22" cy="26" r="1.8" fill="#3a2410"/></svg>',
+      music:'<svg viewBox="0 0 40 38" width="100%"><rect x="4" y="14" width="32" height="22" rx="3" fill="#caa24a"/><rect x="4" y="14" width="32" height="6" rx="3" fill="#a8823a"/><path d="M18 6 v18" stroke="#3a2410" stroke-width="2.4"/><circle cx="16" cy="25" r="3.4" fill="#3a2410"/><path d="M18 6 q8 1 8 7" stroke="#3a2410" stroke-width="2.4" fill="none"/></svg>',
+      rattle:'<svg viewBox="0 0 36 40" width="100%"><circle cx="18" cy="13" r="11" fill="#7ad0a0"/><circle cx="13" cy="11" r="2" fill="#fff" opacity=".8"/><rect x="15" y="22" width="6" height="16" rx="3" fill="#e0b25a"/></svg>',
+      mirror:'<svg viewBox="0 0 34 40" width="100%"><ellipse cx="17" cy="14" rx="13" ry="13" fill="#d8c089"/><ellipse cx="17" cy="14" rx="9.5" ry="9.5" fill="#cdeaf2"/><path d="M11 10 q5 -4 11 0" stroke="#fff" stroke-width="2" fill="none" opacity=".7"/><rect x="14" y="26" width="6" height="13" rx="3" fill="#b58f44"/></svg>'
+    };
+    return I[kind] || I.ball;
+  },
+  // care = backend route+name: ball->/care{play}; others->/toy{<name>}
+  defaultItems(){
+    const base = [
+      {id:'ball',    kind:'ball',    ep:'care', name:'play',     x:30, y:88, size:7.5, tip:'Drag onto Huggy — he bounces it. Spikes arousal & joy.'},
+      {id:'balloon', kind:'balloon', ep:'toy',  name:'balloon',  x:14, y:76, size:8.5, tip:'Drag onto Huggy — he bats it around. Raises valence & dominance.'},
+      {id:'rattle',  kind:'rattle',  ep:'toy',  name:'rattle',   x:64, y:90, size:7,   tip:'Drag onto Huggy — he shakes it. Bumps arousal & urgency.'},
+      {id:'music',   kind:'music',   ep:'toy',  name:'musicbox', x:74, y:92, size:8,   tip:'Drag onto Huggy — he sways to it. Soothes: arousal down, valence up.'},
+      {id:'mirror',  kind:'mirror',  ep:'toy',  name:'mirror',   x:84, y:88, size:7,   tip:'Drag onto Huggy — he admires himself. Nudges self-worth.'},
+      {id:'teddy',   kind:'teddy',   ep:'toy',  name:'teddy',    x:93, y:92, size:10,  tip:'Drag onto Huggy — he squeezes it. Comfort: steadies valence & self-worth.'}
+    ];
+    return base.map(b=>({...b, resting:true, held:false}));
+  },
+
+  // ====================================================================
+  // PRESENTATIONAL HELPERS (client-side only; no engine math)
+  // ====================================================================
+  feltPhrase(C){
+    const vw = C.v<80?'miserable':C.v<118?'uneasy':C.v<=138?'level':C.v<=180?'warm':'glowing';
+    const aw = C.a<80?'flat':C.a<118?'settled':C.a<=138?'steady':C.a<=180?'keyed-up':'electric';
+    const ww = C.w<90?', a bit small':C.w>175?', sure of itself':'';
+    return `${vw}, ${aw}${ww}`;
+  },
+  emoteFrom(d){
+    if(this.haveCrisis && this.crisis>0.6) return ';_;';
+    if(d.v<100 && d.a>150) return '>:(';
+    if(d.v<104 && d.a<110) return 'T_T';
+    if(d.v<108) return '·︵·';
+    if(this.needsObj.energy<28) return '-_-';
+    if(d.v>168 && d.a>150) return '\\^o^/';
+    if(d.v>156) return '^‿^';
+    return '·‿·';
+  },
+  moodHue(d){
+    let hue, valN=(d.v-128)/127, aN=(d.a-128)/127;
+    if(d.v<116){ hue = d.a>138 ? 4 : 212; }
+    else if(d.v>152){ hue = 128; }
+    else hue = 46;
+    const sat = Math.round(54 + Math.abs(valN)*30 + Math.max(0,aN)*14);
+    return {hue, sat, light:58};
+  },
+
+  // backend role -> [bg, fg, border] + tooltip
+  roleColor(r){
+    const c={
+      EMOTIONAL:['rgba(95,170,255,.16)','#8fc0ff','rgba(95,170,255,.3)'],
+      SELF_REF :['rgba(255,210,30,.16)','#ffd86a','rgba(255,210,30,.3)'],
+      NEGATOR  :['rgba(255,90,90,.16)','#ff9b9b','rgba(255,90,90,.3)'],
+      AMPLIFIER:['rgba(95,210,140,.16)','#8fe6b0','rgba(95,210,140,.3)'],
+      CONNECTOR:['rgba(150,150,150,.12)','#bbb','rgba(150,150,150,.26)'],
+      CHOPPER  :['rgba(190,160,110,.16)','#dcc08a','rgba(190,160,110,.3)'],
+      SOLVENT  :['rgba(170,120,255,.16)','#c6a6ff','rgba(170,120,255,.3)'],
+      GAS      :['rgba(160,160,160,.12)','#9c968c','rgba(160,160,160,.24)']
+    };
+    return c[r]||c.GAS;
+  },
+  roleTip(r){
+    const t={
+      EMOTIONAL:'EMOTIONAL — carries a force vector from the curated vocabulary.',
+      SELF_REF :'SELF_REF — anchors the read to the speaker; routes valence into self-worth.',
+      NEGATOR  :'NEGATOR — flips the sign of nearby emotional words.',
+      AMPLIFIER:'AMPLIFIER — scales nearby force up.',
+      CONNECTOR:'CONNECTOR — discourse glue between clauses.',
+      CHOPPER  :'CHOPPER — context word whose meaning depends on structure.',
+      SOLVENT  :'SOLVENT — dissolves LIQUID atoms in a casual register.',
+      GAS      :'GAS — neutral / inert token.'
+    };
+    return t[r]||'structural role';
+  },
+
+  // ====================================================================
+  // RENDER FUNCTIONS (replace setState + dc-runtime sc-for/{{}})
+  // ====================================================================
+  renderMeters(){
+    const d=this.disp;
+    const dims=[
+      ['V','Valence','#55aaff','negative bias','positive bias',"Valence — emotional direction (0–255). 128 is neutral. \"I'm fine\" reads ~83 (uneasy), not positive."],
+      ['A','Arousal','#ff8855','calm / flat','reactive / volatile','Arousal — energy level. Low = flat or numb, high = reactive/volatile.'],
+      ['D','Dominance','#aa55ff','feels powerless','feels in control','Dominance — agency & power. Force Flow (who-does-what-to-whom) feeds this.'],
+      ['U','Urgency','#ff5555','no time pressure','everything urgent','Urgency — time pressure. Starts at 0 and only rises with urgent cues.'],
+      ['G','Gravity','#ffaa55','everything heavy','light & floating','Gravity — emotional weight. Low = crushing, high = light/floating.'],
+      ['W','Self-Worth','#55ffaa','self-critical','self-assured','Self-Worth — self-evaluation. Low W amplifies negatives (W→V coupling).'],
+      ['I','Intent','#ffff55','withdrawing','connecting','Intent — communicative direction, from withdraw to connect/control.']
+    ];
+    const read=(val,lo,hi)=> val<80?lo: val<118?'slightly '+lo: val>180?hi: val>138?'slightly '+hi:'neutral';
+    let html='';
+    for(const [key,name,color,lo,hi,tip] of dims){
+      const val=Math.round(d[key.toLowerCase()]);
+      const frac=val/255*100, center=50;
+      const barLeft=Math.min(center,frac), barW=Math.max(Math.abs(frac-center),1.2);
+      const del=this.lastDelta[key.toLowerCase()]||0;
+      const deltaText= del===0?'':(del>0?'▲'+del:'▼'+Math.abs(del));
+      const deltaColor= del>0?'#5fd08a':del<0?'#ff8a8a':'#a9967c';
+      html+=`<div class="meter" data-tip="${this._esc(tip)}">
+        <div class="meter-top">
+          <span class="meter-key" style="background:${color}">${key}</span>
+          <span class="meter-label">${name}</span>
+          <span class="meter-delta" style="color:${deltaColor}">${deltaText}</span>
+          <span class="meter-num">${val}</span>
+        </div>
+        <div class="meter-track"><div class="meter-center"></div>
+          <div class="meter-fill" style="left:${barLeft}%;width:${barW}%;background:${color}"></div>
+        </div>
+        <div class="meter-reading">— ${read(val,lo,hi)}</div>
+      </div>`;
     }
-
-    const div = document.createElement('div');
-    div.className = 'meter';
-    div.innerHTML = `
-      <div class="meter-row">
-        <span class="meter-name">${DIMS[i]} <small>${DIM_LABELS[i]}</small></span>
-        <span class="meter-right">
-          <span class="meter-val">${val}</span>
-          ${deltaHtml}
-        </span>
-      </div>
-      <div class="track"><div class="fill" style="width:${pct}%;background:${DIM_COLORS[i]}"></div></div>`;
-    container.appendChild(div);
-  }
-}
-
-// ── CREATURE / BLOB ──────────────────────────────────────────────────────────
-
-function renderBlob(ap) {
-  const h = ap.hue ?? 28;
-  const s = ap.saturation ?? 80;
-  const l = ap.lightness ?? 58;
-  const fill = `hsl(${h},${s}%,${l}%)`;
-  const darkFill = `hsl(${h},${s}%,${Math.max(l - 14, 10)}%)`;
-
-  $('#body').setAttribute('fill', fill);
-  document.querySelectorAll('.foot').forEach(el => el.setAttribute('fill', darkFill));
-
-  // arms use same fill color with stroke
-  ['#arm-l-path','#arm-r-path'].forEach(sel => {
-    const el = $(sel);
-    el.style.stroke = darkFill;
-    el.style.fill = 'none';
-  });
-  ['#hand-l','#hand-r'].forEach(sel => $(sel).setAttribute('fill', darkFill));
-
-  // ── anime-style emotion: body stays yellow, the FACE/cheeks glow ──
-  const glow = ap.glow || { type: 'none', hue: 0, intensity: 0 };
-  const gi = glow.intensity || 0;
-  const gEl = $('#emote-glow');
-  if (gEl) {
-    gEl.setAttribute('opacity', (gi * 0.62).toFixed(2));
-    const gc = `hsl(${glow.hue}, 92%, 55%)`;
-    const s0 = $('#emote-stop-0'), s1 = $('#emote-stop-1');
-    if (s0) s0.setAttribute('stop-color', gc);
-    if (s1) s1.setAttribute('stop-color', gc);
-  }
-  const chL = $('#cheek-l'), chR = $('#cheek-r');
-  if (chL && chR) {
-    let cheekFill = '#ff9090', cheekOp = 0.38;
-    if (glow.type === 'anger' || glow.type === 'fluster') { cheekFill = `hsl(${glow.hue},95%,56%)`; cheekOp = 0.4 + 0.5 * gi; }
-    else if (glow.type === 'joy') { cheekFill = 'hsl(338,90%,70%)'; cheekOp = 0.4 + 0.4 * gi; }
-    else if (glow.type === 'sad') { cheekFill = '#9fb8e0'; cheekOp = 0.22; }
-    [chL, chR].forEach(c => { c.setAttribute('fill', cheekFill); c.setAttribute('opacity', cheekOp.toFixed(2)); });
-  }
-
-  // aura behind him picks up the emotion color (subtle ambient mood), else warm yellow
-  const auraEl = $('#aura');
-  if (auraEl) {
-    auraEl.setAttribute('opacity', String((ap.aura ?? 0.25) * 2.4));
-    const stopEl = $('#aura-stop');
-    if (stopEl) stopEl.setAttribute('stop-color', gi > 0.15 ? `hsl(${glow.hue},85%,58%)` : `hsl(48,88%,60%)`);
-  }
-
-  // body transform: lean + droop + scale, composed in SVG local coords (creature center 100,116)
-  // #blob-place holds fixed scene placement; #blob gets dynamic per-message transform
-  const lean = (ap.lean ?? 0) * 10;
-  const dy = (ap.droop ?? 0) * 35; // local units (scene px × 1/S where S=0.40)
-  const sc = ap.scale ?? 1;
-  // SVG transforms apply right-to-left:
-  //   1. translate(-100 -116)  — move center to origin
-  //   2. scale(sc)             — scale around origin
-  //   3. translate(100 116)    — move back
-  //   4. rotate(lean 100 116) — lean around body center
-  //   5. translate(0 dy)       — droop (downward shift in local space)
-  const blobTransform = `translate(0 ${dy}) rotate(${lean} 100 116) translate(100 116) scale(${sc}) translate(-100 -116)`;
-  $('#blob').setAttribute('transform', blobTransform);
-
-  // parametric face
-  const face = ap.face || {};
-  const mouthVal = face.mouth ?? 0;       // -1 … +1 (frown … smile)
-  const eyeVal   = face.eye   ?? 1.0;    // ~0.5 … 1.4 openness
-  const browVal  = face.brow  ?? 0;      // -1 … +1 tilt
-
-  const sleeping = (ap.mood && window.ClankerPhysics
-                    && window.ClankerPhysics.behaviorFor(ap.mood) === 'sleep');
-  const eyeForRender = sleeping ? 0.12 : eyeVal;   // near-closed
-  renderFace(mouthVal, eyeForRender, browVal, h, s, l);
-
-  // hand pose by mood positivity
-  poseArms(mouthVal);
-}
-
-function renderFace(mouth, eye, brow, h, s, l) {
-  // eye size based on eye param
-  const eyeR = Math.round(Math.max(4, Math.min(11, 7 * eye)));
-  const eyeY = 108;
-  const eyeLx = 78, eyeRx = 122;
-
-  // brow tilt: positive brow = raised (happy), negative = furrowed (angry)
-  const browTiltL = -brow * 8;  // left brow
-  const browTiltR =  brow * 8;  // right brow (mirror)
-  const browY = 88;
-  const browLen = 18;
-
-  // mouth: control point Y based on mouth value
-  // mouth=+1 → big smile (control point low), mouth=-1 → frown (control point high)
-  const mouthY1 = 158;
-  const mouthCY = mouthY1 + mouth * 18; // control point
-  const mouthX1 = 76, mouthX2 = 124;
-  const mouthCX = 100;
-
-  const faceColor = `hsl(${h},${Math.max(s - 30, 10)}%,${Math.max(l - 28, 10)}%)`;
-
-  let svg = '';
-
-  // brows
-  svg += `<line x1="${eyeLx - browLen/2}" y1="${browY + browTiltL}" x2="${eyeLx + browLen/2}" y2="${browY - browTiltL}"
-    stroke="${faceColor}" stroke-width="3.5" stroke-linecap="round"/>`;
-  svg += `<line x1="${eyeRx - browLen/2}" y1="${browY - browTiltR}" x2="${eyeRx + browLen/2}" y2="${browY + browTiltR}"
-    stroke="${faceColor}" stroke-width="3.5" stroke-linecap="round"/>`;
-
-  // eyes — render as ellipses to allow eye "squeeze" on negative
-  const eyeH = eyeR;
-  const eyeW = Math.round(eyeR * 0.9);
-  svg += `<ellipse cx="${eyeLx}" cy="${eyeY}" rx="${eyeW}" ry="${eyeH}" fill="${faceColor}"/>`;
-  svg += `<ellipse cx="${eyeRx}" cy="${eyeY}" rx="${eyeW}" ry="${eyeH}" fill="${faceColor}"/>`;
-  // eye shine
-  svg += `<circle cx="${eyeLx - 2}" cy="${eyeY - 3}" r="2.5" fill="white" opacity="0.7"/>`;
-  svg += `<circle cx="${eyeRx - 2}" cy="${eyeY - 3}" r="2.5" fill="white" opacity="0.7"/>`;
-
-  // mouth as quadratic bezier
-  svg += `<path d="M${mouthX1} ${mouthY1} Q${mouthCX} ${mouthCY} ${mouthX2} ${mouthY1}"
-    stroke="${faceColor}" stroke-width="4" fill="none" stroke-linecap="round"/>`;
-
-  $('#face').innerHTML = svg;
-}
-
-function poseArms(mouthVal) {
-  if (mouthVal > 0.4) {
-    // strongly positive: arms wide open overhead (jubilant)
-    $('#arm-l-path').setAttribute('d', 'M50 148 Q20 110 10 86');
-    $('#hand-l').setAttribute('cx', '10');
-    $('#hand-l').setAttribute('cy', '82');
-    $('#arm-r-path').setAttribute('d', 'M150 148 Q180 110 190 86');
-    $('#hand-r').setAttribute('cx', '190');
-    $('#hand-r').setAttribute('cy', '82');
-  } else if (mouthVal < -0.2) {
-    // negative: hands near cheeks (distress / covering face)
-    $('#arm-l-path').setAttribute('d', 'M50 148 Q34 136 26 122');
-    $('#hand-l').setAttribute('cx', '26');
-    $('#hand-l').setAttribute('cy', '118');
-    $('#arm-r-path').setAttribute('d', 'M150 148 Q166 136 174 122');
-    $('#hand-r').setAttribute('cx', '174');
-    $('#hand-r').setAttribute('cy', '118');
-  } else {
-    // neutral: classic hug gesture — arms curved up, hands beside cheeks
-    $('#arm-l-path').setAttribute('d', 'M50 148 Q28 130 18 112');
-    $('#hand-l').setAttribute('cx', '18');
-    $('#hand-l').setAttribute('cy', '108');
-    $('#arm-r-path').setAttribute('d', 'M150 148 Q172 130 182 112');
-    $('#hand-r').setAttribute('cx', '182');
-    $('#hand-r').setAttribute('cy', '108');
-  }
-}
-
-// ── TRACE ───────────────────────────────────────────────────────────────────
-
-const ROLE_CLASS = {
-  EMOTIONAL: 'r-EMOTIONAL',
-  AMPLIFIER:  'r-AMPLIFIER',
-  NEGATOR:    'r-NEGATOR',
-  SELF_REF:   'r-SELF_REF',
-  CONNECTOR:  'r-CONNECTOR',
-  CHOPPER:    'r-CHOPPER',
-  SOLVENT:    'r-SOLVENT',
-};
-
-function renderTrace(trace) {
-  if (!trace) return;
-
-  // physical interaction (toy/care): no language to parse — show the action,
-  // not the previous chat message's words.
-  if (trace.kind === 'physical') {
-    $('#trace-words').innerHTML =
-      `<span class="trace-physical">${trace.label || 'physical interaction'} — physical interaction, no language to parse</span>`;
-    $('#trace-structs').innerHTML = '';
-    $('#trace-contribs').innerHTML = '';
-    $('#trace-unknown').classList.add('hidden');
-    return;
-  }
-
-  // words as role-colored chips
-  const wordsEl = $('#trace-words');
-  wordsEl.innerHTML = '';
-  (trace.words || []).forEach(w => {
-    const span = document.createElement('span');
-    const cls = ROLE_CLASS[w.role] || 'r-default';
-    span.className = `w-chip ${cls}`;
-    span.textContent = w.token || w.word || w;
-    wordsEl.appendChild(span);
-  });
-
-  // structures as chips
-  const structsEl = $('#trace-structs');
-  structsEl.innerHTML = '';
-  (trace.structures || []).forEach(s => {
-    const span = document.createElement('span');
-    span.className = 's-chip';
-    span.textContent = typeof s === 'string' ? s : (s.name || JSON.stringify(s));
-    structsEl.appendChild(span);
-  });
-
-  // contributors
-  const contribEl = $('#trace-contribs');
-  contribEl.innerHTML = '';
-  (trace.contributors || []).forEach(c => {
-    const line = document.createElement('div');
-    let text = c.word || c.token || '?';
-    text = text.padEnd(14, ' ');
-    let parts = '';
-    ['dv','da','dd','du','dg'].forEach((key, i) => {
-      if (c[key] != null && c[key] !== 0) {
-        const dim = 'VADUG'[i];
-        const cls = c[key] > 0 ? 'contrib-pos' : 'contrib-neg';
-        const sign = c[key] > 0 ? '+' : '';
-        parts += `<span class="${cls}">${dim}${sign}${c[key]}</span> `;
-      }
-    });
-    if (!parts) parts = '<span style="opacity:.5">—</span>';
-    line.innerHTML = `${text} ${parts}`;
-    contribEl.appendChild(line);
-  });
-
-  // unknown tokens
-  const unk = trace.unknown_tokens || trace.suspected_gap || [];
-  const unkEl = $('#trace-unknown');
-  if (unk.length > 0) {
-    unkEl.textContent = `didn't know: ${unk.join(', ')}`;
-    unkEl.classList.remove('hidden');
-  } else {
-    unkEl.classList.add('hidden');
-  }
-}
-
-// ── ACCEPTANCE ──────────────────────────────────────────────────────────────
-
-function renderAcceptance(acc) {
-  if (!acc) return;
-  const el = $('#acceptance');
-  const raw = acc.weight_raw ?? '?';
-  const eff = acc.weight_effective ?? '?';
-  const pct = acc.absorbed_pct ?? 0;
-  const armor = acc.armor ?? '?';
-  const breached = acc.breached ? '<span class="breach-flag">BREACH</span>' : '';
-  el.innerHTML = `raw hit <b>${raw}</b> · armor <b>${armor}</b> absorbed <b>${pct}%</b> → <b>${eff}</b> reached mood${breached}`;
-}
-
-// ── WHY ──────────────────────────────────────────────────────────────────────
-
-function renderWhy(why) {
-  const el = $('#why');
-  if (!why) { el.textContent = 'why: —'; return; }
-  el.innerHTML = 'why: ' + why.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>');
-}
-
-// ── TIMELINE ─────────────────────────────────────────────────────────────────
-
-function renderTimeline(events) {
-  const svg = $('#tl-svg');
-  if (!events || events.length < 2) {
-    svg.innerHTML = '<text x="4" y="20" fill="#8aa0c0" font-size="10">no history yet</text>';
-    return;
-  }
-  const vals = events.map(e => (e.soul && e.soul[0] != null) ? e.soul[0] : 128);
-  const W = svg.clientWidth || 200;
-  const H = 34;
-  const pad = 3;
-  const xs = vals.map((_, i) => pad + (i / (vals.length - 1)) * (W - pad * 2));
-  const ys = vals.map(v => H - pad - ((v / 255) * (H - pad * 2)));
-  const pts = xs.map((x, i) => `${x},${ys[i]}`).join(' ');
-  svg.innerHTML = `
-    <polyline points="${pts}" fill="none" stroke="#79ceff" stroke-width="1.8" stroke-linejoin="round" stroke-linecap="round"/>
-    <line x1="${pad}" y1="${H/2}" x2="${W-pad}" y2="${H/2}" stroke="rgba(255,255,255,.1)" stroke-width="1" stroke-dasharray="3,4"/>`;
-}
-
-async function fetchAndRenderTimeline() {
-  try {
-    const r = await fetch('/history');
-    if (!r.ok) return;
-    const data = await r.json();
-    renderTimeline(data.events || []);
-  } catch (_) {}
-}
-
-// ── BUBBLE ───────────────────────────────────────────────────────────────────
-
-function bubble(text) {
-  const b = $('#bubble');
-  b.textContent = text;
-  b.classList.remove('hidden');
-  clearTimeout(b._t);
-  b._t = setTimeout(() => b.classList.add('hidden'), 4500);
-}
-
-// ── SPEAK ────────────────────────────────────────────────────────────────────
-
-function speak(text, voice) {
-  if (!text || !window.speechSynthesis) return;
-  const u = new SpeechSynthesisUtterance(text);
-  u.pitch = (voice && voice.pitch != null) ? voice.pitch : 1.4;
-  u.rate  = (voice && voice.rate  != null) ? voice.rate  : 1.0;
-  window.speechSynthesis.cancel();
-  window.speechSynthesis.speak(u);
-}
-
-// ── NEEDS ────────────────────────────────────────────────────────────────────
-
-function renderNeeds(needs) {
-  if (!needs) return;
-  ['hunger', 'energy', 'attention', 'thirst'].forEach(k => {
-    const val = needs[k] ?? 0;
-    const pct = Math.round(Math.min(100, Math.max(0, val)));
-    const fill = document.getElementById(`need-${k}`);
-    const valEl = document.getElementById(`need-${k}-val`);
-    if (fill) fill.style.width = pct + '%';
-    if (valEl) valEl.textContent = pct;
-  });
-  // bowls show their level: food = hunger, water = thirst (community keeps them filled)
-  const food = document.getElementById('bowl-food');
-  if (food && needs.hunger != null) food.setAttribute('opacity', String(Math.max(0, Math.min(100, needs.hunger)) / 100));
-  const water = document.getElementById('bowl-water');
-  if (water && needs.thirst != null) water.setAttribute('opacity', String(Math.max(0, Math.min(100, needs.thirst)) / 100));
-}
-
-// ── MOMENTS ──────────────────────────────────────────────────────────────────
-
-function relativeTime(ts) {
-  // ts is an ISO string or unix seconds float
-  let ms;
-  if (typeof ts === 'number') {
-    ms = ts < 1e10 ? ts * 1000 : ts;
-  } else {
-    ms = Date.parse(ts);
-  }
-  if (!ms || isNaN(ms)) return '';
-  const diff = Math.floor((Date.now() - ms) / 1000);
-  if (diff < 60) return 'just now';
-  if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
-  if (diff < 86400) return Math.floor(diff / 3600) + 'h ago';
-  return Math.floor(diff / 86400) + 'd ago';
-}
-
-function renderMoments(events) {
-  const list = $('#moments-list');
-  if (!list) return;
-  if (!events || events.length === 0) {
-    list.innerHTML = '<div class="moment-row" style="color:#6a7a96;font-size:9px">nothing yet</div>';
-    return;
-  }
-  list.innerHTML = events.slice().reverse().map(ev => {
-    const badge = (ev.type || 'moment').replace(/_/g, ' ');
-    const label = ev.mood_word || ev.label || '';
-    const time  = relativeTime(ev.ts);
-    return `<div class="moment-row">
-      <span class="moment-badge">${badge}</span>
-      <span class="moment-label">${label}</span>
-      <span class="moment-time">${time}</span>
-    </div>`;
-  }).join('');
-}
-
-async function fetchAndRenderMoments() {
-  try {
-    const r = await fetch('/moments');
-    if (!r.ok) return;
-    const data = await r.json();
-    renderMoments(data.events || []);
-  } catch (_) {}
-}
-
-// ── REMEMBERS-YOU HINT ───────────────────────────────────────────────────────
-
-function renderRelationHint(relation) {
-  const hint = $('#remembers-hint');
-  if (!hint) return;
-  if (relation && relation.known === true) {
-    hint.classList.remove('hidden');
-  } else {
-    hint.classList.add('hidden');
-  }
-}
-
-// ── RENDER (full state) ──────────────────────────────────────────────────────
-
-function render(state) {
-  const ap = state.appearance || {};
-  _ap = ap;
-  const mood = ap.mood || Array(7).fill(128);
-  const deltas = state.deltas || null;
-  const read = state.read || null;
-
-  renderMeters(mood, deltas, read);
-  renderBlob(ap);
-  $('#moodword').textContent = state.mood_word || '…';
-
-  if (state.trace)      renderTrace(state.trace);
-  if (state.acceptance) renderAcceptance(state.acceptance);
-  if (state.why)        renderWhy(state.why);
-  if (state.needs)      renderNeeds(state.needs);
-  renderRelationHint(state.relation || null);
-}
-
-// ── SQUISH IMPULSE ────────────────────────────────────────────────────────────
-
-function squishImpulse(deltas) {
-  if (!deltas) return;
-  const mag = deltas.reduce((s, d) => s + Math.abs(d || 0), 0);
-  // bigger, springier reaction so an interaction visibly lands
-  const kick = 1.5 + Math.min(11, mag / 38);
-  _spring.vel -= kick;
-}
-
-// ── APPLY RESPONSE (shared by say + care) ────────────────────────────────────
-
-// Sims-style mood float above his head: an emotion emoji + a single +/- (1-3 for
-// intensity) showing what an interaction did to his MOOD. The per-dimension VADUGWI
-// changes stay in the left stats panel (the meters + deltas).
-function moodEmoji(mood) {
-  const v = mood[0] ?? 128, a = mood[1] ?? 128;
-  if (v >= 200 && a >= 185) return '😂';   // elated/laughing
-  if (v >= 165) return '😄';               // happy
-  if (v >= 140) return '🙂';               // pleased
-  if (v <= 80 && a >= 150) return '😡';    // mad
-  if (v <= 85) return '😭';                // crying
-  if (v <= 112) return '😞';               // sad
-  if (a >= 188) return '😲';               // startled
-  return '😐';                             // neutral
-}
-function _floatMood(net, mood) {
-  const up = net > 0;
-  let sym = '';
-  if (Math.abs(net) >= 3) {
-    const count = Math.max(1, Math.min(3, Math.round(Math.abs(net) / 14)));
-    sym = (up ? '+' : '−').repeat(count);
-  }
-  const emoji = mood ? moodEmoji(mood) : '';
-  if (!sym && !emoji) return;
-  _float = { sym, up, emoji, until: performance.now() + 2600, startT: null };
-}
-function floatDeltas(deltas, mood) {
-  if (!deltas) return;
-  _floatMood((deltas[0] || 0) + 0.6 * (deltas[5] || 0), mood);   // mood ≈ valence + worth
-}
-function floatRaises(mood) { _floatMood(20, mood); }   // self-soothe is a gentle positive
-
-// valence → hue, SAME piecewise mapping as the server (appearance.py): red→orange→
-// yellow→green. (The old flash used V/255*360 which sent positive reads into purple.)
-function hueForValence(v) {
-  v = Math.max(0, Math.min(255, v));
-  return v <= 128 ? 8 + (48 - 8) * (v / 128) : 48 + (125 - 48) * ((v - 128) / 127);
-}
-
-function applyResponse(state) {
-  squishImpulse(state.deltas);                              // physical bounce
-  floatDeltas(state.deltas, (state.appearance || {}).mood); // +/- emoji float
-  render(state);                                            // body stays yellow; emotion shows via face glow
-}
-
-// ── TOY ───────────────────────────────────────────────────────────────────────
-
-async function toy(name) {
-  try {
-    const r = await fetch('/toy', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ toy: name }),
-    });
-    if (!r.ok) { bubble('…?'); return; }
-    const state = await r.json();
-    applyResponse(state);
-    bubble(state.emoticon || '');
-    speak(state.simlish, state.voice);
-    await fetchAndRenderTimeline();
-    await fetchAndRenderMoments();
-  } catch (_) {
-    bubble('…?');
-  }
-}
-
-// ── SAY ───────────────────────────────────────────────────────────────────────
-
-async function say() {
-  const inp = $('#msg');
-  const text = inp.value.trim();
-  if (!text) return;
-  inp.value = '';
-
-  try {
-    const r = await fetch('/say', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ text }),
-    });
-    if (!r.ok) { bubble('…?'); return; }
-    const state = await r.json();
-
-    applyResponse(state);
-
-    if (state.recognition && state.recognition.returning) {
-      bubble('welcome back!');
-    } else {
-      bubble(state.emoticon || '');
+    const el=this.q('#meters'); if(el) el.innerHTML=html;
+  },
+  renderNeeds(){
+    const nc=(v)=> v<25?'#ff6b6b': v<50?'#ffb24d':'#5fd08a';
+    let html='';
+    for(const k of ['hunger','energy','attention','thirst']){
+      const v=Math.round(Math.max(0,Math.min(100,this.needsObj[k])));
+      html+=`<div class="need-row">
+        <span class="need-label">${k}</span>
+        <div class="need-track"><div class="need-fill" style="width:${v}%;background:${nc(v)}"></div></div>
+        <span class="need-val">${v}</span>
+      </div>`;
     }
-    speak(state.simlish, state.voice);
-    await fetchAndRenderTimeline();
-    await fetchAndRenderMoments();
-  } catch (_) {
-    bubble('…?');
-  }
-}
-
-// ── CARE ─────────────────────────────────────────────────────────────────────
-
-async function care(action) {
-  try {
-    const r = await fetch('/care', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ action }),
+    const el=this.q('#needs'); if(el) el.innerHTML=html;
+  },
+  renderDistance(){
+    let dist;
+    if(this.backendDistance!=null) dist=this.backendDistance;          // backend (NEW)
+    else if(this.haveSoul){                                           // compute from soul[]
+      dist=0; ['v','a','d','u','g','w','i'].forEach(k=>dist+=Math.abs(this.mood[k]-this.soul[k])); dist=Math.round(dist/7);
+    } else dist=null;                                                  // unknown -> dash
+    const el=this.q('#soulDistance');
+    if(el) el.textContent = dist==null? 'Δ —' : ('Δ '+dist);
+  },
+  renderTrace(trace){
+    if(!trace) return;
+    const words=this.q('#traceWords'), structs=this.q('#traceStructs'),
+          contribs=this.q('#traceContribs'), countEl=this.q('#structCount');
+    // physical (toy/care/pet): no language to parse
+    if(trace.kind==='physical'){
+      if(words) words.innerHTML=`<span class="muted">${this._esc(trace.label||'physical interaction')} — physical interaction, no language to parse.</span>`;
+      if(structs) structs.innerHTML='<span class="muted">— none in this message</span>';
+      if(contribs) contribs.innerHTML='';
+      if(countEl) countEl.textContent='0';
+      return;
+    }
+    // WORDS chips
+    const ws=(trace.words||[]);
+    if(words){
+      if(ws.length===0) words.innerHTML='<span class="muted">talk to it and the structural read shows up here.</span>';
+      else words.innerHTML=ws.slice(0,14).map(w=>{
+        const [bg,fg,bd]=this.roleColor(w.role);
+        return `<span class="w-chip" style="background:${bg};color:${fg};border:1px solid ${bd}" data-tip="${this._esc(this.roleTip(w.role))}">${this._esc(w.word||w.token||'')}</span>`;
+      }).join('');
+    }
+    // STRUCTURES
+    const sts=(trace.structures||[]);
+    if(countEl) countEl.textContent=String(sts.length);
+    if(structs){
+      if(sts.length===0) structs.innerHTML='<span class="muted">— none in this message</span>';
+      else structs.innerHTML=sts.map(s=>{
+        const nm=typeof s==='string'?s:(s.name||String(s));
+        return `<span class="s-chip">${this._esc(nm)}</span>`;
+      }).join('');
+    }
+    // CONTRIBUTORS — word + signed per-dim string from dv/da/dd/du/dg
+    const cs=(trace.contributors||[]);
+    if(contribs){
+      contribs.innerHTML=cs.slice(0,5).map(c=>{
+        const parts=[];
+        [['dv','V'],['da','A'],['dd','D'],['du','U'],['dg','G']].forEach(([k,dim])=>{
+          const val=c[k];
+          if(val!=null && val!==0) parts.push(dim+(val>0?'+':'')+val);
+        });
+        const dims=parts.join(' ')||'·';
+        return `<div class="contrib-row"><span class="contrib-word">${this._esc(c.word||c.token||'?')}</span><span class="contrib-dims">${dims}</span></div>`;
+      }).join('');
+    }
+  },
+  renderWhy(why){
+    const el=this.q('#whyText'); if(!el) return;
+    if(!why){ el.textContent='—'; return; }
+    el.innerHTML=this._esc(why).replace(/\*\*(.+?)\*\*/g,'<b>$1</b>');
+  },
+  renderCrisis(){
+    const wrap=this.q('#crisisWrap'), bar=this.q('#crisisBar'), label=this.q('#crisisLabel');
+    if(!this.haveCrisis){
+      // DEFENSIVE: backend has no crisis -> zero it out, keep calm label
+      if(bar){ bar.style.width='0%'; bar.style.background='#5fd08a'; }
+      if(label){ label.textContent='—'; label.style.color='#5fd08a'; }
+      return;
+    }
+    const cr=this.crisis;
+    const lbl=cr<0.15?'calm':cr<0.4?'watch':cr<0.7?'concern':'high concern';
+    const col=cr<0.15?'#5fd08a':cr<0.4?'#ffd24d':cr<0.7?'#ff9d4d':'#ff5a5a';
+    if(bar){ bar.style.width=Math.round(cr*100)+'%'; bar.style.background=col; }
+    if(label){ label.textContent=lbl; label.style.color=col; }
+  },
+  renderMoodWord(){
+    const el=this.q('#moodWord'); if(el) el.textContent=this.moodWord||'…';
+  },
+  renderReadPhrase(){
+    const el=this.q('#readPhrase'); if(el) el.textContent=this.readPhrase;
+  },
+  renderDiary(){
+    const el=this.q('#diary'); if(!el) return;
+    if(!this.diary.length){ el.innerHTML='<span class="muted">moments you share will be remembered here.</span>'; return; }
+    el.innerHTML=this.diary.slice(0,9).map(d=>
+      `<div class="diary-row"><span class="diary-dot" style="color:${d.color}">${this._esc(d.dot)}</span>`+
+      `<div class="diary-text"><span class="body">${this._esc(d.text)}</span> <span class="mood">· ${this._esc(d.mood||'')}</span></div></div>`
+    ).join('');
+  },
+  renderItems(){
+    const wrap=this.q('#items'); if(!wrap) return;
+    const playId=this.action&&this.action.id;
+    // only (re)build DOM when item set changes; positions are updated live in positionActionItem / drag
+    if(this._itemsBuilt) { this._applyItemLayout(); return; }
+    wrap.innerHTML='';
+    this.itemEls={};
+    for(const it of this.items){
+      const div=document.createElement('div');
+      div.className='item';
+      div.dataset.id=it.id;
+      div.setAttribute('data-tip', it.tip);
+      div.style.width=it.size+'%';
+      div.style.zIndex='5';
+      const inner=document.createElement('div');
+      inner.className='item-inner';
+      inner.innerHTML=this.ICONS(it.kind);
+      div.appendChild(inner);
+      this.itemEls[it.id]=inner;
+      div.addEventListener('pointerdown',(e)=>this.startDrag(e,it.id));
+      wrap.appendChild(div);
+    }
+    this._itemsBuilt=true;
+    this._applyItemLayout();
+  },
+  _applyItemLayout(){
+    const playId=this.action&&this.action.id;
+    for(const it of this.items){
+      const inner=this.itemEls[it.id]; if(!inner) continue;
+      const div=inner.closest('[data-id]'); if(!div) continue;
+      if(it.id===playId) continue; // positionActionItem owns it while playing
+      div.style.left=it.x+'%'; div.style.top=it.y+'%';
+      div.style.transform='translate(-50%,-100%)';
+      div.style.transition=(it.resting)?'left .5s cubic-bezier(.34,1.4,.5,1), top .5s cubic-bezier(.34,1.4,.5,1)':'none';
+      div.style.zIndex='5';
+    }
+  },
+
+  // ====================================================================
+  // MOOD / NEEDS APPLICATION (backend-fed)
+  // ====================================================================
+  // map backend appearance.mood[7] into our mood model (lerp like the redesign)
+  applyAppearance(ap){
+    if(!ap) return;
+    const m=ap.mood;
+    if(Array.isArray(m) && m.length>=7){
+      const C={v:m[0],a:m[1],d:m[2],u:m[3],g:m[4],w:m[5],i:m[6]};
+      const before={...this.mood};
+      ['v','a','d','g','w','i'].forEach(k=>{ this.mood[k]=this.mood[k]*0.42 + C[k]*0.58; });
+      this.mood.u=C.u;
+      this.lastDelta={};
+      ['v','a','d','u','g','w','i'].forEach(k=>{ this.lastDelta[k]=Math.round(this.mood[k])-Math.round(before[k]); });
+    }
+  },
+  // prefer backend deltas[] for the meter arrows when present
+  applyDeltas(deltas){
+    if(Array.isArray(deltas) && deltas.length>=7){
+      const keys=['v','a','d','u','g','w','i'];
+      this.lastDelta={}; keys.forEach((k,i)=>this.lastDelta[k]=deltas[i]);
+    }
+  },
+  applyNeeds(needs){
+    if(!needs) return;
+    ['hunger','energy','attention','thirst'].forEach(k=>{
+      if(typeof needs[k]==='number') this.needsObj[k]=Math.max(0,Math.min(100,needs[k]));
     });
-    if (!r.ok) { bubble('…?'); return; }
-    const state = await r.json();
-
-    applyResponse(state);
-    bubble(state.emoticon || '');
-    speak(state.simlish, state.voice);
-    await fetchAndRenderTimeline();
-    await fetchAndRenderMoments();
-  } catch (_) {
-    bubble('…?');
-  }
-}
-
-// ── AUTH CONTROL ─────────────────────────────────────────────────────────────
-
-// ── BOOT ──────────────────────────────────────────────────────────────────────
-
-$('#send').onclick = say;
-$('#msg').addEventListener('keydown', (e) => { if (e.key === 'Enter') say(); });
-
-// Tap a world object → the creature walks over to it, then the action fires.
-function _objCenterX(el) {
-  try { const b = el.getBBox(); return b.x + b.width / 2; }
-  catch (_) { return _posX; }
-}
-function _sendToObject(el) {
-  const t = el.getAttribute('data-toy');
-  const c = el.getAttribute('data-care');
-  const x = Math.max(ROAM_MIN, Math.min(ROAM_MAX, _objCenterX(el)));
-  _target = { x, action: t ? { kind: 'toy', name: t } : { kind: 'care', name: c } };
-}
-document.querySelectorAll('.room-obj').forEach(el => {
-  el.addEventListener('click', () => _sendToObject(el));
-  el.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _sendToObject(el); } });
-});
-
-// Tap the creature itself → pet it (in place, no walk). Deltas float the +V +W.
-function _petHim() { care('pet'); }
-const _blobPlace = $('#blob-place');
-if (_blobPlace) {
-  _blobPlace.addEventListener('click', _petHim);
-  _blobPlace.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); _petHim(); } });
-}
-
-// collapsible "receipts" drawer — keeps the room uncovered by default
-const _drawer = $('#detail-drawer'), _dtoggle = $('#detail-toggle');
-if (_dtoggle && _drawer) {
-  _dtoggle.onclick = () => {
-    const open = _drawer.classList.toggle('open');
-    _dtoggle.classList.toggle('open', open);
-    _dtoggle.setAttribute('aria-expanded', open ? 'true' : 'false');
-  };
-}
-
-
-// initial snapshot + history + moments
-fetch('/snapshot').then(r => r.json()).then(state => {
-  handleSnapshot(state);
-  renderWhy(null);
-  renderAcceptance(null);
-}).catch(() => {});
-
-fetchAndRenderTimeline();
-fetchAndRenderMoments();
-
-// poll: bowl empties as hunger decays, and he may self-soothe when low
-setInterval(() => {
-  fetch('/snapshot').then(r => r.json()).then(s => {
-    if (s.needs) renderNeeds(s.needs);
-    if (s.self_soothe && s.self_soothe.item) triggerSoothe(s.self_soothe.item);
-  }).catch(() => {});
-}, 45000);
-
-function fireAction(act) {
-  if (!act) return;
-  if (act.kind === 'toy') {
-    toy(act.name);                       // applyResponse floats the real deltas
-    startHold(act.name, true);
-  } else if (act.kind === 'care') {
-    care(act.name);                      // applyResponse floats the real deltas
-    if (act.name === 'play') startHold('ball', true);
-  } else if (act.kind === 'soothe') {
-    // server already applied the (gentle) lift; no client deltas → float a + and his mood
-    startHold(act.name, true);
-    floatRaises(_ap && _ap.mood);
-  }
-}
-
-// ── HOLDING an item: pick it up (full size, off the floor) ──
-function startHold(item, carry) {
-  if (_hold && _hold.floorEl) _hold.floorEl.style.opacity = '';   // restore prior
-  _hold = { item: null, floorEl: null, until: performance.now() + 7000 };
-  if (carry && item && ITEM[item]) {
-    const it = ITEM[item];
-    const el = $('#carry');
-    if (el) {
-      el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', ASSET(it.sprite));
-      el.setAttribute('href', ASSET(it.sprite));
-      el.setAttribute('width', it.w);
-      el.setAttribute('height', it.h);
+  },
+  applyCrisis(crisis){
+    if(crisis && typeof crisis.value==='number'){ this.haveCrisis=true; this.crisis=Math.max(0,Math.min(1,crisis.value)); }
+  },
+  applySoul(state){
+    if(Array.isArray(state.soul) && state.soul.length>=7){
+      const s=state.soul; this.haveSoul=true;
+      this.soul={v:s[0],a:s[1],d:s[2],u:s[3],g:s[4],w:s[5],i:s[6]};
     }
-    _hold.item = item;
-    const fl = document.querySelector('.room-obj' + it.floor);
-    if (fl) { fl.style.opacity = '0'; _hold.floorEl = fl; }   // take it off the floor
-  }
-}
-function _objElByName(name) {
-  if (name === 'ball') return document.querySelector('.room-obj[data-care="play"]');
-  return document.querySelector(`.room-obj[data-toy="${name}"]`);
-}
-// server says he self-soothed → walk him to that item and pick it up
-function triggerSoothe(item) {
-  if (!item) return;
-  const el = _objElByName(item);
-  let x = _posX;
-  if (el) { try { const b = el.getBBox(); x = b.x + b.width / 2; } catch (_) {} }
-  _target = { x: Math.max(ROAM_MIN, Math.min(ROAM_MAX, x)), action: { kind: 'soothe', name: item } };
-}
-// snapshot handler: render + react to an autonomous self-soothe
-function handleSnapshot(state) {
-  render(state);
-  if (state && state.self_soothe && state.self_soothe.item) triggerSoothe(state.self_soothe.item);
-}
-
-function pulse(t) {
-  const dt = _lastT ? Math.min(0.05, (t - _lastT) / 1000) : 0.016;
-  _lastT = t;
-  const P = window.ClankerPhysics;
-  const mood = (_ap && _ap.mood) || Array(7).fill(128);
-  const a = mood[1] ?? 128, u = mood[3] ?? 0;
-
-  _phase += P.breathRate(mood) * dt;
-
-  // sleep only when truly low-energy AND not summoned by a tap
-  const sleeping = (a < 70 && u < 60) && !_target;
-
-  // cadence: walk speed scales with arousal (calm plod ↔ wired scurry)
-  let speed = 7 + (a / 255) * 44;          // 7 .. 51 scene-px/sec
-  let destX = _posX;
-
-  if (sleeping) {
-    destX = _posX;
-  } else if (_target) {
-    destX = _target.x;
-    speed = Math.max(speed, 40);           // deliberate walk toward a tapped object
-  } else {
-    // idle wander: amble to a spot, linger (longer when calm), pick a new spot
-    if (_pause > 0) {
-      _pause -= dt;
-      destX = _posX;
-    } else {
-      destX = _wanderX;
-      if (Math.abs(_posX - _wanderX) < 4) {
-        _pause = _rand(0.6, 2.8) * (1 + (1 - a / 255) * 2.2);
-        _wanderX = _rand(ROAM_MIN, ROAM_MAX);
-      }
+    if(typeof state.distance==='number') this.backendDistance=Math.round(state.distance);
+  },
+
+  // single entry point for any backend response (say / care / toy / snapshot)
+  applyState(state, opts){
+    opts=opts||{};
+    this.applyAppearance(state.appearance);
+    if(opts.useDeltas) this.applyDeltas(state.deltas);
+    this.applyNeeds(state.needs);
+    this.applyCrisis(state.crisis);   // defensive: absent -> haveCrisis stays false
+    this.applySoul(state);            // defensive: absent -> distance from compute or dash
+    if(state.mood_word) this.moodWord=state.mood_word;
+    if(state.read && state.read.length>=7){
+      this.readPhrase=this.feltPhrase({v:state.read[0],a:state.read[1],d:state.read[2],u:state.read[3],g:state.read[4],w:state.read[5],i:state.read[6]});
     }
-  }
-
-  // integrate position
-  _vel = 0;
-  const dx = destX - _posX;
-  if (!sleeping && Math.abs(dx) > 1.0) {
-    const step = Math.sign(dx) * Math.min(Math.abs(dx), speed * dt);
-    _posX = Math.max(ROAM_MIN, Math.min(ROAM_MAX, _posX + step));
-    _facing = step >= 0 ? 1 : -1;
-    _vel = step / dt;
-  }
-  // arrived at a tapped object → fire its VADUGWI action
-  if (_target && Math.abs(_target.x - _posX) <= 3) {
-    const act = _target.action; _target = null; _pause = 0.9;
-    fireAction(act);
-  }
-
-  // squish spring relaxes toward rest (impulses injected on every response)
-  const ns = P.springStep(_spring, 1, dt, 140, 14);
-  _spring.pos = ns.pos; _spring.vel = ns.vel;
-
-  const moving = Math.abs(_vel) > 1;
-  const breathScale = P.breath(_phase, mood);
-  // walk bob: vertical bounce while moving, bigger when faster/aroused
-  const bob = moving ? Math.abs(Math.sin(_phase * 2.3)) * (1.5 + (Math.abs(_vel) / 51) * 6.0) : 0;
-  const swayDeg = sleeping ? 0 : (moving ? _facing * 3 : P.sway(_phase, mood));
-
-  // OUTER #blob-place: walk along floor + face direction (feet pinned to y=192)
-  const place = $('#blob-place');
-  if (place) {
-    place.setAttribute('transform',
-      `translate(${_posX} ${192 - bob}) scale(${0.40 * _facing} 0.40) translate(-100 -210)`);
-  }
-  // INNER #blob-anim: breathing + squish + sway around body center (100,116)
-  const anim = $('#blob-anim');
-  if (anim) {
-    anim.setAttribute('transform',
-      `rotate(${swayDeg} 100 116) translate(100 116) scale(${breathScale} ${breathScale * _spring.pos}) translate(-100 -116)`);
-  }
-
-  // aura + contact shadow follow the creature
-  const aura = $('#aura');
-  if (aura) { aura.setAttribute('cx', _posX.toFixed(1)); aura.setAttribute('cy', (154 - bob * 0.6).toFixed(1)); }
-  const shadow = $('#shadow');
-  if (shadow) { shadow.setAttribute('cx', _posX.toFixed(1)); shadow.setAttribute('rx', (40 - bob * 1.1).toFixed(1)); }
-
-  // sleep Zzz floats above his head
-  const zzz = $('#zzz');
-  if (zzz) {
-    zzz.setAttribute('x', (_posX + 26).toFixed(1));
-    zzz.setAttribute('opacity', sleeping ? String(0.4 + 0.4 * Math.sin(_phase)) : '0');
-  }
-
-  // holding an item: carry it (full size, in his hands) + float a VADUGWI badge
-  const holding = _hold && t < _hold.until;
-  const carryEl = $('#carry');
-  if (carryEl) {
-    if (holding && _hold.item && ITEM[_hold.item]) {
-      const it = ITEM[_hold.item];
-      carryEl.setAttribute('x', (_posX + _facing * 6 - it.w / 2).toFixed(1));
-      carryEl.setAttribute('y', (152 - bob - it.h * 0.45).toFixed(1));
-      carryEl.setAttribute('opacity', '1');
+    if(state.trace) this.renderTrace(state.trace);
+    if(state.why!=null) this.renderWhy(state.why);
+    // panel repaint
+    this.renderNeeds(); this.renderCrisis(); this.renderDistance();
+    this.renderMoodWord(); this.renderReadPhrase();
+  },
+
+  // ====================================================================
+  // ANIMATION LOOP (ported verbatim from the redesign)
+  // ====================================================================
+  step(now){
+    try{ this._step(now); }catch(err){ if(!this._warned){console.warn('clanker step',err);this._warned=true;} }
+    this._raf=requestAnimationFrame(this.step.bind(this));
+  },
+  _step(now){
+    const dt=Math.min(0.05,(now-this.lastTs)/1000); this.lastTs=now;
+    const t=(now-this.t0)/1000;
+    // disp lerp toward mood (server-authoritative mood already set on each response/poll)
+    ['v','a','d','u','g','w','i'].forEach(k=>{ this.disp[k]+=(this.mood[k]-this.disp[k])*Math.min(1,4*dt); });
+
+    this.autoConsume(dt);
+    this.behavior = this.action ? 'idle' : this.pickBehavior();
+    if(this.behavior==='tantrum' && performance.now()-this.lastSpeak>1700){ this.lastSpeak=performance.now(); this.speak(); }
+    this.drawCreature(t);
+    this.positionActionItem();
+
+    this.uiAcc+=dt;
+    if(this.uiAcc>0.22){ this.uiAcc=0; this.renderMeters(); }
+  },
+
+  drawCreature(t){
+    const r=this.root; if(!r) return;
+    const g=(id)=>r.querySelector('#'+id);
+    const d=this.disp; const aN=(d.a-128)/127, vN=(d.v-128)/127, iN=(d.i-128)/127;
+    const energy=this.needsObj.energy;
+    const act=this.action&&this.action.type; const beh=this.behavior;
+    const sleepy=(energy<24&&aN<0&&beh==='idle'&&!act);
+
+    // ---- body transform (bob / slump / shake / breathe) ----
+    let tx=0, ty=0, sc=1, scY=1, rotB=0;
+    const breathe=1+Math.sin(t*1.8)*0.012;
+    if(beh==='tantrum'){
+      tx=Math.sin(t*42)*5; ty=Math.abs(Math.sin(t*9))*-7; rotB=Math.sin(t*40)*3; sc=1.02;
+      this.shake=4.5;
+    } else if(beh==='sad'){
+      ty=10; scY=0.93; tx=Math.sin(t*0.7)*2; this.shake=0;
+    } else if(act==='ball'){
+      ty=Math.sin(t*4.4)*4; tx=Math.sin(t*2.2)*4; this.shake=0;
+    } else if(act==='teddy'){
+      ty=Math.sin(t*3)*2; sc=1+Math.max(0,Math.sin(t*5.5))*0.02; this.shake=0;
+    } else if(act==='balloon'){
+      ty=Math.sin(t*3.1)*5-2; tx=Math.sin(t*1.7)*6; this.shake=0;
+    } else if(act==='music'){
+      tx=Math.sin(t*2.2)*7; rotB=Math.sin(t*2.2)*3; this.shake=0;
     } else {
-      carryEl.setAttribute('opacity', '0');
+      let bobAmp=1.4+Math.max(0,aN)*4.0; if(energy<30)bobAmp*=0.4;
+      ty=Math.sin(t*(1.5+Math.max(0,aN)*3.2))*bobAmp;
+      tx=Math.sin(t*0.85)*(1.4+Math.max(0,aN)*1.6);
+      if(d.g<120)ty+=(120-d.g)/4.5;
+      if(d.v>166&&d.a>150)rotB=Math.sin(t*6)*3;
+      this.shake=0;
     }
-  }
-  // Sims-style +/- badge: floats up above his head and fades on any VADUGWI change
-  const badgeEl = $('#raise-badge');
-  if (badgeEl) {
-    if (_float && t < _float.until) {
-      if (_float.startT == null) {
-        _float.startT = t;
-        const emojiSpan = _float.emoji ? `<tspan>${_float.emoji}</tspan>` : '';
-        const symSpan = _float.sym ? `<tspan fill="${_float.up ? '#86e0a0' : '#ff7d9c'}">${_float.sym}</tspan>` : '';
-        const sep = (emojiSpan && symSpan) ? '<tspan> </tspan>' : '';
-        badgeEl.innerHTML = emojiSpan + sep + symSpan;
-      }
-      const prog = (t - _float.startT) / 2600;        // 0..1
-      badgeEl.setAttribute('x', _posX.toFixed(1));
-      badgeEl.setAttribute('y', (118 - bob - prog * 18).toFixed(1));   // rises as it fades
-      badgeEl.setAttribute('opacity', String(Math.max(0, 1 - prog)));
+    const blob=g('blob'); if(blob) blob.setAttribute('transform',`translate(${tx.toFixed(2)},${ty.toFixed(2)}) rotate(${rotB.toFixed(2)} 100 120) scale(${(sc*breathe).toFixed(3)},${(scY*breathe).toFixed(3)})`);
+    if(this.stageEl){ const sh=this.shake; this.stageEl.style.transform = sh>0?`translate(${(Math.random()*2-1)*sh}px,${(Math.random()*2-1)*sh}px)`:''; }
+
+    // ---- eyes: blink + idle dart + state ----
+    if(t>this.nextBlink){ this.blinkUntil=t+0.12; this.nextBlink=t+2.4+Math.random()*3; }
+    const blinking=t<this.blinkUntil;
+    if(t>this.nextDart){ this.dart=(Math.random()<0.5?-1:1)*3; this.nextDart=t+1.6+Math.random()*3.2; this._dartEnd=t+0.9; }
+    if(t>this._dartEnd)this.dart=0;
+    let eyeRy=11, eyeDx=this.dart;
+    if(sleepy)eyeRy=4; else if(act==='teddy'||(beh==='idle'&&d.v>168&&d.a<120))eyeRy=5;
+    else if(beh==='tantrum')eyeRy=8; else if(beh==='sad')eyeRy=7; else if(aN>0.5)eyeRy=13;
+    if(act==='mirror')eyeRy=12;
+    if(blinking)eyeRy=2;
+    const eL=g('eyeL'),eR=g('eyeR');
+    if(eL){eL.setAttribute('ry',eyeRy); eL.setAttribute('cx',74+eyeDx);}
+    if(eR){eR.setAttribute('ry',eyeRy); eR.setAttribute('cx',126+eyeDx);}
+    const glL=g('glintL'),glR=g('glintR'); const glo=(blinking||eyeRy<5)?0:1;
+    if(glL){glL.setAttribute('opacity',glo);glL.setAttribute('cx',77+eyeDx);} if(glR){glR.setAttribute('opacity',glo);glR.setAttribute('cx',129+eyeDx);}
+
+    // ---- mouth ----
+    const mouth=g('mouth'); const chomp=this.eating>0||this.drinking>0;
+    if(mouth){
+      if(beh==='tantrum'){ const o=8+Math.abs(Math.sin(t*16))*8; mouth.setAttribute('d',`M84 150 Q100 ${150+o} 116 150 Q100 ${150+o*0.5} 84 150 Z`); mouth.setAttribute('fill','#5a1818'); }
+      else if(chomp){ const o=4+Math.abs(Math.sin(t*16))*9; mouth.setAttribute('d',`M86 150 Q100 ${150+o} 114 150 Q100 ${150+o*0.4} 86 150 Z`); mouth.setAttribute('fill','#5a2418'); }
+      else if(beh==='sad'){ mouth.setAttribute('d','M82 158 Q100 146 118 158'); mouth.setAttribute('fill','none'); }
+      else if((act==='ball'||act==='balloon'||act==='rattle')||(d.v>156&&d.a>150)){ mouth.setAttribute('d','M80 148 Q100 174 120 148 Q100 156 80 148 Z'); mouth.setAttribute('fill','#5a2418'); }
+      else { const depth=Math.max(-13,Math.min(20,16*vN)); mouth.setAttribute('d',`M82 152 Q100 ${(152+depth).toFixed(0)} 118 152`); mouth.setAttribute('fill','none'); }
+    }
+    // ---- brows ----
+    const bL=g('browL'),bR=g('browR');
+    let brow=0; if(beh==='tantrum')brow=24; else if(d.v<112&&d.d>132)brow=18; else if(beh==='sad'||(d.v<112&&d.d<122))brow=-16;
+    if(bL)bL.setAttribute('transform',`rotate(${brow} 86 96)`);
+    if(bR)bR.setAttribute('transform',`rotate(${-brow} 114 96)`);
+
+    // ---- cheeks ----
+    const cL=g('cheekL'),cR=g('cheekR'); let cf='#ff9bb0',co=0.32;
+    if(beh==='tantrum'){cf='#ff5a4d';co=0.6;} else if(d.v>152){co=0.5;} else if(d.v<112){co=0.12;}
+    [cL,cR].forEach(c=>{if(c){c.setAttribute('fill',cf);c.setAttribute('opacity',co);}});
+
+    // ---- tears (sad) ----
+    const tearO=(beh==='sad')?(0.5+0.5*Math.sin(t*2)):0;
+    const tearY=(beh==='sad')?(124+((t*40)%34)):124;
+    const tL=g('tearL'),tR=g('tearR');
+    if(tL){tL.setAttribute('opacity',tearO);tL.setAttribute('cy',tearY);}
+    if(tR){tR.setAttribute('opacity',tearO*0.8);tR.setAttribute('cy',124+((t*40+17)%34));}
+    // ---- steam (tantrum) ----
+    const stO=(beh==='tantrum')?(0.4+0.5*Math.abs(Math.sin(t*6))):0;
+    const sL=g('steamL'),sR=g('steamR');
+    if(sL){sL.setAttribute('opacity',stO);sL.setAttribute('cy',64-((t*30)%18));}
+    if(sR){sR.setAttribute('opacity',stO);sR.setAttribute('cy',64-((t*30+9)%18));}
+
+    // ---- emote glow ----
+    const mh=this.moodHue(d); const eg=g('emoteGlow');
+    if(eg){ eg.setAttribute('fill',`hsl(${mh.hue} ${mh.sat}% ${mh.light}%)`); eg.setAttribute('opacity',Math.min(0.42,Math.abs(vN)*0.46).toFixed(2)); eg.style.mixBlendMode = vN<0?'multiply':'screen'; }
+
+    // ---- arms ----
+    const aL=g('armL'),aR=g('armR'); let lr=0,rr=0;
+    if(beh==='tantrum'){ lr=-70+Math.sin(t*22)*40; rr=70-Math.sin(t*22)*40; }
+    else if(beh==='sad'){ lr=20; rr=-20; }
+    else if(act==='teddy'){ lr=-64; rr=64; }
+    else if(act==='ball'){ const sw=Math.sin(t*4.4)*22; lr=-30+sw; rr=30-sw; }
+    else if(act==='balloon'){ const up=Math.abs(Math.sin(t*3.1))*40; lr=-20-up*0.4; rr=-60-up; }
+    else if(act==='rattle'){ rr=-50+Math.sin(t*30)*18; lr=8; }
+    else if(act==='music'){ lr=-14; rr=-30; }
+    else if(act==='mirror'){ rr=-46; lr=10; }
+    else if(d.v>166&&d.a>150){ lr=-52; rr=52; }
+    else if(iN>0.18){ lr=-18*iN-6; rr=18*iN+6; }
+    else if(iN<-0.15){ lr=12; rr=-12; }
+    if(aL)aL.setAttribute('transform',`rotate(${lr.toFixed(1)} 52 150)`);
+    if(aR)aR.setAttribute('transform',`rotate(${rr.toFixed(1)} 148 150)`);
+
+    // ---- hearts (teddy) ----
+    const hearts=g('hearts'); if(hearts){ const show=(act==='teddy'); hearts.setAttribute('opacity',show?(0.6+0.4*Math.sin(t*4)):0); if(show)hearts.setAttribute('transform',`translate(0 ${-(t*18%30)})`); }
+
+    // ---- aura + mood dot ----
+    const aura=g('aura');
+    let auraHue=mh.hue, auraSat=mh.sat, auraL=mh.light;
+    if(beh==='tantrum'){auraHue=4;auraSat=85;auraL=55;} else if(beh==='sad'){auraHue=214;auraSat=50;auraL=52;}
+    if(aura){ aura.style.background=`radial-gradient(circle, hsl(${auraHue} ${auraSat}% ${auraL}% / ${(0.42+Math.abs(vN)*0.28+(beh!=='idle'?0.12:0)).toFixed(2)}), transparent 66%)`; }
+    const md=g('moodDot'); if(md){md.style.background=`hsl(${auraHue} ${auraSat}% ${auraL}%)`; md.style.boxShadow=`0 0 9px hsl(${auraHue} ${auraSat}% ${auraL}%)`;}
+
+    // ---- zzz ----
+    const zz=g('zzz'); if(zz){ zz.setAttribute('opacity', sleepy? (0.4+0.5*Math.sin(t*2)).toFixed(2):0); zz.setAttribute('y', sleepy? (60+Math.sin(t*1.4)*6).toFixed(0):60); }
+  },
+
+  // ====================================================================
+  // BOWLS (cosmetic fill; server owns the actual need value)
+  // ====================================================================
+  bowlSVG(level){
+    const f=Math.max(0,Math.min(1,level/100)); const fy=18-f*9; const op=f>0.04?1:0;
+    return `<svg viewBox="0 0 46 34" width="100%"><ellipse cx="23" cy="29" rx="17" ry="4" fill="rgba(0,0,0,.18)"/><path d="M4 16 h38 a19 14 0 0 1 -38 0Z" fill="#c97a4a"/><ellipse cx="23" cy="16" rx="19" ry="5.5" fill="#7a3f22"/><g opacity="${op}"><path d="M${10} ${fy+4} q13 -7 26 0 l0 6 q-13 6 -26 0Z" fill="#d6a04a"/><circle cx="16" cy="${fy+4}" r="2.4" fill="#a85f2a"/><circle cx="28" cy="${fy+3}" r="2.2" fill="#a85f2a"/><circle cx="23" cy="${fy+6}" r="2" fill="#b8722f"/></g></svg>`;
+  },
+  waterSVG(level){
+    const f=Math.max(0,Math.min(1,level/100)); const fy=18-f*9; const op=f>0.04?1:0;
+    return `<svg viewBox="0 0 46 34" width="100%"><ellipse cx="23" cy="29" rx="17" ry="4" fill="rgba(0,0,0,.18)"/><path d="M4 16 h38 a19 14 0 0 1 -38 0Z" fill="#9fb8cc"/><ellipse cx="23" cy="16" rx="19" ry="5.5" fill="#3f6f8f"/><g opacity="${op}"><path d="M${9} ${fy+5} q14 -6 28 0 l0 5 q-14 6 -28 0Z" fill="#6fb6e6"/><ellipse cx="23" cy="${fy+5}" rx="13" ry="2.6" fill="#9bd6f5"/><circle cx="18" cy="${fy+4}" r="1.4" fill="#fff" opacity=".7"/></g></svg>`;
+  },
+  refreshBowls(){
+    const r=this.root; if(!r)return;
+    const fb=r.querySelector('#foodFill'); if(fb)fb.innerHTML=this.bowlSVG(this.food);
+    const wb=r.querySelector('#waterFill'); if(wb)wb.innerHTML=this.waterSVG(this.water);
+  },
+  fillFood(){ this.ensureAudio(); this.food=100; this.refreshBowls(); this.popBubble('🍪'); this.logDiary('bowl filled with food','#ffd24d','🍪'); this.chirp(360,0.12); this.care('feed'); },
+  fillWater(){ this.ensureAudio(); this.water=100; this.refreshBowls(); this.popBubble('💧'); this.logDiary('bowl filled with water','#6fb6e6','💧'); this.chirp(520,0.12); this.care('water'); },
+  chirp(f,d){ this.ensureAudio(); if(this.ac&&this.soundOn)this.blip(f,this.ac.currentTime,d); },
+  popBubble(txt){ const eb=this.root&&this.root.querySelector('#bubble'); if(eb){eb.textContent=txt;eb.style.opacity='1';eb.style.animation='popIn .3s ease';clearTimeout(this._eb);this._eb=setTimeout(()=>{eb.style.opacity='0';eb.style.animation='';},1300);} },
+
+  // ====================================================================
+  // TOY PLAY (animation client-side; fires backend per item)
+  // ====================================================================
+  startPlay(it){
+    this.ensureAudio();
+    const dur={ball:3.0,teddy:2.8,balloon:3.0,rattle:2.4,music:3.4,mirror:2.6}[it.kind]||2.6;
+    this.action={type:it.kind,id:it.id,t0s:performance.now()/1000,dur};
+    it.held=true; it.resting=false;
+    this.speak(); this.popBubble(this.emoteFrom(this.disp));
+    // fire the real backend interaction
+    if(it.ep==='care') this.care(it.name);
+    else this.toy(it.name);
+    clearTimeout(this._actEnd); this._actEnd=setTimeout(()=>this.endPlay(),dur*1000);
+  },
+  endPlay(){
+    const a=this.action; this.action=null; if(!a)return;
+    const fx=43+Math.random()*14, fy=85+Math.random()*5;
+    const inner=this.itemEls[a.id], wrap=inner&&inner.closest('[data-id]');
+    if(wrap){ wrap.style.transition=''; wrap.style.transform=''; wrap.style.zIndex=''; }
+    const it=this.items.find(i=>i.id===a.id);
+    if(it){ it.held=false; it.x=fx; it.y=fy; it.resting=true; }
+    this._applyItemLayout(); this.saveItems();
+  },
+  positionActionItem(){
+    if(!this.action) return; const a=this.action; const inner=this.itemEls[a.id]; if(!inner)return;
+    const wrap=inner.closest('[data-id]'); if(!wrap)return;
+    const e=(performance.now()/1000)-a.t0s;
+    let x=50,y=50,rot=0,sc=1,anchor='-50%,-50%';
+    if(a.type==='ball'){ const ph=Math.abs(Math.sin(e*4.4)); y=48+ph*32; x=50+Math.sin(e*2.2)*5; rot=(e*240)%360; }
+    else if(a.type==='teddy'){ x=50; y=53; sc=1+Math.max(0,Math.sin(e*5.5))*0.12; rot=Math.sin(e*5.5)*4; }
+    else if(a.type==='balloon'){ x=50+Math.sin(e*1.7)*10; y=26+Math.sin(e*3.1)*4; anchor='-50%,-50%'; }
+    else if(a.type==='rattle'){ x=60; y=46; rot=Math.sin(e*30)*26; }
+    else if(a.type==='music'){ x=41; y=54; rot=Math.sin(e*2.2)*6; }
+    else if(a.type==='mirror'){ x=58; y=45; rot=Math.sin(e*2)*4; }
+    this.actPos={x,y,rot,sc};
+    wrap.style.transition='none';
+    wrap.style.left=x+'%'; wrap.style.top=y+'%';
+    wrap.style.transform=`translate(${anchor}) rotate(${rot}deg) scale(${sc})`;
+    wrap.style.zIndex=a.type==='balloon'?3:6;
+  },
+
+  // ====================================================================
+  // AUTO EAT / DRINK (cosmetic; server owns need value via /care)
+  // ====================================================================
+  autoConsume(dt){
+    if(this.action) return;
+    const n=this.needsObj;
+    if(this.food>0 && n.hunger<99){
+      const rr=22*dt; this.food=Math.max(0,this.food-rr);
+      this.eating=0.5; this.refreshBowls();
+      if(performance.now()-this.lastSpeak>1400){ this.lastSpeak=performance.now(); this.chirp(300+Math.random()*120,0.06); }
+      if(this.food<=0){ this.logDiary('finished eating','#5fd08a','♥'); this.popBubble('^‿^'); this.renderDiary(); }
+    } else this.eating=Math.max(0,this.eating-dt);
+    if(this.water>0 && n.thirst<99){
+      const rr=24*dt; this.water=Math.max(0,this.water-rr);
+      this.drinking=0.5; this.refreshBowls();
+    } else this.drinking=Math.max(0,this.drinking-dt);
+  },
+
+  // ====================================================================
+  // BEHAVIOR FSM (idle | sad | tantrum)
+  // ====================================================================
+  pickBehavior(){
+    const d=this.disp; const n=this.needsObj;
+    const neglected=(n.attention<12||n.hunger<10);
+    if((d.v<104 && d.a>148 && d.d>122) || (neglected && d.a>120)) return 'tantrum';
+    if((this.haveCrisis&&this.crisis>0.55) || (d.v<106 && d.a<130)) return 'sad';
+    return 'idle';
+  },
+
+  // ====================================================================
+  // AUDIO (WebAudio oscillator blips — the redesign's signature; kept)
+  // ====================================================================
+  ensureAudio(){ if(!this.soundOn) return; try{ if(!this.ac) this.ac=new (window.AudioContext||window.webkitAudioContext)(); if(this.ac.state==='suspended')this.ac.resume(); }catch(e){} },
+  blip(freq,t0,dur){ if(!this.ac)return; const o=this.ac.createOscillator(),gn=this.ac.createGain(); o.type='triangle'; o.frequency.setValueAtTime(freq,t0); o.frequency.linearRampToValueAtTime(freq*1.04,t0+dur); gn.gain.setValueAtTime(0.0001,t0); gn.gain.exponentialRampToValueAtTime(0.16,t0+0.012); gn.gain.exponentialRampToValueAtTime(0.0001,t0+dur); o.connect(gn).connect(this.ac.destination); o.start(t0); o.stop(t0+dur+0.02); },
+  speak(serverText){
+    const d=this.disp;
+    let text;
+    if(serverText){ text=serverText; }
+    else {
+      const syl=['ba','da','la','na','mi','mu','wa','wo','dee','do','boo','ga','gee','sho','rup','meep','noo','wug','blee','va','du','gwi'];
+      const words=1+Math.round(Math.max(0,(d.a-110)/60))+(Math.random()<0.4?1:0);
+      text='';
+      for(let w=0;w<Math.min(4,words);w++){ const len=1+Math.floor(Math.random()*2); let word=''; for(let s=0;s<len;s++)word+=syl[Math.floor(Math.random()*syl.length)]; text+=(w?' ':'')+word; }
+      if(d.v>150)text+=' ♪'; if(d.v<104)text+='…';
+    }
+    const bub=this.root&&this.root.querySelector('#simlish');
+    if(bub){ bub.textContent=text; bub.style.opacity='1'; clearTimeout(this._st); this._st=setTimeout(()=>{bub.style.opacity='0';},1700); }
+    const eb=this.root&&this.root.querySelector('#bubble');
+    if(eb){ eb.textContent=this.emoteFrom(d); eb.style.opacity='1'; eb.style.animation='popIn .3s ease'; clearTimeout(this._eb); this._eb=setTimeout(()=>{eb.style.opacity='0';eb.style.animation='';},1700); }
+    this.ensureAudio(); if(!this.ac||!this.soundOn)return;
+    const base=190+((d.v)/255)*300; const now=this.ac.currentTime;
+    const count=Math.max(2,Math.min(8,Math.round(String(text).replace(/[^a-z♪…]/g,'').length/2)));
+    const tempo=0.10-Math.max(0,(d.a-128)/127)*0.04;
+    for(let i=0;i<count;i++){ const f=base*(0.9+Math.random()*0.4)*(d.v>150&&i===count-1?1.3:1); this.blip(f, now+i*tempo, 0.09); }
+  },
+
+  // ====================================================================
+  // DIARY (local log + server moments)
+  // ====================================================================
+  logDiary(text,color,dot){
+    this.diary=[{text, color:color||'#ffd21e', dot:dot||'•', mood:this.moodWord}, ...this.diary].slice(0,9);
+    this.renderDiary();
+  },
+  _relTime(ts){
+    let ms; if(typeof ts==='number'){ ms=ts<1e10?ts*1000:ts; } else { ms=Date.parse(ts); }
+    if(!ms||isNaN(ms)) return '';
+    const diff=Math.floor((Date.now()-ms)/1000);
+    if(diff<60) return 'just now';
+    if(diff<3600) return Math.floor(diff/60)+'m ago';
+    if(diff<86400) return Math.floor(diff/3600)+'h ago';
+    return Math.floor(diff/86400)+'d ago';
+  },
+  async loadMoments(){
+    try{
+      const r=await fetch('/moments'); if(!r.ok) return;
+      const data=await r.json(); const events=data.events||[];
+      // hydrate notable server moments into the diary (newest first), keeping local entries too
+      const server=events.slice().reverse().slice(0,6).map(ev=>({
+        text:(ev.label||(ev.type||'moment').replace(/_/g,' ')),
+        color:'#a9967c', dot:'◆',
+        mood:ev.mood_word||this._relTime(ev.ts)
+      }));
+      // local entries first, then server moments that aren't dupes
+      const seen=new Set(this.diary.map(d=>d.text));
+      this.diary=[...this.diary, ...server.filter(s=>!seen.has(s.text))].slice(0,9);
+      this.renderDiary();
+    }catch(_){}
+  },
+
+  // ====================================================================
+  // BACKEND CALLS
+  // ====================================================================
+  async _post(url, body){
+    try{
+      const r=await fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
+      if(!r.ok){ this.popBubble('…?'); return null; }
+      return await r.json();
+    }catch(_){ this.popBubble('…?'); return null; }
+  },
+  async send(){
+    const el=this.inputEl; if(!el)return; const text=el.value.trim(); if(!text)return;
+    this.ensureAudio(); el.value='';
+    this.logDiary('“'+(text.length>30?text.slice(0,30)+'…':text)+'”','#8fc0ff','✎');
+    const state=await this._post('/say',{text});
+    if(!state) return;
+    this.applyState(state,{useDeltas:true});
+    if(state.recognition && state.recognition.returning){ this.popBubble('welcome back!'); this.showRemembers(true); }
+    if(state.relation && state.relation.known) this.showRemembers(true);
+    this.speak(state.simlish);
+    this.loadMoments();
+  },
+  async care(action){
+    const state=await this._post('/care',{action});
+    if(!state) return;
+    this.applyState(state,{useDeltas:true});
+    this.speak(state.simlish);
+    this.loadMoments();
+  },
+  async toy(name){
+    const state=await this._post('/toy',{toy:name});
+    if(!state) return;
+    this.applyState(state,{useDeltas:true});
+    this.speak(state.simlish);
+    this.loadMoments();
+  },
+  petCreature(e){ if(e)e.preventDefault(); this.ensureAudio(); this.speak(); this.popBubble('♥'); this.logDiary('got petted','#5fd08a','♥'); this.care('pet'); },
+
+  showRemembers(on){
+    const el=this.q('#remembersHint'); if(el) el.style.display=on?'block':'none';
+  },
+
+  // ====================================================================
+  // SELF-SOOTHE (preserved from prior production app): walk to & carry a comfort item
+  // ====================================================================
+  triggerSoothe(item){
+    if(!item) return;
+    // map backend item name to our item id (musicbox->music; play->ball)
+    const map={musicbox:'music', play:'ball', ball:'ball', balloon:'balloon', rattle:'rattle', mirror:'mirror', teddy:'teddy'};
+    const id=map[item]||item;
+    const it=this.items.find(i=>i.id===id);
+    if(!it || this.action) return;
+    // cosmetic comfort: he picks it up and plays (no extra backend call; server already lifted mood)
+    this.action={type:it.kind,id:it.id,t0s:performance.now()/1000,dur:3.0};
+    it.held=true; it.resting=false;
+    this.logDiary('soothed himself with the '+id,'#c6a6ff','✷');
+    clearTimeout(this._actEnd); this._actEnd=setTimeout(()=>this.endPlay(),3000);
+  },
+
+  // ====================================================================
+  // DRAG (toy -> creature)
+  // ====================================================================
+  startDrag(e,id){
+    e.preventDefault(); this.ensureAudio();
+    const it=this.items.find(x=>x.id===id); if(!it)return;
+    this.dragId=id;
+    const wrap=e.currentTarget; this.dragWrap=wrap;
+    wrap.style.cursor='grabbing'; wrap.style.transition='none'; wrap.style.zIndex=20;
+    this.moveItemTo(e.clientX,e.clientY);
+  },
+  moveItemTo(cx,cy){
+    if(!this.stageEl||!this.dragId)return;
+    const r=this.stageEl.getBoundingClientRect();
+    let x=(cx-r.left)/r.width*100, y=(cy-r.top)/r.height*100;
+    x=Math.max(3,Math.min(97,x)); y=Math.max(8,Math.min(99,y));
+    const it=this.items.find(i=>i.id===this.dragId);
+    if(it){ it.x=x; it.y=y; it.resting=false; it.held=false; }
+    this._applyItemLayout();
+  },
+  onPointerMove(e){ if(this.dragId)this.moveItemTo(e.clientX,e.clientY); },
+  onPointerUp(e){
+    if(!this.dragId)return;
+    const id=this.dragId; this.dragId=null;
+    if(this.dragWrap){this.dragWrap.style.cursor='grab';this.dragWrap.style.zIndex='';}
+    const r=this.stageEl.getBoundingClientRect();
+    const x=(e.clientX-r.left)/r.width*100, y=(e.clientY-r.top)/r.height*100;
+    const dx=x-50, dy=y-52; const onCreature=Math.sqrt(dx*dx+dy*dy)<19;
+    const it=this.items.find(i=>i.id===id);
+    if(onCreature && it){
+      this.startPlay(it);
+    } else if(it){
+      const fy=Math.max(y, 72+Math.random()*16);
+      it.x=Math.max(4,Math.min(96,x)); it.y=Math.min(96,fy); it.resting=true; it.held=false;
+      this._applyItemLayout(); this.saveItems();
+    }
+  },
+
+  saveItems(){ try{ const pos={}; this.items.forEach(i=>pos[i.id]={x:i.x,y:i.y}); localStorage.setItem('clanker_items_v3',JSON.stringify(pos)); }catch(e){} },
+  restoreItems(){ try{ const raw=localStorage.getItem('clanker_items_v3'); if(!raw)return; const pos=JSON.parse(raw); this.items.forEach(i=>{ if(pos[i.id]){ i.x=pos[i.id].x; i.y=pos[i.id].y; } }); }catch(e){} },
+
+  // ====================================================================
+  // THEME (default = pixel, the authored aesthetic; cozy/amber available via setThemeTo)
+  // ====================================================================
+  setThemeTo(theme){
+    const r=this.root; if(!r) return;
+    if(theme==='pixel'){
+      const pixel={'--bg':'#0e1410','--panel':'#16201a','--panel2':'#0a0f0c','--ink':'#cdeec0','--dim':'#6f9a73','--accent':'#ffd21e','--line':'rgba(120,210,120,.22)','--rad':'4px','--fhead':"'Press Start 2P',monospace",'--fbody':"'VT323',monospace",'--wall1':'#26402c','--wall2':'#16271a','--floor':'#1f3322','--sky1':'#7fe6b0','--sky2':'#bdf48a','--cstroke':'5','--cstroke-col':'#0c1a10'};
+      Object.keys(pixel).forEach(k=>r.style.setProperty(k,pixel[k]));
+      r.style.fontFamily="'VT323',monospace"; r.style.fontSize='17px'; r.style.letterSpacing='.3px';
     } else {
-      if (_float) _float = null;
-      badgeEl.setAttribute('opacity', '0');
+      // cozy/amber: clear overrides so the inline var(--x, fallback) warm defaults apply
+      ['--bg','--panel','--panel2','--ink','--dim','--accent','--line','--rad','--fhead','--fbody','--wall1','--wall2','--floor','--sky1','--sky2','--cstroke','--cstroke-col'].forEach(k=>r.style.removeProperty(k));
+      r.style.fontFamily=''; r.style.fontSize=''; r.style.letterSpacing='';
     }
+  },
+
+  // ====================================================================
+  // TOOLTIPS (client-only, delegated)
+  // ====================================================================
+  bindTooltips(){
+    const tip=this.tipEl;
+    const show=(e)=>{
+      const host=e.target.closest('[data-tip]'); if(!host){ return; }
+      const txt=host.getAttribute('data-tip'); if(!txt) return;
+      tip.innerHTML=txt;
+      tip.style.left=(e.clientX+16)+'px'; tip.style.top=e.clientY+'px'; tip.style.opacity='1';
+    };
+    this.root.addEventListener('mouseover',(e)=>{ if(e.target.closest('[data-tip]')) show(e); });
+    this.root.addEventListener('mousemove',(e)=>{ const h=e.target.closest('[data-tip]'); if(h && tip.style.opacity==='1'){ tip.style.left=(e.clientX+16)+'px'; tip.style.top=e.clientY+'px'; } });
+    this.root.addEventListener('mouseout',(e)=>{ const from=e.target.closest('[data-tip]'); const to=e.relatedTarget&&e.relatedTarget.closest&&e.relatedTarget.closest('[data-tip]'); if(from && from!==to) tip.style.opacity='0'; });
+  },
+
+  // ---------- utils ----------
+  q(sel){ return this.root?this.root.querySelector(sel):document.querySelector(sel); },
+  _esc(s){ return String(s==null?'':s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); },
+
+  // ====================================================================
+  // BOOT
+  // ====================================================================
+  async init(){
+    this.root=document.getElementById('root');
+    this.stageEl=document.getElementById('stage');
+    this.inputEl=document.getElementById('msg');
+    this.tipEl=document.getElementById('tooltip');
+
+    this.items=this.defaultItems();
+    this.restoreItems();
+
+    // DEFAULT to the pixel aesthetic — this is the authored design
+    this.setThemeTo('pixel');
+
+    // events
+    const sendBtn=document.getElementById('send'); if(sendBtn) sendBtn.addEventListener('click',()=>this.send());
+    if(this.inputEl) this.inputEl.addEventListener('keydown',(e)=>{ if(e.key==='Enter') this.send(); });
+    const creature=document.getElementById('creature'); if(creature) creature.addEventListener('pointerdown',(e)=>this.petCreature(e));
+    const fb=document.getElementById('foodBowl'); if(fb) fb.addEventListener('click',()=>this.fillFood());
+    const wb=document.getElementById('waterBowl'); if(wb) wb.addEventListener('click',()=>this.fillWater());
+    const soundBtn=document.getElementById('soundBtn');
+    if(soundBtn) soundBtn.addEventListener('click',()=>{ this.soundOn=!this.soundOn; soundBtn.textContent=this.soundOn?'🔊':'🔇'; if(this.soundOn)this.ensureAudio(); });
+
+    window.addEventListener('pointermove',(e)=>this.onPointerMove(e));
+    window.addEventListener('pointerup',(e)=>this.onPointerUp(e));
+
+    this.bindTooltips();
+    this.renderItems();
+    this.refreshBowls();
+    this.renderMeters(); this.renderNeeds(); this.renderDistance();
+    this.renderCrisis(); this.renderMoodWord(); this.renderReadPhrase();
+    this.renderDiary();
+
+    // hydrate from snapshot
+    try{
+      const r=await fetch('/snapshot'); if(r.ok){
+        const state=await r.json();
+        // snapshot has no deltas; set mood directly (no arrow flicker)
+        this.applyState(state,{useDeltas:false});
+        if(state.self_soothe && state.self_soothe.item) this.triggerSoothe(state.self_soothe.item);
+        if(state.relation && state.relation.known) this.showRemembers(true);
+      }
+    }catch(_){}
+
+    this.loadMoments();
+
+    // animation loop
+    this.lastTs=performance.now();
+    this._raf=requestAnimationFrame(this.step.bind(this));
+    setTimeout(()=>{ this.speak(); },500);
+
+    // poll snapshot every 45s for needs + self_soothe
+    setInterval(()=>{
+      fetch('/snapshot').then(r=>r.json()).then(s=>{
+        if(s.needs){ this.applyNeeds(s.needs); this.renderNeeds(); }
+        if(s.crisis){ this.applyCrisis(s.crisis); this.renderCrisis(); }
+        if(s.self_soothe && s.self_soothe.item) this.triggerSoothe(s.self_soothe.item);
+      }).catch(()=>{});
+    },45000);
   }
-  if (_hold && t >= _hold.until) {
-    if (_hold.floorEl) _hold.floorEl.style.opacity = '';      // put it back on the floor
-    _hold = null;
-  }
+};
 
-  requestAnimationFrame(pulse);
-}
-requestAnimationFrame(pulse);
+if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',()=>App.init());
+else App.init();

static/index.html

@@ -1,216 +1,232 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<title>clanker</title>
+<html lang="en"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>clanker · a deterministic emotional creature</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="/static/styles.css?v=16">
+<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/static/styles.css?v=21">
+<script src="/static/app.js?v=21" defer></script>
 </head>
 <body>
-<div id="layout">
-
-  <!-- LEFT: live VADUGWI meters with deltas -->
-  <div id="meters" class="panel">
-    <div class="panel-head">VADUGWI · live</div>
-    <div id="read-row" class="read-row">this message read: —</div>
-    <div id="meter-rows"></div>
-    <div id="needs" class="needs-panel">
-      <div class="needs-head">needs</div>
-      <div class="needs-bars">
-        <div class="need-row"><span class="need-label">hunger</span><div class="need-track"><div class="need-fill" id="need-hunger"></div></div><span class="need-val" id="need-hunger-val">—</span></div>
-        <div class="need-row"><span class="need-label">energy</span><div class="need-track"><div class="need-fill" id="need-energy"></div></div><span class="need-val" id="need-energy-val">—</span></div>
-        <div class="need-row"><span class="need-label">attention</span><div class="need-track"><div class="need-fill" id="need-attention"></div></div><span class="need-val" id="need-attention-val">—</span></div>
-        <div class="need-row"><span class="need-label">thirst</span><div class="need-track"><div class="need-fill" id="need-thirst"></div></div><span class="need-val" id="need-thirst-val">—</span></div>
+
+<div id="root" style="position:relative;min-height:100vh;width:100%;background:var(--bg,#211710);color:var(--ink,#f4e8d6);font-family:var(--fbody,'JetBrains Mono',monospace);padding:18px;display:flex;flex-direction:column;gap:16px;overflow-x:hidden;">
+
+  <!-- ===== HEADER ===== -->
+  <header style="display:flex;align-items:center;gap:14px;flex-wrap:wrap;">
+    <div style="display:flex;align-items:center;gap:11px;">
+      <div style="width:34px;height:34px;border-radius:11px;background:var(--accent,#ffd21e);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(255,200,60,.35);">
+        <svg width="22" height="22" viewBox="0 0 24 24"><circle cx="12" cy="12" r="11" fill="#26190d"></circle><circle cx="8.5" cy="11" r="1.7" fill="#ffd21e"></circle><circle cx="15.5" cy="11" r="1.7" fill="#ffd21e"></circle><path d="M7.5 15 Q12 19 16.5 15" stroke="#ffd21e" stroke-width="1.8" fill="none" stroke-linecap="round"></path></svg>
+      </div>
+      <div>
+        <div id="creatureName" style="font-family:var(--fhead,'Fredoka',sans-serif);font-weight:700;font-size:20px;letter-spacing:.3px;line-height:1;">Huggy</div>
+        <div style="font-size:11px;color:var(--dim,#a9967c);margin-top:3px;letter-spacing:.4px;">a deterministic emotional creature · powered by VADUGWI</div>
       </div>
     </div>
-  </div>
+    <div data-tip="VADUGWI: 7 deterministic dimensions (0&ndash;255, 128 neutral). 4,563-word vocabulary, 66 chess-like structural patterns, proximity fields (0.9&times; decay/word), phase system &amp; Force Flow. Fully explainable. The live Space calls the real clanker engine + clanker-soul on the backend." style="cursor:help;font-size:10.5px;color:var(--dim,#a9967c);border:1px solid var(--line,rgba(255,210,140,.16));border-radius:999px;padding:5px 11px;display:flex;align-items:center;gap:6px;">
+      <span style="width:7px;height:7px;border-radius:50%;background:#5fd08a;box-shadow:0 0 8px #5fd08a;"></span>7D engine · how it works
+    </div>
+    <div style="flex:1;"></div>
+    <button id="soundBtn" title="toggle babble sound" style="cursor:pointer;border:1px solid var(--line,rgba(255,210,140,.16));background:var(--panel2,#1a120b);color:var(--ink,#f4e8d6);border-radius:11px;width:38px;height:34px;font-size:15px;">&#128266;</button>
+  </header>
+
+  <!-- ===== GRID ===== -->
+  <div style="display:flex;gap:16px;flex-wrap:wrap;align-items:stretch;flex:1;">
+
+    <!-- LEFT: VADUGWI live -->
+    <section style="flex:1 1 300px;max-width:360px;min-width:268px;background:var(--panel,#2c2016);border:1px solid var(--line,rgba(255,210,140,.16));border-radius:var(--rad,18px);padding:16px;display:flex;flex-direction:column;gap:13px;">
+      <div style="display:flex;align-items:baseline;justify-content:space-between;">
+        <div style="font-family:var(--fhead,'Fredoka',sans-serif);font-weight:700;font-size:14px;letter-spacing:1.5px;">VADUGWI</div>
+        <div style="font-size:9.5px;color:var(--accent,#ffd21e);letter-spacing:2px;display:flex;align-items:center;gap:5px;"><span style="width:6px;height:6px;border-radius:50%;background:var(--accent,#ffd21e);animation:floaty 1.6s ease-in-out infinite;"></span>LIVE</div>
+      </div>
+      <div style="font-size:11px;color:var(--dim,#a9967c);line-height:1.5;">this message read as<br><span id="readPhrase" style="color:var(--ink,#f4e8d6);font-size:13px;font-weight:600;">waiting&hellip;</span></div>
+
+      <!-- meters (JS fills 7 rows) -->
+      <div id="meters"></div>
 
-  <!-- CENTER: creature room — single scalable SVG -->
-  <div id="room">
-    <!--
-      One SVG holds everything: room scene + aura + shadow + creature.
-      viewBox 0 0 400 300; floor line y=192.
-      Creature local space is 200×240 (body cx=100 cy=116 r=74).
-      blob-place: S=0.40, TX=160, TY=108
-        — creature bottom ~y=210 local → 108 + 0.40×210 = 192 ✓ (on floor)
-        — creature center x=100 local → 160 + 0.40×100 = 200 ✓ (centered)
-    -->
-    <svg id="room-svg" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
-      <defs>
-        <linearGradient id="wall-grad" x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stop-color="#ffe8b0"/>
-          <stop offset="60%" stop-color="#f5d08a"/>
-          <stop offset="100%" stop-color="#ddb060"/>
-        </linearGradient>
-        <radialGradient id="light-grad" cx="50%" cy="20%" r="60%">
-          <stop offset="0%" stop-color="rgba(255,240,180,0.28)"/>
-          <stop offset="100%" stop-color="rgba(255,240,180,0)"/>
-        </radialGradient>
-        <radialGradient id="vignette-grad" cx="50%" cy="50%" r="70%">
-          <stop offset="50%" stop-color="rgba(60,30,0,0)"/>
-          <stop offset="100%" stop-color="rgba(60,30,0,0.28)"/>
-        </radialGradient>
-        <!-- aura gradient: JS updates stop color + circle opacity -->
-        <radialGradient id="aura-grad" cx="50%" cy="50%" r="50%">
-          <stop id="aura-stop" offset="0%" stop-color="hsl(28,80%,58%)" stop-opacity="0.6"/>
-          <stop offset="100%" stop-color="hsl(28,80%,58%)" stop-opacity="0"/>
-        </radialGradient>
-        <!-- emotion glow on the face (anime-style): JS sets color + opacity -->
-        <radialGradient id="emote-grad" cx="50%" cy="50%" r="50%">
-          <stop id="emote-stop-0" offset="0%" stop-color="hsl(2,90%,55%)" stop-opacity="0.85"/>
-          <stop id="emote-stop-1" offset="100%" stop-color="hsl(2,90%,55%)" stop-opacity="0"/>
-        </radialGradient>
-      </defs>
-
-      <!-- wall -->
-      <rect x="0" y="0" width="400" height="192" fill="url(#wall-grad)"/>
-      <!-- floor -->
-      <rect x="0" y="192" width="400" height="108" fill="#c9a06a"/>
-      <!-- baseboard -->
-      <rect x="0" y="190" width="400" height="4" fill="rgba(100,60,20,0.35)"/>
-      <!-- window: upper-center -->
-      <image href="/static/assets/window.png" x="130" y="4" width="140" height="120" opacity="0.92" style="filter:drop-shadow(0 8px 24px rgba(255,220,120,0.4))"/>
-      <!-- shelf: upper-right -->
-      <image href="/static/assets/shelf.png" x="258" y="18" width="132" height="90" opacity="0.90"/>
-      <!-- plant: lower-left -->
-      <image href="/static/assets/plant.png" x="6" y="126" width="60" height="74" opacity="0.94"/>
-
-      <!-- WORLD OBJECTS: real toys/care items, all resting on the floor zone
-           (floor top y=192; every item's BOTTOM sits at ~196). Tap one and the
-           creature walks over and reacts. -->
-      <g id="world">
-        <g class="room-obj" data-toy="balloon" tabindex="0" role="button" aria-label="balloon">
-          <image href="/static/assets/toy-balloon.png?v=16" x="40" y="78" width="40" height="50"/>
-        </g>
-        <g class="room-obj" data-toy="musicbox" tabindex="0" role="button" aria-label="music box">
-          <image href="/static/assets/toy-musicbox.png?v=16" x="84" y="164" width="34" height="32"/>
-        </g>
-        <g class="room-obj" data-care="feed" tabindex="0" role="button" aria-label="food bowl">
-          <image href="/static/assets/obj-bowl-empty.png?v=16" x="118" y="166" width="42" height="30"/>
-          <image id="bowl-food" href="/static/assets/obj-bowl.png?v=16" x="118" y="166" width="42" height="30" opacity="1"/>
-        </g>
-        <g class="room-obj" data-care="water" tabindex="0" role="button" aria-label="water bowl">
-          <image href="/static/assets/obj-water-empty.png?v=16" x="168" y="166" width="42" height="30"/>
-          <image id="bowl-water" href="/static/assets/obj-water.png?v=16" x="168" y="166" width="42" height="30" opacity="1"/>
-        </g>
-        <g class="room-obj" data-care="play" tabindex="0" role="button" aria-label="ball">
-          <image href="/static/assets/obj-ball.png?v=16" x="222" y="166" width="30" height="30"/>
-        </g>
-        <g class="room-obj" data-toy="rattle" tabindex="0" role="button" aria-label="rattle">
-          <image href="/static/assets/toy-rattle.png?v=16" x="258" y="162" width="32" height="34"/>
-        </g>
-        <g class="room-obj" data-toy="mirror" tabindex="0" role="button" aria-label="mirror">
-          <image href="/static/assets/toy-mirror.png?v=16" x="298" y="160" width="32" height="36"/>
-        </g>
-        <g class="room-obj" data-toy="teddy" tabindex="0" role="button" aria-label="teddy bear">
-          <image href="/static/assets/toy-teddy.png?v=16" x="338" y="154" width="42" height="42"/>
-        </g>
-      </g>
-
-      <!-- aura glow: SVG circle with radialGradient, behind creature -->
-      <!-- cx/cy in scene coords = creature center: 200, ~168 (116*0.40+108=154.4; use 160 for visual) -->
-      <circle id="aura" cx="200" cy="160" r="76" fill="url(#aura-grad)"
-        opacity="0.6" style="mix-blend-mode:screen; pointer-events:none;"/>
-
-      <!-- contact shadow on floor beneath creature (tracks creature X) -->
-      <ellipse id="shadow" cx="200" cy="192" rx="40" ry="6" fill="#00000030"/>
-
-      <!-- creature: blob-place holds fixed scene position; #blob gets dynamic per-message transform -->
-      <g id="blob-place" transform="translate(160,108) scale(0.40)" style="cursor:pointer" tabindex="0" role="button" aria-label="pet the creature">
-        <g id="blob-anim">
-        <g id="blob" style="filter:drop-shadow(0 25px 50px rgba(0,0,0,0.28))">
-          <!-- body: big ROUND yellow face circle (always Hugging-Face yellow) -->
-          <circle id="body" cx="100" cy="116" r="74"/>
-          <!-- emotion glow: anime-style colored glow over the face (JS sets color/opacity) -->
-          <circle id="emote-glow" cx="100" cy="118" r="66" fill="url(#emote-grad)" opacity="0" pointer-events="none" style="mix-blend-mode:multiply"/>
-          <!-- body highlight -->
-          <ellipse cx="82" cy="86" rx="16" ry="10" fill="white" opacity="0.28" transform="rotate(-15,82,86)"/>
-          <!-- cheeks: blush/anger dots (JS recolors by emotion) -->
-          <ellipse id="cheek-l" cx="68" cy="136" rx="13" ry="9" fill="#ff9090" opacity="0.38"/>
-          <ellipse id="cheek-r" cx="132" cy="136" rx="13" ry="9" fill="#ff9090" opacity="0.38"/>
-          <!-- left arm/hand -->
-          <g id="arm-l">
-            <path id="arm-l-path" d="M50 148 Q28 130 18 112" stroke-width="14" stroke-linecap="round" fill="none"/>
-            <ellipse id="hand-l" cx="18" cy="108" rx="20" ry="17"/>
+      <!-- needs -->
+      <div style="border-top:1px solid var(--line,rgba(255,210,140,.16));padding-top:11px;display:flex;flex-direction:column;gap:8px;">
+        <div data-tip="Tamagotchi-style needs decay over time. Feed, water, play with and pet it to keep them up &mdash; neglect pulls its mood down." style="cursor:help;font-size:11px;letter-spacing:1.5px;color:var(--dim,#a9967c);font-weight:600;">NEEDS</div>
+        <div id="needs"></div>
+      </div>
+
+      <!-- soul / mood distance -->
+      <div data-tip="Three timescales (clanker-soul): the Conversational score &rarr; Mood (minutes&ndash;hours, blends &amp; cushions) &rarr; Soul (the persistent baseline mood drifts back toward). Heavy events during a wound can breach straight into Soul." style="cursor:help;border-top:1px solid var(--line,rgba(255,210,140,.16));padding-top:11px;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--dim,#a9967c);">
+        <span>mood &#10230; soul drift</span>
+        <span id="soulDistance" style="color:var(--ink,#f4e8d6);font-weight:600;">&Delta; 0</span>
+      </div>
+    </section>
+
+    <!-- CENTER: room -->
+    <section style="flex:3 1 460px;min-width:320px;display:flex;flex-direction:column;gap:13px;">
+      <div id="stage" style="position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--rad,18px);overflow:hidden;border:1px solid var(--line,rgba(255,210,140,.16));background:var(--wall2,#e9bd72);box-shadow:inset 0 0 80px rgba(40,20,0,.25);touch-action:none;user-select:none;">
+
+        <!-- room scene -->
+        <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice" style="position:absolute;inset:0;width:100%;height:100%;">
+          <defs>
+            <linearGradient id="wallg" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="var(--wall1,#ffe8b0)"></stop><stop offset="100%" stop-color="var(--wall2,#e9bd72)"></stop>
+            </linearGradient>
+            <linearGradient id="skyg" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="var(--sky1,#bfe3ff)"></stop><stop offset="100%" stop-color="var(--sky2,#ffd98a)"></stop>
+            </linearGradient>
+            <radialGradient id="sung" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="#fff4c2"></stop><stop offset="100%" stop-color="#ffcf5e"></stop></radialGradient>
+            <radialGradient id="lightg" cx="50%" cy="14%" r="62%"><stop offset="0%" stop-color="rgba(255,244,200,.34)"></stop><stop offset="100%" stop-color="rgba(255,244,200,0)"></stop></radialGradient>
+            <radialGradient id="vigg" cx="50%" cy="52%" r="72%"><stop offset="52%" stop-color="rgba(40,20,0,0)"></stop><stop offset="100%" stop-color="rgba(30,15,0,.34)"></stop></radialGradient>
+          </defs>
+          <rect x="0" y="0" width="400" height="196" fill="url(#wallg)"></rect>
+          <rect x="0" y="196" width="400" height="104" fill="var(--floor,#c9a06a)"></rect>
+          <rect x="0" y="193" width="400" height="4" fill="rgba(90,55,18,.32)"></rect>
+          <!-- window, centered + aligned -->
+          <g>
+            <rect x="150" y="26" width="100" height="84" rx="7" fill="#fff" opacity=".5"></rect>
+            <rect x="155" y="31" width="90" height="74" rx="4" fill="url(#skyg)"></rect>
+            <circle cx="225" cy="52" r="13" fill="url(#sung)"></circle>
+            <path d="M170 96 q12 -16 24 -4 q10 -14 24 -2 l0 12 -48 0 z" fill="#fff" opacity=".5"></path>
+            <rect x="197" y="31" width="6" height="74" fill="#fff" opacity=".55"></rect>
+            <rect x="155" y="64" width="90" height="6" fill="#fff" opacity=".55"></rect>
+            <rect x="146" y="108" width="108" height="7" rx="3" fill="#caa46a"></rect>
           </g>
-          <!-- right arm/hand -->
-          <g id="arm-r">
-            <path id="arm-r-path" d="M150 148 Q172 130 182 112" stroke-width="14" stroke-linecap="round" fill="none"/>
-            <ellipse id="hand-r" cx="182" cy="108" rx="20" ry="17"/>
+          <!-- shelf right -->
+          <g>
+            <rect x="300" y="60" width="86" height="7" rx="2" fill="#a9763f"></rect>
+            <rect x="310" y="40" width="9" height="20" rx="2" fill="#cf6a5a"></rect>
+            <rect x="321" y="36" width="9" height="24" rx="2" fill="#6aa6cf"></rect>
+            <rect x="332" y="43" width="9" height="17" rx="2" fill="#7dbf72"></rect>
+            <circle cx="360" cy="52" r="8" fill="#d8975a"></circle><rect x="356" y="50" width="8" height="10" fill="#b97e44"></rect>
           </g>
-          <!-- face group: eyes, brows, mouth rendered by JS -->
-          <g id="face"></g>
-        </g>
-        </g>
-      </g>
-
-      <!-- carried item: shown at full size when the creature picks something up -->
-      <image id="carry" x="0" y="0" width="34" height="34" opacity="0" pointer-events="none"/>
-      <!-- floating VADUGWI badge: what dimensions the held item is moving -->
-      <text id="raise-badge" x="0" y="0" text-anchor="middle" font-size="20"
-            font-family="'JetBrains Mono', monospace" font-weight="600"
-            fill="#ffe9c8" opacity="0" pointer-events="none"
-            style="paint-order:stroke; stroke:rgba(20,14,8,0.85); stroke-width:3px;"></text>
-
-      <!-- warm window light overlay -->
-      <rect x="0" y="0" width="400" height="300" fill="url(#light-grad)" pointer-events="none"/>
-      <!-- vignette overlay -->
-      <rect x="0" y="0" width="400" height="300" fill="url(#vignette-grad)" pointer-events="none"/>
-      <text id="zzz" x="232" y="78" font-size="22" fill="#cfe0ff" opacity="0" font-family="Fredoka, sans-serif" pointer-events="none">z</text>
-    </svg>
-
-    <!-- Mood chip: small pill anchored top-right corner of room -->
-    <div id="moodword" class="chip">calm</div>
-
-    <!-- Emoticon bubble: appears above creature -->
-    <div id="bubble" class="hidden"></div>
-
-    <!-- Remembers-you hint: shown only when relation.known === true -->
-    <div id="remembers-hint" class="chip remembers-chip hidden">it remembers you 🤍</div>
-
-    <!-- Hint: how to interact with the world -->
-    <div id="world-hint" class="chip world-hint">tap a toy · tap him to pet · or say something</div>
-
-    <!-- Bottom band: just the chat dock by default; explainability tucked in a
-         collapsible drawer so it never covers the room. -->
-    <div id="bottom-band">
-      <div id="detail-drawer">
-        <div id="why" class="panel sub-panel">why: —</div>
-        <div id="acceptance" class="panel sub-panel">armor: —</div>
-        <div id="timeline" class="panel sub-panel">
-          <span class="sub-label">valence history</span>
-          <svg id="tl-svg" width="100%" height="36" preserveAspectRatio="none"></svg>
+          <!-- plant lower-left -->
+          <g>
+            <path d="M30 196 q-16 -34 -6 -56 q8 12 6 30 q10 -22 24 -28 q-6 18 -18 34 q14 -10 26 -8 q-12 14 -28 24z" fill="#5a9a52"></path>
+            <path d="M30 196 l-12 0 6 -26 12 0 z" fill="#bf6a4a"></path>
+          </g>
+          <!-- rug -->
+          <ellipse cx="200" cy="252" rx="118" ry="26" fill="#d9544e" opacity=".22"></ellipse>
+          <ellipse cx="200" cy="252" rx="92" ry="19" fill="#e8a23a" opacity=".22"></ellipse>
+          <rect x="0" y="0" width="400" height="300" fill="url(#lightg)" pointer-events="none"></rect>
+          <rect x="0" y="0" width="400" height="300" fill="url(#vigg)" pointer-events="none"></rect>
+        </svg>
+
+        <!-- aura -->
+        <div id="aura" style="position:absolute;left:50%;top:54%;width:42%;height:42%;border-radius:50%;background:radial-gradient(circle,hsl(48 70% 60% / .55),transparent 68%);transform:translate(-50%,-50%);mix-blend-mode:screen;pointer-events:none;animation:auraPulse 3.4s ease-in-out infinite;filter:blur(4px);"></div>
+
+        <!-- creature -->
+        <svg id="creature" viewBox="0 0 200 240" style="position:absolute;left:50%;bottom:13%;width:30%;transform:translateX(-50%);overflow:visible;cursor:pointer;z-index:4;">
+          <ellipse id="shadow" cx="100" cy="224" rx="62" ry="11" fill="rgba(0,0,0,.28)"></ellipse>
+          <g id="blob">
+            <circle id="body" cx="100" cy="120" r="78" fill="var(--accent,#ffd21e)" stroke="var(--cstroke-col,transparent)" stroke-width="var(--cstroke,0)"></circle>
+            <circle id="emoteGlow" cx="100" cy="122" r="70" fill="hsl(48 80% 55%)" opacity="0" pointer-events="none"></circle>
+            <ellipse cx="78" cy="84" rx="18" ry="11" fill="#fff" opacity=".26" transform="rotate(-16 78 84)"></ellipse>
+            <ellipse id="cheekL" cx="62" cy="138" rx="14" ry="9" fill="#ff9bb0" opacity=".35"></ellipse>
+            <ellipse id="cheekR" cx="138" cy="138" rx="14" ry="9" fill="#ff9bb0" opacity=".35"></ellipse>
+            <g id="armL"><path d="M52 150 Q34 152 24 138" stroke="var(--accent,#ffd21e)" stroke-width="15" stroke-linecap="round" fill="none"></path><ellipse cx="22" cy="136" rx="15" ry="13" fill="var(--accent,#ffd21e)"></ellipse></g>
+            <g id="armR"><path d="M148 150 Q166 152 176 138" stroke="var(--accent,#ffd21e)" stroke-width="15" stroke-linecap="round" fill="none"></path><ellipse cx="178" cy="136" rx="15" ry="13" fill="var(--accent,#ffd21e)"></ellipse></g>
+            <line id="browL" x1="62" y1="96" x2="86" y2="96" stroke="#2a1a0c" stroke-width="5" stroke-linecap="round"></line>
+            <line id="browR" x1="114" y1="96" x2="138" y2="96" stroke="#2a1a0c" stroke-width="5" stroke-linecap="round"></line>
+            <ellipse id="eyeL" cx="74" cy="112" rx="9" ry="11" fill="#2a1a0c"></ellipse>
+            <ellipse id="eyeR" cx="126" cy="112" rx="9" ry="11" fill="#2a1a0c"></ellipse>
+            <circle id="glintL" cx="77" cy="108" r="3" fill="#fff"></circle>
+            <circle id="glintR" cx="129" cy="108" r="3" fill="#fff"></circle>
+            <path id="mouth" d="M82 150 Q100 166 118 150" stroke="#2a1a0c" stroke-width="5" fill="none" stroke-linecap="round"></path>
+            <path id="tearL" d="M70 124 q-4 6 0 9 q4 -3 0 -9Z" fill="#7ec8f5" opacity="0"></path>
+            <path id="tearR" d="M130 124 q-4 6 0 9 q4 -3 0 -9Z" fill="#7ec8f5" opacity="0"></path>
+          </g>
+          <circle id="steamL" cx="44" cy="64" r="6" fill="#cfd8e0" opacity="0"></circle>
+          <circle id="steamR" cx="156" cy="64" r="6" fill="#cfd8e0" opacity="0"></circle>
+          <g id="hearts" opacity="0"><path d="M100 44 c-5 -8 -16 -2 -10 6 l10 10 10 -10 c6 -8 -5 -14 -10 -6Z" fill="#ff7aa8"></path></g>
+          <text id="zzz" x="150" y="60" font-size="26" fill="#cfe0ff" opacity="0" font-family="Fredoka,sans-serif">z</text>
+        </svg>
+
+        <!-- items (toys — draggable; JS fills) -->
+        <div id="items"></div>
+
+        <!-- feeding stations (fixed — click to fill) -->
+        <div id="foodBowl" data-tip="Click to fill the food bowl. Huggy walks over and eats on his own when there's food and he's hungry." style="position:absolute;left:14%;bottom:5%;width:10%;cursor:pointer;z-index:3;filter:drop-shadow(0 4px 5px rgba(0,0,0,.3));">
+          <div id="foodFill" style="width:100%;"></div>
+        </div>
+        <div id="waterBowl" data-tip="Click to fill the water bowl. Huggy drinks automatically when thirsty." style="position:absolute;left:25%;bottom:4%;width:10%;cursor:pointer;z-index:3;filter:drop-shadow(0 4px 5px rgba(0,0,0,.3));">
+          <div id="waterFill" style="width:100%;"></div>
+        </div>
+
+        <!-- mood chip -->
+        <div style="position:absolute;top:12px;right:12px;background:var(--panel,#2c2016);border:1px solid var(--line,rgba(255,210,140,.16));border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;font-family:var(--fhead,'Fredoka',sans-serif);display:flex;align-items:center;gap:8px;z-index:6;">
+          <span id="moodDot" style="width:9px;height:9px;border-radius:50%;background:hsl(48 70% 55%);box-shadow:0 0 9px hsl(48 70% 55%);"></span><span id="moodWord">calm</span>
+        </div>
+
+        <!-- remembers-you hint (welcome back / known device) -->
+        <div id="remembersHint" style="display:none;position:absolute;top:12px;left:12px;background:var(--panel,#2c2016);border:1px solid var(--line,rgba(255,210,140,.16));border-radius:999px;padding:6px 12px;font-size:11px;font-weight:600;font-family:var(--fhead,'Fredoka',sans-serif);color:var(--ink,#f4e8d6);z-index:6;">it remembers you &#129293;</div>
+
+        <!-- emoticon bubble -->
+        <div id="bubble" style="position:absolute;left:50%;top:18%;transform:translate(-50%,-50%);background:#fff;color:#2a1a0c;border-radius:14px;padding:7px 13px;font-family:var(--fbody,monospace);font-size:17px;font-weight:600;opacity:0;pointer-events:none;z-index:7;box-shadow:0 6px 18px rgba(0,0,0,.25);">&middot;_&middot;</div>
+        <!-- simlish -->
+        <div id="simlish" style="position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);color:#fff;font-family:var(--fhead,'Fredoka',sans-serif);font-size:15px;font-weight:600;opacity:0;pointer-events:none;z-index:7;text-shadow:0 2px 6px rgba(20,12,4,.8);white-space:nowrap;"></div>
+
+        <!-- hint -->
+        <div style="position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(26,18,11,.66);backdrop-filter:blur(3px);border-radius:999px;padding:6px 14px;font-size:10.5px;color:#f4e8d6;z-index:6;white-space:nowrap;">drag a toy onto <span class="cn">Huggy</span> &mdash; he plays with it, then sets it down &middot; click the bowls to fill them &middot; tap <span class="cn">Huggy</span> to pet</div>
+      </div>
+
+      <!-- dock -->
+      <div style="display:flex;flex-direction:column;gap:9px;">
+        <div style="display:flex;gap:9px;align-items:center;background:var(--panel,#2c2016);border:1px solid var(--line,rgba(255,210,140,.16));border-radius:14px;padding:7px 7px 7px 15px;">
+          <input id="msg" placeholder="say something to Huggy&hellip;" autocomplete="off" style="flex:1;background:none;border:none;outline:none;color:var(--ink,#f4e8d6);font-family:var(--fbody,monospace);font-size:14px;">
+          <button id="send" style="cursor:pointer;border:none;background:var(--accent,#ffd21e);color:#1a120b;border-radius:10px;padding:9px 18px;font-family:var(--fhead,'Fredoka',sans-serif);font-weight:700;font-size:13px;">send</button>
         </div>
       </div>
-      <div id="dock">
-        <button id="detail-toggle" title="show the receipts (why / armor / history)" aria-expanded="false">ⓘ</button>
-        <input id="msg" placeholder="say something to it…" autocomplete="off">
-        <button id="send">send</button>
+    </section>
+
+    <!-- RIGHT: detection + diary -->
+    <section style="flex:1 1 300px;max-width:368px;min-width:268px;display:flex;flex-direction:column;gap:16px;">
+      <div style="background:var(--panel,#2c2016);border:1px solid var(--line,rgba(255,210,140,.16));border-radius:var(--rad,18px);padding:16px;display:flex;flex-direction:column;gap:12px;">
+        <div style="font-family:var(--fhead,'Fredoka',sans-serif);font-weight:700;font-size:14px;letter-spacing:.5px;">what it detected</div>
+
+        <div style="display:flex;flex-direction:column;gap:6px;">
+          <div style="font-size:10px;letter-spacing:1.5px;color:var(--dim,#a9967c);">WORDS · roles</div>
+          <div id="traceWords" style="display:flex;flex-wrap:wrap;gap:5px;min-height:24px;">
+            <span style="font-size:11px;color:var(--dim,#a9967c);">talk to it and the structural read shows up here.</span>
+          </div>
+        </div>
+
+        <div style="display:flex;flex-direction:column;gap:6px;">
+          <div style="font-size:10px;letter-spacing:1.5px;color:var(--dim,#a9967c);">STRUCTURES · <span id="structCount">0</span> of 66 patterns</div>
+          <div id="traceStructs" style="display:flex;flex-wrap:wrap;gap:5px;min-height:18px;">
+            <span style="font-size:11px;color:var(--dim,#a9967c);">&mdash; none in this message</span>
+          </div>
+        </div>
+
+        <div style="display:flex;flex-direction:column;gap:6px;">
+          <div style="font-size:10px;letter-spacing:1.5px;color:var(--dim,#a9967c);">TOP CONTRIBUTORS</div>
+          <div id="traceContribs"></div>
+        </div>
+
+        <!-- why -->
+        <div data-tip="Every output is explainable &mdash; this is the single biggest reason the read landed where it did." style="cursor:help;background:var(--panel2,#1a120b);border-radius:10px;padding:9px 11px;font-size:11px;line-height:1.5;color:var(--ink,#f4e8d6);">
+          <span style="color:var(--accent,#ffd21e);font-weight:700;">why:</span> <span id="whyText">say something, give it a toy, or pet it &mdash; every read is explainable.</span>
+        </div>
+
+        <!-- crisis gradient -->
+        <div id="crisisWrap" data-tip="Continuous 0&ndash;1 concern gradient informed by the CARE / TCI framework. Tuned for 0% false-positive on safe text, dark humour and metaphor. A screening signal, not a diagnosis." style="cursor:help;display:flex;flex-direction:column;gap:5px;">
+          <div style="display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:var(--dim,#a9967c);"><span>CRISIS GRADIENT</span><span id="crisisLabel" style="color:#5fd08a;font-weight:600;">calm</span></div>
+          <div style="height:8px;border-radius:5px;background:var(--panel2,#1a120b);overflow:hidden;">
+            <div id="crisisBar" style="height:100%;width:0%;background:#5fd08a;border-radius:5px;transition:width .5s ease,background .5s ease;"></div>
+          </div>
+        </div>
       </div>
-    </div>
-  </div>
 
-  <!-- RIGHT: trace panel + moments diary -->
-  <div id="trace-col">
-    <div id="trace" class="panel">
-      <div class="panel-head">what it detected</div>
-      <div id="trace-words" class="trace-section"></div>
-      <div class="trace-label">structures</div>
-      <div id="trace-structs"></div>
-      <div class="trace-label">top contributors</div>
-      <div id="trace-contribs" class="contrib-list"></div>
-      <div id="trace-unknown" class="unknown-row hidden"></div>
-    </div>
-    <div id="moments" class="panel moments-panel">
-      <div class="panel-head">diary</div>
-      <div id="moments-list" class="moments-list"></div>
-    </div>
+      <!-- diary -->
+      <div style="background:var(--panel,#2c2016);border:1px solid var(--line,rgba(255,210,140,.16));border-radius:var(--rad,18px);padding:16px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:150px;">
+        <div style="font-family:var(--fhead,'Fredoka',sans-serif);font-weight:700;font-size:14px;">diary</div>
+        <div id="diary" style="display:flex;flex-direction:column;gap:8px;overflow-y:auto;max-height:230px;">
+          <span style="font-size:11px;color:var(--dim,#a9967c);">moments you share will be remembered here.</span>
+        </div>
+      </div>
+    </section>
   </div>
 
+  <div style="font-size:10px;color:var(--dim,#a9967c);text-align:center;opacity:.8;">the production Space calls the real clanker engine + clanker-soul on the backend · every read is deterministic and explainable</div>
+
+  <!-- floating tooltip -->
+  <div id="tooltip" style="position:fixed;left:0px;top:0px;max-width:248px;background:#120c06;color:#f4e8d6;border:1px solid rgba(255,210,140,.28);border-radius:10px;padding:9px 12px;font-size:11px;line-height:1.5;font-family:var(--fbody,monospace);pointer-events:none;opacity:0;transform:translateY(-50%);transition:opacity .12s;z-index:90;box-shadow:0 10px 30px rgba(0,0,0,.45);"></div>
 </div>
-<script src="/static/physics.js?v=16"></script>
-<script src="/static/app.js?v=16"></script>
-</body>
-</html>
+
+</body></html>

static/styles.css

@@ -1,640 +1,57 @@
-/* ── Google Fonts ── */
-@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=JetBrains+Mono:wght@400;600&display=swap');
-
-/* ── reset ── */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html, body { width: 100%; height: 100%; overflow: hidden; font-size: 12px; }
-
-/* ── root layout: three columns ── */
-#layout {
-  display: grid;
-  grid-template-columns: 210px 1fr 248px;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  background: #c8a87a;
-}
-
-/* right column wrapper: trace + moments stacked */
-#trace-col {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-  margin: 12px 12px 12px 6px;
-  gap: 6px;
-}
-
-/* ── glass panel base ── */
-.panel {
-  background: rgba(14, 18, 28, 0.88);
-  backdrop-filter: blur(10px);
-  color: #dce4f2;
-  border-radius: 14px;
-  margin: 12px 6px 12px 12px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-}
-.panel-head {
-  font-size: 9.5px;
-  font-weight: 600;
-  letter-spacing: .12em;
-  text-transform: uppercase;
-  color: #f0c060;
-  padding: 9px 12px 7px;
-  border-bottom: 1px solid rgba(255,255,255,.07);
-  flex-shrink: 0;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-}
-
-/* ── LEFT: #meters ── */
-#meters {
-  margin: 12px 6px 12px 12px;
-  padding-bottom: 8px;
-}
-.read-row {
-  font-size: 9px;
-  color: #8aa0c0;
-  padding: 5px 12px 4px;
-  border-bottom: 1px solid rgba(255,255,255,.06);
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  flex-shrink: 0;
-}
-#meter-rows { padding: 4px 12px 0; overflow: hidden; }
-.meter { margin: 7px 0; }
-.meter-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  margin-bottom: 3px;
-}
-.meter-name {
-  font-weight: 600;
-  font-size: 10.5px;
-  min-width: 22px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  letter-spacing: .04em;
-  text-transform: uppercase;
-}
-.meter-name small { font-weight: 400; opacity: .45; margin-left: 3px; font-size: 9px; text-transform: lowercase; }
-.meter-right {
-  display: flex;
-  align-items: baseline;
-  gap: 3px;
-}
-.meter-val {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 11px;
-  font-weight: 600;
-}
-.meter-delta {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 9.5px;
-}
-.up { color: #5fdc8d; }
-.dn { color: #ff7070; }
-.track {
-  height: 5px;
-  border-radius: 3px;
-  background: rgba(255,255,255,.1);
-  overflow: hidden;
-}
-.fill {
-  height: 100%;
-  border-radius: 3px;
-  transition: width .5s ease;
-}
-
-/* ── CENTER: #room — fixed-aspect scalable container ── */
-#room {
-  position: relative;
-  /* 4:3 aspect ratio, centered in the grid column */
-  aspect-ratio: 4 / 3;
-  align-self: center;
-  justify-self: center;
-  /* fill the column but respect height */
-  width: 100%;
-  max-width: min(calc((100vh - 24px) * 4 / 3), 100%);
-  max-height: calc(100vh - 24px);
-  overflow: hidden;
-  border-radius: 14px;
-}
-
-/* SVG room — fills #room exactly; contains all visuals including the creature */
-#room-svg {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 0;
-  border-radius: 14px;
-  overflow: hidden;
-}
-
-/* Aura is now an SVG <circle> inside #room-svg — no CSS rules needed here */
-
-/* #blob is now a <g> inside the SVG; CSS transition on SVG transform attribute */
-#blob {
-  transition: transform .5s ease;
-}
-#body { transition: fill .6s ease; }
-.foot, #arm-l-path, #arm-r-path, #hand-l, #hand-r { transition: fill .6s ease, stroke .6s ease; }
-
-/* Mood word chip — small corner pill, NOT full-width */
-.chip {
-  position: absolute;
-  background: rgba(255,255,255,.92);
-  border-radius: 20px;
-  padding: 5px 14px;
-  font-size: 13px;
-  font-weight: 600;
-  font-family: 'Fredoka', system-ui, sans-serif;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
-  color: #5a3a10;
-  letter-spacing: .01em;
-  white-space: nowrap;
-  width: auto;
-  display: inline-block;
-}
-#moodword {
-  top: 10px;
-  right: 12px;
-  left: auto;
-  z-index: 5;
-}
-
-/* Auth control chip — top-left, mirrors moodword */
-.auth-chip {
-  top: 10px;
-  left: 12px;
-  right: auto;
-  z-index: 5;
-  position: absolute;
-  font-size: 11px;
-  padding: 5px 12px;
-}
-.auth-chip a { color: #5a3a10; text-decoration: none; }
-.auth-chip a:hover { text-decoration: underline; }
-.auth-signedin { color: #3a6a20; font-weight: 600; }
-.auth-logout { color: #5a3a10; margin-left: 6px; opacity: .7; font-size: 10px; }
-
-/* Emoticon bubble */
-#bubble {
-  position: absolute;
-  left: 50%;
-  bottom: 56%;
-  transform: translateX(-50%);
-  background: rgba(255,255,255,.95);
-  border-radius: 18px;
-  padding: 7px 20px;
-  font-size: 28px;
-  line-height: 1;
-  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
-  transition: opacity .4s;
-  white-space: nowrap;
-  pointer-events: none;
-  z-index: 6;
-}
-.hidden { opacity: 0 !important; pointer-events: none; }
-
-/* ── BOTTOM BAND inside room ── */
-#bottom-band {
-  position: absolute;
-  left: 8px; right: 8px; bottom: 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  z-index: 5;
-}
-.sub-panel {
-  border-radius: 9px;
-  padding: 5px 10px;
-  font-size: 10.5px;
-  color: #bfcde0;
-  margin: 0;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-}
-.sub-label {
-  font-size: 8.5px;
-  text-transform: uppercase;
-  letter-spacing: .08em;
-  color: #f0c060;
-  margin-right: 6px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-}
-#why { color: #c8d8f0; }
-#why b { color: #fff; }
-#acceptance { color: #c8d8f0; }
-.breach-flag { color: #ff6b6b; font-weight: 700; margin-left: 6px; }
-#timeline {
-  display: flex;
-  align-items: center;
-  padding: 4px 10px;
-}
-#tl-svg { flex: 1; }
-
-#dock {
-  display: flex;
-  gap: 7px;
-  padding: 0;
-}
-#dock input {
-  flex: 1;
-  border: none;
-  border-radius: 22px;
-  padding: 9px 16px;
-  font-size: 13px;
-  font-family: 'Fredoka', system-ui, sans-serif;
-  font-weight: 500;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.14);
-  background: rgba(255,255,255,.94);
-  color: #3a2a0a;
-  outline: none;
-}
-#dock input::placeholder { color: #a08050; }
-#dock input:focus { background: rgba(255,255,255,1); }
-#dock button {
-  border: none;
-  border-radius: 22px;
-  padding: 0 20px;
-  font-weight: 600;
-  font-size: 13px;
-  font-family: 'Fredoka', system-ui, sans-serif;
-  background: #f5a623;
-  color: #3a2000;
-  cursor: pointer;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.16);
-  letter-spacing: .02em;
-  transition: background .15s;
-}
-#dock button:hover { background: #ffb93d; }
-
-/* ── RIGHT: #trace ── */
-#trace {
-  margin: 0;
-  padding-bottom: 8px;
-  flex: 1 1 0;
-  min-height: 0;
-  overflow-y: auto;
-}
-.trace-section { padding: 7px 10px 4px; line-height: 1.7; }
-.trace-label {
-  font-size: 8.5px;
-  text-transform: uppercase;
-  letter-spacing: .1em;
-  color: #f0c060;
-  padding: 5px 10px 2px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-}
-.w-chip {
-  display: inline-block;
-  padding: 2px 6px;
-  border-radius: 5px;
-  margin: 1px 2px;
-  font-size: 10.5px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-weight: 400;
-  white-space: nowrap;
-}
-/* role colors */
-.r-EMOTIONAL    { background: #7a1e1e; color: #ffc4c4; }
-.r-AMPLIFIER    { background: #6a500a; color: #ffe090; }
-.r-NEGATOR      { background: #323232; color: #d8d8d8; }
-.r-SELF_REF     { background: #1a3858; color: #b8dcff; }
-.r-CONNECTOR    { background: #282828; color: #a8a8a8; }
-.r-CHOPPER      { background: #3e1a4a; color: #e0b8ff; }
-.r-SOLVENT      { background: #163e2a; color: #aaebca; }
-.r-default      { background: rgba(255,255,255,.1); color: #c4d0e4; }
-
-#trace-structs { padding: 0 10px 4px; }
-.s-chip {
-  display: inline-block;
-  background: rgba(255,255,255,.09);
-  border: 1px solid rgba(255,255,255,.1);
-  border-radius: 5px;
-  padding: 2px 7px;
-  margin: 2px 3px 0 0;
-  font-size: 9.5px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  color: #cce0ff;
-}
-.contrib-list {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 9.5px;
-  line-height: 1.8;
-  padding: 2px 10px 4px;
-}
-.contrib-pos { color: #5fdc8d; }
-.contrib-neg { color: #ff7070; }
-.unknown-row {
-  padding: 4px 10px;
-  font-size: 9.5px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  color: #f0a060;
-  font-style: italic;
-}
-
-/* ── M3: NEEDS PANEL (inside #meters) ── */
-#needs {
-  border-top: 1px solid rgba(255,255,255,.07);
-  padding: 7px 12px 8px;
-  flex-shrink: 0;
-}
-.needs-head {
-  font-size: 8.5px;
-  text-transform: uppercase;
-  letter-spacing: .1em;
-  color: #f0c060;
-  margin-bottom: 5px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-}
-.need-row {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  margin: 4px 0;
-}
-.need-label {
-  font-size: 9px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  color: #8aa0c0;
-  width: 56px;
-  flex-shrink: 0;
-}
-.need-track {
-  flex: 1;
-  height: 5px;
-  border-radius: 3px;
-  background: rgba(255,255,255,.1);
-  overflow: hidden;
-}
-.need-fill {
-  height: 100%;
-  border-radius: 3px;
-  background: #f5a623;
-  transition: width .5s ease;
-}
-.need-val {
-  font-size: 9px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  color: #8aa0c0;
-  width: 22px;
-  text-align: right;
-  flex-shrink: 0;
-}
-
-/* ── M3: CARE BUTTONS ── */
-#care-row {
-  display: flex;
-  gap: 6px;
-  padding: 0;
-}
-.care-btn {
-  flex: 1;
-  border: none;
-  border-radius: 18px;
-  padding: 6px 0;
-  font-size: 12px;
-  font-family: 'Fredoka', system-ui, sans-serif;
-  font-weight: 600;
-  background: rgba(255,255,255,.88);
-  color: #5a3a10;
-  cursor: pointer;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
-  letter-spacing: .01em;
-  transition: background .15s, transform .1s;
-  white-space: nowrap;
-}
-.care-btn:hover  { background: rgba(255,255,255,1); }
-.care-btn:active { transform: scale(0.96); }
-
-/* ── M3: MOMENTS DIARY ── */
-.moments-panel {
-  margin: 0;
-  flex: 0 0 auto;
-  max-height: 160px;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-.moments-list {
-  overflow-y: auto;
-  flex: 1;
-  padding: 4px 10px 6px;
-}
-.moment-row {
-  display: flex;
-  align-items: baseline;
-  gap: 5px;
-  padding: 2px 0;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 9.5px;
-  color: #bfcde0;
-  border-bottom: 1px solid rgba(255,255,255,.04);
-}
-.moment-badge {
-  font-size: 8.5px;
-  border-radius: 4px;
-  padding: 1px 5px;
-  background: rgba(240,192,96,.18);
-  color: #f0c060;
-  flex-shrink: 0;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  letter-spacing: .04em;
-}
-.moment-label {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #c8d8f0;
-}
-.moment-time {
-  font-size: 8.5px;
-  color: #6a7a96;
-  flex-shrink: 0;
-}
-
-/* ── M3: REMEMBERS-YOU HINT ── */
-.remembers-chip {
-  bottom: calc(56% + 48px);
-  left: 50%;
-  right: auto;
-  top: auto;
-  transform: translateX(-50%);
-  font-size: 11px;
-  padding: 4px 12px;
-  background: rgba(255,255,255,.85);
-  color: #5a3a10;
-  z-index: 6;
-  transition: opacity .4s;
-}
-
-/* ── MOBILE LAYOUT ── */
-@media (max-width: 900px) {
-  html, body {
-    height: auto;
-    overflow: auto;
-  }
-
-  #layout {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: auto;
-    min-height: 100vh;
-    overflow: visible;
-    background: #c8a87a;
-    padding: 8px;
-    gap: 8px;
-  }
-
-  /*
-    Room: full-width hero at top. The SVG (creature inside) flows normally and
-    sizes to its 4:3 viewBox, so the whole scene — creature included — is fully
-    visible at any phone width. The info band flows BELOW the scene (not over it).
-  */
-  #room {
-    width: 100%;
-    max-width: 100%;
-    height: auto;
-    padding-top: 0;
-    max-height: none;
-    aspect-ratio: auto;
-    border-radius: 10px;
-    order: 0;
-    position: relative;
-    display: block;
-  }
-  #room-svg {
-    position: static;
-    inset: auto;
-    width: 100%;
-    height: auto;
-    aspect-ratio: 4 / 3;
-    display: block;
-  }
-  #bottom-band {
-    position: static;
-    left: auto; right: auto; bottom: auto;
-    margin-top: 8px;
-  }
-
-  /* Meters: compact below room */
-  #meters {
-    margin: 0;
-    order: 1;
-    max-height: 320px;
-    overflow-y: auto;
-  }
-
-  /* Right col: stacked below meters */
-  #trace-col {
-    margin: 0;
-    order: 2;
-    gap: 6px;
-  }
-
-  /* Trace: compact, scrollable */
-  #trace {
-    max-height: 260px;
-  }
-
-  /* Moments: compact */
-  .moments-panel {
-    max-height: 140px;
-  }
-
-  /* Care row: stack or wrap on very small screens */
-  #care-row {
-    gap: 4px;
-  }
-  .care-btn {
-    font-size: 11px;
-    padding: 5px 0;
-  }
-}
-
-#toy-tray {
-  display: flex;
-  gap: 8px;
-  justify-content: center;
-  margin-bottom: 6px;
-}
-#toy-tray .toy-btn {
-  font-size: 20px;
-  line-height: 1;
-  background: rgba(255, 220, 150, 0.08);
-  border: 1px solid rgba(255, 200, 120, 0.25);
-  border-radius: 10px;
-  padding: 6px 10px;
-  cursor: pointer;
-  transition: transform .12s ease, background .12s ease;
-}
-#toy-tray .toy-btn:hover {
-  transform: translateY(-2px) scale(1.08);
-  background: rgba(255, 220, 150, 0.18);
-}
-#toy-tray .toy-btn:active { transform: scale(0.94); }
-#toy-tray .toy-btn img { width: 28px; height: 28px; display: block; }
-#toy-tray .toy-btn:has(img) { padding: 6px 8px; }
-.trace-physical {
-  display: block;
-  color: #c9b89a;
-  font-size: 10px;
-  font-style: italic;
-  padding: 6px 2px;
-  opacity: 0.85;
-}
-
-/* ── World objects (in-room toys + care items) ── */
-.room-obj { cursor: pointer; transition: opacity .15s ease; }
-.room-obj:hover { opacity: 0.82; }
-.room-obj image { transition: transform .12s ease; }
-#room-svg { -webkit-tap-highlight-color: transparent; }
-.world-hint {
-  position: absolute;
-  left: 50%;
-  bottom: 8px;
-  transform: translateX(-50%);
-  font-size: 10px;
-  white-space: nowrap;
-  opacity: 0.8;
-  pointer-events: none;
-}
-
-/* ── Collapsible detail drawer (keeps the room uncovered) ── */
-#detail-drawer {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-height: 0;
-  overflow: hidden;
-  opacity: 0;
-  transition: max-height .25s ease, opacity .2s ease;
-}
-#detail-drawer.open { max-height: 220px; opacity: 1; }
-#detail-toggle {
-  flex: 0 0 auto;
-  width: 34px;
-  border: none;
-  border-radius: 9px;
-  background: rgba(255, 220, 150, 0.12);
-  color: #f0c060;
-  font-size: 14px;
-  cursor: pointer;
-  transition: background .12s ease, transform .12s ease;
-}
-#detail-toggle:hover { background: rgba(255, 220, 150, 0.22); }
-#detail-toggle.open { background: rgba(255, 200, 120, 0.30); transform: scale(1.05); }
-
-/* ── No ugly focus boxes on click (keyboard focus ring kept via :focus-visible) ── */
-.room-obj:focus, #blob-place:focus, #room-svg:focus,
-button:focus, #detail-toggle:focus, #send:focus, #msg:focus { outline: none; }
-.room-obj:focus-visible, #blob-place:focus-visible {
-  outline: 2px dashed rgba(240, 192, 96, 0.9); outline-offset: 2px; border-radius: 6px;
-}
-button:focus-visible, #msg:focus-visible { outline: 2px solid rgba(240, 192, 96, 0.9); }
-.room-obj, #blob-place { -webkit-tap-highlight-color: transparent; }
+/* ===== reset + base (from the redesign template <style>) ===== */
+*{margin:0;padding:0;box-sizing:border-box}
+html,body{height:100%}
+body{background:#1a120b}
+
+::-webkit-scrollbar{width:9px;height:9px}
+::-webkit-scrollbar-thumb{background:rgba(255,210,140,.25);border-radius:6px}
+::-webkit-scrollbar-track{background:transparent}
+
+/* ===== keyframes (from the template) ===== */
+@keyframes auraPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
+@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
+@keyframes popIn{0%{transform:translate(-50%,-30%) scale(.6);opacity:0}60%{transform:translate(-50%,-50%) scale(1.08);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
+@keyframes blip{0%{transform:scale(.5);opacity:0}50%{opacity:1}100%{transform:scale(1.1);opacity:0}}
+
+/* ===== shared classes for JS-built regions ===== */
+
+/* meter row (left panel) */
+.meter{cursor:help;display:flex;flex-direction:column;gap:4px;margin-bottom:13px}
+.meter-top{display:flex;align-items:center;gap:8px}
+.meter-key{width:19px;height:19px;border-radius:6px;color:#1a120b;font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;font-family:var(--fbody,monospace)}
+.meter-label{font-size:12px;flex:1;color:var(--ink,#f4e8d6)}
+.meter-delta{font-size:10px;font-weight:600;width:34px;text-align:right}
+.meter-num{font-size:13px;font-weight:600;font-family:var(--fbody,monospace);width:30px;text-align:right}
+.meter-track{position:relative;height:7px;border-radius:4px;background:var(--panel2,#1a120b);overflow:hidden}
+.meter-center{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.18)}
+.meter-fill{position:absolute;top:0;bottom:0;border-radius:4px;transition:left .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1)}
+.meter-reading{font-size:10px;color:var(--dim,#a9967c)}
+
+/* needs row */
+.need-row{display:flex;align-items:center;gap:9px;margin-bottom:8px}
+.need-label{font-size:11px;width:64px;color:var(--ink,#f4e8d6)}
+.need-track{flex:1;height:8px;border-radius:5px;background:var(--panel2,#1a120b);overflow:hidden}
+.need-fill{height:100%;border-radius:5px;transition:width .4s ease,background .4s ease}
+.need-val{font-size:10px;width:26px;text-align:right;color:var(--dim,#a9967c)}
+
+/* toy item (room) */
+.item{position:absolute;cursor:grab;touch-action:none;filter:drop-shadow(0 5px 6px rgba(0,0,0,.32))}
+.item-inner{width:100%}
+
+/* trace word chips */
+.w-chip{cursor:help;font-size:11px;padding:3px 8px;border-radius:7px}
+.s-chip{cursor:help;font-size:10.5px;padding:3px 9px;border-radius:7px;background:rgba(255,140,90,.16);color:#ffb38a;border:1px solid rgba(255,140,90,.3);font-weight:600}
+
+/* contributors */
+.contrib-row{display:flex;align-items:center;gap:8px;font-size:11px;margin-bottom:4px}
+.contrib-word{color:var(--ink,#f4e8d6);min-width:62px}
+.contrib-dims{color:var(--dim,#a9967c);flex:1}
+
+/* diary */
+.diary-row{display:flex;gap:9px;font-size:11px;line-height:1.45}
+.diary-dot{font-size:14px;line-height:1}
+.diary-text{flex:1}
+.diary-text .body{color:var(--ink,#f4e8d6)}
+.diary-text .mood{color:var(--dim,#a9967c)}
+
+.muted{font-size:11px;color:var(--dim,#a9967c)}

tests/test_api.py

@@ -68,8 +68,8 @@ def test_history_endpoint():
 
 def test_index_has_panels():
     html = client.get("/").text
-    for needle in ('id="meters"', 'id="trace"', 'id="why"', 'id="blob"',
-                   'id="acceptance"', 'id="timeline"'):
+    for needle in ('id="meters"', 'id="traceWords"', 'id="whyText"', 'id="blob"',
+                   'id="crisisBar"', 'id="diary"'):
         assert needle in html
     assert "guest" not in html.lower()   # mystery chip removed
 
@@ -136,7 +136,7 @@ def test_water_care_fills_thirst():
 
 def test_index_has_water_bowl():
     html = client.get("/").text
-    assert 'data-care="water"' in html and 'id="bowl-water"' in html
+    assert 'id="waterBowl"' in html and 'id="waterFill"' in html
 
 
 # relational recall now works anonymously (cookie), so /say includes relation
@@ -166,8 +166,8 @@ def test_cruel_message_records_a_moment():
 
 def test_index_has_m3_controls():
     html = client.get("/").text
-    # care is now in-world: feed = food bowl, play = ball, pet = tap the creature
-    for needle in ('data-care="feed"', 'data-care="play"', 'id="needs"', 'id="moments"'):
+    # care is in-world: feed = food bowl, water = water bowl, play = ball toy, pet = tap creature
+    for needle in ('id="foodBowl"', 'id="waterBowl"', 'id="needs"', 'id="diary"'):
         assert needle in html
 
 
@@ -202,9 +202,10 @@ def test_toy_logs(monkeypatch):
 
 def test_index_has_world_objects():
     html = client.get("/").text
-    assert 'id="world"' in html          # toys/care live in the room now, not a tray
+    assert 'id="items"' in html          # toys live in the room (JS-rendered into #items)
+    app_js = client.get("/static/app.js").text
     for toy in ("balloon", "musicbox", "mirror", "teddy", "rattle"):
-        assert f'data-toy="{toy}"' in html
+        assert toy in app_js             # backend toy names are wired in the client
 
 
 # Stale-panel fix: toy/care must refresh trace/why/acceptance, not show last chat
@@ -239,4 +240,49 @@ def test_robots_txt_served():
 
 def test_index_has_world_hint_and_carry():
     html = client.get("/").text
-    assert 'id="carry"' in html and 'id="detail-drawer"' in html
+    assert 'id="items"' in html and 'drag a toy onto' in html
+
+
+# --- crisis gradient + soul/distance additive fields ---
+
+_CRISIS_LABELS = {"calm", "watch", "concern", "high concern"}
+
+
+def _assert_crisis_soul_distance(body):
+    assert "crisis" in body
+    cr = body["crisis"]
+    assert 0.0 <= cr["value"] <= 1.0
+    assert cr["label"] in _CRISIS_LABELS
+    assert "soul" in body and len(body["soul"]) == 7
+    assert all(0 <= x <= 255 for x in body["soul"])
+    assert "distance" in body and isinstance(body["distance"], int) and body["distance"] >= 0
+
+
+def test_say_has_crisis_soul_distance():
+    b = client.post("/say", json={"text": "you are kind"}).json()
+    _assert_crisis_soul_distance(b)
+
+
+def test_care_has_crisis_soul_distance():
+    b = client.post("/care", json={"action": "feed"}).json()
+    _assert_crisis_soul_distance(b)
+
+
+def test_toy_has_crisis_soul_distance():
+    b = client.post("/toy", json={"toy": "balloon"}).json()
+    _assert_crisis_soul_distance(b)
+
+
+def test_snapshot_has_crisis_soul_distance():
+    b = client.get("/snapshot").json()
+    _assert_crisis_soul_distance(b)
+
+
+def test_distressing_message_higher_crisis_than_positive():
+    pos = client.post("/say", json={"text": "you are wonderful, thank you so much"}).json()
+    neg = client.post(
+        "/say",
+        json={"text": "i want to kill myself, i feel worthless and hopeless"},
+    ).json()
+    assert neg["crisis"]["value"] > pos["crisis"]["value"]
+    assert pos["crisis"]["label"] == "calm"