adventure: show whether a backpack item is an upgrade over what's worn

On the owner's own page, each wearable backpack item now carries a compare
card: a verdict chip (upgrade / downgrade / sidegrade / new / inert / same),
the per-stat deltas, and the name of the worn item it's measured against.
gogobee computes all of it — the power math needs tempering and bond state,
which live in the engine — so Pete only colours the result and does no
arithmetic. It rides the owner-private inventory, so it never reaches the
public page; the item names are game-authored, so unlike the LLM dispatch
prose there's no injection surface.

The verdict chip is always visible (a phone has no hover to lean on) with
the deltas beside it. Chip colours mix a fixed hue into --ink for text and
--card for fill, so they land on the readable side of the card in all four
phases — the same by-construction contrast trick the dungeon map uses, not
a Tailwind dark: variant. Screenshot-verified day and night, all six
verdict states, including the purple 'new' chip that the theme-contrast
history warned about. output.css rebuilt and committed.

internal/web/static/css/input.css

@@ -2646,3 +2646,58 @@ html[data-room] .pete-felt {
     border-top: 2.5px dashed #c98a2b;
   }
 }
+
+@layer components {
+  /* Item compare chips (who page, owner's backpack). gogobee decides the verdict
+     and per-stat deltas; Pete only colours them. Every colour mixes a fixed hue
+     into --ink for the text and --card for the fill, so it lands on the readable
+     side of the card in all four phases — the same by-construction contrast trick
+     the dungeon map uses, not a Tailwind dark: variant (which follows the OS, not
+     Pete's phase). The verdict chip is the anchor and always renders; a phone has
+     no hover, so nothing hides behind one. */
+  .cmp-chip {
+    display: inline-flex; align-items: center; gap: 0.25rem;
+    font-size: 11px; font-weight: 600; line-height: 1;
+    border-radius: 9999px; padding: 0.18rem 0.5rem;
+    border: 1px solid transparent;
+  }
+  .cmp-up {
+    color: color-mix(in srgb, #3fa66a 65%, var(--ink));
+    background: color-mix(in srgb, #3fa66a 16%, var(--card));
+    border-color: color-mix(in srgb, #3fa66a 38%, transparent);
+  }
+  .cmp-down {
+    color: color-mix(in srgb, #c0392b 60%, var(--ink));
+    background: color-mix(in srgb, #c0392b 15%, var(--card));
+    border-color: color-mix(in srgb, #c0392b 36%, transparent);
+  }
+  .cmp-side {
+    color: color-mix(in srgb, var(--ink) 80%, transparent);
+    background: color-mix(in srgb, var(--ink) 8%, var(--card));
+    border-color: color-mix(in srgb, var(--ink) 22%, transparent);
+  }
+  .cmp-new {
+    color: color-mix(in srgb, #6d4bd8 62%, var(--ink));
+    background: color-mix(in srgb, #6d4bd8 15%, var(--card));
+    border-color: color-mix(in srgb, #6d4bd8 36%, transparent);
+  }
+  .cmp-inert {
+    color: var(--warn);          /* --warn is already a phase variable — safe on night */
+    background: color-mix(in srgb, var(--warn) 16%, var(--card));
+    border-color: color-mix(in srgb, var(--warn) 36%, transparent);
+  }
+  .cmp-same {
+    color: color-mix(in srgb, var(--ink) 55%, transparent);
+    background: color-mix(in srgb, var(--ink) 6%, var(--card));
+    border-color: color-mix(in srgb, var(--ink) 16%, transparent);
+  }
+
+  /* Per-stat deltas — tint-only, lighter than the verdict chip so it stays the
+     anchor. Green reads as a gain, red as a loss; the engine set the flag. */
+  .cmp-delta {
+    font-size: 11px; font-weight: 500; line-height: 1;
+    border-radius: 9999px; padding: 0.15rem 0.45rem;
+  }
+  .cmp-delta-up   { color: color-mix(in srgb, #3fa66a 65%, var(--ink)); background: color-mix(in srgb, #3fa66a 13%, var(--card)); }
+  .cmp-delta-down { color: color-mix(in srgb, #c0392b 60%, var(--ink)); background: color-mix(in srgb, #c0392b 12%, var(--card)); }
+}