/* Spud & Root recipe game: Order up!, the burrito-bowl game on the Chipotle
   Potato and Cauliflower Rice Burrito Bowls page. Only that page loads this
   file, after recipe.css. The box, message, tiled wall, result stamp, hint
   text, the speech bubble, the clock bar and the steam keyframes are shared
   with the other games and stay in recipe.css ("Games"). */

/* The manager stands at the end of the counter; he mustn't catch a tap */
.ou-svg .sp,
.ou-svg [data-fly],
.ou-svg .ou-bubble,
.ou-svg .ou-tk,
.ou-svg .ou-rail,
.ou-svg .ou-pips,
.ou-svg .ou-jar,
.ou-svg .ou-window,
.ou-svg .ou-eotm,
.ou-svg .ou-table,
.ou-svg .ou-table__edge,
.ou-svg .ou-tag,
.ou-svg .ou-bowl {
  pointer-events: none;
}
.ou-svg:focus-visible {
  outline: 3px solid var(--dish-deep);
  outline-offset: -3px;
}
/* While a shift runs, a swipe on the drawing drags a scoop rather than
   scrolling the page (as in the belt and roasting games) */
.ou-svg.is-running {
  touch-action: none;
}

/* The pick-up window, with an awning and papel picado */
.ou-frame {
  fill: #6b4524;
  stroke: var(--ink);
  stroke-width: 3;
}
.ou-room {
  fill: #fdf0d2;
}
.ou-string {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.4;
}
.ou-sill {
  fill: #c9ced3;
  stroke: var(--ink);
  stroke-width: 3;
}
.ou-awning {
  fill: #e5322d;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}
.ou-awning__stripes {
  fill: none;
  stroke: #fff8ea;
  stroke-width: 9;
}
/* The sign that hangs in the window when it's closed */
.ou-sign rect {
  fill: #fffdf6;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.ou-sign text {
  font: 700 15px var(--font-display);
  letter-spacing: 0.06em;
  fill: #e5322d;
}
.ou-sign__cord {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
}
.ou-sign {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transition: opacity 0.3s;
}
.ou-svg.is-open .ou-sign {
  opacity: 0;
}

/* The customer, and how they feel */
.ou-cust image {
  image-rendering: auto;
}
.ou-feel {
  display: none;
  transform-box: fill-box;
  transform-origin: center;
}
.ou-window.is-happy .ou-feel--happy,
.ou-window.is-meh .ou-feel--meh,
.ou-window.is-wait .ou-feel--wait,
.ou-window.is-mad .ou-feel--mad {
  display: inline;
}
.ou-feel--happy path {
  fill: #ff5c7a;
  stroke: var(--ink);
  stroke-width: 1.6;
}
.ou-feel--meh text {
  font: 700 26px var(--font-display);
  fill: #a35f00;
  stroke: #fffdf6;
  stroke-width: 4;
  paint-order: stroke;
}
.ou-feel--wait circle {
  fill: var(--ink-soft);
}
.ou-feel--mad path:first-child {
  fill: #d9d9d9;
  stroke: var(--ink);
  stroke-width: 1.6;
}
.ou-feel--mad path:last-child {
  fill: none;
  stroke: #e5322d;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* The customer's speech bubble */
.ou-bubble__box,
.ou-bubble__tail {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ou-bubble__cover {
  stroke: var(--white);
  stroke-width: 3.5;
}
.ou-bubble text {
  font: 600 14px var(--font-display);
  fill: var(--ink);
}
.ou-bubble {
  transform-box: fill-box;
  transform-origin: 30% 100%;
  transition: opacity 0.2s;
}
.ou-bubble.is-hidden {
  opacity: 0;
}

/* The five customers of the shift: green perfect, amber close, red wrong,
   grey walked out */
.ou-pip circle {
  fill: #fffdf6;
  stroke: var(--ink);
  stroke-width: 2;
  transition: fill 0.2s;
}
.ou-pip path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: none;
}
.ou-pip.is-now circle {
  fill: #fff2b8;
  stroke-width: 3;
}
.ou-pip.is-perfect circle {
  fill: #97d700;
}
.ou-pip.is-close circle {
  fill: var(--potato-gold);
}
.ou-pip.is-wrong circle {
  fill: #ff4438;
}
.ou-pip.is-walked circle {
  fill: #a9a3a0;
}
.ou-pip.is-perfect .ou-pip__tick,
.ou-pip.is-close .ou-pip__tick,
.ou-pip.is-wrong .ou-pip__x,
.ou-pip.is-walked .ou-pip__dash {
  display: inline;
}

/* The ticket on the rail, with the patience clock */
.ou-rail {
  fill: none;
  stroke: #9aa0a6;
  stroke-width: 5;
  stroke-linecap: round;
}
.ou-tk {
  opacity: 0;
  translate: 0 -12px;
  transition: opacity 0.25s, translate 0.35s var(--ease-spring);
}
.ou-tk.is-on {
  opacity: 1;
  translate: 0 0;
}
.ou-tk__paper {
  fill: #fffdf6;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ou-tk__clip {
  fill: #9aa0a6;
  stroke: var(--ink);
  stroke-width: 2;
}
.ou-tk__num {
  font: 700 16px var(--font-display);
  fill: var(--ink);
}
.ou-tk__who {
  font: 700 11px var(--font-body);
  letter-spacing: 0.04em;
  fill: var(--ink);
}
.ou-tk__clock {
  font: 700 26px var(--font-display);
  fill: var(--ink);
}

/* Employee of the Month: a perfect shift */
.ou-eotm {
  display: none;
}
.ou-svg.is-eotm .ou-eotm {
  display: inline;
}
.ou-eotm__frame {
  fill: #f5b819;
  stroke: var(--ink);
  stroke-width: 3;
}
.ou-eotm__mat {
  fill: #fffdf6;
  stroke: #b98b1c;
  stroke-width: 2;
}
.ou-eotm__star {
  fill: #ffde00;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ou-eotm__text {
  font: 700 10.5px var(--font-display);
  letter-spacing: 0.04em;
  fill: var(--ink);
}

/* The tip jar and the bell */
.ou-jar__glass {
  fill: rgba(220, 236, 242, 0.75);
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ou-jar__fill {
  fill: #97d700;
  opacity: 0.8;
  transition: y 0.4s var(--ease-out), height 0.4s var(--ease-out);
}
.ou-jar__lid {
  fill: #9aa0a6;
  stroke: var(--ink);
  stroke-width: 2;
}
.ou-jar__amt {
  font: 700 13px var(--font-display);
  fill: var(--ink);
  stroke: #fffdf6;
  stroke-width: 3;
  paint-order: stroke;
}
.ou-jar__amt.is-bump {
  transform-box: fill-box;
  transform-origin: center;
  animation: ou-bump 0.45s var(--ease-spring);
}
.ou-bell__base {
  fill: #3b3a3c;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.ou-bell__dome {
  fill: #f5c542;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ou-bell__knob {
  fill: #c9ced3;
  stroke: var(--ink);
  stroke-width: 2;
}
.ou-bell__hi {
  fill: none;
  stroke: #fff6c8;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.ou-hit {
  fill: transparent;
  pointer-events: all;
}
.ou-bell {
  cursor: pointer;
}
.ou-bell .ou-bell__knob {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.ou-bell .ou-bell__dome {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* The trash can (toss the bowl) and the pause button on the wall */
.ou-trash,
.ou-pause {
  cursor: pointer;
  transition: opacity 0.2s;
}
.ou-trash__can,
.ou-trash__lid {
  fill: #9aa0a6;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.ou-trash__ribs {
  fill: none;
  stroke: #6b7076;
  stroke-width: 2;
  stroke-linecap: round;
}
.ou-pause__btn {
  fill: var(--potato-gold);
  stroke: var(--ink);
  stroke-width: 3;
}
.ou-pause__bars {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}
.ou-pause__play {
  display: none;
  fill: var(--ink);
}
.ou-svg.is-paused .ou-pause__bars {
  display: none;
}
.ou-svg.is-paused .ou-pause__play {
  display: inline;
}
/* The pause button is only on the wall during a shift */
.ou-pause {
  display: none;
}
.ou-svg.is-running .ou-pause,
.ou-svg.is-paused .ou-pause {
  display: inline;
}
/* Between customers, and on break, the bell and the trash do nothing */
.ou-svg.is-between .ou-bell,
.ou-svg.is-between .ou-trash {
  opacity: 0.45;
  cursor: default;
}
.ou-trash.is-sel .ou-sel,
.ou-bell.is-sel .ou-sel,
.ou-pause.is-sel .ou-sel {
  display: inline;
}

/* The bowl */
.ou-bowl__body,
.ou-bowl__rim,
.ou-bowl__foot {
  fill: #fffdf6;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.ou-bowl__shade {
  fill: #ece6d8;
}
.ou-bowl__in {
  fill: #efe9db;
}
.ou-bowl__lip {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linecap: round;
}
.ou-bowl.is-away {
  opacity: 0;
}
.ou-bowl {
  transition: opacity 0.3s;
}
.ou-ghost {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.ou-scoop {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* Where a dragged scoop can be dropped */
.ou-drop {
  fill: rgba(151, 215, 0, 0.16);
  stroke: #5a9b00;
  stroke-width: 3;
  stroke-dasharray: 8 6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, fill 0.15s;
}
.ou-svg.is-dragging .ou-drop {
  opacity: 0.7;
}
.ou-svg.is-dragging.is-over .ou-drop {
  opacity: 1;
  fill: rgba(151, 215, 0, 0.32);
}

/* The line: a steel steam table with nine bins set into it */
.ou-table {
  fill: #b9bec4;
}
.ou-table__edge {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}
.ou-pan {
  fill: #dfe3e7;
  stroke: var(--ink);
  stroke-width: 2.5;
}
.ou-pan__in {
  fill: #8d949b;
}
.ou-bin {
  cursor: pointer;
}
.ou-sel {
  display: none;
  fill: rgba(255, 184, 27, 0.22);
  stroke: #e08a00;
  stroke-width: 2.5;
  stroke-dasharray: 5 4;
  pointer-events: none;
}
.ou-bin.is-sel .ou-sel {
  display: inline;
}
.ou-svg.is-running .ou-bin:hover .ou-food {
  translate: 0 -2px;
}
.ou-food {
  transition: translate 0.15s;
}
.ou-flyer {
  pointer-events: none;
}
.ou-flyer.is-dragged {
  filter: drop-shadow(0 6px 4px rgba(35, 31, 32, 0.3));
}
.ou-tag {
  font: 700 13px var(--font-display);
  letter-spacing: 0.04em;
  fill: var(--ink);
  stroke: #fffaf0;
  stroke-width: 4;
  paint-order: stroke;
  stroke-linejoin: round;
}

/* The ticket under the drawing: the order, line by line */
.ou-ticket {
  position: relative;
  padding: 12px 16px 14px;
  background: #fffdf6;
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 3px 3px 0 var(--ink);
}
.ou-ticket[hidden] {
  display: none;
}
.ou-ticket__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px dashed #d6ccb6;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.ou-ticket__no {
  color: var(--dish-deep);
}
.ou-ticket__of {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.ou-ticket ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ou-ticket li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
}
.ou-ticket li > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Blank lines, so every ticket is the same height */
.ou-ticket li.is-pad {
  visibility: hidden;
}
.ou-ticket__head b {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ou-ticket__head {
  white-space: nowrap;
}
/* The last order stays up, greyed, until the next customer's ticket */
.ou-ticket.is-closed ul {
  opacity: 0.4;
}
.ou-ticket.is-closed .ou-ticket__of {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.ou-ticket.is-perfect .ou-ticket__of {
  color: var(--good);
}
.ou-ticket.is-wrong .ou-ticket__of,
.ou-ticket.is-walked .ou-ticket__of {
  color: #b3261e;
}
/* The message under the game keeps two lines' room, so nothing below it
   moves as it changes */
.rp-order .rp-slicer__msg {
  min-height: 2.8em;
  line-height: 1.4;
}
.ou-ico {
  flex: none;
  width: 40px;
  height: 22px;
}
.ou-ticket__mark {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 1.15rem;
}
.ou-ticket__n {
  font-weight: 700;
  color: var(--dish-deep);
}
.ou-ticket li.is-extra span {
  font-weight: 700;
}
.ou-ticket li.is-done .ou-ticket__mark {
  color: var(--good);
}
.ou-ticket li.is-done span {
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}
.ou-ticket li.is-nope span {
  color: #b3261e;
  font-weight: 700;
}
.ou-ticket li.is-nope .ou-ico {
  opacity: 0.45;
  filter: grayscale(1);
}
.ou-ticket li.is-over {
  color: #b3261e;
}
.ou-ticket li.is-over .ou-ticket__mark {
  color: #b3261e;
}
.ou-tally {
  margin: 0;
  color: var(--ink-soft);
}

@media (max-width: 600px) {
  .ou-tag {
    font-size: 17px;
  }
  .ou-bubble text {
    font-size: 17px;
  }
  .ou-tk__clock {
    font-size: 30px;
  }
  .ou-tk__who {
    font-size: 12px;
  }
  .ou-jar__amt {
    font-size: 16px;
  }
  .ou-ticket {
    padding: 10px 12px 12px;
  }
  .ou-ticket ul {
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
  }
  .ou-ticket li {
    min-height: 26px;
    font-size: 0.84rem;
    line-height: 1.2;
    gap: 4px;
  }
  .ou-ico {
    width: 26px;
    height: 15px;
  }
  .ou-ticket__mark {
    margin-left: 2px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ou-bell.is-ding .ou-bell__knob {
    animation: ou-press 0.25s ease-out;
  }
  .ou-bell.is-ding .ou-bell__dome {
    animation: ou-ring 0.5s ease-out;
  }
  .ou-scoop.is-new {
    animation: ou-land 0.35s var(--ease-spring);
  }
  .ou-bubble.is-new {
    animation: bubble-pop 0.35s var(--ease-spring);
  }
  .ou-window.is-wait .ou-cust {
    animation: ou-fidget 0.9s ease-in-out infinite;
  }
  .ou-window.is-mad .ou-cust {
    animation: tremble 0.12s steps(2) infinite;
  }
  .ou-window.is-happy .ou-cust {
    animation: ou-hop 0.5s var(--ease-spring) 2;
  }
  .ou-cust.is-stomp {
    animation: ou-stomp 0.3s ease-in-out 2;
  }
  .ou-feel--happy {
    animation: ou-float 1.2s ease-out infinite;
  }
  .ou-feel--mad {
    animation: ou-puff 0.8s ease-in-out infinite;
  }
  .ou-feel--wait circle {
    animation: ou-dots 1.2s ease-in-out infinite;
  }
  .ou-feel--wait circle:nth-child(2) { animation-delay: 0.2s; }
  .ou-feel--wait circle:nth-child(3) { animation-delay: 0.4s; }
  .ou-svg.is-ready .ou-sign,
  .ou-svg.is-eotm .ou-eotm {
    animation: ou-swing 2.4s ease-in-out infinite;
  }
  .ou-svg.is-eotm .ou-eotm {
    transform-box: fill-box;
    transform-origin: 50% 0;
  }
}
.ou-svg.is-paused .ou-cust,
.ou-svg.is-paused .ou-feel {
  animation-play-state: paused;
}
@keyframes ou-land {
  from { translate: 0 -24px; opacity: 0; }
  60% { opacity: 1; }
}
@keyframes ou-bump {
  40% { scale: 1.4; }
}
@keyframes ou-press {
  50% { translate: 0 3px; }
}
@keyframes ou-ring {
  25% { rotate: -6deg; }
  50% { rotate: 5deg; }
  75% { rotate: -3deg; }
}
@keyframes ou-fidget {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -3px; }
}
@keyframes ou-hop {
  40% { translate: 0 -8px; }
}
@keyframes ou-stomp {
  50% { translate: 0 4px; }
}
@keyframes ou-float {
  from { translate: 0 0; opacity: 1; }
  to { translate: 0 -10px; opacity: 0.2; }
}
@keyframes ou-puff {
  50% { scale: 1.12; }
}
@keyframes ou-dots {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes ou-swing {
  0%, 100% { rotate: -2deg; }
  50% { rotate: 2deg; }
}