adventure: draw the dungeon as a fog-of-war map, not a room tally

internal/web/static/css/input.css

@@ -2588,3 +2588,61 @@ html[data-room] .pete-felt {
   .pete-poker-you .pete-seat-cards { --card-h: 6rem; --card-w: 4.3rem; min-height: 6rem; }
   .pete-poker-pot-total { font-size: 1.25rem; }
 }
+
+@layer components {
+  /* Dungeon map (who page). The graph arrives already cut to the fog-of-war
+     frontier; who_map.go lays it out and who.html draws it as inline SVG. Node
+     colours ride the phase through --ink/--card like every card does, with a
+     per-kind tint carried in --map-fill so the SVG discs and the legend dots
+     read from one source. The adventure purple marks the room you're in. */
+  .map-svg { display: block; overflow: visible; }
+
+  .map-edge {
+    stroke: color-mix(in srgb, var(--ink) 26%, transparent);
+    stroke-width: 2.5;
+    stroke-linecap: round;
+  }
+  .map-edge-locked {
+    stroke: #c98a2b;              /* a barred door reads amber, not ink */
+    stroke-dasharray: 3 5;
+  }
+
+  .map-disc {
+    fill: var(--map-fill, color-mix(in srgb, var(--ink) 9%, var(--card)));
+    stroke: color-mix(in srgb, var(--map-stroke, var(--ink)) 55%, transparent);
+    stroke-width: 2;
+  }
+  .map-glyph {
+    fill: color-mix(in srgb, var(--map-stroke, var(--ink)) 85%, var(--ink));
+    font-size: 13px;
+    font-weight: 700;
+    pointer-events: none;
+  }
+  .map-node-current .map-disc { stroke: #6d4bd8; stroke-width: 2.5; }
+  .map-ring { fill: none; stroke: #6d4bd8; stroke-width: 2; opacity: 0.5; }
+
+  /* Per-kind tint. Set on the node group (and the legend dot); both the disc
+     fill and the glyph colour derive from it. */
+  .map-node-entry   { --map-fill: color-mix(in srgb, #3fa66a 22%, var(--card)); --map-stroke: #2f8a54; }
+  .map-node-boss    { --map-fill: color-mix(in srgb, #c0392b 22%, var(--card)); --map-stroke: #a52f22; }
+  .map-node-trap    { --map-fill: color-mix(in srgb, #d98324 22%, var(--card)); --map-stroke: #b56a17; }
+  .map-node-elite   { --map-fill: color-mix(in srgb, #6d4bd8 20%, var(--card)); --map-stroke: #5836b8; }
+  .map-node-secret  { --map-fill: color-mix(in srgb, #b08d2e 22%, var(--card)); --map-stroke: #8f7018; }
+  .map-node-harvest { --map-fill: color-mix(in srgb, #3f8f6a 18%, var(--card)); --map-stroke: #2f7355; }
+  .map-node-rest    { --map-fill: color-mix(in srgb, #3f83a6 18%, var(--card)); --map-stroke: #2f6a88; }
+  .map-node-plain   { --map-fill: color-mix(in srgb, var(--ink) 9%, var(--card)); --map-stroke: var(--ink); }
+  .map-node-unknown { --map-fill: color-mix(in srgb, var(--ink) 5%, var(--card)); --map-stroke: color-mix(in srgb, var(--ink) 40%, transparent); }
+  .map-node-unknown .map-disc { stroke-dasharray: 3 4; }
+
+  /* Legend swatches. Same --map-fill source as the nodes. */
+  .map-dot {
+    width: 11px; height: 11px; border-radius: 9999px;
+    background: var(--map-fill, color-mix(in srgb, var(--ink) 9%, var(--card)));
+    border: 1.5px solid color-mix(in srgb, var(--map-stroke, var(--ink)) 55%, transparent);
+  }
+  .map-node-unknown.map-dot { border-style: dashed; }
+  .map-door-legend {
+    width: 16px; height: 0;
+    border-top: 2.5px dashed #c98a2b;
+  }
+}