/* ========================================
   SiteHub BGM
======================================== */

/* 全体プレイヤー */
.sh-bgm-player {
  position: fixed;
  z-index: 210;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}


/* ========================================
   音源情報
======================================== */

.sh-bgm-info {
  max-width: 260px;

  padding: 9px 12px;

  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;

  background: rgba(10,15,20,.88);

  color: #fff;

  box-shadow:
    0 6px 20px rgba(0,0,0,.22);

  backdrop-filter: blur(8px);
}

.sh-bgm-info__title {
  display: block;

  margin-bottom: 3px;

  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.sh-bgm-info__credit {
  display: block;

  color: rgba(255,255,255,.65);

  font-size: 10px;
  line-height: 1.4;
}

.sh-bgm-info__credit a {
  color: var(--sh-accent, #49b6c9);
  text-decoration: none;
}

.sh-bgm-info__credit a:hover {
  text-decoration: underline;
}


/* ========================================
   BGM BUTTON
======================================== */

.sh-bgm-toggle {
  min-width: 62px;
  height: 46px;

  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;

  background: rgba(10,15,20,.88);

  color: #fff;

  font-size: 12px;
  font-weight: 700;

  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 6px 20px rgba(0,0,0,.22);

  backdrop-filter: blur(8px);

  transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;
}


.sh-bgm-toggle:hover {
  transform: translateY(-2px);

  background: rgba(20,28,36,.95);

  border-color:
    var(--sh-accent, #49b6c9);
}


.sh-bgm-toggle.is-playing {
  border-color:
    var(--sh-accent, #49b6c9);

  background:
    color-mix(
      in srgb,
      var(--sh-accent, #49b6c9) 22%,
      #0a0f14
    );

  box-shadow:
    0 0 0 1px
    color-mix(
      in srgb,
      var(--sh-accent, #49b6c9) 30%,
      transparent
    ),
    0 6px 20px rgba(0,0,0,.22);
}


.sh-bgm-toggle__icon {
  font-size: 17px;
}

.sh-bgm-toggle__text {
  white-space: nowrap;
}


/* ========================================
   Position
======================================== */

.sh-bgm-player--bottom-right {
  right: 24px;
  bottom: 24px;
}

.sh-bgm-player--bottom-left {
  left: 24px;
  bottom: 24px;
  align-items: flex-start;
}

.sh-bgm-player--top-right {
  right: 24px;
  top: 24px;
}

.sh-bgm-player--top-left {
  left: 24px;
  top: 24px;
  align-items: flex-start;
}


/* ========================================
   Mobile
======================================== */

@media (max-width: 768px) {

  .sh-bgm-player {
    gap: 6px;
  }

  .sh-bgm-info {
    max-width: 220px;
    padding: 8px 10px;
  }

  .sh-bgm-info__title {
    font-size: 11px;
  }

  .sh-bgm-info__credit {
    font-size: 9px;
  }

  .sh-bgm-toggle {
    min-width: 54px;
    height: 42px;

    padding: 0 12px;

    font-size: 11px;
  }


  .sh-bgm-player--bottom-right {
    right: 14px;
    bottom: 14px;
  }

  .sh-bgm-player--bottom-left {
    left: 14px;
    bottom: 14px;
  }

  .sh-bgm-player--top-right {
    right: 14px;
    top: 14px;
  }

  .sh-bgm-player--top-left {
    left: 14px;
    top: 14px;
  }

}