/* Spud & Root recipe game: Smooth, not gluey, the mashing game on the Mashed
   Potatoes with Miso Butter page. Only that page loads this file, after
   recipe.css. The box, message, counter board (.sl-board), hint and
   press-and-hold buttons (.rp-hold) are shared and stay in recipe.css
   ("Games"). */

/* The tools and the tally sit under the message */
.mh-tools {
  display: inline-flex;
  gap: 8px;
}
.mh-tool {
  min-height: 48px;
  padding: 10px 20px;
}
.mh-tool[aria-pressed="false"] {
  --btn-bg: var(--white);
}
.mh-tool[aria-pressed="true"] {
  --btn-bg: var(--logo-green);
}
.mh-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  font: 600 1rem var(--font-display);
  color: var(--ink-soft);
}
.mh-tally__item {
  white-space: nowrap;
}
.mh-tally__item.is-made {
  color: var(--good);
}
.mh-stage svg:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -3px;
}

/* The pot */
.mh-pot {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.mh-pot__body,
.mh-pot__rim {
  fill: #f6efdd;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.mh-pot__shade {
  fill: #e7dcc0;
}
.mh-pot__band {
  fill: none;
  stroke: #97d700;
  stroke-width: 10;
}
.mh-pot__band--o {
  stroke: var(--ink);
  stroke-width: 16;
}
.mh-pot__hi {
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.7;
}
.mh-pot__handle {
  fill: none;
  stroke: var(--ink);
  stroke-width: 13;
  stroke-linecap: round;
}
.mh-pot__handle--in {
  stroke: #f6efdd;
  stroke-width: 5;
}
.mh-pot__inside {
  fill: #e2d2b0;
  stroke: var(--ink);
  stroke-width: 3;
}
.mh-shadow {
  fill: var(--ink);
  opacity: 0.16;
}
.mh-masher .mh-shadow,
.mh-whisk .mh-shadow {
  opacity: 0.1;
}
.mh-rimshade {
  fill: #5c4a1e;
  fill-rule: evenodd;
  opacity: 0.26;
  pointer-events: none;
}
.mh-steam {
  pointer-events: none;
}
.mh-steam path {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.3;
}
.is-done .mh-steam {
  display: none;
}

/* The paste between the lumps: starchy water at first, cream once mashed,
   glossy once whipped, tacky once it's glue */
.mh-paste {
  fill: #dfcf9c;
}
.mh-cream {
  fill: #fbf3cf;
  opacity: 0;
  transition: opacity 0.25s;
}
.mh-mounds path {
  fill: #f2e6b4;
}
.mh-swirls path {
  fill: none;
  stroke: #e7d9a3;
  stroke-width: 3;
  stroke-linecap: round;
}
.mh-swirls,
.mh-mounds,
.mh-peaks,
.mh-rough,
.mh-bubbles {
  opacity: 0;
  transition: opacity 0.25s;
}
.mh-peak {
  fill: #fbf3cf;
}
.mh-peak__shade {
  fill: #ecdfa8;
}
.mh-dab {
  fill: #fffbe8;
  stroke: #e6d596;
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.mh-dab__shade {
  fill: #e6d596;
}
.mh-gloss {
  opacity: 0;
  transition: opacity 0.25s;
}
.mh-gloss ellipse {
  fill: #fff;
  opacity: 0.22;
}
.mh-gloss path {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  opacity: 0.85;
}
.mh-tacky {
  fill: #e9dca6;
  opacity: 0;
  transition: opacity 0.25s;
}
.mh-bubble {
  fill: #f5eab8;
  stroke: #b59f56;
  stroke-width: 2;
}
.mh-bubble__hi {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.is-glued .mh-paste {
  fill: #cdbf8a;
}

/* The lumps. A chunk is whole until it's crushed; then it's a heap of pieces
   on a smear of mash, and the pieces shrink away into the paste. */
.mh-lump,
.mh-crumbs {
  pointer-events: none;
}
.mh-whole,
.mh-shards,
.mh-shard {
  transform-box: fill-box;
  transform-origin: center;
}
.mh-whole {
  transition: transform 0.25s var(--ease-out), opacity 0.18s;
}
.mh-shard {
  opacity: 0;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}
.mh-smear {
  fill: #f6ecc0;
  opacity: 0;
  transition: opacity 0.3s;
}
.mh-chunk {
  fill: #eccf6e;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.mh-cube__top {
  fill: #f8e7a4;
}
.mh-cube__left {
  fill: #ecd07a;
}
.mh-cube__right {
  fill: #d9b65a;
}
.mh-cube__edge,
.mh-cube__out {
  fill: none;
  stroke: var(--ink);
  stroke-linejoin: round;
  stroke-linecap: round;
}
.mh-cube__edge {
  stroke-width: 2;
}
.mh-cube__out {
  stroke-width: 3;
}
.mh-shard .mh-chunk {
  stroke-width: 2.6;
}
.mh-chunk__top {
  fill: #f7e39a;
}
.mh-chunk__hi {
  fill: #fdf3c6;
}
.mh-spot {
  fill: #b98f3c;
}
.mh-crumb {
  fill: #f4dc90;
  stroke: #a78432;
  stroke-width: 0.9;
}

/* The masher (a steel wire zigzag) and the whip */
.mh-masher,
.mh-whisk {
  pointer-events: none;
}
.mh-reach {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 6 7;
  opacity: 0.2;
}
.is-down .mh-reach,
.mh-stage svg:focus-visible .mh-reach {
  opacity: 0.6;
}
.mh-lift {
  translate: 0 calc(var(--lift, 26) * -1px);
  transition: translate 0.2s var(--ease-out);
}
.is-down > .mh-lift {
  translate: 0 0;
  transition-duration: 0.07s;
}
.mh-wire {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mh-wire--o {
  stroke: var(--ink);
  stroke-width: 7;
}
.mh-wire--i {
  stroke: #e4e9ed;
  stroke-width: 3;
}
.mh-grip {
  fill: #cfd5da;
  stroke: var(--ink);
  stroke-width: 5;
}
.mh-collar {
  fill: #9aa3aa;
  stroke: var(--ink);
  stroke-width: 4;
}
.mh-whisk__handle {
  fill: #4a3a30;
  stroke: var(--ink);
  stroke-width: 5;
}
.mh-swish {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 9;
  opacity: 0;
}
.is-whipping .mh-swish {
  opacity: 0.45;
}
.mh-loop {
  transform-box: fill-box;
  transform-origin: center;
}
/* A jam: a chunk wedged in the whip, and the big chunks ringed in red */
.mh-warn {
  display: none;
  fill: none;
  stroke: #b3261e;
  stroke-width: 3;
  stroke-dasharray: 7 5;
}
.is-warn .mh-warn {
  display: inline;
}
.mh-stuck {
  display: none;
}
.is-jam .mh-stuck {
  display: inline;
}
.mh-clank {
  display: none;
  font: 700 26px var(--font-display);
  fill: #b3261e;
  stroke: var(--white);
  stroke-width: 5;
  stroke-linejoin: round;
  paint-order: stroke;
  text-anchor: middle;
}
.is-jam .mh-clank {
  display: inline;
}

/* One tool at a time */
svg[data-tool="whip"] .mh-masher,
svg:not([data-tool="whip"]) .mh-whisk {
  display: none;
}
.is-done:not(.is-glued) .mh-masher,
.is-done:not(.is-glued) .mh-whisk {
  display: none;
}

/* Whipping: the paste swirls round the pot, the whip goes round with it, and
   paste flies off it */
.mh-vortex,
.mh-ripples,
.mh-splash {
  pointer-events: none;
}
.mh-vortex {
  opacity: 0;
  transition: opacity 0.15s;
}
.is-whipping .mh-vortex {
  opacity: 1;
}
.mh-vortex__spin {
  transform-box: fill-box;
  transform-origin: center;
}
.mh-vortex__arm,
.mh-vortex__shade {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mh-vortex__arm {
  stroke: #fffdf0;
  stroke-width: 6;
}
.mh-vortex__shade {
  stroke: #d2c184;
  stroke-width: 9;
  opacity: 0.7;
}
.mh-ripples {
  opacity: 0;
}
.is-whipping .mh-ripples {
  opacity: 1;
}
.mh-ripple {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  opacity: 0.6;
  transform-box: fill-box;
  transform-origin: center;
}
.mh-droplet {
  fill: #fffdf0;
  stroke: var(--ink);
  stroke-width: 1.5;
  opacity: 0;
}

/* Glue: paste clings to the tool in a big sticky glob and, once the tool lifts,
   stretches out in strands like a cheese pull, each melting into a puddle */
.mh-ropes {
  pointer-events: none;
}
.mh-glob {
  display: none;
  fill: #fbf3cf;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.mh-rope {
  display: none;
}
.mh-rope__pool {
  fill: #f8efc4;
  stroke: #b59f56;
  stroke-width: 2.4;
}
.mh-rope__line {
  fill: none;
  stroke-linecap: round;
}
.mh-rope__line--o {
  stroke: var(--ink);
}
.mh-rope__line--i {
  stroke: #fbf3cf;
}
.mh-rope__melt {
  fill: #f8efc4;
}

.mh-glob__hi {
  display: none;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.9;
}

/* A press: a puff of mash and a few crumbs, and the lumps under it jump */
.mh-burst {
  pointer-events: none;
}
.mh-puff {
  fill: none;
  stroke: #fffdf0;
  stroke-width: 4;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.mh-chip {
  fill: #f4dc90;
  stroke: #a78432;
  stroke-width: 0.9;
  opacity: 0;
}
.is-burst .mh-puff {
  opacity: 0.8;
}
.is-burst .mh-chip {
  opacity: 1;
}

/* The critic's mark: a stamp on the scorecard, once the round is over */
.mh-stamp {
  display: none;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}
.is-done .mh-stamp {
  display: inline;
}
.mh-stamp__box {
  fill: #97d700;
  stroke: var(--ink);
  stroke-width: 4;
}
.mh-stamp.is-fail .mh-stamp__box {
  fill: #ff4438;
}
.mh-stamp__text {
  font: 700 30px var(--font-display);
  fill: var(--ink);
}

.is-resetting *,
.is-resetting {
  transition: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .mh-fall.is-drop {
    animation: pn-drop 0.5s var(--ease-out) both;
    animation-delay: calc(var(--i) * 40ms);
  }
  .is-jolt .mh-pot {
    animation: mh-jolt 0.18s var(--ease-out);
  }
  .mh-steam path {
    animation: steam 2.4s ease-in-out infinite;
  }
  .mh-steam path:nth-child(2) {
    animation-delay: 0.8s;
  }
  .mh-steam path:nth-child(3) {
    animation-delay: 1.6s;
  }
  .is-hit .mh-whole,
  .is-hit .mh-shards {
    animation: mh-squash 0.3s var(--ease-out);
  }
  .is-burst .mh-puff {
    animation: mh-puff 0.38s ease-out both;
  }
  .is-burst .mh-chip {
    animation: mh-fly 0.38s var(--ease-out) both;
  }
  .is-whipping .mh-orbit {
    animation: mh-orbit 0.42s linear infinite;
  }
  .is-whipping .mh-vortex__spin {
    animation: mh-turn 0.8s linear infinite;
  }
  .is-whipping .mh-loop {
    animation: mh-spin 0.28s ease-in-out infinite alternate;
  }
  .is-whipping .mh-loop:nth-child(2n + 1) {
    animation-duration: 0.22s;
  }
  .is-whipping .mh-loop:nth-child(3n + 1) {
    animation-duration: 0.34s;
  }
  .is-whipping .mh-ripple {
    animation: mh-ripple 0.7s ease-out infinite;
  }
  .is-whipping .mh-droplet {
    animation: mh-fling 0.6s ease-out infinite;
  }
  .is-jam .mh-whisk {
    animation: mh-clank 0.5s var(--ease-out);
  }
  .is-jam .mh-clank {
    animation: bubble-pop 0.35s var(--ease-spring);
  }
  .is-warn .mh-warn {
    animation: mh-warn 0.45s ease-in-out 3;
  }
  .is-done .mh-stamp {
    animation: mh-stamp 0.4s var(--ease-spring);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mh-lift,
  .mh-whole,
  .mh-shard {
    transition: none;
  }
}
@keyframes mh-jolt {
  30% { scale: 1.012 0.985; }
}
@keyframes mh-squash {
  30% { scale: 1.16 0.8; }
}
@keyframes mh-puff {
  from { scale: 0.5; opacity: 0.9; }
  to { scale: 1.35; opacity: 0; }
}
@keyframes mh-fly {
  from { translate: 0 0; opacity: 1; rotate: 0deg; }
  to { translate: var(--dx) var(--dy); opacity: 0; rotate: 220deg; }
}
@keyframes mh-orbit {
  0% { translate: 30px 0; }
  25% { translate: 0 10px; }
  50% { translate: -30px 0; }
  75% { translate: 0 -10px; }
  100% { translate: 30px 0; }
}
@keyframes mh-turn {
  to { rotate: 360deg; }
}
@keyframes mh-spin {
  from { scale: 0.35 1; }
  to { scale: 1 1; }
}
@keyframes mh-ripple {
  from { scale: 0.4; opacity: 0.8; }
  to { scale: 1.7; opacity: 0; }
}
@keyframes mh-fling {
  0% { translate: 0 0; opacity: 1; }
  60% { translate: calc(var(--dx) * 0.6) calc(var(--h) * -1); opacity: 1; }
  100% { translate: var(--dx) 6px; opacity: 0; }
}
@keyframes mh-clank {
  20% { rotate: 7deg; }
  45% { rotate: -6deg; }
  70% { rotate: 3deg; }
}
@keyframes mh-warn {
  50% { opacity: 0.25; }
}
@keyframes mh-stamp {
  from { scale: 1.7; opacity: 0; }
  to { scale: 1; opacity: 1; }
}