@font-face {
  font-family: arialRound;
  src: url('../../assets/talk/ArialRoundedBold.woff');
}

.body-bg {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-image: url('../../assets/player-bg.png') !important;
  background-size: 100%;
}

.player-border{
  position: absolute;
  left: calc((100% - 100vh * 1.36)/ 2);
  top: 5vh;
  right: calc((100% - 100vh * 1.36)/ 2);
  bottom: 5vh;
  text-align: center;
  // box-shadow: 0 2px 12px 0 rgba(0,0,0,.3);
  border-radius: 11px;
  border: 20px solid #23b1c2;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  transition: .3s;
}


.player-preview-content{

  width: 100%;
  padding: 0 2em;
  height: 100%;
  position: relative;
  font-family: arialRound;
  background-size: 100%;
  background-position-y: 18.4%;
  background-image: url('../../assets/talk/bg2.png');
  font-size: 2.5vh;
  background-position: 50% 100%;
  background-repeat: no-repeat;

  .all-talk-wrap{
    position: absolute;
    right: 7.5%;
    top: 23%;
    text-align: left;
    width: 18%;
    word-wrap: break-word;
    height: 59%;
    overflow: hidden;
    z-index: 99;
    .all-talk-box{
      position: relative;
      height: 100%;
      /*font-size: 0.8rem;*/
      overflow-y: scroll;
      margin-right: -20px;
      .talk-list{
        list-style: none;
        padding: 0;
        margin: 0;
        padding: 0 1em 0 0;
      }
      .talk-list li{
        display: inline-flex;
        word-break: break-word;
        line-height: 2rem;
      }
    }
  }
  .monster-talk{
    width: 100%;
    padding-right: 12em;
    height: 100%;
    padding-bottom: 10%;
    position: relative;
    display: flex;
    flex-direction: row;
    .monster-talk-wrap{
      flex: 1;
      position: relative;
      display: flex;
      .talk-bubble-box{
        flex: 1;
        position: relative;
      }
      .A-role, .B-role{
        /*bottom: 0;
        position: absolute;
        left: 5%;
        padding-bottom: inherit;
        clear:both;*/
        flex: 0 0 25%;
        position: relative;

      }
      .B-role{
        /*right: 0%;
        left: auto;
        padding-right: inherit;*/
      }
      .A-avatar, .B-avatar{
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        /*width: 8rem;
        height: 10rem;*/
        width: 100%;
        padding-top: 125%;
        font-weight: 900;
        position: absolute;
        bottom: 0;
      }
      .A-avatar{
        background-image: url('../../assets/talk/A.png')
      }
      .B-avatar{
        /*right: 0;
        float: right;*/
        background-image: url('../../assets/talk/B.png')
      }

      .A-text-wrap, .B-text-wrap{
        position: relative;
      }
      .A-text-wrap {
        /*float: right;*/
        /*transform: translate(-15% ,-15%);*/
        /*transform: translate(52%, 29%);*/
        position: absolute;
        max-width: 100%;
        /*left: 26%;*/
        top: 61%;
      }
      .B-text-wrap {
        /*float: right;8/
        /*transform: translate(6%, 130%);*/
        /*transform: translate(-93%, -29%);*/
        position: absolute;
        max-width: 100%;
        /*right: 45%;*/
        top: 61%;
        right: 0;
        z-index: 2;
        .talktext{
          padding: 1em;
        }
      }
      .A-text-wrap:before{
        content: url('../../assets/talk/left_tri.png');
        /*top: 34.5%;
        position: absolute;
        left: 88%;*/
        top: 61.5%;
        position: absolute;
        left: 0;
        z-index: 2;
        transform: translateX(-20px);
        z-index: 2;
      }
      .B-text-wrap:before{
        content: url('../../assets/talk/right_tri.png');
        top: 47.5%;
        position: absolute;
        right: 0;
        transform: translateX(18px);
        z-index: 2;
      }
      .talk-bubble{
        width: 100%;
        height: 100%;
        text-align: left;
        display: inline-block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }
      .talktext{
        padding: 1em;
        text-align: left;
        line-height: 1.5rem;
        position: relative;
        word-break: break-word;
        z-index: 1;
      }
      .talktext p{
        -webkit-margin-before: 0em;
        -webkit-margin-after: 0em;
      }
    }

  }
}

:host ::ng-deep {
  @keyframes move-up {
    0% {
      top: 78%
    }
    100% {
      top: 61%
    }
  }
}
