/* Spud & Root recipe game: Five a side, the frying game on the Golden Potato &
   Polenta Medallions page. Only that page loads this file, after recipe.css.
   The box, message, tiled wall, heat bar (.pn-hud), result stamp, hint text,
   the magician's moods and the steam and pn-drop keyframes are shared with
   the other games and stay in recipe.css ("Games"). */

/* A stainless-steel stovetop, as in the browning game */
.rp-fry .rp-slicer__stage {
  --counter: #dfe4e8;
  --counter-line: #bec6cc;
}
.fy-svg .sp {
  pointer-events: none;
}
.fy-svg:focus-visible {
  outline: 3px solid var(--dish-deep);
  outline-offset: -3px;
}

/* The pan: cast iron, with a pool of oil that shimmers while it's hot */
.fy-handle {
  fill: #231f20;
}
.fy-pan {
  fill: #2c2a2b;
  stroke: var(--ink);
  stroke-width: 4;
}
.fy-lip {
  fill: none;
  stroke: #6b6667;
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0.8;
}
.fy-floor {
  fill: #3b3839;
}
.fy-pool {
  fill: #f3d77e;
  opacity: 0.18;
}
.fy-glow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
}
.fy-svg.is-live .fy-glow {
  opacity: calc(var(--heat, 0.7) * 0.5);
}
.fy-handle,
.fy-lip,
.fy-pool,
.fy-bubbles {
  pointer-events: none;
}
.fy-bubbles {
  display: none;
}
.fy-bubble {
  opacity: clamp(0, calc((var(--heat, 0.7) - var(--t, 0)) * 6), 1);
  transition: opacity 0.3s;
}
.fy-bubble circle {
  fill: rgba(243, 215, 126, 0.25);
  stroke: #f3d77e;
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
}
.fy-svg.is-live .fy-bubbles {
  display: inline;
}
.fy-svg.is-live .fy-pan,
.fy-svg.is-live .fy-floor {
  cursor: pointer;
}

/* A spot round the pan, like an hour on a clock: dashed while it's empty */
.fy-spot {
  display: none;
  fill: rgba(255, 255, 255, 0.04);
  stroke: #8d8789;
  stroke-width: 2;
  stroke-dasharray: 5 5;
}
.fy-svg.is-live .is-empty .fy-spot {
  display: inline;
}
.fy-hit {
  fill: transparent;
  pointer-events: all;
}
.fy-slot.is-out .fy-hit {
  pointer-events: none;
}
.fy-svg.is-live .fy-slot:not(.is-out) {
  cursor: pointer;
}
.fy-focus {
  display: none;
  fill: none;
  stroke: var(--logo-yellow);
  stroke-width: 3;
}
.fy-slot.is-focus .fy-focus {
  display: inline;
}

/* A polenta round: its top, and the edge that shows how the side underneath
   is browning. fry.js colours them. */
.fy-round {
  display: none;
}
.fy-slot.is-on .fy-round {
  display: inline;
}
.fy-flip {
  transform-box: fill-box;
  transform-origin: 50% 60%;
}
/* A halo of the colour underneath, showing round the edge: it creeps from
   pale to golden as the side on the pan browns */
.fy-halo {
  fill: #f7d674;
  stroke: #f3d77e;
  stroke-width: 1.5;
  opacity: 0;
}
.fy-slot.is-frying .fy-halo {
  opacity: 0.75;
}
.fy-top,
.fy-edge {
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linejoin: round;
  transition: fill 0.3s;
}
.fy-top {
  fill: #f7d674;
}
.fy-edge {
  fill: #dabc66;
}
.fy-fleck circle {
  fill: #d0552b;
  opacity: 0.75;
}
.fy-sheen {
  fill: none;
  stroke: #fff6cf;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.7;
}
.fy-fizz,
.fy-smoke {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.fy-fizz circle {
  fill: rgba(243, 215, 126, 0.3);
  stroke: #f3d77e;
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
}
.fy-slot.is-frying .fy-fizz {
  opacity: var(--heat, 0.7);
}
.fy-smoke path {
  fill: none;
  stroke: #a3a3a3;
  stroke-width: 3;
  stroke-linecap: round;
}
.fy-slot.is-smoking .fy-smoke {
  opacity: 1;
}

/* After the finale: a ring round each round, green for golden both sides */
.fy-svg.is-done .fy-focus {
  display: inline;
  stroke-width: 2.5;
  stroke-dasharray: none;
}
.fy-svg.is-done .is-good .fy-focus {
  stroke: #97d700;
}
.fy-svg.is-done .is-pale .fy-focus {
  stroke: var(--potato-gold);
  stroke-dasharray: 5 4;
}
.fy-svg.is-done .is-burnt .fy-focus {
  stroke: #ff4438;
  stroke-dasharray: 5 4;
}

/* A round lifted out vanishes in a puff, with a sparkle (if it's golden on
   both sides) */
.fy-puff {
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}
.fy-puff circle {
  fill: #fff;
  stroke: #d9d4cc;
  stroke-width: 1.5;
}
.fy-puff path {
  fill: var(--logo-yellow);
  stroke: var(--ink);
  stroke-width: 1.5;
}
/* A dud (a scorched or oily side) gets grey smoke and no sparkle */
.fy-slot:has(.is-dud) .fy-puff circle {
  fill: #9a9697;
  stroke: #6f6a6b;
}
.fy-slot:has(.is-dud) .fy-puff path {
  display: none;
}

/* The burner knob */
.fy-knob {
  cursor: pointer;
}
.fy-knob__base {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 3;
}
.fy-knob__turn {
  transform-box: view-box;
  transform-origin: 362px 229px;
  transition: transform 0.25s var(--ease-spring);
}
.fy-knob__grip {
  fill: #5a5456;
  stroke: var(--ink);
  stroke-width: 2;
}
.fy-knob__dot {
  fill: #ff4438;
}
.fy-knob__labels text {
  font: 700 10px var(--font-body);
  letter-spacing: 0.04em;
  fill: var(--ink-soft);
}
.fy-knob__hit {
  fill: transparent;
}
.fy-svg:not(.is-live) .fy-knob {
  pointer-events: none;
}
.fy-target {
  fill: var(--ink);
}

/* One pip for each round out of the pan: green for golden on both sides,
   amber for pale or oily, red for scorched */
.fy-pip {
  fill: var(--cream);
  stroke: var(--ink);
  stroke-width: 2;
  transition: fill 0.2s;
}
.fy-pip.is-good {
  fill: #97d700;
}
.fy-pip.is-pale {
  fill: var(--potato-gold);
}
.fy-pip.is-burnt {
  fill: #ff4438;
}

/* His heap of scarves, and the rabbit, who only comes out for a perfect pan */
.fy-scarf {
  display: none;
  pointer-events: none;
}
.fy-scarf.is-on {
  display: inline;
}
.fy-scarf path,
.fy-scarf circle {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.fy-scarf__in {
  transform-box: fill-box;
  transform-origin: center;
}
.fy-rabbit {
  display: none;
  pointer-events: none;
}
.fy-svg.is-rabbit .fy-rabbit {
  display: inline;
}
.fy-rabbit__in {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

@media (max-width: 600px) {
  .fy-knob__labels text {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .fy-flip.is-drop {
    animation: pn-drop 0.45s var(--ease-out) both;
  }
  .fy-flip.is-flip {
    animation: fy-flip 0.42s var(--ease-out);
  }
  .fy-flip.is-back {
    animation: fy-back 0.5s var(--ease-spring) both;
    animation-delay: calc(var(--i) * 40ms);
  }
  .fy-slot.is-out .fy-round {
    display: inline;
  }
  .fy-slot.is-out .fy-flip.is-vanish {
    animation: fy-vanish 0.45s var(--ease-out) forwards;
  }
  .fy-slot.is-out:has(.is-vanish) .fy-puff,
  .fy-slot.is-out:has(.is-dud) .fy-puff {
    animation: fy-puff 0.7s var(--ease-out);
  }
  .fy-slot.is-out .fy-flip.is-dud {
    animation: fy-dud 0.5s ease-in forwards;
  }
  .fy-slot.is-out .fy-flip:not(.is-vanish):not(.is-dud) {
    display: none;
  }
  .fy-slot.is-smoking .fy-smoke path {
    animation: steam 1.4s ease-in-out infinite;
  }
  .fy-slot.is-smoking .fy-smoke path:nth-child(2) {
    animation-delay: 0.5s;
  }
  .fy-slot.is-frying .fy-fizz circle {
    animation: fy-pop 1.1s ease-out infinite;
  }
  .fy-slot.is-frying .fy-fizz circle:nth-child(2) {
    animation-delay: 0.4s;
  }
  .fy-slot.is-frying .fy-fizz circle:nth-child(3) {
    animation-delay: 0.8s;
  }
  .fy-svg.is-live .fy-bubble circle {
    animation: fy-pop 1.2s ease-out infinite;
  }
  .fy-scarf.is-new .fy-scarf__in {
    animation: fy-scarf 0.5s var(--ease-spring);
  }
  .fy-svg.is-rabbit .fy-rabbit__in {
    animation: fy-rabbit 0.6s var(--ease-spring) 0.2s both;
  }
}
@keyframes fy-pop {
  0% { scale: 0.2; opacity: 0; }
  30% { opacity: 1; }
  100% { scale: 1.5; opacity: 0; }
}
@keyframes fy-flip {
  0% { translate: 0 0; scale: 1 1; }
  40% { translate: 0 -22px; scale: 1 -0.2; }
  100% { translate: 0 0; scale: 1 1; }
}
@keyframes fy-back {
  from { scale: 0; opacity: 0; }
  to { scale: 1; opacity: 1; }
}
@keyframes fy-vanish {
  to { scale: 0.2; translate: 0 -16px; opacity: 0; }
}
@keyframes fy-dud {
  30% { translate: 0 -6px; }
  to { translate: 0 10px; scale: 0.9 0.5; opacity: 0; filter: grayscale(1) brightness(0.6); }
}
@keyframes fy-puff {
  0% { opacity: 0; scale: 0.4; }
  30% { opacity: 1; }
  100% { opacity: 0; scale: 1.3; }
}
@keyframes fy-scarf {
  from { translate: -30px -90px; rotate: -200deg; }
}
@keyframes fy-rabbit {
  from { translate: 0 30px; scale: 0.3; }
}