body {
	font-size: 14px;
}

.scene-container {
  width: 100%;
  max-width: 375px;
  height: 100%;
  max-height: 667px;
  overflow: auto;
  background-position: center bottom;
  position: relative;
  background-size:cover;

  display: flex;
  justify-content:center;
  align-items:center;
}
.bottom-bar {
  width: 100%;
  max-width: 375px;
  height: 60px;
  position: absolute;

  display: flex;
  justify-content:center;
  align-items:center; 
  background:rgba(0,0,0,0);
  z-index: 1;
  bottom: 25px;
}

.dialog-box {
  background:white;
  width:90%;
  z-index:4;
  display: flex;
  position: absolute;
  left:5%;

  background: url(../res/img/unity-WhiteClouds.png);
  background-size: 100% 100%;
  padding: 50px 20px 20px;
  filter: drop-shadow(6px 6px 12px rgba(0, 0, 0, 0.2));
}
.dialog-box h6.brain-label {
	background: url(../res/img/unity-Flag.png);
  background-size: 100% 100%;
  padding: 25px 0 30px;
  color: white;
  text-align: center;
  margin: -40px auto 0;
  position: relative;
  font-weight: bolder;
}
.r.dialog-box {
  flex-direction: row-reverse;
}

.dialog-box img {
  width: 50px;
  border-radius: 12px;
}
.clue-word {
  background:white;
  border:2px solid #888;
  border-radius:6px;
  position:absolute;
}

input[type=text] {
  background: transparent;
  border: none;
  border-bottom: 1px solid white;
  border-radius: 0;
}

.hand-pointer {
  --animate-duration: 3s;
}


.bg-button {
  background: url('../res/img/unity-Red.png') no-repeat;
  background-size: 100% 100%;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 1em;
}
.bg-button:hover {
  text-decoration: none;
  color: white;
}


.draggable {
  height: 100px;
  padding: 7px;
  /*overflow: auto;*/
  touch-action: none;
}
.draggable img {
  cursor: pointer;
  /*max-height: 60px;*/
}
.droppable {
  border:2px dashed white;
  width:50px;height:50px;
  border-radius:6px;
  cursor:pointer;
}

.draggable-container {
  position: absolute;
  z-index: 2;
  left: calc( 50% - 45px );
  top: 40px;
}