/* Spud & Root recipe game: Room to roast, the spacing game on the Spicy
   Italian Roasted Potatoes page. Only that page loads this file, after
   recipe.css. The box, message, tiled wall, result stamp, hint text, the
   cop's mustache and the steam keyframes are shared with the other games and
   stay in recipe.css ("Games"). */

/* The cop stands beside the sheet; his raised glove mustn't catch a drag */
.rr-svg .sp {
  pointer-events: none;
}
/* While a tray is being laid out, dragging a cube must not scroll the page */
.rr-svg.is-building {
  touch-action: none;
}

/* The baking sheet: aluminium, with the inside a shade lighter */
.rr-sheet,
.rr-lip {
  fill: #cfd5da;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.rr-lip {
  fill: #aeb6bc;
}
.rr-floor {
  fill: #eef1f3;
  stroke: #8f9aa2;
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.rr-shine {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0.8;
}
.rr-sheet,
.rr-lip,
.rr-floor,
.rr-shine {
  pointer-events: none;
}

/* The bowl the cubes start in. It tips out when you tap the sheet. */
.rr-bowl {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.rr-svg:not(.is-ready):not(.is-tipping) .rr-bowl {
  display: none;
}
.rr-bowl__body {
  fill: #fffaf0;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linejoin: round;
}
.rr-bowl__in {
  fill: #e8dcc4;
  stroke: var(--ink);
  stroke-width: 4;
}
.rr-bowl__rim {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.rr-bowl .rr-top,
.rr-bowl .rr-front {
  stroke-width: 3;
}

.rr-svg.is-empty [data-cubes] {
  display: none;
}

/* A cube of seasoned white potato, from the front and above */
.rr-cube {
  cursor: grab;
  touch-action: none;
}
.rr-cube.is-glide {
  transition: transform 0.45s var(--ease-spring);
}
.rr-cube.is-held {
  cursor: grabbing;
}
.rr-lift {
  transform-box: fill-box;
  transform-origin: 50% 85%;
  transition: scale 0.15s var(--ease-out), translate 0.15s var(--ease-out);
}
.rr-cube.is-held .rr-lift {
  scale: 1.1;
  translate: 0 -6px;
}
.rr-front,
.rr-top {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transition: fill 1.2s ease-in;
}
.rr-top {
  fill: #f6e6a0;
}
.rr-front {
  fill: #ecd27c;
}
.rr-sheen {
  fill: none;
  stroke: #fff9dd;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.85;
}
.rr-fleck circle {
  fill: #4f8a2b;
}
.rr-speck circle {
  fill: #b69a52;
}
.rr-hit {
  fill: transparent;
  pointer-events: all;
}
/* Underneath, where it touches the sheet: tanning for a cube with room, wet
   and grey for one that's crowded */
.rr-shadow {
  fill: var(--ink);
  opacity: 0.16;
  transition: fill 0.3s, opacity 0.3s;
}
.rr-cube.is-room .rr-shadow {
  fill: #e0a53a;
  opacity: 0.75;
}
.rr-cube.is-crowded .rr-shadow {
  fill: #7f98a8;
  opacity: 0.5;
}
.rr-steam,
.rr-fizz {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.rr-steam path {
  fill: none;
  stroke: #8aa0b0;
  stroke-width: 3;
  stroke-linecap: round;
}
.rr-fizz circle {
  fill: rgba(243, 215, 126, 0.35);
  stroke: #e0a53a;
  stroke-width: 1.3;
  transform-box: fill-box;
  transform-origin: center;
}
.rr-cube.is-crowded .rr-steam,
.rr-cube.is-room .rr-fizz {
  opacity: 1;
}

/* Out of the oven: cubes with room are golden, crowded ones are pale and soft */
.rr-svg.is-roasted .is-room .rr-top {
  fill: #e3a63f;
}
.rr-svg.is-roasted .is-room .rr-front {
  fill: #c58625;
}
.rr-svg.is-roasted .is-room .rr-sheen {
  stroke: #f7d58c;
}
.rr-svg.is-roasted .is-crowded .rr-top {
  fill: #e4e1c4;
}
.rr-svg.is-roasted .is-crowded .rr-front {
  fill: #d2cea9;
}
.rr-svg.is-roasted .is-crowded .rr-sheen {
  opacity: 0.3;
}
.rr-glow {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
.rr-svg.is-roasting .rr-glow {
  opacity: 0.55;
}

/* The room a cube needs: a dashed outline while you hold it, green while it
   has room and red once it's crowding a neighbour */
.rr-halo {
  display: none;
  fill: rgba(151, 215, 0, 0.16);
  stroke: #5a9b00;
  stroke-width: 2.5;
  stroke-dasharray: 6 5;
  pointer-events: none;
}
.rr-halo.is-on {
  display: inline;
}
.rr-halo.is-bad {
  fill: rgba(255, 68, 56, 0.14);
  stroke: #d6281c;
}

/* One pip for each cube: green for the ones with room */
.rr-pip {
  fill: var(--cream);
  stroke: var(--ink);
  stroke-width: 2;
  transition: fill 0.2s;
}
.rr-pip.is-room {
  fill: #97d700;
}
.rr-pip.is-crowded {
  fill: #ffb27a;
}

.rr-svg:focus-visible {
  outline: 3px solid var(--dish-deep);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: no-preference) {
  .rr-svg.is-tipping .rr-bowl {
    animation: rr-tip 0.8s var(--ease-out) forwards;
  }
  .rr-lift.is-drop {
    animation: pn-drop 0.5s var(--ease-out) both;
    animation-delay: calc(0.3s + var(--i) * 35ms);
  }
  .rr-cube.is-crowded .rr-steam path {
    animation: steam 1.6s ease-in-out infinite;
  }
  .rr-cube.is-crowded .rr-steam path:nth-child(2) {
    animation-delay: 0.6s;
  }
  .rr-cube.is-room .rr-fizz circle {
    animation: rr-pop 1.1s ease-out infinite;
  }
  .rr-cube.is-room .rr-fizz circle:nth-child(2) {
    animation-delay: 0.4s;
  }
  .rr-cube.is-room .rr-fizz circle:nth-child(3) {
    animation-delay: 0.8s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rr-svg.is-tipping .rr-bowl {
    display: none;
  }
  .rr-front,
  .rr-top,
  .rr-glow {
    transition: none;
  }
}
@keyframes rr-tip {
  0% { rotate: 0deg; translate: 0 0; opacity: 1; }
  50% { rotate: -38deg; translate: -10px -12px; opacity: 1; }
  100% { rotate: -38deg; translate: -170px -90px; opacity: 0; }
}
@keyframes rr-pop {
  0% { scale: 0.2; opacity: 0; }
  30% { opacity: 1; }
  100% { scale: 1.5; opacity: 0; }
}