/* The workshop scene.
   Everything is rectangles with crisp edges, so it reads as pixel art without
   a single image request. The only motion is a figure walking the line, a lamp
   lighting where it stands, and a furnace that never stops glowing. */

.shop {
  border: 1px solid var(--line); border-radius: 12px;
  background: #050806; overflow: hidden;
}
.shop-svg { display: block; width: 100%; height: auto; }

.shop-label {
  font: 600 9px/1 var(--mono); letter-spacing: .18em; text-anchor: middle;
}
.shop-sign { font: 600 10px/1 var(--mono); letter-spacing: .2em; }

/* ── stations ── */
.shop-lamp { transition: fill .3s ease, stroke .3s ease; }
.shop-station.is-lit .shop-lamp { fill: #fbbf24; stroke: #fbbf24; }
/* A cone of light on the floor under the lit station. It is the cheapest way
   to say where the work is happening without moving anything. */
.shop-lamp-cone { transition: opacity .35s ease; }
.shop-station.is-lit .shop-lamp-cone { opacity: .06; }
.shop-station.is-lit .shop-label { fill: #a8a49c; }

/* The furnace is always warm. Nothing else on the floor pulses on its own,
   so the eye keeps returning to the one door that only takes. */
.shop-glow-furnace { animation: emberGlow 3.4s ease-in-out infinite; }
@keyframes emberGlow { 0%, 100% { opacity: .05; } 50% { opacity: .16; } }
.shop-glow-nursery { animation: nurseryGlow 5s ease-in-out infinite; }
@keyframes nurseryGlow { 0%, 100% { opacity: .04; } 50% { opacity: .11; } }

/* ── figures ── */
.shop-fig { transition: transform 1.1s steps(9, end); }
.shop-clock {
  font: 600 13px/1 var(--mono); fill: #e8e6e1;
  font-variant-numeric: tabular-nums;
}
.shop-tag { font: 10px/1 var(--mono); fill: #6e6a63; letter-spacing: .06em; }

/* Legs alternate only while moving, so a standing figure is genuinely still
   and a walking one is unmistakable. */
.shop-fig.is-walking .shop-leg-l { animation: stepL .34s steps(2, end) infinite; }
.shop-fig.is-walking .shop-leg-r { animation: stepR .34s steps(2, end) infinite; }
@keyframes stepL { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(-5px); } }
@keyframes stepR { 0%, 49% { transform: translateY(-5px); } 50%, 100% { transform: translateY(0); } }

/* A critical agent shivers. It is the only tell that does not need a label. */
.shop-fig.is-critical { animation: shiver 1.1s steps(3, end) infinite; }
@keyframes shiver {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 4px rgba(248, 113, 113, .75)); }
}

.shop-fig.is-dying { opacity: 0; transition: transform 1.1s steps(9, end), opacity 1s ease 1s; }

/* ── speech ── */
.shop-bubble { animation: bubbleIn .18s ease-out; }
@keyframes bubbleIn { from { opacity: 0; } to { opacity: 1; } }
.shop-say { font: 9px/1 var(--mono); fill: #a8a49c; }

/* ── graveyard ── */
.shop-stone { animation: stoneDrop .5s ease-out; }
@keyframes stoneDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; } }

.shop-legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin: 12px 0 0; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2);
  font: 10.5px/1.5 var(--mono); color: var(--ink-3);
}
.shop-legend b { color: var(--ink-2); font-weight: 600; }
.shop-legend span { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.sw-stable { background: var(--stable); }
.sw-tight { background: var(--tight); }
.sw-critical { background: var(--critical); }
.sw-grave-never { background: #4a2626; }
.sw-grave-earned { background: #2f4f3a; }

@media (prefers-reduced-motion: reduce) {
  .shop-fig, .shop-glow-furnace, .shop-glow-nursery,
  .shop-fig.is-walking .shop-leg-l, .shop-fig.is-walking .shop-leg-r,
  .shop-fig.is-critical, .shop-stone, .shop-bubble { animation: none; transition: none; }
}