.dialog_characters {
  z-index: 11;
}

img.character {
  max-width: none;
  display: inline;
  vertical-align: baseline;
}

.dialog_characters .comic_bubble { 
  bottom: 500px; 
  opacity: 0;
  max-width: 200px;
}
.dialog_characters .left_talker, .dialog_characters .right_talker { 
  position: absolute;
  bottom: 0px;
}
#field_outer.wide .dialog_characters .left_talker, #field_outer.wide .dialog_characters .right_talker {
  
  position: fixed;
}
.dialog_characters .left_talker {
  left: -20px;
  transform: translateX(-500px);
}
.dialog_characters .left_talker .comic_bubble { left: 60px; }
.dialog_characters .right_talker {
  right: -20px;
  transform: translateX(500px);
}
.dialog_characters .right_talker .comic_bubble { right: 80px; }
#villagers_welcome, #villagers_farewell { display: none; }

.character_scaler {
  position: absolute;
  bottom: -0.15cqw;
  transform: scale(calc(0.8 / var(--cqw_px_ratio)));

  &.right {
    right: 0;
    transform-origin: bottom right;
  }

  &.left {
    left: 0;
    transform-origin: bottom left;
  }
}


#order_characters .man { 
  position: relative;
  bottom: -30px;
  left: -60px;
  width: 420px;
}

#order_characters .lady { 
  position: relative;
  bottom: -30px;
  right: 0px;
  width: 375px;
}

#order_characters .right_talker .comic_bubble {
  transform: translateX(30px);
}

#order_characters .pipe {
  animation: man_pipe 15s ease infinite;
  background: url("/assets/components/order_characters/order_man_pipe-7c17d7ec.png");
  background-size: 100%;
  height: 50px;
  position: absolute;
    top: 195px;
    left: 214px;
  transform-origin: 0% 10%;
  width: 140px;
}

#order_characters .smoke {
  animation: pipe_smoke 10s ease infinite;
  background: url("/assets/components/order_characters/order_man_smoke-c2ad579b.png") no-repeat center;
  background-size: contain;
  height: 50px;
  margin-top: -27px;
  margin-left: -24px;
  opacity: 0;
  position: absolute;
  top: 10%;
  left: 90%;
  width: 50px;
}

#order_characters .smoke:nth-child(2) {
  animation: pipe_smoke 22s ease infinite;
  animation-delay: 3s;
  height: 60px;
  width: 60px;
}

#order_characters .smoke:nth-child(3) {
  animation: pipe_smoke 14s ease infinite;
  animation-delay: 8s;
  height: 70px;
  width: 70px;
}

#order_characters .smoke:nth-child(4) {
  animation: pipe_smoke 36s ease infinite;
  animation-delay: 12s;
  height: 80px;
  width: 80px;
}

@keyframes man_pipe {
  0% { transform: rotate(33deg); }
  50% { transform: rotate(44deg); }
  100% { transform: rotate(33deg); }
}

@keyframes pipe_smoke {
  0% { 
    opacity: 0;
    transform: scale(1) translate(0,0) rotate(0deg);  
  }
  20% { opacity: 1; }
  100% { 
    opacity: 0;
    transform: scale(3) translate(-30px,-50px) rotate(180deg);  
  }
}