From af1ed5eacf5f6a9ff3b5e76ca83b98d63beaa509 Mon Sep 17 00:00:00 2001
From: rope <fredrik@nordhammer.it>
Date: Wed, 28 Oct 2026 15:39:43 +0000
Subject: [PATCH] Mood bar: faint track, soft edge

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 static/app.js     | 2 +-
 static/styles.css | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/static/app.js b/static/app.js
index fe09c47..fafe8b8 100644
--- a/static/app.js
+++ b/static/app.js
@@ -2072,7 +2072,7 @@ function moodPanel() {
   const effects = [`🌱 Growth ${pct(e.growth)}`, `🛡️ Guards ${pct(e.militia)}`, `🔨 Labour ${pct(e.work)}`, `${COIN} Taxes ${pct(e.work)}`,
     ...(e.leave ? [`<span class="bad">🚶 ${pct(e.leave)} leave a day</span>`] : [])];
   return `<div class="panel mood"><h2>${h.icon} Townsfolk · ${h.name} · ${moodTrend(h)}</h2>
-    <div class="mood-bar" title="${esc(`Mood ${pct(h.score)}`)}"><span style="width:${100 - h.score * 100}%"></span></div>
+    <div class="mood-bar" title="${esc(`Mood ${pct(h.score)}`)}" style="--p:${h.score * 100}%"><span></span></div>
     <div class="mood-effects small">${effects.join(" · ")}</div>
     <div class="needs">${needs}</div>
     ${mods || locked ? `<div class="mood-tags">${mods}${locked}</div>` : ""}</div>`;
diff --git a/static/styles.css b/static/styles.css
index 1dbae87..2a912d2 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -879,10 +879,13 @@ button.swatch { width: 36px; height: 36px; }
 .qp-then .x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 2px; }
 
 /* Townsfolk mood */
-/* The whole bar is the red → yellow → green scale; the part above the mood is covered by the track. */
-.mood-bar { position: relative; height: 12px; border-radius: 99px; margin: 4px 0 8px; overflow: hidden;
+/* The whole bar is the red → yellow → green scale: faint everywhere, full up to the mood (--p), with a soft edge. */
+.mood-bar { position: relative; height: 12px; border-radius: 99px; margin: 4px 0 8px; overflow: hidden; }
+.mood-bar::before, .mood-bar > span { content: ""; position: absolute; inset: 0;
   background: linear-gradient(90deg, var(--bad), #e3c34a 50%, var(--good)); }
-.mood-bar > span { position: absolute; top: 0; right: 0; bottom: 0; background: var(--bg); }
+.mood-bar::before { opacity: .18; }
+.mood-bar > span { -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 4%), transparent calc(var(--p) + 4%));
+  mask-image: linear-gradient(90deg, #000 calc(var(--p) - 4%), transparent calc(var(--p) + 4%)); }
 .mood-effects { color: var(--muted); margin-bottom: 12px; }
 .needs { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
 .need-head { display: flex; justify-content: space-between; margin-bottom: 8px; }