/* Go for gold, the baking game on the Coconut Curry Scalloped Potatoes page.
   Only that page loads this file; the game box, the wall and counter, the
   stamp, the watching potato and the panel's timeline track are shared
   (recipe.css). Classes start ov-. --heat (0 to 1) is set on the svg by
   games/oven.js: the oven's glow and element follow it. */

/* The oven */
.ov-body {
  fill: #ece7df;
  stroke: var(--ink);
  stroke-width: 3;
}
.ov-body__shade {
  fill: #d9d2c6;
}
.ov-panel {
  fill: #2b2627;
  stroke: var(--ink);
  stroke-width: 2;
}
.ov-knob {
  fill: #d4cdc2;
  stroke: var(--ink);
  stroke-width: 2;
}
.ov-knob__mark {
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
}
.ov-display {
  fill: #140f0e;
  stroke: #000;
  stroke-width: 1.5;
}
.ov-clock,
.ov-temp {
  font: 700 20px var(--font-display);
  fill: #ff9a3d;
}
.ov-temp {
  font-size: 15px;
}
.ov-label {
  fill: #ddd6cb;
}
.ov-run {
  stroke: var(--ink);
  stroke-width: 1.5;
}
.ov-run--foil {
  fill: #b9c1c9;
}
.ov-run--open {
  fill: var(--potato-gold);
}
.ov-tick {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.ov-door {
  fill: #f3efe8;
  stroke: var(--ink);
  stroke-width: 3;
}
.ov-handle rect {
  fill: #bdb6ab;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.ov-handle path {
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
}
.ov-window {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  pointer-events: none;
}

/* Inside: dark enamel, a glowing element, the rack */
.ov-inside {
  fill: #2a1f1c;
}
.ov-glow {
  opacity: calc(0.25 + var(--heat, 1) * 0.75);
  transition: opacity 0.3s;
}
.ov-element {
  fill: none;
  stroke: #ff5a1f;
  stroke-width: 4;
  stroke-linejoin: round;
  opacity: calc(0.3 + var(--heat, 1) * 0.7);
}
.ov-rack {
  fill: none;
  stroke: #8b8580;
  stroke-width: 3;
}
.ov-glass {
  fill: var(--white);
  opacity: 0.09;
  pointer-events: none;
  transition: opacity 0.2s;
}
.is-door .ov-glass {
  opacity: 0;
}

/* The dish: the gratin's white baking dish, from the front and above */
.ov-ear,
.ov-dish__front,
.ov-dish__rim {
  fill: #fffaf0;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.ov-dish__shade {
  fill: #ece3d0;
}
.ov-dish__lip {
  fill: none;
  stroke: #8a5a35;
  stroke-width: 2;
}
/* The top: orange curry sauce, Parmesan in patches, slices poking through.
   Their colours are set by the script as the top browns. */
.ov-patch {
  fill: #f7f0dd;
}
.ov-slice {
  fill: #f6dc8c;
  stroke: rgba(35, 31, 32, 0.3);
  stroke-width: 1;
}
.ov-flecks rect {
  fill: #fffdf3;
  stroke: #d9cfb6;
  stroke-width: 0.5;
}
.ov-gloss path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2.5;
  stroke-linecap: round;
}
.ov-ring {
  fill: none;
  stroke-width: 10;
}
.ov-bubbles circle {
  fill: rgba(255, 236, 200, 0.55);
  stroke: rgba(120, 60, 20, 0.6);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

/* The foil, and steam escaping at its edges */
.ov-foil__sheet {
  fill: url(#ov-foilg);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ov-foil__crinkle {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ov-foil__crimp {
  fill: none;
  stroke: #8d959d;
  stroke-width: 2;
}
.ov-foil {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transition: translate 0.6s var(--ease-out), rotate 0.6s var(--ease-out), opacity 0.6s;
}
.is-open .ov-foil {
  translate: 60px -190px;
  rotate: -10deg;
  opacity: 0;
}
.is-ready .ov-foil,
.is-still .ov-foil {
  transition: none;
}
.ov-steam path,
.ov-smoke path,
.ov-whoosh path {
  fill: none;
  stroke-linecap: round;
}
.ov-steam path {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 3;
}
.ov-smoke path {
  stroke: #8a8287;
  stroke-width: 6;
  opacity: 0.8;
}
.ov-steam,
.ov-smoke {
  pointer-events: none;
  transition: opacity 0.4s;
}
/* Heat rolling out over the top of the door while it's open */
.ov-whoosh {
  opacity: 0;
  transition: opacity 0.2s;
}
.ov-whoosh path {
  stroke: var(--ink-soft);
  stroke-width: 3;
}
.is-door .ov-whoosh {
  opacity: 0.7;
}

/* The knife */
.ov-knife {
  transition: transform 0.38s cubic-bezier(0.5, 0, 0.9, 0.6);
}
.ov-knife__blade {
  fill: #e3e8ec;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.ov-knife__edge {
  stroke: var(--white);
  stroke-width: 1.5;
}
.ov-knife__bolster {
  fill: #9aa0a6;
  stroke: var(--ink);
  stroke-width: 2;
}
.ov-knife__handle {
  fill: #6b3f22;
  stroke: var(--ink);
  stroke-width: 2;
}

.ov-hint {
  font: 700 17px var(--font-display);
  fill: var(--white);
  opacity: 0.9;
  pointer-events: none;
}

/* The medal, hung on the door handle when the dish comes out */
.ov-medal {
  display: none;
  pointer-events: none;
}
.ov-medal.is-on {
  display: inline;
}
.ov-medal__ribbon {
  fill: #2f6fd6;
  stroke: var(--ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.ov-medal__disc,
.ov-medal__inner {
  stroke: var(--ink);
  stroke-width: 2.5;
}
.ov-medal__disc {
  fill: #f5c518;
}
.ov-medal__inner {
  fill: #ffe27a;
  stroke-width: 1.5;
}
.ov-medal.is-silver .ov-medal__disc {
  fill: #b9c0c7;
}
.ov-medal.is-silver .ov-medal__inner {
  fill: #e6eaee;
}
.ov-medal.is-bronze .ov-medal__disc {
  fill: #c27c3e;
}
.ov-medal.is-bronze .ov-medal__inner {
  fill: #e3a76f;
}
.ov-medal__num {
  font: 700 17px var(--font-display);
  fill: var(--ink);
}

/* Medals won so far, under the game */
.ov-tally {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
}
.ov-tally__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ov-tally__item i {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: #f5c518;
}
.ov-tally__item--silver i {
  background: #b9c0c7;
}
.ov-tally__item--bronze i {
  background: #c27c3e;
}

@media (max-width: 600px) {
  .ov-clock {
    font-size: 24px;
  }
  .ov-temp {
    font-size: 17px;
  }
  .ov-hint {
    font-size: 22px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .is-baking .ov-bubbles circle {
    animation: ov-pop 1.1s ease-out infinite;
  }
  .ov-steam path {
    animation: steam 2s ease-in-out infinite;
  }
  .ov-steam path:nth-child(2) { animation-delay: 0.5s; }
  .ov-steam path:nth-child(3) { animation-delay: 1s; }
  .ov-steam path:nth-child(4) { animation-delay: 1.5s; }
  .ov-smoke path {
    animation: steam 2.6s ease-in-out infinite;
  }
  .ov-smoke path:nth-child(2) { animation-delay: 0.8s; }
  .is-door .ov-whoosh path {
    animation: steam 0.9s ease-in-out infinite;
  }
  .ov-knife[data-level="stick"].is-in {
    animation: ov-wobble 0.3s 0.4s 2;
  }
  .ov-medal.is-on {
    animation: ov-drop 0.6s var(--ease-spring);
  }
  .is-baking:not(.is-open) .ov-foil {
    animation: ov-puff 1.4s ease-in-out infinite;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ov-knife,
  .ov-foil {
    transition: none;
  }
}
@keyframes ov-pop {
  0% { scale: 0.2; opacity: 1; }
  80% { scale: 1.1; opacity: 0.9; }
  100% { scale: 1.3; opacity: 0; }
}
@keyframes ov-wobble {
  25% { rotate: -4deg; }
  75% { rotate: 4deg; }
}
@keyframes ov-drop {
  from { translate: 0 -70px; opacity: 0; }
  60% { opacity: 1; }
}
/* The foil breathes a little as the steam builds under it */
@keyframes ov-puff {
  0%, 100% { scale: 1 1; }
  50% { scale: 1 calc(1 + var(--heat, 1) * 0.012); }
}