/* Tap feedback word on the grass plate (see js/tap_fx.js). */
.tap-word {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -100%);
  font-family: var(--hand);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  pointer-events: none;
  white-space: nowrap;
  animation: tap-word 1.2s ease-out forwards;
}
@keyframes tap-word {
  0% { opacity: 0; transform: translate(-50%, -80%); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -190%); }
}
@media (prefers-reduced-motion: reduce) {
  .tap-word { display: none; }
}

/* Step list on desktop: a strip directly under the 3D panel (not over the build). */
@media (min-width: 761px) {
  .steps {
    position: absolute;
    left: calc(170 * var(--u));
    top: calc(3583 * var(--u));
    width: calc(1541 * var(--u));
    max-width: none;
    margin: 0;
    padding: 12px 18px;
    box-sizing: border-box;
  }
  .steps .steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot { top: calc(4120 * var(--u)); }
}

/* Live hero figures (js/hero.js): the canvas fills the figure, which keeps its layout box. */
.hero-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.hero-canvas canvas:active { cursor: grabbing; }
@media (max-width: 760px) {
  .art { position: relative; }
}