/* Spud & Root recipe game: Heaping, not toppling, the topping game on the
   Potato Bites with Brie & Tapenade page. Only that page loads this file,
   after recipe.css. The box, message, tiled wall, cutting board, warmth bar
   (.pn-hud), result stamp, the pn-drop animation and the press-and-hold
   buttons (.rp-hold) are shared and stay in recipe.css ("Games"). */

.cn-platter {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 4;
}
.cn-platter__line {
  fill: none;
  stroke: #d63a2f;
  stroke-width: 2.5;
}
.is-empty [data-bites],
.cn-bite.is-gone,
.is-done .cn-lift,
.is-done .cn-steam {
  display: none;
}
[data-picks],
.cn-spill,
.cn-vin,
.cn-steam {
  pointer-events: none;
}
.cn-hit {
  fill: transparent;
}
.cn-steam {
  opacity: calc(var(--warm, 0) * 0.9);
}
.cn-steam path {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.cn-side {
  fill: #9c2634;
  stroke: var(--ink);
  stroke-width: 3;
}
.cn-rim {
  fill: #c2394a;
  stroke: var(--ink);
  stroke-width: 3;
}
.cn-flesh {
  fill: #f0d69a;
  transition: fill 0.6s;
}
.is-soggy .cn-flesh {
  fill: #cfa866;
}
.cn-pepper {
  fill: var(--ink-soft);
}
.cn-lift,
.cn-top {
  transition: transform 0.4s var(--ease-out);
}
.cn-top {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
/* Brie: stiff and square on a cold round, slumped on a warm one */
.cn-brie {
  display: none;
}
.is-brie:not(.is-melt) .cn-brie--cold,
.is-brie.is-melt .cn-brie--melt {
  display: inline;
}
.cn-brie__face {
  fill: #fdf7e4;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.cn-brie__rind {
  fill: #eadcb2;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
/* Tapenade */
.cn-heap {
  display: none;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.has-heap .cn-heap {
  display: inline;
}
.cn-mound {
  fill: #2e1219;
}
.cn-kalamata,
.cn-green,
.cn-caper {
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.cn-kalamata {
  fill: #5c1a2e;
}
.cn-shine {
  fill: none;
  stroke: #c98a9b;
  stroke-width: 1.1;
  stroke-linecap: round;
}
.cn-caper .cn-shine,
circle.cn-shine {
  fill: #c9d49a;
  stroke: none;
}
.cn-green {
  fill: #9aa83a;
}
.cn-ring-hole {
  fill: #5f6b1c;
}
.cn-caper {
  fill: #4f5d24;
}
.cn-herb,
.cn-parsley path {
  fill: #2f7d24;
}
.cn-parsley {
  opacity: 0;
  transition: opacity 0.4s;
}
.is-garnished .cn-parsley {
  opacity: 1;
}
/* The ring round the round being spooned, like a traffic light: amber for
   level, green for heaping, orange near the limit, red when it's too much */
.cn-ring {
  display: none;
  fill: none;
  stroke: #c9c2b0;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 4 7;
  pointer-events: none;
}
.is-active .cn-ring {
  display: inline;
}
.is-band-level .cn-ring {
  stroke: var(--potato-gold);
  stroke-dasharray: none;
}
.is-band-heaping .cn-ring {
  stroke: #97d700;
  stroke-dasharray: none;
}
.is-band-careful .cn-ring {
  stroke: #f2731b;
  stroke-dasharray: none;
}
.is-band-over .cn-ring {
  stroke: #ff4438;
  stroke-dasharray: none;
}
/* The spoon that tips tapenade onto it, and the bits that fall off */
.cn-spoon {
  display: none;
  pointer-events: none;
}
.is-spooning .cn-spoon {
  display: inline;
}
.cn-spoon__tilt {
  transform-box: fill-box;
  transform-origin: 24% 74%;
}
.cn-spoon__stem {
  fill: none;
  stroke: var(--ink);
  stroke-width: 8;
  stroke-linecap: round;
}
.cn-spoon__stem-hi {
  fill: none;
  stroke: #cfd6dc;
  stroke-width: 3.5;
  stroke-linecap: round;
}
.cn-spoon__bowl {
  fill: #cfd6dc;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.cn-spoon__load {
  fill: #2e1219;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.cn-bit {
  fill: #5c1a2e;
  stroke: var(--ink);
  stroke-width: 1;
  opacity: 0;
}
.cn-bit--green {
  fill: #9aa83a;
}
/* One pip for each guest, once the serving starts */
.cn-guests {
  opacity: 0;
  transition: opacity 0.3s;
}
.is-garnished .cn-guests,
.is-done .cn-guests {
  opacity: 1;
}
.cn-pip {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 2.5;
  transition: fill 0.2s;
}
.cn-pip.is-good {
  fill: #97d700;
}
.cn-pip.is-skimpy {
  fill: var(--potato-gold);
}
.cn-pip.is-toppled {
  fill: #ff4438;
}
.cn-platter__hi {
  fill: none;
  stroke: #e3e9ed;
  stroke-width: 5;
  stroke-linecap: round;
}
/* Too much: it slides off onto the platter */
.is-slid .cn-top {
  transform: translate(26px, 18px) rotate(22deg) scale(1.15, 0.6);
  transition-duration: 0.5s;
}
.is-slid.is-left .cn-top {
  transform: translate(-26px, 18px) rotate(-22deg) scale(1.15, 0.6);
}
/* Vinegar. You drizzle it yourself: a line that follows the bottle, on the
   round it lands on (so it goes with that round when it's picked up or slides
   off) or on the platter. A pale halo lets it show over the dark tapenade. */
.cn-vin__halo,
.cn-vin__line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cn-vin__halo {
  stroke: rgba(255, 248, 230, 0.7);
  stroke-width: 6.4;
}
.cn-vin__line {
  stroke: var(--balsamic);
  stroke-width: 3.4;
}
.cn-vin__dot {
  fill: var(--balsamic);
  stroke: rgba(255, 248, 230, 0.7);
  stroke-width: 1.8;
}
/* Vinegar that missed the rounds lands on the platter; the waiter wipes it
   away when the serving starts */
.cn-spill {
  transition: opacity 0.6s;
}
.is-garnished .cn-spill {
  opacity: 0;
}
/* What a round looks like once vinegar has soaked it */
.cn-soak {
  fill: var(--balsamic);
  opacity: 0;
  transition: opacity 0.3s;
}
/* The little glass bottle, out while you're drizzling */
.cn-bottle {
  display: none;
  pointer-events: none;
}
.is-bottle .cn-bottle {
  display: inline;
}
.cn-bottle__tilt {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: rotate 0.15s var(--ease-out);
}
.is-pouring .cn-bottle__tilt {
  rotate: -28deg;
}
.cn-bottle__glass {
  fill: #dcecf3;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.cn-bottle__vinegar {
  fill: var(--balsamic);
}
.cn-bottle__hi {
  fill: none;
  stroke: var(--white);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.85;
}
.cn-bottle__tip {
  fill: var(--ink);
}
.cn-bottle__stream {
  display: none;
  fill: none;
  stroke: var(--balsamic);
  stroke-width: 2.8;
  stroke-linecap: round;
}
.is-pouring .cn-bottle__stream {
  display: inline;
}
.rp-slicer__stage svg.is-bottle {
  cursor: crosshair;
}
/* A guest's cocktail pick, waiting above the stage until it's their turn */
.cn-guest {
  transform: translate(0, -300px);
  transition: transform 0.35s var(--ease-out);
}
.cn-pick,
.cn-frill,
.cn-frill-band {
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.cn-pick {
  fill: #e6c48c;
}
.cn-frill {
  stroke-width: 1.5;
}
.cn-frill-band {
  fill: var(--white);
}
.is-resetting *,
.is-resetting {
  transition: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .cn-drop.is-drop {
    animation: pn-drop 0.5s var(--ease-out) both;
    animation-delay: calc(var(--i) * 40ms);
  }
  .is-over .cn-heap {
    animation: cn-wobble 0.3s ease-in-out infinite;
  }
  .is-spooning .cn-spoon__tilt {
    animation: cn-tip 0.7s ease-in-out infinite;
  }
  .is-spooning .cn-bit {
    animation: cn-fall 0.66s ease-in infinite;
  }
  .cn-steam path {
    animation: steam 2.2s ease-in-out infinite;
  }
  .cn-steam path:nth-child(2) {
    animation-delay: 0.7s;
  }
  .cn-steam path:nth-child(3) {
    animation-delay: 1.4s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cn-lift,
  .cn-top,
  .cn-guest,
  .cn-bottle__tilt,
  .cn-spill,
  .cn-soak {
    transition: none;
  }
}
@keyframes cn-tip {
  0%, 100% { rotate: 6deg; }
  50% { rotate: -24deg; }
}
@keyframes cn-fall {
  0% { translate: 0 0; opacity: 0; }
  15% { opacity: 1; }
  100% { translate: -30px 32px; opacity: 0; }
}
@keyframes cn-wobble {
  0%, 100% { rotate: -4deg; }
  50% { rotate: 4deg; }
}