/* Spud & Root recipe game: Thirds, ending with sauce, the layering game on the
   Smoked Salmon and Artichoke Potato Gratin page. Only that page loads this
   file, after recipe.css. The box, message, board (.sl-board), hint, heat-bar
   style pips (.pn-hud) and press-and-hold buttons (.rp-hold) are shared and
   stay in recipe.css ("Games"). */

/* The report under the game: the share each layer got */
.ly-report {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
  margin: 0;
  font: 600 1rem var(--font-display);
  color: var(--ink-soft);
}
.ly-report__row {
  white-space: nowrap;
}
.ly-report b {
  font-weight: 700;
}
.ly-report .is-good {
  color: var(--good);
}
.ly-report .is-off {
  color: #b3261e;
}
.ly-report__note {
  flex-basis: 100%;
  font-weight: 500;
  font-size: 0.95rem;
}

/* The dish: a white ceramic baking dish with a brown glaze, cut away at the
   front so the layers show */
.ly-dish__in {
  fill: #f4eee3;
}
.ly-shell,
.ly-ear {
  fill: #fffaf0;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.ly-glaze {
  fill: none;
  stroke: #8a5a35;
  stroke-width: 4;
  stroke-linecap: round;
}
.ly-shine {
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.85;
}

/* The layers, bottom to top: potato slices seen edge-on, and sauce with the
   salmon, artichoke and capers in it. Their patterns are in the svg. */
.ly-p {
  fill: url(#ly-spud);
}
.ly-s {
  fill: url(#ly-sauce);
}
.ly-edge {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.ly-gloss {
  fill: none;
  stroke: var(--white);
  stroke-width: 1.6;
  opacity: 0.7;
}

/* The foreman's plan, laid over the finished dish: where each layer should
   have been */
.ly-plan {
  display: none;
  pointer-events: none;
}
.ly-plan.is-on {
  display: inline;
}
.ly-plan__halo {
  fill: none;
  stroke: var(--white);
  stroke-width: 5;
  opacity: 0.85;
}
.ly-plan__line {
  fill: none;
  stroke: #2e6fbf;
  stroke-width: 2.4;
  stroke-dasharray: 8 6;
}

/* The bowl of potato slices */
.ly-bowl__in {
  fill: #6e4423;
  stroke: var(--ink);
  stroke-width: 3;
}
.ly-bowl__body {
  fill: #c98d52;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.ly-bowl__grain {
  fill: none;
  stroke: #a8703a;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.ly-disc {
  fill: #fbf1c1;
  stroke: #d63c2f;
  stroke-width: 1.8;
}

/* The jug of sauce. It tips over the dish while you pour. */
.ly-pitcher {
  transform-box: view-box;
  transform-origin: 135px 232px;
  pointer-events: none;
}
.ly-pitcher.is-pour {
  transform: translate(81px, -132px) rotate(32deg);
}
.ly-jug__glass {
  fill: rgba(255, 255, 255, 0.6);
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.ly-jug__handle {
  fill: none;
  stroke: var(--ink);
  stroke-width: 6;
  stroke-linecap: round;
}
.ly-jug__sauce {
  fill: url(#ly-sauce);
}
.ly-jug__top {
  fill: none;
  stroke: #e7cf9c;
  stroke-width: 2;
}
.ly-jug__hi {
  fill: none;
  stroke: var(--white);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.7;
}
.ly-stream__edge,
.ly-stream__fill,
.ly-splash {
  display: none;
  pointer-events: none;
}
.ly-stream__edge {
  fill: none;
  stroke: var(--ink);
  stroke-width: 11;
}
.ly-stream__fill {
  fill: none;
  stroke: #fff1cf;
  stroke-width: 6;
}
.ly-splash {
  fill: #fff1cf;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.is-pouring .ly-stream__edge,
.is-pouring .ly-stream__fill,
.is-pouring .ly-splash {
  display: inline;
}
.ly-fly-g {
  pointer-events: none;
}
.ly-fly {
  fill: #fbf1c1;
  stroke: #d63c2f;
  stroke-width: 1.8;
}

/* One pip for each layer */
.ly-pip {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 2;
}
.ly-pip--p.is-done {
  fill: #fbf1c1;
  stroke: #d63c2f;
}
.ly-pip--s.is-done {
  fill: #ffd98a;
}
.ly-pip.is-now {
  stroke-width: 4;
}

@media (prefers-reduced-motion: no-preference) {
  .ly-pitcher {
    transition: transform 0.35s var(--ease-out);
  }
  .ly-fly {
    animation: ly-fly 0.38s cubic-bezier(0.3, 0.6, 0.4, 1) forwards;
  }
  .ly-splash {
    animation: ly-splash 0.3s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: center;
  }
  .ly-pip.is-now {
    animation: ly-pip 0.9s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: center;
  }
}
@keyframes ly-fly {
  from { translate: 0 0; opacity: 1; }
  45% { translate: calc(var(--dx) * 0.5) -64px; }
  to { translate: var(--dx) var(--dy); opacity: 1; }
}
@keyframes ly-splash {
  from { scale: 0.8 1; }
  to { scale: 1.2 1.4; }
}
@keyframes ly-pip {
  to { scale: 1.25; }
}