From ac73fa996dbccfe82867e4f68de1da98e852b7c8 Mon Sep 17 00:00:00 2001
From: rope <fredrik@nordhammer.it>
Date: Tue, 20 Oct 2026 15:50:54 +0100
Subject: [PATCH] Combat stats under the doll at its width; empty food slot
 shows red instead of a warning

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

diff --git a/static/app.js b/static/app.js
index 4ddd570..a270d63 100644
--- a/static/app.js
+++ b/static/app.js
@@ -561,7 +561,6 @@ function combatFrame() {
   const you = `<div class="fighter">
       <div class="fighter-name"><b>${esc(me.name)}</b><span class="small muted">${HEART} <span data-f="you-hp">${fmt(me.hp)} / ${me.max_hp}</span></span></div>
       ${bars("you")}
-      ${me.edible.length ? "" : `<div class="small warn">No food in your bank.</div>`}
     </div>`;
   let foe = `<div class="foe-idle muted">Not fighting.</div>`;
   if (f) {
@@ -1263,9 +1262,9 @@ function paperDoll(p, mine) {
       ${it ? gearChips(it, p) : ""}${mine ? swapGrid(p, pick, two) : ""}`;
   }
   return `<div class="doll-wrap">
-    <div class="doll"><span class="doll-figure">${glyph("swordman", "#e6e8ee")}</span>
-      ${DOLL.map(([s, name, outline]) => dollSlot(p, s, name, outline, s === pick)).join("")}</div>
-    <div class="doll-side"><div class="doll-slot-info">${slot}</div>${combatStats(p)}</div>
+    <div class="doll-col"><div class="doll"><span class="doll-figure">${glyph("swordman", "#e6e8ee")}</span>
+      ${DOLL.map(([s, name, outline]) => dollSlot(p, s, name, outline, s === pick)).join("")}</div>${combatStats(p)}</div>
+    <div class="doll-side"><div class="doll-slot-info">${slot}</div></div>
   </div>`;
 }
 
@@ -1285,7 +1284,7 @@ function combatStats(p) {
     cell(glyph("dodging", "#8fd0e0"), fmt(f.evasion), "Evasion"),
     cell(glyph("shield-reflect", "#e0b04a"), pct(f.block), "Block chance (with a shield)"),
   ];
-  return `<div class="combat-stats"><div class="muted small">Combat stats</div><div class="stat-grid">${cells.join("")}</div></div>`;
+  return `<div class="combat-stats stat-grid">${cells.join("")}</div>`;
 }
 
 // What else in the bank fits the picked slot, best first: click one to put it on. For weapons the
@@ -1316,9 +1315,10 @@ function slot2(slot, p) {
 function foodSlot(p, picked) {
   if (!("food" in p)) return `<span class="doll-slot future" title="Food"></span>`;
   const id = p.food && p.bank[p.food] ? p.food : null;
-  const tip = id ? `Food: ${item(id).name}, heals ${item(id).heal}` : "Food: cheapest first";
-  return `<button class="doll-slot ${picked ? "on" : ""} ${p.edible.length ? "" : "empty"}" data-doll="food" title="${esc(tip)}">
-    ${id ? item(id).icon : glyph("two-coins", "#e0b04a")}${id ? `<span class="swap-qty">${fmt(p.bank[id])}</span>` : ""}</button>`;
+  const none = !p.edible.length;
+  const tip = none ? "No food in your bank" : id ? `Food: ${item(id).name}, heals ${item(id).heal}` : "Food: cheapest first";
+  return `<button class="doll-slot ${picked ? "on" : ""} ${none ? "starving" : ""}" data-doll="food" title="${esc(tip)}">
+    ${none ? glyph("hot-meal", "#e2645c") : id ? item(id).icon : glyph("two-coins", "#e0b04a")}${id ? `<span class="swap-qty">${fmt(p.bank[id])}</span>` : ""}</button>`;
 }
 
 function foodPanel(p) {
diff --git a/static/styles.css b/static/styles.css
index 26f351e..234b77b 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -543,11 +543,15 @@ button.sheet-skill:hover { background: var(--panel-2); }
 .doll-wrap { align-items: stretch; }
 .doll-side { display: flex; flex-direction: column; gap: 12px; }
 .doll-slot-info { display: grid; gap: 10px; }
-.combat-stats { margin-top: auto; display: grid; gap: 4px; }
+.doll-col { display: grid; gap: 10px; align-content: start; }
+.combat-stats { margin: 0; padding: 6px 8px; gap: 4px 6px; }
+.combat-stats .gstat { gap: 4px; font-size: 12px; }
+.combat-stats .gi { width: 14px; height: 14px; }
 .slot-type { position: absolute; bottom: -4px; left: -4px; }
 .slot-type .dmg { width: 16px; height: 16px; background: var(--panel); border-radius: 4px; }
 .doll-slot .slot-type .gi { width: 11px; height: 11px; }
 .doll { align-self: start; }
-.doll-slot-info { min-height: 200px; align-content: start; }
-.swap-grid { flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 6px 0; scrollbar-width: thin; }
 .doll-slot.swap { flex: none; }
+.doll-slot.starving { border-color: rgba(226, 100, 92, .7); background: rgba(226, 100, 92, .12); }
+.doll-slot.starving .gi { opacity: .9; }
+@media (max-width: 520px) { .doll-col { justify-items: center; } }