encounter {
  width: 500px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 50%;
  margin-left:-250px;
  display: block;
  transition: opacity 0.5s ease;
  opacity: 1;
}

encounter.hide {
  opacity: 0;
}

encounter main {
  flex-direction: column;
  flex: 100%;
}

encounter block {
  position: relative;
}

encounter block > img {
  height: 250px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.3);
}

encounter block > person,
encounter block > costume {
  position: absolute;
  top: 0; left: 0;
  height: 250px;
  width: 100%;
  background-image: url('../img/people.png');
  background-repeat: no-repeat;
  background-size: 300%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}

encounter block > person[data-desire="-1"] { background-position: 0px 0px; }
encounter block > person[data-desire="0"] { background-position: -500px 0px; }
encounter block > person[data-desire="1"] { background-position: -1000px 0px; }

encounter block > costume[data-costume="0"] { background-position: 0px -250px; }
encounter block > costume[data-costume="1"] { background-position: -500px -250px; }
encounter block > costume[data-costume="2"] { background-position: -1000px -250px; }
encounter block > costume[data-costume="3"] { background-position: 0px -500px; }
encounter block > costume[data-costume="4"] { background-position: -500px -500px; }
encounter block > costume[data-costume="5"] { background-position: -1000px -500px; }

encounter block > person {
  z-index: 1;
}

encounter block > costume {
  z-index: 2;
}

encounter block > block {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 3;
}

encounter .environment, encounter .person {
  display: none;
}

encounter.environment person,
encounter.environment costume,
encounter.complete available,
encounter.complete trade-area,
encounter.complete button:not([data-intent=leave]) {
  display: none !important;
}

encounter.environment {
  background-color: #3b473b;
}

encounter.person {
  background-color: #6f4e36;
}

encounter.environment .environment {
  display: flex; 
}

encounter.person .person {
  display: flex;
}

encounter.flavor speech, encounter.environment speech {
  font-family: 'arial';
}

available {
  text-align: center;
}

available item-slot:not([data-id]) {
  display: none;
}

trade-area {
  flex: 160px 0 0;
  flex-direction: column;
  text-align: center;
  color: white;
}

offer, request {
  flex: 100%;
  align-items: center;
  justify-content: space-between;
}

available {
  flex-direction: column;
}

speech {
  font-family: 'symbols';
  display: block;
  white-space: pre-wrap;
  color: white;
}

speech strong {
  font-family: 'arial';
  font-weight: normal;
}

trade-area, speech {
  padding: 15px 15px 0;
}

interact {
  padding: 15px;
  justify-content: space-between;
}