/* Spud & Root recipe game: the chopstick trick, on the Duck Fat Hasselback
   Potatoes page. Only that page loads this file, after recipe.css. The box,
   message, tiled wall, cutting board, hint and result stamp are shared with
   the other games and stay in recipe.css ("Games"). */

.sl-body {
  fill: #dfb36d;
  stroke: var(--ink);
  stroke-width: 3.5;
}
.sl-shade {
  fill: #c8944c;
}
.sl-sheen {
  fill: none;
  stroke: #f0d59b;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sl-spot {
  fill: #a97a3c;
}
/* The cream inside of the potato, seen in a gap between two slices */
.sl-flesh {
  fill: #fbeec8;
}
.sl-band {
  transform-box: view-box;
  transition: transform 0.6s var(--ease-spring);
}
.sl-cut {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.sl-sticks {
  transition: transform 0.45s var(--ease-spring), opacity 0.3s;
}
.sl-sticks.is-off {
  transform: translate(0, 60px);
  opacity: 0;
}
.sl-stick {
  fill: #c4884a;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.sl-stick-back {
  fill: #a86f35;
}
.sl-stick-hi {
  fill: none;
  stroke: #e3b072;
  stroke-width: 2;
  stroke-linecap: round;
}
.sl-knife {
  transition: transform 0.2s var(--ease-out);
  pointer-events: none;
}
.sl-blade {
  fill: #e4e9ee;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.sl-blade-shade {
  fill: #c3ccd4;
}
.sl-edge {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.85;
}
.sl-bolster {
  fill: #9aa4ad;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.sl-handle {
  fill: var(--ink);
}
.sl-rivet {
  fill: #cfd6dc;
}
/* Where the knife will go in, shown while it glides */
.sl-aim {
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.is-running .sl-aim {
  opacity: 0.4;
}

/* The cut counter: a pip for each cut, green for a good slice, amber for a
   thick one, red for one that snapped off or went all the way through */
.sl-pip {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 2;
  transition: fill 0.2s;
}
.sl-pip.is-cut {
  fill: #97d700;
}
.sl-pip.is-thick {
  fill: var(--potato-gold);
}
.sl-pip.is-through {
  fill: #ff4438;
}

/* Starch flecks jumping off the knife, and sparkles on a finished fan */
.sl-flecks,
.sl-sparks {
  pointer-events: none;
}
.sl-fleck {
  fill: #fbeec8;
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0;
}
.sl-spark {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.is-fanned .sl-spark {
  opacity: 1;
}

.is-finished [data-hint] {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sl-flecks.is-fly .sl-fleck {
    animation: sl-fleck 0.45s var(--ease-out);
  }
  .is-fanned .sl-spark {
    animation: sl-spark 1.6s var(--ease-out) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sl-band,
  .sl-sticks,
  .sl-knife {
    transition: none;
  }
}
@keyframes sl-fleck {
  from { translate: 0 0; opacity: 1; }
  to { translate: var(--dx) var(--dy); opacity: 0; }
}
@keyframes sl-spark {
  0% { scale: 0; rotate: -40deg; opacity: 0; }
  30% { scale: 1.2; rotate: 0deg; opacity: 1; }
  100% { scale: 0.9; rotate: 20deg; opacity: 1; }
}