@import '~bemuse/ui/common';

.ResultScene {
  @include scene-background(url(~bemuse/ui/images/bg/b.jpg));
  $bottom-padding: calc(32px + 4vh);

  color: black;

  .SceneHeading {
    z-index: 10;
  }

  &のreport {
    position: absolute;
    top: 9rem;
    right: calc(50vw + 1rem);
    bottom: 3rem;
    left: 4rem;
    @media (min-height: 480px) {
      top: 10rem;
    }
  }

  &のinformation {
    background: rgba(white, 0.8);
    position: absolute;
    top: 0;
    right: 4rem;
    bottom: 0;
    left: calc(50vw + 1rem);
    padding-top: 9rem;
    padding-bottom: $bottom-padding;
    display: flex;
    flex-direction: column;
    @media (min-height: 480px) {
      padding-top: 10rem;
    }
    @media (orientation: portrait) {
      right: 0;
    }
  }

  &のinformationHeader {
    flex: 0 0 auto;
  }

  &のinformationBody {
    flex: 1 1 auto;
    background: rgba(white, 0.6);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 0.5rem 0 0.5rem;
    @media (min-height: 480px) {
      margin: 4vh 0 4vh;
    }
  }

  &のinformationFooter {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    padding: 0 0.5rem;
    @media (min-height: 480px) {
      padding: 0 2vw;
    }
  }

  .MusicChartInfo {
    margin: 0 2vw;
  }

  .Ranking {
    font-size: 1rem;
  }

  .ResultGrade {
    position: absolute;
    bottom: $bottom-padding;
    right: 52vw;
    width: 20vh;
    height: 20vh;
  }

  &のchart {
    float: right;
    margin-right: 2vw;
    text-align: center;
    z-index: 11;
    position: relative;
  }

  &のmode {
    opacity: 0.5;
    position: absolute;
    right: 4rem;
    top: 0;
    bottom: 0;
    font-size: 2rem;
    text-align: right;
  }

  .MusicChartSelectorItem {
    width: 4.5rem;
  }

  @mixin button($face) {
    display: block;
    background: $face;
    border: 2px solid darken($face, 5%);
    text-align: center;
    font-size: 1.75rem;
    color: #fff;
    padding: 1ex 2ex;
    cursor: pointer;
    border-radius: 0.8rem;
  }

  &のexit {
    @include button(#5a5);
  }

  &のtweet {
    @include button(#54abee);
  }
}
