/* ===== BGMトグルボタン ===== */
#bgm-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 9999;

  padding: 10px 16px;
  border: none;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;

  color: #fff;
  background: linear-gradient(135deg, #4facfe, #00f2fe);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(6px);

  cursor: pointer;
  transition: all 0.2s ease;
}

/* rightクラスの場合は右に寄せる */
#bgm-toggle.right {
  left: auto;
  right: 20px;
}

/* ホバー */
#bgm-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* クリック時 */
#bgm-toggle:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

/* フォーカス（アクセシビリティ） */
#bgm-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

#bgm-toggle.off {
  opacity: 0.6;
  background: linear-gradient(135deg, #999, #666);
}