.screen-content[data-css-name="ResultXP"] {
  color: #E6E6E6;
  background-color: #000000;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] {
    background-color: #332F2E;
  }
}
.screen-content[data-css-name="ResultXP"] .btn-next {
  position: absolute;
  bottom: 14.11vh;
  left: calc(50vw - 440px / 2);
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .btn-next {
    bottom: 40px;
    left: calc(50vw - 161.74px / 2);
  }
}
.screen-content[data-css-name="ResultXP"] h1 {
  font-size: 60px;
  font-weight: lighter;
  margin: 14.44vh 0 0;
  text-align: center;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] h1 {
    font-size: 30px;
    margin: 82px 0 0;
  }
}
.screen-content[data-css-name="ResultXP"] h4 {
  font-size: 30px;
  font-weight: lighter;
  text-align: center;
  margin: 0;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] h4 {
    font-size: 14px;
    margin: 14px 0 0;
  }
}
.screen-content[data-css-name="ResultXP"] .result-ai,
.screen-content[data-css-name="ResultXP"] .result-player {
  width: 240px;
  text-align: center;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .result-ai,
  .screen-content[data-css-name="ResultXP"] .result-player {
    width: calc(50vw - 56px);
  }
}
.screen-content[data-css-name="ResultXP"] .result-ai .result_name,
.screen-content[data-css-name="ResultXP"] .result-player .result_name {
  height: 25px;
  font-size: 20px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .result-ai .result_name,
  .screen-content[data-css-name="ResultXP"] .result-player .result_name {
    font-size: 14px;
  }
}
.screen-content[data-css-name="ResultXP"] .result-ai .result_accuracy,
.screen-content[data-css-name="ResultXP"] .result-player .result_accuracy {
  font-size: 60px;
  font-weight: lighter;
  border-bottom: 2px solid white;
  padding: 15px 0;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .result-ai .result_accuracy,
  .screen-content[data-css-name="ResultXP"] .result-player .result_accuracy {
    font-size: 30px;
    border-bottom: 1px solid white;
  }
}
.screen-content[data-css-name="ResultXP"] .result-ai .result_point,
.screen-content[data-css-name="ResultXP"] .result-player .result_point {
  font-size: 60px;
  font-weight: lighter;
  padding-top: 10px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .result-ai .result_point,
  .screen-content[data-css-name="ResultXP"] .result-player .result_point {
    font-size: 30px;
  }
}
.screen-content[data-css-name="ResultXP"] .result-ai .result_icon,
.screen-content[data-css-name="ResultXP"] .result-player .result_icon {
  width: 138px;
  height: 116px;
  margin: auto;
  margin-bottom: 30px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .result-ai .result_icon,
  .screen-content[data-css-name="ResultXP"] .result-player .result_icon {
    width: 69px;
    height: 58px;
    margin-bottom: 10px;
  }
}
.screen-content[data-css-name="ResultXP"] .result-ai .result_rank,
.screen-content[data-css-name="ResultXP"] .result-player .result_rank {
  width: 80px;
  height: 50px;
  margin: auto;
  margin-bottom: 20px;
}
.screen-content[data-css-name="ResultXP"] .result-ai .result_rank[data-rank="1st"],
.screen-content[data-css-name="ResultXP"] .result-player .result_rank[data-rank="1st"] {
  background: url(/images/rank_1st.png) center no-repeat;
}
.screen-content[data-css-name="ResultXP"] .result-ai .result_rank[data-rank="2nd"],
.screen-content[data-css-name="ResultXP"] .result-player .result_rank[data-rank="2nd"] {
  background: url(/images/rank_2nd.png) center no-repeat;
}
.screen-content[data-css-name="ResultXP"] .result-ai {
  position: absolute;
  top: 33.47vh;
  right: 50vw;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .result-ai {
    top: 205px;
  }
}
.screen-content[data-css-name="ResultXP"] .result-ai .result_icon {
  background: url(/images/icon_ai.png) center no-repeat;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .result-ai .result_icon {
    background-size: contain;
  }
}
.screen-content[data-css-name="ResultXP"] .result-player {
  position: absolute;
  top: 33.47vh;
  left: 50vw;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .result-player {
    top: 205px;
  }
}
.screen-content[data-css-name="ResultXP"] .result-player .result_icon {
  background: url(/images/icon_player.png) center no-repeat;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .result-player .result_icon {
    background-size: contain;
  }
}
.screen-content[data-css-name="ResultXP"] .result-player .title-accuracy {
  position: relative;
  right: -80%;
  font-size: 30px;
  font-weight: lighter;
  top: -160px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .result-player .title-accuracy {
    right: -70%;
    font-size: 14px;
    top: -95px;
    width: 80px;
  }
}
.screen-content[data-css-name="ResultXP"] .result-player .title-point {
  position: relative;
  right: -80%;
  font-size: 30px;
  font-weight: lighter;
  top: -95px;
}
@media only screen and (max-width: 480px) {
  .screen-content[data-css-name="ResultXP"] .result-player .title-point {
    right: -70%;
    font-size: 14px;
    top: -45px;
    width: 80px;
  }
}