/* War Machine cell heroes (defense, war-machine): live hidden-line canvas in place of the static drawing.
   The stage is sized by cell-hlr.js to the drawing's content box inside the <img>, so nothing shifts;
   the img (.live-still, see styles.css) is never painted while the live drawing runs. */
.cell-hlr-stage { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity .7s ease; }
.hero-figure.is-live .cell-hlr-stage { opacity: 1; }
.cell-hlr-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; color: var(--ink); }
/* the floor slab runs out of the frame on purpose: soft edges instead of a hard crop */
.cell-hlr-stage canvas {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 92%, transparent);
  mask-composite: intersect;
}

/* HUD: the site's micro-label style, quiet. Robot bay state, operator bay state, parts complete. */
.cell-hlr-hud {
  position: absolute; left: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem;
  font-variant-numeric: tabular-nums;
}
.cell-hlr-hud .lbl { color: var(--ink-2); }
.cell-hlr-hud .lbl b { color: var(--ink); }
.cell-hlr-st { display: inline-flex; align-items: center; gap: .45rem; }
.cell-hlr-st::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--ink-2); flex: none;
}
.hero-figure.is-arc .cell-hlr-st::before { background: var(--red); border-color: var(--red); }
.cell-hlr-op[hidden], .cell-hlr-sub[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cell-hlr-stage { transition: none; }
}