diff --git a/game.py b/game.py
index ef6dc26..b2ea052 100644
--- a/game.py
+++ b/game.py
@@ -4388,15 +4388,16 @@ def happiness(world: dict, now: float) -> dict:
     supply = min(1.0, meals / want_meals)
     variety = min(1.0, kinds / FOOD_KINDS)
     needs = {"food": {"score": 0.0 if city["starving"] else 0.5 * supply + 0.5 * variety, "rows": [
-        {"item": "bread", "label": "Food (any)", "have": int(meals), "want": want_meals, "any": "food"},
-        {"item": "stew", "label": "Kinds of food", "have": kinds, "want": FOOD_KINDS, "kinds": True},
+        {"item": "bread", "label": "Food", "have": int(meals), "want": want_meals, "any": "food"},
+        {"item": "stew", "label": "Food variety", "have": kinds, "want": FOOD_KINDS, "kinds": True,
+         "day": math.ceil(day), "foods": {item: int(_meals(stock, item)) for item in FOOD_ORDER}},
     ]}}
     season_now = season(world, now)["index"]
     burn = 24 * sum(hearth_burn(world, now))
     fuel = sum(stock.get(item, 0) for item in FUEL)
     want_fuel = math.ceil(FUEL_DAYS * burn)
     needs["warmth"] = {"score": 0.0 if city.get("unheated") else min(1.0, fuel / want_fuel) if want_fuel else 1.0,
-                       "rows": [{"item": "kindling", "label": "Firewood (any)", "have": fuel, "want": want_fuel,
+                       "rows": [{"item": "kindling", "label": "Firewood", "have": fuel, "want": want_fuel,
                                  "any": "fuel"}]}
     garment, later = SEASON_CLOTHES[season_now], SEASON_CLOTHES[(season_now + 1) % 4]
     rows = [{"item": garment, "label": ITEMS[garment]["plural"], "have": stock.get(garment, 0), "want": math.ceil(pop)}]
diff --git a/static/app.js b/static/app.js
index 9b9b3b3..68687a1 100644
--- a/static/app.js
+++ b/static/app.js
@@ -2362,7 +2362,13 @@ function reqRow(r) {
   const link = goto(r.item, Boolean(r.any || r.kinds)), tip = link ? ` title="${esc(gotoTip(r.item).trim())}"` : "";
   return `<div class="req ${r.next ? "dim" : ""}"><span${link}${tip}>${item(r.item).icon}</span><span><span${link}${tip}>${esc(r.label)}</span> <span class="muted small">${fmt(r.have)} / ${fmt(r.want)}</span></span>
     ${mine ? `<button class="btn sm gold" data-donate="${r.item}" data-qty="all">Give ${fmt(mine)}</button>` : "<span></span>"}
-    <div class="bar"><span style="width:${r.want ? Math.min(100, r.have / r.want * 100) : 100}%"></span></div></div>`;
+    ${r.foods ? foodKinds(r) : `<div class="bar"><span style="width:${r.want ? Math.min(100, r.have / r.want * 100) : 100}%"></span></div>`}</div>`;
+}
+
+// Every kind of food: lit when the stockpile holds a day of it, faded red when it doesn't.
+function foodKinds(r) {
+  return `<div class="food-kinds">${Object.entries(r.foods).map(([id, meals]) =>
+    `<span class="${meals >= r.day ? "" : "missing"}" title="${esc(`${item(id).name} · ${fmt(meals)} / ${fmt(r.day)} meals`)}">${item(id).icon}</span>`).join("")}</div>`;
 }
 
 function raidPrep(ev) {
diff --git a/static/styles.css b/static/styles.css
index 4af871d..af31aa9 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -886,4 +886,9 @@ button.swatch { width: 36px; height: 36px; }
 .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; }
 .req.dim { opacity: .6; }
+.food-kinds { grid-column: 2 / 4; display: flex; flex-wrap: wrap; gap: 3px; font-size: 16px; }
+.food-kinds > span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
+  border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2); }
+.food-kinds > span.missing { background: none; border-style: dashed; border-color: rgba(226, 100, 92, .35); }
+.food-kinds .missing .gi { color: var(--bad) !important; opacity: .3; }
 .mood-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }