/*隐藏滚动条*/
::-webkit-scrollbar {
  display: none;
}


.detail {
  overflow: auto;
  margin-right: -17px;
  /*和滚动条宽度相等*/
  height: 100vh;
}

.skeleton {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  padding: 20px 30px;
  background-color: #fff;
  z-index: 10;
  --van-skeleton-paragraph-height: .8rem;
}

.detail {
  width: 100vw;
  min-height: 100vh;
  --header-height: 62px;
  // background: rgba(248, 242, 232, 1);
  .pageBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持宽高比 */
  }
  :global {

    #cursorImg-0 {
      display: none !important;
    }

    #selectionBox {
      pointer-events: none;
    }
  }

  .headHeight {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--header-height);
    transition: margin .3s;
    z-index: 10;

    &.headHide {
      margin-top: calc(0Px - var(--header-height));
    }
  }

  .container {
    position: relative;
    margin: 0 10px;
    border-radius: 10px;
    padding-top: calc(var(--header-height) + 54px);

    :global {
      #musicAndSelection {
        overflow: initial;
        height: initial;
        max-height: initial;
        // transform: translateY(-3%) !important;
        & > #osmdCanvasPage1 {
          top: 0.5rem;
          position: relative !important;
        }
      }
    }
  }
}

.musicName {
  font-size: 26px;
  font-weight: 400;
  color: #000;
  line-height: 37px;
  text-align: center;
}

.beam {
  path {
    // fill: #ADADAD !important;
    // stroke: #ADADAD;
  }
}

.right {
  path {
    fill: #65FFAE;
    stroke: #65FFAE;
  }
}

.inaccuracy {
  path {
    fill: #FF9200;
    stroke: #FF9200;
  }
}

.wrong {
  path {
    fill: #DA3736;
    stroke: #DA3736;
  }
}

.notPlay {
  path {
    fill: #FFFFFF;
    stroke: #FFFFFF;
  }
}

// 音准
.intonation_wrong {
  path{
    fill: #FF9200;
    stroke: #FF9200;
  }
}

// 音准高
.intonation_high {
  path{
    fill: #FF66A6;
    stroke: #FF66A6;
  }
}

// 音准低
.intonation_low {
  path{
    fill: #FFB900;
    stroke: #FFB900;
  }
}

// 节奏
.cadence_wrong {
  path{
    fill: #FF9200;
    stroke: #FF9200;
  }
}

// 节奏快
.cadence_fast {
  path {
    fill: #B366FF;
    stroke: #B366FF;
  }
}

// 节奏慢
.cadence_slow {
  path {
    fill: #FF7B00;
    stroke: #FF7B00;
  }
}

// 完成度
.integrity_wrong {
  path {
    fill: #7AB2FF;
    stroke: #7AB2FF;
  }
}


.arrowSvg {
  opacity: 0;
  width: 1;
  height: 1;
}

.bg2Left {
  width: 52px;
  height: 125px;
  position: absolute;
  left: 0;
  top: 0;
}
.bg2Right {
  width: 52px;
  height: 125px;
  position: absolute;
  right: 0;
  top: 0;
}