@charset "UTF-8";

@import "base";
@import "popup";

body{
  background: url('./assets/bg_01.jpg') center top no-repeat;
  background-color: #0c0315;
  overflow: auto;
}

#app{
	height: 100%;
	-webkit-overflow-scrolling: touch;
}

.game-wrap{
  position: relative;
  padding-top: 58px;
  @media #{$phone} {
    padding-top: px2rem(88);
  }
}

.game-help-icon{
  display: inline-block;
  vertical-align: middle;
  background: url('assets/icon_question.png');
  width: px2rem(19);
  height: px2rem(19);
  background-size: 100%;
  cursor: pointer;
}
.game-question-icon{
  display: inline-block;
  vertical-align: middle;
  background: url('components/game/img/icon_q.png');
  width: px2rem(34);
  height: px2rem(34);
  background-size: 100%;
  cursor: pointer;
}
.game-gt-icon{
  display: inline-block;
  vertical-align: middle;
  background: url('assets/icon_b_gt.png') no-repeat;
  width: px2rem(26);
  height: px2rem(26);
  background-size: 100%;
}
.game-eos-icon{
  display: inline-block;
  vertical-align: middle;
  background: url('assets/icon_b_eos.png') no-repeat;
  width: px2rem(18);
  height: px2rem(27);
  background-size: 100%;
}

body{
  .el-message-box{
    background-color: #395497;
    border-color: #2b416e;
    border-radius: 15px;
    box-shadow: 0 0 5px rgba(#12223c, 0.75);
  }
  .el-message-box__title{
    color: #ffffff;
  }
  .el-message-box__content{
    color: #ffffff;
  }
  .el-message-box__headerbtn{
    .el-message-box__close{
      color: #ffffff;
    }
  }
  @media #{$phone} {
    .el-message-box{
      width: 80%;
    }
  }
}

// 弹窗样式
.pub-modal{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba($color: #000000, $alpha: .6);
  display: flex;
  justify-content: center;
  align-items: center;
  .modal{
    display: inline-block;
    vertical-align: middle;
    min-width: px2rem(484);
    background-color: #294a6e;
    border: 4px solid #b38bd2;
    border-radius: 14px;
    position: relative;
    z-index: 1000;
    padding: px2rem(16) px2rem(48);
    box-sizing: border-box;
    .title{
      text-align: center;
      font-size: px2rem(24);
      color: #ffffff;
      span{
        display: inline-block;
        border-bottom: 2px solid #ffffff;
        padding: px2rem(10) px2rem(4);
      }
    }
    .content{
      margin-top: px2rem(30);
    }
  }
  .close-icon{
    cursor: pointer;
    background: url('assets/modal-close-icon.png') center center no-repeat;
    background-size: 100%;
    width: px2rem(25);
    height: px2rem(25);
    position: absolute;
    top: px2rem(12);
    right: px2rem(12);
  }
  @media #{$phone} {
    .modal {
      width: 80%;
      padding: px2rem(30) px2rem(60);
      .title{
        font-size: px2rem(32);
      }
    }
  }
}

@import "moblie";