v0.8.0.5 — the Home Office deck, and lighting the pile a move touched

"Many operations still occurred too fast for me to see", at 10x — where an action
already holds the screen for seven seconds. So it was never duration: a bot drawing
a card changes one number in a panel nobody is watching, and the board sits
unchanged. Raising the dwell was the wrong lever and it had been pulled three
times.

f.deck has carried the face-down count since the Frame existed and nothing drew it
— the display gap test/display-gaps.test.ts sweeps for, surviving in the one panel
that draws every other pile. It is a tile now, first in the row, face down, because
that is the order a card travels and not knowing what is on top is the point.

And the piles a move touched are lit for as long as that move is on screen. Derived
from the frames either side of a step rather than sent, so nothing joins the
protocol and the 0.8.1 board gets it free. What lights follows what is public, and
was measured across four seeds rather than reasoned about: a Home Office draw
lights the deck and never names the card; a Department draw lights that pile, and
the deck too when it refills; a discard lights the Department it lands on; a played
card lights the Salvage Yard. Switching and new trains light nothing here — they
move the board, which the district panel already follows.

A state rather than a flash: the timetable's fixed 1.5s animation would be over
long before a seven-second pause. Not for your own moves.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01X6cF1iYvJ1kNmzYBzu4QX6

src/web/panels.ts

@@ -52,25 +52,61 @@ export function handHtml(f: Frame, canPlay: (boolean | null)[] = []): string {
  * Only the top card may ever be drawn, so the depth is a count and not a hint: everything below it
  * is out of reach, and choosing where to discard is choosing what to put there.
  */
-export function pilesHtml(f: Frame): string {
-  const pile = (label: string, top: string, depth: number, why: string, extra = '', slot = -1): string => {
+export function pilesHtml(f: Frame, lit: readonly string[] = []): string {
+  const pile = (
+    key: string,
+    label: string,
+    top: string,
+    depth: number,
+    why: string,
+    extra = '',
+    slot = -1,
+    faceDown = false,
+  ): string => {
     const tip = [why, extra].filter(Boolean).join(' · ');
     // A Department is a DROP TARGET for a discard. The attribute is always emitted; only the play
     // page binds a click to it, and only while a card is waiting to be discarded — so the replay
     // viewer draws exactly the same markup and nothing there is clickable.
     const target = slot >= 0 ? ` data-dept="${slot}"` : '';
+    // `lit` marks the pile the move being watched just touched — see `changedPiles`.
+    const cls = `handcard${faceDown ? ' facedown' : ''}${lit.includes(key) ? ' pilelit' : ''}`;
     return (
-      `<div class="handcard"${target}${tip ? ` data-tip="${esc(tip)}"` : ''} tabindex="0">` +
+      `<div class="${cls}"${target}${tip ? ` data-tip="${esc(tip)}"` : ''} tabindex="0">` +
       `<div class="pilehd"><span>${esc(label)}</span><span class="depth">${depth}</span></div>` +
       `<b>${esc(top)}</b></div>`
     );
   };
   return (
+    /**
+     * THE HOME OFFICE DECK, which the screen had never drawn.
+     *
+     * `f.deck` has carried the face-down count since the Frame existed and nothing read it — the
+     * exact shape of display gap `test/display-gaps.test.ts` was written to sweep for, surviving in
+     * the panel that draws every OTHER pile. Asked for by Jesse 2026-09-10 for a second reason: a
+     * player drawing from it is the commonest move nobody can see, so it needs somewhere to flash.
+     *
+     * FIRST, because that is the order a card travels: out of here, into a hand, then onto a
+     * Department or the Salvage Yard. Face down, so the card slot says so rather than naming a card
+     * — the whole point of this pile is that nobody knows what is on top.
+     */
+    pile(
+      'home',
+      'Home Office',
+      'face down',
+      f.deck,
+      'The draw deck. Face down — nobody sees what is on top, and a card drawn from here is private ' +
+        'to whoever drew it. When it runs out, the Salvage Yard and the Departments are swept back ' +
+        'into it.',
+      '',
+      -1,
+      true,
+    ) +
     f.departments
       .map((d, i) => {
         const depth = f.departmentDepth[i] ?? 0;
         const under = depth - 1;
         return pile(
+          `dept${i}`,
           `Dept ${i + 1}`,
           d,
           depth,
@@ -81,6 +117,7 @@ export function pilesHtml(f: Frame): string {
       })
       .join('') +
     pile(
+      'salvage',
       'Salvage',
       f.salvage.top,
       f.salvage.depth,
@@ -676,6 +713,20 @@ h3{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#8b94a3;ma
 .handcard:focus{outline:2px solid #4d6fa8;outline-offset:1px}
 .cardrow.ref .handcard{background:#1c2129;border-style:dashed;border-color:#39424e;color:#b6bec9}
 .handcard.unplayable{color:#7d8794;border-color:#39424e}
+/* THE HOME OFFICE DECK. Face down, so its card slot names no card — it says so instead, in the
+   dimmed voice the rest of the panel uses for "nothing to read here". */
+.handcard.facedown > b{color:#6f7885;font-style:italic;font-weight:400}
+/* THE PILE A WATCHED MOVE JUST TOUCHED (v0.8.1).
+   A STATE, NOT A FLASH, and that is the whole point. The .tt-slot.fresh rule above animates for a fixed
+   1.5s, which is right for a die roll nobody is waiting on — but a step can hold the screen for
+   seven seconds at 10x, so a fixed animation would be over long before the pause it belongs to and
+   the player would be back to staring at an unchanged board. The flash-in marks the moment; the lit
+   border and background stay for exactly as long as the step is up, because the class is on the
+   element only while that step is the one being shown. */
+.handcard.pilelit{border-color:#8fd6a0;background:#1d3327;animation:pileflash .45s ease-out 1}
+@keyframes pileflash{0%{background:#2f6b47;border-color:#c7f0d4;transform:scale(1.1)}
+  100%{background:#1d3327;border-color:#8fd6a0;transform:scale(1)}}
+@media(prefers-reduced-motion:reduce){.handcard.pilelit{animation:none}}
 .handcard.unplayable::after{content:"";position:absolute;inset:0;border-radius:5px;pointer-events:none;
   background:repeating-linear-gradient(45deg,transparent 0 5px,rgba(150,160,175,.20) 5px 6px)}
 /* THE CARD JUST DRAWN. It sits first in the row, and this says which one that is — three cards that