.amll-lyric-player {
  width: 100%;
  max-width: 100%;
  height: 100%;
  color: var(--amll-lp-color, white);
  contain: strict;
  mix-blend-mode: plus-lighter;
  font-size: var(--amll-lp-font-size, max(max(5vh, 2.5vw), 12px));
  overflow: hidden;

  @media screen and (width <= 768px) {
    font-size: var(--amll-lp-font-size, max(8vw, 12px));
  }

  &.dom {
    --amll-lp-line-width-aspect: .8;
    --amll-lp-line-padding-x: 1em;
    --amll-lp-bg-line-scale: .7;
    user-select: none;
    box-sizing: content-box;
    z-index: 1;
    line-height: 1.2;
  }
}

@media screen and (width <= 768px) {
  .amll-lyric-player {
    --amll-lp-line-width-aspect: 1;
    --amll-lp-line-padding-x: 0;
  }
}
.FmKaba_lyricLineWrapper {
  will-change: transform, opacity, filter;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  transition: opacity .4s, filter .4s;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.FmKaba_lyricLine {
  box-sizing: border-box;
  width: var(--amll-lp-width, 100%);
  min-width: var(--amll-lp-width, 100%);
  max-width: var(--amll-lp-width, 100%);
  contain: content;
  backface-visibility: hidden;
  transform-origin: 0;
  will-change: transform;
  border-radius: .25em;
  height: fit-content;
  padding: .5em 1em;
  transition: background-color .25s, box-shadow .25s;
  position: relative;

  @media screen and (width <= 500px) {
    padding-left: 20px;
    padding-right: 20px;
  }

  &.FmKaba_dirty {
    opacity: 0;
    visibility: hidden;
  }

  &:has( > *):hover {
    background-color: var(--amll-lp-hover-bg-color, #fff1);
  }

  &:has( > *):active {
    background-color: var(--amll-lp-hover-bg-color, #ffffff05);
  }
}

.FmKaba_lyricDuetLine {
  text-align: right;
  transform-origin: 100%;
}

.FmKaba_lyricMainLine {
  margin: -1em;
  padding: 1em;
  transition: opacity .3s .1s;

  & span {
    text-align: start;
    vertical-align: bottom;
    display: inline-block;
  }

  & .FmKaba_romanWord {
    padding-inline-end: .3em;
    font-size: .5em;
    line-height: 1em;
    display: flex;
  }

  & .FmKaba_rubyWord {
    justify-content: center;
    min-height: 1em;
    font-size: .5em;
    line-height: 1em;
    display: flex;
  }

  & .FmKaba_wordWithRuby {
    vertical-align: bottom;
    flex-direction: column;
    align-items: center;
    display: inline-flex;
  }

  & .FmKaba_wordBody {
    flex-direction: column;
    align-items: center;
    display: flex;
  }

  & > span, & span.FmKaba_emphasizeWrapper {
    white-space: pre-wrap;
    vertical-align: bottom;
    will-change: transform;
    margin: -1em;
    padding: 1em;
    display: inline-block;

    &.FmKaba_emphasize, & span.FmKaba_emphasize {
      backface-visibility: hidden;
      margin: -1em;
      padding: 1em;

      & > span {
        will-change: transform;
        backface-visibility: hidden;
        margin: -1em;
        padding: 1em;
      }
    }
  }
}

.FmKaba_lyricBgLine {
  opacity: .4;
  padding: 1vh
		calc(var(--amll-lp-line-padding-x, 1em) / var(--amll-lp-bg-line-scale, .7));
  font-size: max(calc(1em * var(--amll-lp-bg-line-scale, .7)), 10px);
  transition: background-color .25s, box-shadow .25s;

  & .FmKaba_lyricMainLine {
    padding: 1.2em 1em;
  }

  &.FmKaba_active {
    opacity: .4;
    transition: background-color .25s, box-shadow .25s;
  }
}

.FmKaba_lyricSubLine {
  opacity: .3;
  font-size: max(.5em, 10px);
  line-height: 1.5em;
  transition: opacity .2s .25s;

  @supports (mix-blend-mode: plus-lighter) {
    opacity: .3;
  }
}

.FmKaba_bottomLine {
  cursor: default;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.8em;

  &:empty {
    height: 0;
    margin: 0;
    padding: 0;
    display: none;
  }
}

.FmKaba_bgWrapper {
  z-index: -1;
  align-items: inherit;
  visibility: visible;
  pointer-events: auto;
  opacity: 0;
  width: 100%;
  transform-origin: var(--lyric-line-padding-x) top;
  flex-direction: column;
  transition: opacity .3s;
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
}

.FmKaba_bgWrapperTop {
  transform-origin: var(--lyric-line-padding-x) bottom;
  margin-top: -999px;
  position: relative;
  top: auto;
  bottom: auto;
}

.FmKaba_bgWrapperActive {
  opacity: 1;
  position: relative;
  top: auto;
  bottom: auto;
}

.FmKaba_bgWrapperHidden {
  visibility: hidden;
  pointer-events: none;
}

.FmKaba_interludeDots {
  opacity: 0;
  transform-origin: center;
  gap: .25em;
  width: fit-content;
  height: clamp(.5em, 1vh, 3em);
  padding: 2.5% .75em;
  transition: opacity .25s;
  display: flex;
  position: absolute;
  left: 0;

  &.FmKaba_enabled {
    opacity: 1;
  }

  & > * {
    background-color: var(--amll-lp-color, white);
    aspect-ratio: 1;
    border-radius: 50%;
    width: clamp(.5em, 1vh, 3em);
    height: clamp(.5em, 1vh, 3em);
    margin-right: 4px;
    display: inline-block;
  }

  &.FmKaba_duet {
    transform-origin: center;
    right: 0;
  }
}

.FmKaba_disableSpring > *, .FmKaba_disableSpring .FmKaba_lyricLine {
  transition: filter .25s, transform .5s, background-color .25s, box-shadow .25s;
}

.FmKaba_tmpDisableTransition {
  transition: none !important;
}

.amll-lyric-player {
  --lyric-line-padding-x: 1em;

  @media screen and (width <= 500px) {
    --lyric-line-padding-x: 20px;
  }

  &:hover .FmKaba_lyricLine, &:hover .FmKaba_lyricLineWrapper {
    filter: unset !important;
  }

  &.FmKaba_hasDuetLine {
    & .FmKaba_lyricLine:not(.FmKaba_lyricDuetLine) {
      padding-right: 15%;
    }

    & .FmKaba_lyricDuetLine {
      padding-left: 15%;
    }

    & .FmKaba_lyricLineWrapper:has(.FmKaba_lyricDuetLine) {
      align-items: flex-end;

      & .FmKaba_bgWrapper {
        transform-origin: calc(100% - var(--lyric-line-padding-x)) top;
      }

      & .FmKaba_bgWrapperTop {
        transform-origin: calc(100% - var(--lyric-line-padding-x)) bottom;
      }
    }
  }

  &:not(.FmKaba_playing) .FmKaba_bgWrapper {
    opacity: 1;
    position: relative;
    top: auto;
    bottom: auto;
  }
}