/* Spud & Root recipe game: Mind the strays, the conveyor-belt game on
   the Asian Fusion Baked Potato page. Only that page loads this file, after
   recipe.css. The box, message, tiled wall, result stamp, hint text, the
   speech bubble and the steam keyframes are shared with the other games and
   stay in recipe.css ("Games"). */

/* The sushi chef stands at the end of the belt; his chopsticks mustn't catch a tap */
.bt-svg .sp,
.bt-svg [data-fly] {
  pointer-events: none;
}
.bt-svg:focus-visible {
  outline: 3px solid var(--dish-deep);
  outline-offset: -3px;
}

/* A sushi counter: pale wood where the other games have a plain counter */
.rp-slicer__stage:has(.bt-svg) {
  --counter: #ead3a2;
  --counter-line: #d3b57a;
}

/* The noren curtain and the paper lantern on the wall */
.bt-noren > rect {
  fill: #6b4524;
  stroke: var(--ink);
  stroke-width: 3;
}
.bt-cloth {
  fill: #26407a;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.bt-cloth__line {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
}
.bt-emblem {
  fill: #fade00;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.bt-lantern__cord {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.bt-lantern__body {
  fill: #e5322d;
  stroke: var(--ink);
  stroke-width: 3;
}
.bt-lantern__band {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}
.bt-noren,
.bt-lantern {
  pointer-events: none;
}

/* The baked potato on its wooden plate: split, with the middle fluffed up */
.bt-wood {
  fill: #b4693a;
  stroke: var(--ink);
  stroke-width: 4;
}
.bt-wood__in {
  fill: #cf8450;
  stroke: #8a5028;
  stroke-width: 2;
}
.bt-skin {
  fill: #9e6534;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.bt-skin--back {
  fill: #7a4a24;
}
/* The cut edge of the skin along the front of the split */
.bt-cut {
  fill: none;
  stroke: #f3dfa4;
  stroke-width: 3.4;
  stroke-linecap: round;
}
.bt-skin__shade {
  fill: rgba(70, 40, 10, 0.24);
}
.bt-skin__hi {
  fill: none;
  stroke: #d29a5c;
  stroke-width: 3;
  stroke-linecap: round;
}
.bt-skin__spots circle {
  fill: #5e3a18;
}
.bt-skin__spots path {
  fill: none;
  stroke: #5e3a18;
  stroke-width: 1.6;
  stroke-linecap: round;
}
.bt-flesh {
  fill: #f3dfa4;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.bt-fluff {
  fill: #fff7dc;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.bt-fluff__fleck circle {
  fill: #e2c47a;
}
.bt-fluff__in {
  fill: none;
  stroke: #e9dca8;
  stroke-width: 2.6;
  stroke-linecap: round;
}
.bt-steam path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.32;
}
.bt-potato {
  pointer-events: none;
}

/* The toppings on the potato. They're stacked by layer (belt.js), so the
   sauce is always under the crunch whatever order they went on in. */
.bt-top {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.bt-soy {
  fill: #9a5528;
  opacity: 0.55;
}
.bt-soy__pool ellipse {
  fill: #4a2410;
  opacity: 0.75;
}
.bt-soy__hi,
.bt-mayo,
.bt-mayo__edge,
.bt-mayo__hi,
.bt-nori path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bt-soy__hi {
  stroke: #fff;
  stroke-width: 1.6;
  opacity: 0.7;
}
.bt-mayo__edge {
  stroke: #a8471a;
  stroke-width: 6.4;
}
.bt-mayo {
  stroke: #ffab70;
  stroke-width: 4;
}
.bt-mayo__hi {
  stroke: #fff1e2;
  stroke-width: 1.6;
}
.bt-nori path {
  stroke: #1d3122;
  stroke-width: 2.8;
}

/* The belt: a dark rubber bed with a steel rail, moved by the script */
.bt-bed {
  fill: #3b3a3c;
  stroke: var(--ink);
  stroke-width: 3;
}
.bt-slats {
  fill: none;
  stroke: #5a595c;
  stroke-width: 3;
}
.bt-rail {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}
.bt-bed,
.bt-slats,
.bt-rail,
.bt-hatch,
.bt-ticketg,
.bt-tag {
  pointer-events: none;
}
.bt-hatch rect {
  fill: #2d2a2b;
  stroke: var(--ink);
  stroke-width: 2;
}
.bt-hatch .bt-hatch__top {
  fill: #6b4524;
}
/* The frame in front of the chef's chopsticks: Grab and the keyboard take the
   plate that's in it */
.bt-reach {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-dasharray: 6 5;
  opacity: 0.45;
  pointer-events: none;
  transition: fill 0.15s, stroke 0.15s, opacity 0.15s;
}
.bt-reach.is-on {
  fill: rgba(151, 215, 0, 0.18);
  stroke: #5a9b00;
  opacity: 1;
}
.bt-tag {
  font: 700 13px var(--font-display);
  letter-spacing: 0.04em;
  fill: var(--ink);
  stroke: #fffaf0;
  stroke-width: 4;
  paint-order: stroke;
  stroke-linejoin: round;
}

/* A plate on the belt: a white dish with a coloured rim, one topping on it */
.bt-plate {
  cursor: pointer;
}
.bt-plate.is-gone {
  display: none;
}
.bt-dish {
  fill: #fffaf0;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.bt-rim {
  fill: none;
  stroke-width: 2.5;
}
.bt-dish__in {
  fill: #f0e8d5;
  stroke: #d8cdb4;
  stroke-width: 1;
}
.bt-hit {
  fill: transparent;
  pointer-events: all;
}
.bt-sel {
  display: none;
  fill: rgba(255, 184, 27, 0.25);
  stroke: #e08a00;
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
  pointer-events: none;
}
.bt-plate.is-sel .bt-sel {
  display: inline;
}
.bt-plate.is-flying {
  pointer-events: none;
}
/* Dragging a plate: it leaves the belt and follows the pointer, and the
   potato glows where it can be dropped. While a round runs, a swipe on the
   drawing drags rather than scrolling the page (touch-action on the plates
   themselves isn't honoured inside an SVG). */
.bt-svg.is-running,
.bt-svg.is-paused {
  touch-action: none;
}
.bt-svg.is-running .bt-plate,
.bt-svg.is-paused .bt-plate {
  cursor: grab;
}
.bt-plate.is-held {
  visibility: hidden;
}
.bt-plate.is-dragged {
  pointer-events: none;
  cursor: grabbing;
  filter: drop-shadow(0 6px 4px rgba(35, 31, 32, 0.3));
}
.bt-plate.is-dragged .bt-sel,
.bt-plate.is-dragged .bt-hit {
  display: none;
}
.bt-drop {
  fill: rgba(151, 215, 0, 0.16);
  stroke: #5a9b00;
  stroke-width: 3;
  stroke-dasharray: 8 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, fill 0.15s;
}
.bt-svg.is-dragging .bt-drop {
  opacity: 0.7;
}
.bt-svg.is-dragging.is-over .bt-drop {
  opacity: 1;
  fill: rgba(151, 215, 0, 0.32);
}
.bt-plate.is-flying .bt-sel,
.bt-plate.is-flying .bt-hit {
  display: none;
}

/* The order ticket: how many toppings are on, strays and the clock */
.bt-ticket {
  fill: #fffdf6;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.bt-pin {
  fill: #e5322d;
  stroke: var(--ink);
  stroke-width: 2;
}
.bt-pip {
  fill: var(--cream);
  stroke: var(--ink);
  stroke-width: 2;
  transition: fill 0.2s;
}
.bt-pip.is-good {
  fill: #97d700;
}
.bt-stray circle {
  fill: #fff;
  stroke: #c9bfa8;
  stroke-width: 1.6;
  transition: fill 0.2s;
}
.bt-stray path {
  fill: none;
  stroke: #c9bfa8;
  stroke-width: 2;
  stroke-linecap: round;
}
.bt-stray.is-on circle {
  fill: #ff4438;
  stroke: var(--ink);
}
.bt-stray.is-on path {
  stroke: #fff;
}
.bt-clock {
  font: 700 20px var(--font-display);
  fill: var(--ink);
}
@media (max-width: 600px) {
  .bt-tag {
    font-size: 17px;
  }
  .bt-clock {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bt-svg.is-running .bt-steam path {
    animation: steam 2.4s ease-in-out infinite;
  }
  .bt-svg.is-running .bt-steam path:nth-child(2) {
    animation-delay: 0.6s;
  }
  .bt-svg.is-running .bt-steam path:nth-child(3) {
    animation-delay: 1.2s;
  }
  .bt-top.is-new {
    animation: bt-land 0.4s var(--ease-spring);
  }
}
@keyframes bt-land {
  from { translate: 0 -22px; opacity: 0; }
  60% { opacity: 1; }
}